OmniAICreator/Qiita-1.07M huggingface dataset:
ラストのまほう　第17話『スタックサイズを広げる』

# ある日のこと

ある日、いつものように開発を進めているときのこと。……ん？？

![localhost_4444_(iPad Air) (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/c0477479-2719-149d-d366-800a4162aa8e.png)

おわかりになっただろうか……？　画面の下の方に**謎のノイズ**が発生してしまっています。これはスタックサイズが足りないときに起きるフレームバッファの破壊ですね。こういうバグを見かけたときにすぐに原因が思い当たるように、ドキュメントを一通り読んで、あらかじめ幅広く知識を蓄えておくことは大切です。

メモリレイアウトの記事で確認したように、スタックが突き抜けてしまうと、そのさきにあるのはフレームバッファ、つまり画面の表示内容のメモリ領域です。まあこの程度ならゲームのプレイに致命的な支障が生じるわけではないですし、意外にそれ以外は普通に動作したりします。ただし、フレームバッファも突き抜けてしまった場合は、その先はゲームパッドの状態などが格納される領域なので、それが破壊されたらゲームは正しく動かないでしょう。スタックサイズを調節して、フレームバッファの破壊が起きないようにしたいと思います。

# スタックサイズの伸長

この記事の執筆時点で、さきほど「ドキュメントを一通り読め」と言ったわりには実は私は、**めんどうくさいので Cargo のドキュメントは読んでおらず**、Cargo.tomlや.cargo/config.tomlの内容はよくわかっていません。なぜCargo.tomlと.cargo/config.tomlのふたつの設定ファイルがあるのか謎ですが、まあビルドツールの設定ファイルの詳細とかガチで１ミリも興味ないので、勘でなんとかしようと思います。

幸い、.cargo/config.tomlを覗いたら、修正するべき場所はすぐにわかりました。フレームバッファが壊れているならこの値を増やせ、ってちゃんとコメントで書いてくれてありますね。ありがたいです。

```toml:.config/config.toml
# Reserve 2044 bytes of stack space, offset from 6580.
# Bump this value, 16-byte aligned, if the framebuffer gets corrupted.
"-C", "link-arg=-zstack-size=8624",
# Not working? https://github.com/rust-lang/rust/issues/46645#issuecomment-423912553
"-C", "link-arg=--global-base=6560",
```

筆者はこういう低レベルっぽい環境はほとんどやったことがないので、こんなふうにリンカのオプションで生のスタックサイズをオプションで指定とかもまったく馴染みがありません。いやそんな本質的でないオプションの調整とか自動でやってくれよと思うのですが、まあそうはいかないのがRust/WASMという環境なんでしょう。

現在の設定では、スタックサイズ`zstack-size`は `16b * 539 = 8624b` となっているようです。どのくらい増やせばいいのかはよくわかりませんが、これを`16b * 700 = 11200b`くらいまで増やしてみます。また、`global-base`というのもずらさないといけないようで、WASM-4が予約している領域 `2044`バイトのぶんだけズレた、`11200 - 2044 = 9156`を渡せばいいようです（←よくわかってないので **勘** でやってる）。

```
"-C", "link-arg=-zstack-size=11200",
"-C", "link-arg=--global-base=9156",
```

こんな感じで手動でスタック領域を増やして再度実行すると、無事に画面下のノイズが消えました。気になる人は、WASM-4の開発ツールのメモリマップで、どのくらい余裕ができたか確認してみてもいいでしょう。

![localhost_4444_(iPad Air) (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/304bf4a5-76b4-f616-7125-6dddc0b5b06a.png)

# ある日のこと

ある日、いつものように開発を進めているときのこと。

```bash
  = note: rust-lld: error: initial memory too small, 65552 bytes needed
```

**！？**　いきなりリンクエラーとか出るととても心臓に悪いのでやめてほしいのですが、なぜかコードをわずかに足すだけで謎エラーが出ます。「メモリが足りない」というような旨のリンクエラーのようなので、`.cargo/config.toml`をいじってみます。よくわからないのですが、適当に`link-arg=-zstack-size`をデフォルトの`14752`から`14560`に減らすとビルドが通りました。

それでいろいろ調べていたら、上記の`--global-base`オプションは機能していない、ということらしいです。

https://github.com/rust-lang/rust/issues/46645#issuecomment-423912553

どうも cargo が勝手に `--stack-first` というオプションをリンカに渡すのですが、そのオプションをつけると `--global-base`オプションは無視されるのだとかなんとか。それで最近テンプレートファイルが修正されており、上記の `--global-base`オプションは削除されていました。

https://github.com/aduros/wasm4/blob/main/cli/assets/templates/rust/.cargo/config.toml

詳しいことはよくわからないのですが、私のようにWASM-4&Rustで開発したい人がいたら気をつけたほうがよさそうです。このへん、もうわけがわからなすぎるので、誰かRustに詳しい人がいたらこれでいいのかどうか教えてください。


#  次回予告

WASM-4はカートリッジを64キロバイトに収めなければなりません。Rustだとそのあたりに意外に工夫が必要です。もしWASM-4をRustで開発したい人がいれば、次回の内容はめちゃくちゃ実践的なテクニックになります。いやさすがに64キロバイトは厳しいやろ！

https://qiita.com/hiruberuto/private/801612265f620c790fdd
kaminariを使ったページネーションの作り方


## 初めに
Gemfileに下記のkaminariを追加してあげます。
追加したらbundle installを忘れないようにしましょう。

```
gem 'kaminari','~> 1.2.1'
```
```
$ bundle install
```
bundle installをしたら次にkaminariの設定ファイルを作成する為に下記のコマンドをターミナルに打ち込みます。
```
$ rails g kaminari:config
```
最後に、kaminariが利用するテンプレートを作成してあげます。
```
$ rails g kaminari:views default
```
これでひとまず準備は完了です。


## 次にControllerに記述
例としてindexで記述しています。
```app/controllers/books_controller.rb
def index
  @books = Book.page(params[:page]).per(9)
end
```
上記のようにpage(params[:page]).per(9)を付け足してあげます。
補足でper(9)は何を意味しているかと言うと、per(1ページで表示したい件数)と言うことになります。
自分自身で表示したい件数を決めて頂けたら結構です。

## 次にViewに記述
```app/views/books/index.html.erb
〜省略〜
      <% if book.image.attached? %>
        <%= image_tag book.image, size:"200x120" %>
      <% end %>
  　　　　　　　　　　　<%= book.title %>
　　　　　　　　　　　</div>
    　<%= paginate @books　%>
   </div>
```
上記のように表示させたいviewのところに<%= paginate @books %>を入れてあげる事によりControllerにも記述した通り上記の記述で投稿が９つ以上だったら次のページにいけるようになりました。
これをそれぞれ表示させたいページに記述してあげるとページネーションが表示されると思います。
Unityでのショートカットウィンドウの作成

先日行われたUnity SYNCの中で【『ヘブンバーンズレッド』の大規模開発と高速イテレーションを支える、自作ツール群の秘密】の公演でオリジナルのショートカットウィンドウを作成して使用しているという話があり、便利そうなので試作してみました。

https://learning.unity3d.jp/8844/

<img width="800" alt="Unity SYNC.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278812/17c6fd1d-6dbf-ac5e-c465-f17109d22e32.png">

## ソースコード
今回ウィンドウの作成はIMGUI、各機能の呼び出しはEditorApplication.ExecuteMenuItemを利用しました。
それぞれの解説は様々なところでされているので今回は省略します。

とりあえずエディターの再生およびProject Settings、Build Settingsを開けるようにしてみます。
```C#:ShortcutWindow.cs
using UnityEngine;
using UnityEditor;

public class ShortcutWindow : EditorWindow
{
    [MenuItem("Window/Shortcut")]
    static void Init()
    {
        ShortcutWindow window = (ShortcutWindow)EditorWindow.GetWindow<ShortcutWindow>("ショートカット");
        window.Show();
    }

    void OnGUI()
    {
		if( GUI.Button ( new Rect( 0.0f, 20.0f, 300.0f, 20.0f), "Play") ){
			EditorApplication.ExecuteMenuItem("Edit/Play");
		}

        if( GUI.Button ( new Rect( 0.0f, 60.0f, 300.0f, 20.0f), "Project Settings") ){
			EditorApplication.ExecuteMenuItem("Edit/Project Settings...");
		}

        if( GUI.Button ( new Rect( 0.0f, 100.0f, 300.0f, 20.0f), "Build Settings") ){
			EditorApplication.ExecuteMenuItem("File/Build Settings...");
		}
    }
}
```

Window→Shortcutを押すと、「ショートカット」ウィンドウが表示されます。
また、それぞれのボタンを押すことでエディターが再生されたりウィンドウが開いたりします。
<img width="800" alt="Unity01.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278812/3f91eb2b-b232-fee7-07ea-9bff9bbb8847.gif">

また、ゲーム開発などで頻繁に使うプロジェクト専用のデバッグ機能をショートカットウィンドウに登録しておくのも良いかもしれません。
適当なデバッグ機能もどきを追加してボタンを押すたびにフラグを反転させるようにしてみます。
```C#:DebugTest.cs
using UnityEngine;


public static class DebugInfo
{
    public static bool m_enable = false;
}

public class DebugTest : MonoBehaviour
{
    void Update()
    {
        if(DebugInfo.m_enable)
        {
            Debug.Log("有効");
        }
        else{
            Debug.Log("無効");
        }
    }
}
```
```C#:ShortcutWindow.cs
void OnGUI()
{
    if( GUI.Button ( new Rect( 0.0f, 140.0f, 300.0f, 20.0f), "Debug Test") ){
        DebugInfo.m_enable = !DebugInfo.m_enable;
    }
}
```
ボタンを押すたびにConsoleの表示が切り替わっているかと思います。
<img width="800" alt="Unity02.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278812/f56f3e16-75c8-ae8b-2550-1efee7f8e532.gif">

## まとめ
今回はUnity SYNCの公演を基に自分なりのショートカットウィンドウを作ってみました。
ウィンドウの作成にIMGUIを使いましたが、UIElementsを使えばより細かく設定できるのでそちらで作ってみるのも良いかもしれませんね。
TypeScriptを勉強するとJavaScriptの解像度あがる

もっと早く勉強しておけばよかったな…と感じたのでみなさんには後悔してほしくなのでTypeScriptを勉強することのメリットを伝えたいと思います！

:::note info
【こんな方にオススメ！】
・JavaScriptの習熟度を上げたい人
・今JavaScriptを勉強している人
:::

JavaScriptを勉強するなら切り離せないい存在となっているので一緒に学んでいただきたいです！

## TypeScriptってなに？
TypeScriptはJavaScriptの拡張言語で、2014年にMicrosoftによって発表されました。
TypeScriptで記述したコードをコンパイルすることでJavaScriptに変換されます。

なので記述してみるとわかりますが、書き方などは基本JavaScriptと同じになるので、
**JavaScriptを知っている人であれば勉強を始めるときのハードルは低い**と考えています！

### JavaScriptと何が違うのか？
最大の違いは**静的型付け言語**であることです。（JavaScriptは動的型付け言語）
型を自分でつけるか、勝手にやってくれるかの違いです。

2つの数字の和を計算してくれる関数があったとします。

```javascript
const a = '1';
const b = 1;

const sum = (a, b) => {
  return a + b;
}

sum(a, b); // 11
```

結果は文字列の「11」です。
分かりやすいく定義したaとbで計算していますが、本来はどこから取得してきた値などが入ることになると思います。

その時の結果が**数値の和ではなく、文字列の結合だったら困りますよね…。**
これをTypeScriptで記述した場合は下記のようになります。

```typescript
const sum = (a: number, b: number) => {
  return a + b;
}
```

引数の型を定義します。
aの引数に対して文字列が入れるとエラーになります。

```typescript
const a = '1';
const b = 1;

const sum = (a: number, b: number) => {
  return a + b;
}

// 型'string'の引数を型'number'のパラメーターに割り当てることはできません。
```
引数の型は数字しか受け付けない設定になっているのに、aには文字列が入っているのでエラーになります。
これが**TypeScriptの良さ**です。
実行するまでにエラーであることに気づけるので開発効率を上げてくれます。

:::note info
定義した関数をこれまでとは違うところで利用したときに意図しない値が入ってくるとエラーになるので不具合の発生も事前に気がつけます。
:::

## TypeScriptを勉強することで何がいいの？
TypeScriptは静的型付け言語でデータの型を定義することについては話しました。
**自分で型を定義する**ことがJavaScriptの解像度を上げるポイントになると考えています。

JavaScriptは良くも悪くも型を意識しなくてもいい感じで内部的に処理してくれます。
TypeScriptは**型を意識しながら実装を進めなくてはなりません。**

型を意識するということはJavaScriptのメソッドについて理解を深めなければなりません。
TypeScriptはどんな値がどんな型が返ってくるかを知らずに実装することが難しいため**必然的にJavaScriptへの解像度が上がります。**

:::note info
TypeScriptを勉強すると型を意識して実装することになるので、結果JavaScriptに詳しくなることがTypeScriptを勉強すると良いと考える理由です。
:::

## TypeScriptを勉強するのにやってはいけないことって？
TypeScriptを勉強していて失敗した…と思ったことを共有します。
**2つ以上の言語を一緒に勉強しないこと**です。
具体的には、ReactとTypeScriptを一緒に勉強するなどはやめた方が良いと考えます。

TypeScriptはReactやNext.jsと一緒に導入されるケースが多いと感じています。
書籍でも良くセットで取り上げられているのを拝見します。

個人的には2つ以上の言語を勉強すると**間違いなく混乱します**。
わからないことが発生したら調べるのも時間がかかります。

:::note alert
エラーが発生した場合は修正に時間がかかります。
表層部分をインプットしただけで終えてしまいます…
:::

なので**一気に学んで時間を短縮したい気持ちを抑えて、1つずつ学習する**ことをオススメします！

## TypeScriptをどうやって勉強している？
自分に合った方法を見つけるのが良いと思っています！
私は、**子供の世話や移動時間などの隙間時間を利用することが多いので動画をメイン**に勉強しています。

下記の動画から基礎的な知識を学びました。

https://www.udemy.com/share/106u543@l1gRyOtcChSEnpzGE3WQnr-QHrOjyBZooQFp0HClw930fkmKM69OhNKCfxrD1q07/

そのあと、新しい言語を学ぶ時の定番である「TODOリスト」を作成しました。
作成したTODOリストの機能は下記の通りです。

- TODOの追加
- TODOの削除
- TODO完了の有無（チェック）
- TODOの編集（アップデート）
  - サブタスクの追加
  - 詳細の記述
  - 期限の設定

## まとめ
TypeScriptを勉強し始めるまではハードルの高いものだと思い込んでいました。
そして、**JavaScriptの解像度が上がるとも思っていませんでした**。

:::note info
これからはJavaScriptを学ぶのであれば、TypeScriptもセットで学んでからJavaScriptのライブラリやフレームワークをインプットした方が良いと考えています！
:::

TypeScriptは人気の言語なのでこれからフロントエンドエンジニアとしてキャリアを歩むことを考えているなら勉強しておいて損はないと考えていますのでぜひ一度勉強してみてください！
ラストのまほう　第７話『ゲームのデプロイとデモ』

# ゲームのデプロイとデモ

WASM-4でビルドした結果はHTMLペライチになります。これをデプロイするなら GitHub Pages が一番簡単かなと思うので、GitHub Pagesにします。ビルド用のシェルスクリプトをいじって、出力先を`/docs`フォルダにします。

```bash
rm -r target
cargo build --release
w4 bundle target/wasm32-unknown-unknown/release/cart.wasm --title "Tower Climber" --html ./docs/index.html
```

実際にはもう少し複雑で、途中に最適化用のコマンドをいくつか挟んでいます。このあたりはまた別の記事で触れたいと思います。

それから、 GitHubのダッシュボードからPagesを有効にして、`git push` するだけです。以下がデプロイして実際に遊べるものです（まだゲームとしては未完成ですが）。興味のある方はご自由にお試しください。キーボードでも遊べますし、タブレットやスマホ等では仮想ゲームパッドが出てくるのでそれでも動かせます。でもそれなりに繊細な操作が求められるアクションゲームなので**ゲームパッド推奨**です。

https://aratama.github.io/towerclimber/2022-12-07.html

ページを開くとこんな感じの画面が表示されるはずです。

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f36343639352f64356462623834622d303237372d313161322d363065362d3664613939376633343934632e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/0892c41a-c687-ee82-e354-58b0a18e9650.png)


もしかしたらたまに動かなかったりするかもしれませんが許してください。ちなみに、ページ内を一度クリックしたりとか何らかのアクションをとると、BGMや効果音などの音が出るようになります（ブラウザのセキュリティ上の仕様で、何かユーザーの能動的なアクションがないと音が出せません）。

# 操作方法など

操作としては、次のような感じです。

- 方向キー←→　移動
- 方向キー↑　見上げる
- 方向キー↓　伏せる
- Xキー　ジャンプ。押した長さに応じて飛距離が変わります
- Zキー　スタート地点に戻る（テストプレイ用）

また、壁にこするように方向キーを入れるとゆっくりずり落ちることができたり、スリ落ち中にジャンプキーを押すと壁を蹴ってジャンプできます。狭い縦穴でそれを繰り返すと壁蹴りジャンプで上に登ることもできます。

崖の部分にギリギリで届くようにジャンプすると、崖に掴まることができます。これは、[FEZ](https://store.steampowered.com/app/224760/FEZ/)というゲームでそういう動作があってかわいいなと思ったので、このゲームにも真似して入れました。基本は十字キーで移動＋ジャンプボタンだけなのですが、まあいろんな操作ができたほうが操作していて楽しいと思います。

# アクションゲームの調整

これである程度プレイヤーキャラクターが動き回れるようになりましたが、この時点でなるべくプレイヤーの挙動の調整を済ませておきたいです。あとからジャンプの飛距離などを調整すると、ゲームのレベルデザインすべてに影響が出てしまうからです。

また、プラットフォーマー（アクションゲーム）はキャラクターの操作性が命といっても過言ではありませんから、気持ちよく、直感的に動き回れるように調整を進めたいと思います。一時期、Getting Over It with Bennett Foddy (壺に入った人がツルハシで山を登るというわけのわからない操作のやつ)とか Jump King (左右移動とジャンプしかできず、空中での姿勢制御も一切できない)のような、操作性に難があるタイプのゲームが流行りましたが、ああいうのはちょっとプレイする人を選ぶので、もう少し間口の広いものがいいかなと思いました。

私のイメージとしては、Super Meat BoyやI Wanna be the Guyのように、操作はシンプルでも思い通りに動き回れるタイプのゲームを目指したいかなと思っています。

# 次回予告

次回は効果音をつけていきます。

https://qiita.com/hiruberuto/private/0a3a0125e5c54b3cb7c5
AlmaLinux9 での openssl 脆弱性対応メモ (ALSA-2022:7288, CVE-2022-3602, CVE-2022-3786)

10月の末くらいに発覚した openssl 3系の X.509 に関連する脆弱性の対応を AlmaLinux9 でやったときのメモ。

1. openssl をアップデート (`dnf upgrade openssl`)
2. サーバをリブート

以上。

## ノート
3.0.7 がどうたらこうたらって記事が出てるので、そこまでバージョンを上げなければならないのか？と思ったけど、どうやらパッチが当てられている模様。
参照: https://access.redhat.com/errata/RHSA-2022:7288

AlmaLinux 以外のディストリビューションについてはやってないからわからないが、上記サイトを見る限り、対応してそう。

## コマンドメモ

### 現在の openssl のバージョン確認
```cli
openssl version
```
出力例: `OpenSSL 3.0.1 14 Dec 2021 (Library: OpenSSL 3.0.1 14 Dec 2021)`


### インストール済みパッケージ確認
```cli
rpm -q openssl
```
出力例: `openssl-3.0.1-41.el9_0.x86_64`


### インストール可能なパッケージ一覧
```cli
dnf --showduplicates list openssl
```
出力例:
![スクリーンショット 2022-11-03 20.09.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71497/b23dcb80-f80f-8f3f-e702-35aa96ad8fe0.png)
赤色は現状より古いバージョン。
緑色は現在インストールされてるバージョン。
青色は新しいバージョン。


### パッケージアップデート後に再起動が必要か確認する
```cli
dnf needs-restarting -r
```
出力例:
![スクリーンショット 2022-11-03 20.16.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71497/69c012b3-0765-0a65-002d-113e40f24cbf.png)
【Auth0】Actions vs Rules vs Hooks

# はじめに
こんにちは。[rendaman0215](https://twitter.com/rendaman0215)です。

Auth0では、OpenID Connectの機能を提供するだけでなく、様々な拡張機能を提供しています。
その中でも `Actions` `Rules` `Hooks` の違いがよくわからなかったので、公式のドキュメントと格闘しながら調べてみました。

### 結論
先に結論から言うと基本的に`Actions`が他２つの上位互換です。
新規に作成するなら`Actions`を使うとよいでしょう。
HooksやRulesのページを開くと以下のようなメッセージがでることから、公式でも`Actions`を使うことを推奨しているみたいです。
![スクリーンショット 2022-11-03 19.36.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/264373/3ea7b4fc-36bf-4cd4-4761-ee1c0b503d05.png)

# Rules
Rulesは、`認証時に動作するAuth0の処理を任意のJavaScriptコードで拡張`する機能です。
なお追加したRulesは、認証処理の最後に処理されます。

### テンプレート
Ruleを新規作成すると、はじめに豊富なテンプレート一覧から選ぶことができます。
選んだテンプレートに応じてJavaScriptが最初から書かれています。
Actionsにはテンプレートがないため、これはRulesの明確なメリットですね。

### 設定
- どの認証でどのルールをオンにするか
- どうの順序で処理するか
- 環境変数の定義

### まとめ
- テンプレートが豊富なため初めて拡張機能を使うときは使いやすい
- トリガーが認証時のみのため取り回しがきかない
- 認証毎にどのルールをオンにするか選べるのが良い
- 1つのトリガーに、複数のイベントを付与可能

# Hooks
Hooksは、`クライアント認証情報交換時` `パスワード変更時` `ユーザ登録前` `ユーザ登録後` `SMS送信時` に任意のJavaScriptコードで拡張する機能です。
各タイミングごとに複数のHookを登録できますが、有効化できるのは同時にひとつまでです。

### 設定
- 各タイミング毎にどのHookを有効化するか

### まとめ
- テンプレートがないため始めづらい
- 全認証で共通なので細かい設定が難しい
- トリガーが6つあるため、使いやすい
- 複数のトリガーには、1つのイベントのみ付与可能

# Actions
Actionsは、`ログイン後` `クライアント認証情報交換時` `パスワード変更時` `ユーザ登録前` `ユーザ登録後` `SMS送信時` に任意のTypeScriptコードで拡張する機能です。

### 設定
どのトリガーに対して、どういった順序でなにを実行するか

### まとめ
- トリガーが7つあるため使いやすい
- ライブラリから各社が提供するインテグレーションをinstallできる
- テンプレートがないので、Rulesのテンプレートからコピってくるとやりやすい
- 全認証で共通なので細かい設定が難しい
- 複数のトリガーに、複数のイベントを付与可能

# 結論
3つの機能を比較した結果、トリガーの種類が最も多く、順序なども細かく設定でき、ライブラリも豊富なActionsが一番便利そうだなと感じました。
公式でもActionsの利用を推奨しているため、基本的にはActionsに寄せるのがよさそうですね。
ただし、認証毎にオンオフを選べる点でRulesが優っていたりするので、他の機能もいいユースケースはあるかもしれないです。

# 参考記事
https://auth0.com/jp/extensibility
https://auth0.com/docs/customize/actions
https://auth0.com/docs/customize/rules
2022年統計検定一級受験対策記録

# 受験の概略
- 日時
2022年11月20日
- 受験項目
統計検定一級統計数理と統計応用人文科学
- 受験歴
５年前に準一級取得。３年前に統計検定一級を受験するものの不合格。

# 参考書など
確率統計演習が基礎固めの演習書、現代数理統計学と心理統計学の基礎が教科書、公式問題集が過去問と実践演習という立ち位置です。
- 確率統計演習1確率-国沢清典編（培風館）
- 確率統計演習2統計-国沢清典編（培風館）
基本的に統計数理の問題とリンクしており、仮に、２冊の演習問題の解答を素早く再現できる能力があれば、統計数理の合格最低点と言われている６割得点はカタいのではないかと思います。問題点としては、豊富な一方で問題過多な部分もあり、特に１確率の方では１章の事象と確率、６章７章の大数の法則周りは出題傾向とずれており２統計は点推定と標本論以外の部分は問題過多だと感じました。

- 新装改訂版　現代数理統計学-竹村彰通（学術図書出版社）
教科書として演習の補助に使用しました。

- 統計検定一級・準一級公式問題集-日本統計学会編（実務教育出版）
実力試しというよりは、最重要演習書として、繰り返し解いています。

- 心理統計学の基礎-南風原朝和（有斐閣アルマ）
大学時代に繰り返し読んでいた本ですが、人文科学の因子分析や共分散構造分析の教科書として使用しました。
# 過程
9月中旬に学習を開始しました。勉強内容と感想、各過程におけるもしこのタイミングに統計検定一級を解いたらこれくらい取れるだろうという予想得点も付しておきます。
| 日時 | 勉強内容 | 感想|統計数理期待点数 | 統計応用期待点数 |
|:-:|:-:|:-:|:-:|:-:|
|９月中旬９月末   |確率統計演習１確率の演習。<br>確率密度関数とそのモーメントである期待値や分散・モーメント母関数の値の計算。<br>また有名な分布（二項分布やポアソン分布など）の性質を、確率変数の変数変換を通して分布どおしの関係性を交えて学習   |大学受験よろしくの積分計算。変数変換のくだりでヤコビアンの計算とかをしたときは大学の数学でなんかやったやつだなあと感慨深くなった。<br>確率変数の期待値と分散は１、既知の期待値と分散から導出する。2、モーメント母関数の微分により導出する。3、確率変数のモーメントを愚直に積分するという３つの方法があり、後者になるほど大変であることがわかった。 | 25 | 10  |
|  10月上旬 | 確率統計演習２統計の演習。<br>2-1章の推定法と標本平均と標本分散、5-1章の標本分布論を優先的に学習。確率変数から独立に生成される標本の平均や分散などの性質を集中的に学習。|頻出の標本平均を含む変数の高次モーメントの導出で、計算量に辟易した記憶あり。 | 30  | 10 |
|  10月中旬 | 確率統計演習２統計の演習。<br>推定論と検定論を学ぶ。推定量の不偏性や有効性そして充足性（十分性）の学習。最尤推定による点推定や、既知の分布をあてがうことで区間推定や検定をする方法を学習。  | 例えば推定量を適当な値にして、その値が標本平均と比較してどのように優れていないのかを考察する推定量がどうあるべきかを問う問題は、区間推定の信頼区間を求めるような計算問題と比較して、統計学の芯の部分に触れているようで、解いていて楽しかった。<br>反省点として、推定論・検定論に関しては、培風館の演習書が内容過多気味であったということ。過去問をもう少し解いて傾向を把握しておく必要があった。 | 35| 10 |
| 10月下旬11月上旬  |  過去問演習。<br>統計数理と人文科学を2014年〜2019年まで二回ずつくらい。<br>数理は補強で頻出の順序統計量とベイズ統計学を学習、また頻出のデルタ法も学習。 <br>人文科学はイチからスタートであったが、項目反応理論と標本抽出論？は捨て問題として、その他の範囲の問題を学習。因子分析を始めとする共分散構造分析まわりは南風原先生の心理統計学の基礎をパラ読みしながら学習。|統計数理はいざ過去問を解くと演習したことがあるような問題があまりに解けず、少し過呼吸気味になった。原因は明らかで演習した問題が、なんとなくわかったきになっていただけで、演習問題を正確に再現する実力が身についていなかったからだ。<br>人文科学は基本的に統計検定の過去問だけでカバーするつもりである。  |50 | 40  |


# 本番に向けて
昨日2021年度の過去問を解き自己採点したところ数理が50〜60点、人文が40点くらいでした。数理、人文ともに試験時間に追われて解けない問題があり、特に数理に関しては、時間さえあれば、60点は取れそうだという見通しが立ってきたので、とにかく過去問を中心に素早く解答を再現する力を身につけていきたいと考えています。人文に関しては、まだシンプルに公式（や解法）の暗記や運用のレベルが怪しいので、復習を徹底していきたいと思います。
球の体積をsympyの積分で計算してみた。

# sympyで

```python
from sympy import *
var('r x')
y=sqrt(r**2-x**2)
v=integrate(y**2*pi, (x, -r, r))
print("#",v)
print("#",pi,float(pi))
# 4*pi*r**3/3
# pi 3.141592653589793
```
 

# 参考
https://ja.wolframalpha.com/input?i=%E7%90%83

https://ja.wikipedia.org/wiki/%E4%BD%93%E7%A9%8D

https://qiita.com/imaginary_truth/items/e50f0869657bdd4c11f3

https://qiita.com/Euglenese/items/d1219a35723c714aabf1#:~:text=%E3%83%BB4%20%E6%AC%A1%E5%85%83%E7%90%83%E3%81%AE%E4%BD%93%E7%A9%8D,2r3%20%E3%81%A8%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82

https://qiita.com/ochimusha01/items/e180451a210227bb19a5
突貫工事でフロントエンドに入門したい


初めまして、くみちょうです。

研究でwebアプリの開発をする事になったのですが、メンバーにweb関連の技術初めて触る子が居たので短時間で概要を掴ませるためのまとめを作りました。高専3~4年想定で書いているので基礎的なPC知識や用語はすっ飛ばします。

最後にやることをリストにまとめているのですが、止むを得ない突貫工事なので時間がある方はリストの合間を埋めるように動画やドキュメントを探してじっくり学ぶのをおすすめします。

## 何から始めるべきか
私自身そうだったのですが、[Progate](https://prog-8.com/dashboard "Progate Home")、[CODEPREP](https://codeprep.jp/featured "CODEPREP Home")あたりから入るのが個人的におすすめです。

まずはHTML&CSS、ES5のJavascriptを学び、ES6、React、Node.jsの順番でProgateを進めた後に自分のPC環境の構築をしてReactのチュートリアルに進みましょう。(Progateはgitの講座もやっておく事をおすすめします!)


:::note warn
注意
チュートリアルは基本公式の物を読むべきですが、Reactのチュートリアルはclassという今はメジャーでない書き方で紹介されているので、他の方の記事や動画を探すのが良いと思われます。
個人的おすすめは[トラハックさんのReact講座](https://www.youtube.com/playlist?list=PLX8Rsrpnn3IWPoM7-1YPDksRRkamRY25k "新・日本一わかりやすいReact入門【基礎編】")です。
:::

## PCの環境構築って何したらいいん
macは環境構築めちゃ楽です。[これ](https://codelikes.com/mac-node-install/ "良さげな記事")を読んでください。

問題はWindowsです。Powershellで開発する時にはPowershellコマンドを使わないといけないのですが、これがとても使いにくいのです。そこで、WSL(Windows Subsystem for Linux)という、windowsの中でLinuxを立ち上げて使えるようにする為のシステムをインストールします。

と言っても私はWSL2のインストールや設定は先輩にめちゃくちゃ助けてもらっていたのでほぼやり方を覚えていません。[Microsoftの公式ドキュメント](https://learn.microsoft.com/ja-jp/windows/wsl/install "WSLのインストール")や記事を探してみてください。

無事にWSL2がインストールできたら、[こちら](https://learn.microsoft.com/ja-jp/windows/dev-environment/javascript/nodejs-on-wsl "WSLでのnpmおよびnode.jsのインストール")を見ながら、node.jsのインストール作業に進みましょう。
インストールが終わったら、
```
node -v
```
```
npm -v
```
と打ってv16.14.2や8.5.0などのインストールされたバージョンが出てくれば完了です。

あとはチュートリアルや記事に沿って自分の環境で実際にコードを書いてみましょう！！！！

## 次にすべき事

次は、TypescriptというJavascriptに型を付けられるようにした言語を学びましょう。
おすすめは[サバイバルTypescript](https://typescriptbook.jp/)です。

Typescriptの概要を掴んだら、[Next.jsのチュートリアル](https://nextjs-ja-translation-docs.vercel.app/docs/getting-started)を読むのをおすすめします。
研究ではNext.jsを使う予定なのでここまで勉強すればおそらく大丈夫(?)でしょう。

## マジで時間無い人向けまとめ
- [ ] [ProgateのHTML&CSS初級編レッスン1](https://prog-8.com/lessons/html/study/1)
- [ ] [CODEPREPのJavascript講座](https://codeprep.jp/books/3)
- [ ] [ProgateのJavascript(ES6)レッスン1](https://prog-8.com/lessons/es6/study/1)
- [ ] [ProgateのGit講座](https://prog-8.com/lessons/git/study/1)
- [ ] node.js、npmのセットアップ
- [ ] [Reactのチュートリアル](https://www.youtube.com/watch?v=nRCNL9T3J98&t=368s)
- [ ] [サバイバルTypescript](https://typescriptbook.jp/)
(作って学ぶTypescriptの章へ進む前に"npm install -g yarn"を実行してyarnをインストールしておいてください)
- [ ] [Next.jsチュートリアル](https://nextjs-ja-translation-docs.vercel.app/docs/getting-started)

あとは各自必要なフレームワークやライブラリは自分でドキュメントを読んだりして足りない部分の知識を補って行ってください。
【Docker】Volumeをすべて削除する

<h2>PCが少し重くなったので、DcokerのVolumeを確認した</h2>

```terminal:volume確認
$ docker volume ls
DRIVER    VOLUME NAME
local     0e84d9d1cce09350f6b5de1316f601837d32d0c1424922089f0fcedc72ac720e
local     5fc53c1a6fcc80fc51332728f34a983d12ec4ae19bd88c35b0e63ad1ade3b024
local     8ab64d586599eb29a228dee7d6a13c5e96ca1da040b0c639502c2e721fccad3f
local     23bcfd046441f969c6c1d76872ba83c77db226d535f379206d092a79b750b1d2
local     88fce95201451224f14428f20b4271056329b7d1d11067184bbd896a85d8b6bf
local     3071421b2071b347e3295d2df6a40e115a29c68cfd19256d77b4831866d5e92d
local     a12c3d7af4d9617bf8a21a356a02bde3ae5fabe40aa52e3642a232da1daa3b0d
local     aa0702f1786ba0294276fc919aa347cb43401e2fd6c3bd51154fe09ecb762e80
local     b0d8d5cf54870ad6286628daa3b6be9aaf6a1dad5fab512096beb24b7aaca4c4
local     dockerapps_postgres-data
local     dockertest_mysql-data
local     eb27676c41f4d07fd7a53567f21875bba9d7d1ad237ee6683462f1133dda82b5
local     edeabe32332b6c9663172ae05b4d74b6c4484c759d11ea52f55ee55386022ba1
local     f7197e7805a85ac681ab3ce92ebe71a4558f829b0302ed83ec0e4bff165b0414
local     app-data
local     app_vol
```

<h2>すべてのvolumeを消す</h2>
Volumeがすべて不要だったので、全部消す呪文を唱えた。
結果、391.9MB浮いた。

```terminal:volume削除の呪文
＄docker volume prune
WARNING! This will remove all local volumes not used by at least one container.
Are you sure you want to continue? [y/N] y
Deleted Volumes:
dockertest_mysql-data
neareats_mysql-data
0e84d9d1cce09350f6b5de1316f601837d32d0c1424922089f0fcedc72ac720e
5fc53c1a6fcc80fc51332728f34a983d12ec4ae19bd88c35b0e63ad1ade3b024
88fce95201451224f14428f20b4271056329b7d1d11067184bbd896a85d8b6bf
a12c3d7af4d9617bf8a21a356a02bde3ae5fabe40aa52e3642a232da1daa3b0d
b0d8d5cf54870ad6286628daa3b6be9aaf6a1dad5fab512096beb24b7aaca4c4
f7197e7805a85ac681ab3ce92ebe71a4558f829b0302ed83ec0e4bff165b0414
neareats_mysql_vol
23bcfd046441f969c6c1d76872ba83c77db226d535f379206d092a79b750b1d2
8ab64d586599eb29a228dee7d6a13c5e96ca1da040b0c639502c2e721fccad3f
dockerapps_postgres-data
eb27676c41f4d07fd7a53567f21875bba9d7d1ad237ee6683462f1133dda82b5
edeabe32332b6c9663172ae05b4d74b6c4484c759d11ea52f55ee55386022ba1
3071421b2071b347e3295d2df6a40e115a29c68cfd19256d77b4831866d5e92d
aa0702f1786ba0294276fc919aa347cb43401e2fd6c3bd51154fe09ecb762e80

Total reclaimed space: 678.5MB
```

```terminal:Volumeがなくなったことを確認
docker volume ls  
DRIVER    VOLUME NAME
```

<h2>参考</h2>

https://qiita.com/wwbQzhMkhhgEmhU/items/7285f05d611831676169
ラストのまほう　第18話『WASM-4のビルドとカートリッジサイズの最適化』

ソフトウェアの開発ではビルドやデプロイの手順を頻繁に確認しておくことは大事です。「完成しました、さあデプロイしましょう」となったところで何か重大な問題が発覚してデプロイできない、なんてことになったら大変ですから。

# WASM-4ゲームのビルド

これは開発初期の話なんですが、あるときゲームをビルドしてカートリッジを作成しようとしたときのこと。コマンドはRustの通常のビルドと同じで、次のとおりです。

```bash
$ cargo build --release
```

これで、`target/wasm32-unknown-unknown/release/cart.wasm`にカートリッジのファイルが作成されます。あとは`w4 bundle`コマンドでそのカートリッジのファイルを指定すればOKです。

```bash
$ w4 bundle target/wasm32-unknown-unknown/release/cart.wasm --title "mygame" --html mygame.html
Cart size of 975938 bytes is above the limit of 65536 bytes.
```

**ぎょわッ！？(動揺) 975,938バイト(≒950キロバイト)って……。** 以前の記事で述べたとおり、WASM-4のカートリッジは **最大64キロバイト** と決められいて、これを大幅に超過してしまっています。なお、ゲームボーイのROMは最大１メガバイトで、初代ポケモンは512キロバイトのROMだったことを考えると、WASM-4の制約はかなり厳しい感じです。さすがにもうちょっと欲しい……。

# Rustのオプションでカートリッジのサイズを最適化する

とはいえ、まだ大してゲーム開発も進んでいないのにこのサイズはあんまりですし、余計なコードがたくさん入っているだけでもっとサイズは削減できるはずです。

とりあえず`Cargo.toml`で`lto = true`、`opt-level = "z"`の設定をしろみたいにGitHubのIssueかどこかに書いてあったので、確認してみます。また`debug = true`になっていたので、`debug = false`に変えてみます。

```toml:Cargo.toml
[profile.release]
debug = false
lto = true
opt-level = "z"
panic = 'abort'
```

```bash
$ w4 bundle target/wasm32-unknown-unknown/release/cart.wasm --title "mygame" --html mygame.html
Cart size of 392363 bytes is above the limit of 65536 bytes.
```

ん゛ッ……！　まだ392363バイトもあります。本当はRustのコンパイラの最適化だけで何とかなって欲しいです。WASM-4はZigやNimなどの言語でも書くことができますが、他の言語ならもっとバイナリのサイズは小さいんでしょうか。

# wasm-snapとwasm-optをキメる

GitHubのIssueを漁ったら、**[Rustのカートリッジのサイズがでかすぎる](https://github.com/aduros/wasm4/issues/480)** というまさしく私が直面しているのと同じ問題で Issueが立っていたので読んでみました。どうも、`wasm-snip`というツールを使うとかなりファイルサイズを削減できるそうです。インストールして使ってみます。

```bash
$ cargo install wasm-snip
```

```bash
$ cargo build --release
$ wasm-snip --snip-rust-fmt-code --snip-rust-panicking-code target/wasm32-unknown-unknown/release/cart.wasm > cart.min.wasm
Cart size of 97493 bytes is above the limit of 65536 bytes.
```

ぐぬぬ……かなりサイズは減りましたが、これでもダメみたいです。他にも`wasm-opt`というツールがあるそうなので、これも使います。

```bash
$ npm i wasm-opt -g
$ wasm-opt -Oz --zero-filled-memory --strip-producers --dce cart.min.wasm -o cart.min.min.wasm
$ w4 bundle cart.min.min.wasm --title "mygame" --html mygame.html
Bundled mygame.html
```

これでようやく 53キロバイトにまでサイズを削減し、ゲームをバンドルすることができました！

これで、`mygame.html`というファイルが作成されています。独立した完全ペライチ1枚のHTMLになっていて、カートリッジのファイル自体もHTMLに埋め込まれていました。これをどこかにアップロードすればデプロイ完了です。

# しかし`format!`がお亡くなりになる

これで解決と思いきや、ローカルの開発サーバーでは問題ないものの、ビルドしてデプロイしたらブルースクリーンになってしまうことに気付きました。どうやら `format!`マクロや`i32::to_string`のような関数で軒並みエラーになっているようです。いろいろ調べまわってようやく思い当たったのですが、**`wasm-snip`に `--snip-rust-fmt-code`というオプションを渡している**じゃないですか。このオプション、文字通りRust標準の`std::fmt`の関数をかたっぱしから潰してサイズを削減するため、`format!`マクロなどが使えなくなるんですね……。つら……。

# 参考文献

- https://wasm4.org/docs/guides/distribution
- https://github.com/aduros/wasm4/issues/480
- https://github.com/aduros/wasm4/issues/238



# 次回予告

次回はいわゆる「グラフィックコンテキスト」を自力で作っていきます。ぜんぶセルフサービスです。

https://qiita.com/hiruberuto/items/07c4f6ca9660e89f5415
ラストのまほう　第12話『メモリレイアウトを見てみる』


# WASM-4のメモリレイアウト

WASM-4のメモリ空間はなんと**６４キロバイト**しかありません。その限られたメモリをやりくりして、フレームバッファ（つまり画面に表示する内容を入れるメモリ空間）を確保し、　文字列や画像のようなリソースを読み込み、ゲーム実行中の内部状態を保持しなければなりません。

具体的には、次のようなメモリレイアウトになっています。

| アドレス | 	サイズ (Bytes) | 	内容 |
| -- | -- | -- |
| $0000 | 	4 | 	Unused  |
| $0004 | 	16 | 	PALETTE |
| $0014 | 	2 | 	DRAW_COLORS |
| $0016 | 	4 | 	GAMEPADS |
| $001a | 	2 | 	MOUSE_X |
| $001c | 	2 | 	MOUSE_Y |
| $001e | 	1 | 	MOUSE_BUTTONS |
| $001f | 	1 | 	SYSTEM_FLAGS |
| $0020 | 	1 | 	NETPLAY |
| $0021 | 	127 | 	Reserved for future use |
| $00a0 | 	6400 | 	FRAMEBUFFER |
| $19a0 | 	 58976 | 	Available program memory |

つまり、64キロバイトのうち先頭の6580バイトがWASM-4のシステム用に予約されていて、残りの部分をプログラムを実行するためのスタックとヒープに割り当てます。

プログラムを書いているときに常にこのレイアウトを頭に入れておかなければならないなどということはありませんが、メモリが限られているということは意識したほうがよさそうです。別の記事で触れるつもりですが、メモリを使いすぎてスタックをオーバーフローすると、フレームバッファが侵食されてゲーム画面上に変なノイズが走ったりします。JavaScriptランタイムのような環境だとありえないような生々しい現象ですね。

# メモリの構造を目で確認する

WASM-4の開発ツールを使うと、現在のメモリの状況を視覚的に確認することができます。F8キーを押して開発ツールを開き、「mem」のタブを選択すると、次のようなメモリマップを見ることができます。


![localhost_4444_(iPad Air).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/ed9d6789-bae4-eebf-6c69-7ca889ab6eeb.png)

たぶん構造としてはこんな感じになってると思います。

![map.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/64695/8a2b0124-0958-aac2-c7dc-c14973e5c764.png)

# 参考文献

- https://wasm4.org/docs/reference/memory

# 次回予告


せっかくなので次回ももうちょっと生メモリで遊びます。

https://qiita.com/hiruberuto/items/73fe7cacc5075cdf1132
画面ミラーリング専門開発キット「LetsView SDK」とは？インストール＆設定する方法についての説明

画面ミラーリングは現在娯楽だけでなく、テレワークやオンライン授業、VRメガネの使用など様々な場面で応用されています。企業や組織にとって、もしアプリに画面ミラーリング機能を追加したい場合、1から開発するより、SDK開発キットを直接に導入したほうが便利で速いでしょう。このような理由でスクリーンミラーリング用の専門SDKキットが誕生されました。今回はご紹介致します。

<h2>「LetsView SDK」とは？</h2>
「LetsView SDK」とは、プラットフォームやシステムを問わずに動作可能でプロな画面ミラーリング開発キットです。AirPlay、Miracast、DLNA、AMCast（自社開発）など、さまざまなスクリーンミラーリングプロトコルとの互換性があり、アプリなどに便利に導入することができます。人気画面ミラーリングアプリ<a href="https://www.apowersoft.jp/phone-mirror" rel="dofollow">ApowerMirror</a>の開発とサポートは「LetsView SDK」開発チームが担当されています。

![what-is-letsview-sdk.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269229/58942c86-b325-1b46-3f64-0864ef10b25f.jpeg)

<h2>インストール＆設定方法</h2>
「LetsView SDK」開発キットはLetsView SDK APIページが用意され、SDKファイルのダウンロードや導入の詳しいガイドドキュメントを参考してインストールできます。詳しい手順について以下の内容をご参考ください。
<ol>
<li>LetsView SDK APIのページを開いて、まず右上隅でログイン、またはアカウントを作成します。

![login.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269229/b102d83a-9a35-9b27-765a-012c82796644.jpeg)
</li>
<li>「ホーム」画面で社名や電話番号、メールアドレス、会社のサイト、ご希望のサービス要件、使用場面などの情報を入れて送信します。LetsView SDK開発チームは特定のごニーズを理解した上でご連絡いたします。

![fill-in-the-information.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269229/ab4ab774-e187-3ea2-eb52-667db46a6491.jpeg)
</li>
<li>連絡を取った後、ダウンロードとドキュメントのページから対応するSDKファイルをダウンロードし、チュートリアルガイドのドキュメントに従ってインポートすることができます。もちろん、開発チームからのサポートをいつでも受け取れます。

![document.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269229/aab7b3bb-12ef-9b92-9a12-e02599df980d.jpeg)
</li>
<li>業務提携をご希望の場合、「資料追加」で記入した情報を確認してから資料を追加します。

![data-addition.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/269229/4d01baa4-ee97-b2ee-80ec-bed83ac51565.jpeg)
</li>
<li>業務提携について、もし何かご不明な点などがありましたら、以下ののメールアドレスまでお問い合わせください。
cher@apowersoft.com</li>
</ol>
<h2>LetsView SDKについて他の情報</h2>
LetsView SDKの詳しい情報について、ホームページまで確認してください。もし他に何か不明な点や、ご希望の機能がありましたら、サポートセンター、またはLetsView SDK連絡用メールアドレスまでご連絡ください。

ホームページ：https://letsview.com/jp/sdk
サポートセンター：support@apowersoft.com
LetsView SDK連絡用メールアドレス：cher@apowersoft.com
node js - 複数の同時並行処理をしてPromiseの結果を待ち受ける (Promiseの変数代入とawait)

# コード

3秒程度かかる処理を同時並行で複数実行する
戻り値でPromiseを得ておいて後からPromiseに対してawaitする

```js
const { setTimeout } = require('timers/promises');

const long_tasks = async () => {
  long_task_promise1 = long_task();
  long_task_promise2 = long_task();
  long_task_promise3 = long_task();

  long_task_var1 = await long_task_promise1;
  long_task_var2 = await long_task_promise2;
  long_task_var3 = await long_task_promise3;

  console.log(long_task_var1);
  console.log(long_task_var2);
  console.log(long_task_var3);
};

const long_task = async () => {
  await setTimeout(3000);
  return "long task";
};

long_tasks();

```

# 結果

すべての処理が3秒程度で終わり結果が表示される

```
long task
long task
long task
```

# チャットメンバー募集


何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ


# Twitter

https://twitter.com/YumaInaura
IntelliJ エミュレータがサイドバーに出てしまう問題

IntelliJは初期設定でエミュレータをサイドバーに表示しますが
今回、サイドバーじゃなくて、普通に表示してほしいんじゃい！！ということで
エミュレータをサイドバーではなく、普通に表示します🔥

# 設定の編集
まず、IntelliJの`preferences`（設定）に行きます。
Windowsの方は、上に出ているメニューバーから
Macの方は、画面上にカーソルを当てて、`IntelliJ IDEA`>`Preferences`を押しましょう。

次に、検索バーに`emulator`と入力し、検索しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/3f6ffa49-b538-b9d5-07c7-b217c991ec4c.png)

検索結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/5e28d24b-8522-573c-3b0c-f77eb9e5cde9.png)

なにやら、`launch in a tool window`という欄がありますね、、、
ツールウィンドウ（右に出てくるサイドバー）で起動すると書いてあるので
この項目のチェックを外して、`Apply`を押しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/ae5bbcd2-2130-3654-3443-e1a6ac3cda38.png)

これで通常の立ち上がり方をします🙌
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2017749/6e298688-00a8-ba30-7626-c661a9566faf.png)


もし、この設定をする前にエミュレータを立ち上げていて
なおかつツールウィンドウで表示しない設定にしてしまった方がいるかもしれません。
そんな方には、以下の対処法がおすすめです！

## コマンドでシャットダウン
```zsh:ターミナル
# 起動しているデバイスの確認
% adb devices
List of devices attached
emulator-5554	device
```
```zsh:ターミナル
# 表示された既に起動しているデバイス番号でシャットダウン
% adb -s emulator-5554 emu kill
```
`adb -s emulator-Number emu kill`のような形式でシャットダウンし、
再度IntelliJから起動すれば、通常の起動になっているはずです✨
【javascript】【jquery】のオートコンプリート(autocomplete)で選択した値を取得

# コード
```javascript
    'セレクタ'.find('セレクタ').autocomplete({
        source: function(request, response) {
            ///////////
            処理
            //////////
        },
        autoFocus: true,
        delay: 200,
        minLength: 2,
        select : function(e, ui){
            ///////////↓これ
            console.log(ui.item.value));
            ///////////↑これ
        }
    });

```
RedmineAPIを活用した自動プロビジョニング機能

## はじめに
いま私が担当業務しているものは自社でプライベートクラウドを構築しており、様々な部門の業務担当・アプリ担当(以下テナントと称す)が必要に応じてプライベートクラウド上にシステムの構築を行っている。いわゆる、IaaS提供という立場だけでなく、運用上に必要な監視機能や障害であったりリソースチューニングを可視化したり分析したいなどのニーズに応えるため一種のマネージドサービスを提供(XXaaS的な)したりといったことも積極的に進めている

## 背景
前述と話しがかぶってしまうが、IaaS基盤を提供するだけといったいわば土管屋さんだけになるのではなく、AWSやAzureのようなマネージドサービスを提供していけるような自社内サービスを目指している。AWSであれば、お客さん自身でいつでも好きなときにマネージコンソールといわれるGUI画面を通して利用ができる。マネージドサービスであればいつでも高速に迅速に提供できるのが当たり前だよねということで今回の取り組み内容を紹介したい。

## 概要
マネージドサービスを利用するにはテナント側はRedmineを用いてチケットを発行して申請する。チケットの項目には、利用したいサービスであったり、バージョンマシンコンテナのスペックやリージョン指定など、細かいパラメータをオーダーすることができる。その項目は10種類以上存在する。発行されたら我々はそのチケットの内容を確認し、オーダー内容に沿ってプロビジョニングを行い最終的にテナント側に提供をする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187693/62f84054-459f-2b22-5b88-cfece185873c.png)

## 問題点
上記のようにテナント側はRedmineを用いて利用したいマネージドサービスを利用できるが下記で問題点があった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187693/b130a861-101c-940a-abab-e4a60bf5f4c8.png)

:::note warn
・チケットを発行してから利用できるまでに時間を要する（チケット来たから対応するっかは古典的すぎる）
・複数項目に渡るオーダー項目をチェックする労力を要する（最悪ヒューマンエラー）
・オーダーに沿って対応する時間がない(俗にいうプロビジョニング担当みたいな人がいない）
:::

つまり圧倒的に時間がないという

コンテナデプロイまではバックエンドとしてAnsibleやCICD環境は整っていたが
チケット発行してからの課題があった。

## 実装イメージ
幸い、ベンダー独自製品や申請書といわれるエクセルフォーマットで運用していなかったためToil削減方法は明確であった。ということでRedmineのAPIを用いてフルオートメーションの実装を行った

下記Redmine上における実装イメージである
![aaa-ページ2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187693/d802a2d2-ba13-e649-0b4f-34c07e66ec79.jpeg)


## 全体
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/187693/df8e6532-62ad-ac02-bce9-fcc41e725102.png)
実際、新規申し込み以外にも、変更申請や削除申請も可能である。

## 最後に
SRE担当ではないがToil削減といった意味ではといった形で本記事執筆をした。
ngrok無しでngrokを使ってみた。(SSHポートフォワーディングのサポート)

# はじめに

2022年11月2日にngrokからニュースレター(メール)を受信しました。

![スクリーンショット 2022-11-03 17.50.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/518ba9a6-09c2-372b-5407-901cf0231967.png)

# ngrok without ngrok

「ngrok無しでngrok」ってどういうことだろうと思ったら、ngrokがSSHポートフォワーディングをサポートした、と理解しました。
何がうれしいかというと、ソースコードが公開されていないngrokコマンド(バイナリファイル)をダウンロード/インストールする必要がなく、ほとんどのシステムで標準的に使用できるSSHコマンドを使ってインターネット(外部)からローカルへアクセスできるようになることです。

ということで、さっそく試してみました。

# 公開鍵の登録

秘密鍵と公開鍵が作成されている前提で手順を説明します。

```bash
$ ls ~/.ssh/
id_rsa
id_rsa.pub
```

## 1.登録とログイン

![ngrok_1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/7990d7f1-31e7-2e0a-7bfb-07790957a1f5.jpeg)

## 2.ダッシュボードで公開鍵を登録

左のメニューから「Tunnels」→「SSH Public Keys」を選択し、右の「＋New SSH Key」ボタンを押します。

![ngrok-2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/3662ba31-f683-6e88-9e36-67c534c11332.jpeg)

「Public Key」にid_rsa.pubの内容を貼り付けて「Add」ボタンを押します。

![ngrok-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/72479/cf06d268-c44b-9480-4c03-b70f54be5297.jpeg)

## 3.SSHコマンドの実行

リモートポートの転送(-R オプション)を使用します。
ローカルでNode-REDを起動し、インターネット(外部)からアクセスする場合、次のコマンドを実行します。

- インターネット(外部)はHTTP(ポート番号:80)
- ローカルはポート番号:1880

```bash
$ ssh -R 80:localhost:1880 tunnel.us.ngrok.com http

ngrok (via SSH) (Ctrl+C to quit)

Account     Ayachika Kitazaki (Plan: Free)
Region      us
Forwarding  http://429b-2400-2410-d461-3100-1d7b-7cb7-6ed2-aa06.ngrok.io
```
 
- インターネット(外部)はHTTPS(ポート番号:443)
- ローカルはポート番号:1880

```bash
$ ssh -R 443:localhost:1880 tunnel.us.ngrok.com http

ngrok (via SSH) (Ctrl+C to quit)

Account     Ayachika Kitazaki (Plan: Free)
Region      us
Forwarding  https://54e0-2400-2410-d461-3100-1d7b-7cb7-6ed2-aa06.ngrok.io
```

正常に接続されるとForwardingの後にURLが発行されるので、ブラウザでアクセスします。
はじめましての記事

とりあえず自己紹介だったり
ラズベリーパイやM5stack Cをちまちま触っている、メーカー系の一般会社員です。
いつもQiitaの皆様のブログにはお世話になっておりますので、自分自身の備忘録や
開発するときに便利だったものなどを記載、投稿していきます。

普段は会社でエクセルベースでデータ操作しているので、
今回はGoogleスプレッドシートのショトカを自分なりにまとめて起きます。

https://qiita.com/ot-kazuo-watanabe/items/c8c787858f7c27c1ffa5

正直言って上記のQiitaを見てもらうと早いと思います。
個人的に使いやすい組み立てを下記に入れていきたいと思います。
---------------------------------------------------------------------
convenience initの簡単なメモ

convenienceイニシャライザは簡単にいうと、イニシャライザの中でinitができるようになるもの！

簡単な例：
```Swift
class Caffe {
    let place: String
    let name: String
     
    // 指定イニシャライザ（A）
    init(place:String, name:String) {
        self.place = place
        self.name = name
    }
     
    // コンビニエンスイニシャライザ（B）
    convenience init(place:String = "目白") {
        self.init(msg:msg, name:"スターバックス")
    }
     
    func where() {
        print("\(name)は\(place)にあります")
    }
}

// イニシャライザBが実行される
let Caffe = Caffe()
let CaffePlace = Caffe(place: "渋谷")
Caffe.where() // スターバックスは目白にあります。
CaffePlace.where() // スターバックスは渋谷にあります。
 
// イニシャライザAが実行される
let CaffeNameAndPlace = Caffe(place: "沖縄", name: "タリーズ")
CaffeNameAndPlace.where() // タリーズは沖縄にあります。

```
メモリについて改めて簡単にまとめてみた

# メモリについて
メモリとは単純にただのバイト配列であり、SwiftにおいてObjectなどを管理してくれている。

# メモリの管理の仕方
- ARC(Automatic Reference Counting)
   - ARCとは自動参照カウンターの略であり、具体的にSwift, Xcode内においては何かしらのクラスや変数、関数などが参照されている数を数えてくれている。
   - 例えば、あるクラスAがテーブルビューを保持している時に、このテーブルビューの参照されている数(ARC)は1とカウントされる。
   - Swiftでは勝手にこのARCが参照数をカウントしてくれ、参照数が0になったオブジェクトがメモリから解放されていく。
    - イメージ：
     - サッカーの試合中に、どの選手がどれくらいプレーに関わったプレーをしたかを監督が逐一数える。プレーに関わっていない選手がいたら、監督が速攻で試合から退場させる。
- Garbage Collection
    - Garbage Collectionもメモリ管理の種類であるが、ARCのように逐次カウントしてくれるのではなく、一定のタイミングでGarbage Collectionプログラムが作動し、参照されていないオブジェクトを探し、メモリから解放してくれる。
    - イメージ：
    - サッカーの試合中に監督が10分おきにプレーに関わっていない選手全員を一気に探す。プレーに関わっていない選手がいたら一気に全員退場させる。

# selfの謎が解けた
- 今までSwiftにおいて、クロージャー内などで`self`を`weak self`にしないとメモリリークが起こるということだけ知っていたが、具体的になぜメモリリークが起きるのかを知らなかった。しかし、上記のメモリ管理の仕方を理解できると謎が解けた。
- 具体例を使って説明する。（絶賛リアクティブプログラミングを勉強中なので、Rxで例を書きます）

例えば、以下のようなクラスがあったとする。
```Swift
import UIKit

class ExampleViewController: UIViewController {
    private let button: UIButton = {
        let button = UIButton()
        return button
    }()
    private let disposeBag = DisposeBag()

    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        button.rx.tap.asSignal()
            .emit { _ in
                self.dismiss(animated: true)
            }
            .disposed(by: disposeBag)
    }
}
```
- この場合、ExampleViewControllerが`diposeBag`を参照している。（他にも参照しているものがあるが、一旦無視。）
- そしてviewDidLoad内で、buttonがタップされた時のアクションが記述されている。
    - それがこの`self.dismiss(animated: true)`である。
    - ここで、とりあえずいつもなら以下のように記述していた。
```Swift
button.rx.tap.asSignal()
            .emit { [weak self] _ in
                self?.dismiss(animated: true)
            }
            .disposed(by: disposeBag)
```
- このようにselfをweakにしてあげていたが、これにはちゃんとした理由がある。図を使って説明する。
- ![IMG_6198.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2784929/f9c60fe3-0089-327d-e498-991e578f4aa9.jpeg)

この図に記載されている通り、先ほどの例では`ExampleVC`, `disposeBag`, `{ self.dismiss }`が各々を参照しあっている。→これを`循環参照`という！
- この場合のARCを考えると、`ExampleVC = 参照されている数 1`, `disposeBag = 参照されている数 1`, `{ self.dismiss } = 参照されている数 1`となる。
-  このような状態になると、メモリを解放したくても解放することができず、メモリを圧迫してしまう。。

# そんな時に使うweak
- ここで`weak`の登場である！`weak`とは簡単にいうと、その参照をあってないようにするものである。なので、ここで`weak self`というふうに記述してあげると、`ExampleVCの参照されている数が0`と見なされる。
- なので、メモリリークが起きないようになる！！！


以上
以前作った@resultBuilderでHTMLを書き出すDSLを手直ししながら、@resultBuilderの使い所について考える

SwiftUIとともに颯爽と登場した`@_functionBuilder`(aka `@resultBuilder`)ですが、いまいち使い所を見出せないまま時は過ぎました。

自分の観測範囲に限れば、SwiftUI以外で`@resultBuilder`が有効に使われているライブラリは見当たらず、持て余してるのは自分だけじゃないと思って溜飲を下げていたところです。

そんな中、Swift 5.7が正規表現に対応し、その中で正規表現構築用のDSLを用意してきました。

[RegexBuilder | Apple Developer Documentation](https://developer.apple.com/documentation/regexbuilder)

[swift-evolution/0351-regex-builder.md at main · apple/swift-evolution](https://github.com/apple/swift-evolution/blob/main/proposals/0351-regex-builder.md)

「**その手があったか!**」と感心しました。

[メールアドレスの正規表現 - Perl正規表現雑技](http://www.din.or.jp/~ohzaki/perl.htm#Mail)

以前より、スクリプトで正規表現を構築する、という手法があることは認識していましたが、`@resultBuilder`で構造的に、Swiftの強力な型システムやXcodeのコード補完の恩恵を受けながら誤解のないように記述させる、というのは、なるほど説得力があります。

-------

前置きが長くなりましたが、そんな事があり、今一度`@resultBuilder`に向き合ってみようと思い、以前習作として書いた、`@resultBuilder`でHTMLを書き出すDSLを見直してみることにしました。

[Build HTML with ResultBuilder](https://gist.github.com/HonmaMasaru/0a558a87732a3148953e3df40c188172)

割と長いので全部は掲載しませんが、上記GistのコードをSwift Playgroundにコピペすれば実行できるはずです。

何をやっているかは大体コメントに書いております。

このDSLのポイントは、`@resultBuilder`内のすべての要素の基盤となる`Element`内の`render()`になります。

L4-
```swift
/// 要素
protocol Element {
    /// HTMLを書き出すレンダー
    /// - Returns: HTML
    func render() -> String
}
```
L47-
```swift
        // 内部タグ
        let i = innerHTML?.reduce(into: "") {
            $0 += $1.render()
        } ?? ""
```

`render()`内でネストされた要素(内部タグ)の`render()`を呼び出すことにより、タグが連鎖的に書き出されることになります。

要素をネストさせる場合、DSL内部の全ての要素に共通する基盤の`protocol`を用意し、連鎖的に実行させる仕組みは必要になってくると思われます。

また今回手直ししたのは、単なるテキストを表示させる部分で、以前は`Text()`という`struct`を用意していたのですが、`String`を`Element`に適合させることによってだいぶスッキリ記述できるようにしました。

変更前
```
struct Text: Element {
    var innerText = ""

    init(_ innerText: String) {
        self.innerText = innerText
    }

    func render() -> String {
        innerText
    }
}
```
```swift
            P(["style": "color:red"]) {
                Text("テキスト") // String
                p
                1 // Int
            }
```

変更後
```swift
extension String: Element {
    func render() -> String {
        self
    }
}
```
```swift
            P(["style": "color:red"]) {
                "テキスト" // String
                p
                1 // Int
            }
```

その意味でも共通する基盤の`protocol`の準備はあった方が良いと思われます。

ついでに`Int`にも対応しました。

-------

手直ししていて、`@resultBuilder`は「記述を簡便にする」という使い方よりも、「ガチガチに制限を入れて曖昧な部分を無くす」という使い方の方が合っていそうです。

Xcodeのコード補完があれば、制限をガチガチにしても記述はそこまで手間にならないと思います。

現状タグの属性をDictionaryで指定するようにしていますが、ここをメソッドにするなどでさらに制限を加える事ができます。

HTML自体はそこまで厳密なものではないですが、「構造化されたデータを曖昧さがないように記述させる」というところが`@resultBuilder`の使い所の気がします。
【Git】作業用ブランチを最新化する

毎回調べるのが面倒なのでメモ。

## ブランチ
作業用ブランチをtestブランチとする。
デフォルトブランチをmasterブランチとする。

```terminal
PS C:\■■■■■■■■> git branch
* test
  master
```

## masterブランチを最新化
masterブランチに移動

```terminal
git checkout master
```

masterブランチを最新化

```terminal
git pull
```

## 作業用ブランチを最新化
作業用ブランチに移動

```terminal
git checkout test
```

masterブランチの内容を作業用ブランチにマージ

```terminal
git merge master
```
【初心者向け・VBA学習で気づきにくい点】処理の高速化について

今日は、ボクがVBAを学習している時は全然きづかず、
実務で困ったことについて記事にする。

VBAの処理の高速化に関する話について。
結論から話すと、セルを参照させる処理はできるだけ
一括で処理しようという話だが、何のことかわからないと思う。。。
そこで具体的にコードをみながら説明していく。

例えば、下記セルのB行～D行までのセルの値合計を
E行に出力するプログラムを組むときをかんがえよう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2898306/bb91f5ed-962a-b261-bacc-fac6ec44e3b8.png)

最初ぼくがVBAを学習したてのころはこう書いていた。

```vb
Sub 非高速化()

    Dim lastData As Long
    Dim index As Long
    Dim ws As Worksheet
    
    Set ws = ThisWorkbook.Worksheets("計算")

    ' B～D行セルの各値を足して、E行セルに結果を出力
    lastData = ws.Cells(Rows.Count, "A").End(xlUp).Row
    For index = 2 To lastData
        ws.Range("E" & index).Value = ws.Range("B" & index).Value + _
                                      ws.Range("C" & index).Value + ws.Range("D" & index).Value
    Next

End Sub

```
ぼくもこれができた際はやった！という気持ちになった。
ただ実際の実務でVBAを組んでみると、このデータが何十万行になってたり、計算が複雑になって全然うごかなくなった。。。


そこで先輩に教わりながら、高速化させたプログラムがこちら。

```vb
Sub 高速化()

    Dim lastData As Long
    Dim i As Long, j As Long
    Dim ws As Worksheet
    Dim resultRng As Range
    Dim calRng As Range
    Dim calVal As Variant
    Dim resultVal As Variant
    
    Set ws = ThisWorkbook.Worksheets("計算")
        
  
    ' A列(No列）の最終行取得
    lastData = ws.Cells(Rows.Count, "A").End(xlUp).Row
    
    ' B～D列（足す列）のセル範囲取得→セル範囲の値をVariantで取得
    Set calRng = ws.Range("B2:" & "D" & lastData)
    calVal = calRng.Value
    
    ' E列（計算結果列）のセル範囲取得→セル範囲の値をVariantで取得
    Set resultRng = ws.Range("E2:E" & lastData)
    resultVal = resultRng.Value
    
    ' resultVal（計算結果配列）に
    ' calVal(足す対象が入った配列)を足し合わせた結果を格納する。
    For i = LBound(calVal, 1) To UBound(calVal, 1)
         resultVal(i, 1) = calVal(i, 1) + calVal(i, 2) + calVal(i, 3)
    Next
    
    ' 計算結果をE列（計算結果列）に出力
    resultRng.Value = resultVal

End Sub
```

上のプログラムは、
①B列セル～D列セル（足す行）を一回でまとめて読み出し
②①で読みだした値を足し算して、計算結果配列に格納
③計算結果をE行にまとめて出力。
というながれ。
セルを参照させる処理（①や③の処理）
一回でまとめて全部取得しているので、処理が早くなる。
上のプログラムだと、For文で1行1行セル参照しているので
計算がややこしくなると時間がかかる。

これを心がけるだけでも、処理がだいぶ早くなると思う。

参照ページ
https://qiita.com/chocode/items/7d687e5676e5af079fec
【合格体験記】AWS Certified Data Analytics - Specialty

AWS Certified Data Analytics - Specialty (DAS-C01) に合格しました。
受験にあたり実施した内容を、誰でも参考できるように書きました。
コツとかも書きましたので、ぜひご覧ください。

https://aws.amazon.com/jp/certification/certified-data-analytics-specialty/

# 目次
1. 受験結果
2. 学習内容
3. 所要時間
4. コツ

# 1.受験結果
結果は783点でした。
合格ラインは750点なので、ギリギリでしたが合格です。
1発合格なので良し。

# 2. 勉強内容
前提として、勉強前のAWSに関する習熟度は以下の通りでした。
・AWS認定 CLF と SAA は取得済。
・AWSのデータ分析サービスは半年使っている。

## 使用した教材

**サンプル問題**
AWSが公式で提供しているサンプル問題です。
どんなことが問われるのか確認するために、一番最初に目を通しました。

https://d1.awsstatic.com/ja_JP/training-and-certification/docs-data-analytics-specialty/AWS-Certified-Data-Analytics-Specialty_Sample-Questions.pdf

**Blackbelt**
AWSが公式で提供している資料です。
それそれのサービスの概要は、この資料で抑えました。
詳細なところは覚え始めたらキリがないので、流し読みして早めに問題演習へ移りました。

https://aws.amazon.com/jp/events/aws-event-resource/archive/?cards.sort-by=item.additionalFields.SortDate&cards.sort-order=desc&awsf.tech-category=*all

**AWS Certified Data Analytics Specialty Practice Exams**
アウトプット不足を感じたため、Udemyのコースを利用しました（日本語には対応していないです）。
問題は100問あり、解説も充実していたので心強かったです。
解説を読んでも理解できないときは、Blackbeltを確認したりネットで検索して理解するようにしました。

https://www.udemy.com/course/aws-certified-data-analytics-specialty-practice-exams-amazon/

**模擬試験**
公式から提供されている模擬試験です。
試験直前の実力試しとして使いました。
試験の1週間前に受けて正答率50%でした（ここでスイッチが入る）。

https://explore.skillbuilder.aws/learn/course/external/view/elearning/12508/aws-certified-data-analytics-specialty-practice-question-set-das-c01-japanese?das=sec&sec=prep

# 3. 所要時間
期間は約1ヶ月、時間は約36時間（平日1時間、休日2時間）だったと思います。

# 4. コツ
受験時や勉強時のコツを3つ挙げます。
個人の意見なので、参考程度にご覧ください。

### ①英語版の問題を適宜確認する
問題文は日本語に対応していますが、英語版の問題をそのまま翻訳機にぶち込んでいるせいか、和訳が変なところがあります。
（私の場合「Redshift」が「Athena」と和訳されていました。）
問題は簡単なのに、和訳ミスによる不正解はもったいないので、問題に違和感を感じたら英語版を確認することをオススメします。


### ②実際にサービスに触れる
触れるだけ触った方がイメージがつきます。
よく使っていた Athena や QuickSight は自信をもって解答できました。
無料枠があるサービスもあるので、時間が許す人は触っておく方がいいと思います。

### ③気楽に受験する
お金さえ払えば受験し放題だからです。
落ちたら1ヶ月の食費を削ればいいか、と考えましょう (暴論) 。

# 終わりに
以上、本資格を取るために実施した内容でした。
業務でAWSを使ってるし、何か形に残したいなーと思い決行した受験ですが、目標は達成できたと思います。
半額クーポンが余ってるので、期限が切れる前にSAPやDBSあたりを受けようかと思います。
それでは、良きAWSライフを！
【flutter攻略】A dependency may only have one source.の解決方法

font_awesome_flutterでアイコンを表示しようとしたがめちゃエラー出る。

エラー文 : **A dependency may only have one source.**

現在のコード

```dart:main.dart
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
```

```yaml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
    font_awesome_flutter: ^8.11.0
```
yamlファイルってインデントを使って構造を表現するので、インデントのミス一つで機能しなくなる。
なので下記のように変更しましょう。

```yaml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  font_awesome_flutter: ^8.11.0
```

yamlファイルを触ったら必ず`flutter pub get`を実行し、再度読み込み。
![Flutter Demo Home Page.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/0108ae4c-db5f-c31b-6a05-c26750593396.png)

可愛いアイコンが出てきましたね。解決解決。
packageを読み込む際は、必ずインデントに注意してコードを書くようにしましょう。
【flutter攻略】画像出力でつまずいてしまった。

assset直下に画像を入れる場合の記事はあるけど、、と思ったそこのあなた。
こちらのファイル構造をご覧ください。求めていたのはこちらのファイル構造ですよね？？

ファイル構造
- Assets/
    - Images/
        - sample1.png
    - Fonts/
        - sample.ttf


意外とassets直下に画像を入れる場合や、プロジェクト直下にimagesフォルダを置く場合の出力方法を書いてる記事が多かったので、こちらのファイル構造での出力方法を説明します。

```yaml:pubspec.yaml
flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    - assets/
    - assets/images/
```
説明は入りませんね。こちらをコピーして貼り付ければ、assets直下のimagesフォルダ内全てが使用可能となります。
yamlファイルに変更を加えたら必ず``flutter pub get``をこないましょう。

画像の指定方法は、こんな感じですかね。
```dart:sample.dart
    child: SizedBox(
        width: 300,
        child: Image.asset(
            'assets/images/sample1.png'
        )
    ),
```
パスには必ずassetsも追加してあげましょう。

![スクリーンショット 2022-10-18 21.18.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/ec778c22-157c-b573-0779-f9890bdf2c8b.png)
しっかりでましたね。これにて一件落着！！
【flutter攻略】なんでSVGだけ画像出力できないの？

## 起きている問題
pngは出力できるけどsvgの画像が出力できない、、

ファイル構造
- Assets/
    - Images/
        - sample2.svg
    - Fonts/
        - sample.ttf

通常の画像出力例
```dart:sample.dart
Image.asset('assets/images/sample1.svg')
```
pngできるけどsvgだと画像出力できなくね？と思った方。
Svgの画像出力には、専用のpackageが必要です。

## flutter_svg

まずは必要なpackageをyamlファイルに記述していきましょう。
```yaml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^1.1.5
```
該当部分は``flutter_svg: ^1.1.5``の箇所です。
yamlファイルはインデントが重要なので、指定されている階層に貼り付けましょう。
flutter_svgのバージョンですが、[こちら](https://pub.dev/packages/flutter_svg)から確認していただき、最新バージョンを指定すると良いでしょう。

次は実際にコードを書いて、出力してみましょう。
先ほどyamlファイルに記述したpackageのimportを行います。
```dart:sample.dart
import 'package:flutter_svg/svg.dart’
```

widget内
```dart:sample.dart
SizedBox(
  width: 300,
  child: SvgPicture.asset(
      'assets/images/sample2.svg'),
),
```
packageをimportすると、``SvgPicture``が使用可能になるので、そちらを使い出力を行います。
![スクリーンショット 2022-10-18 21.39.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778123/dc3711c1-cf04-c91d-f652-e2270632ea0b.png)
しっかりsvgが出力できましたね。なんかsvgっぽくなくて違和感ありますが、出力はできているので一件落着としましょう。