OmniAICreator/Qiita-1.07M huggingface dataset:
sinatra-contribのgem入れたけど動作しないなぁと思ったけど、時間が経ったら動いた件

<h1>問題</h1>
<h4>sinatra-contribのgemをインストールしたけど,gemを実行できない。</h4>

<h1>結論</h1>
<h3>・時間が経てばしっかり反映された。</h3>

![スクリーンショット 2022-12-01 22.24.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708737/7def1822-4e2d-579b-bb77-7077e850e365.png)

<h1>問題発生の経緯</h1>
・sinatra-contribのgemをインストール

```
#/Users/ユーザ名/Work1
gem install sinatra-contrib --no-document
Fetching multi_json-1.15.0.gem
Fetching sinatra-contrib-3.0.4.gem
Successfully installed multi_json-1.15.0
Successfully installed sinatra-contrib-3.0.4
2 gems installed

```

・次にgemを使いたいファイルにrequire 'sinatra/reloader'を書き加える。

![スクリーンショット 2022-12-01 22.19.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708737/37f0c55e-9cae-04c3-50ab-130d63c01d57.png)


・一度サーバーを立ち上げてみる。

```
#/Users/ユーザ名/Work1
ruby main.rb
[2022-12-01 22:04:27] INFO  WEBrick 1.6.0
[2022-12-01 22:04:27] INFO  ruby 2.7.1 (2020-03-31) [x86_64-darwin22]
== Sinatra (v3.0.3) has taken the stage on 4567 for development with backup from WEBrick
[2022-12-01 22:04:27] INFO  WEBrick::HTTPServer#start: pid=21346 port=4567

```
・ではブラウザで確認。


![スクリーンショット 2022-12-01 22.16.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708737/9d97b5ae-202d-3f10-7d6a-d84e924c8227.png)

そこで、main.rbを編集して、Hello worldからGoodbye Worldに変更してみる。

![スクリーンショット 2022-12-01 22.21.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708737/874da15a-f345-e830-58ed-6d45f494ccd5.png)

・またブラウザで確認。
![スクリーンショット 2022-12-01 22.16.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2708737/f0f42a09-3067-4519-d02d-e31a57b5889b.png)

・変わってない！！！(^◇^;)というわけで、sinatra-contribのgemが実行されてないと思いました。(ブラウザのリロードはちゃんとやりました。)





<h1>学び</h1>
<h4>・ちょっと反映されなくても2分くらいは待ってあげれば反映されることがある。w</h4>

執筆時間33分
このPRQLってやつdplyrに似てる！

## dplyrで書きたい！

Rユーザーの中には`dplyr`パッケージが好きな方も多いのではないでしょうか。

dplyrといえばこんな感じですよね。

``` r:R
library(dplyr, warn.conflicts = FALSE)

mtcars |>
  filter(cyl > 6) |>
  select(cyl, mpg) |>
  mutate(mpg_int = mpg |> round(0)) |>
  slice(2:4) |>
  as_tibble() # 表示を整えるためにtibbleに変換
#> # A tibble: 3 × 3
#>     cyl   mpg mpg_int
#>   <dbl> <dbl>   <dbl>
#> 1     8  14.3      14
#> 2     8  16.4      16
#> 3     8  17.3      17
```

このようにdplyrはパイプ演算子を使い、データに対する処理を上から順番に書いていくことができます。分かりやすいですよね。

同じ処理をSQLで書くと以下のようになります。

``` sql:SQL
SELECT
  cyl,
  mpg,
  ROUND(mpg, 0) AS mpg_int
FROM
  mtcars
WHERE
  cyl > 6
LIMIT
  3 OFFSET 1
```

`SELECT`、`FROM`、`WHERE`、`LIMIT`という順番を守る必要があるため、dplyrよりもとっつきづらいかも知れません。（いくつかのDBでは構文を拡張子`FROM`を最初に持って来ることを許容していたりもします）

DBからデータを引っ張ってくるとき、私のように「SQL難しい……dplyrで書きたい……」と思われるような方もいらっしゃると思います。

そのような場合はまず[`dbplyr`](https://dbplyr.tidyverse.org)をお試しいただくのが良いと思いますが、もう一つ知っておいて損はないと思えるプロジェクトが[`PRQL`](https://prql-lang.org)です。

## PRQLで書く！

PRQLのPはPipelinedのPとされています。PRQLのパイプ演算子は`|`もしくは改行です。

例えば先ほどのクエリはPRQLでは以下のように書けます。もちろんクエリは`from`で始まります。

``` elm:PRQL
from mtcars
filter cyl > 6
select [cyl, mpg]
derive [mpg_int = (mpg | round 0)]
take 2..4
```

いかがでしょう？
`mutate`と`derive`、`slice`と`take`や括弧の使い方など細かな違いはありますが、dplyrにそっくりではないでしょうか？

PRQLは今年2022年に始まった非常に若いプロジェクトで、現在メインで開発されているのはPRQLをSQLにコンパイルする機能です。
[ブラウザ上](https://prql-lang.org/playground)やVSCode拡張機能で実行できます。

## R上でPRQLを使う

[`prqlr`](https://eitsupi.github.io/prqlr)というRパッケージを作ってみましたので、R上でPRQLを使ってdplyrとの比較も簡単に行えます！

先ほどの例は本当にdplyrと同じ結果になるのか、sqliteにmtcarsを読み込んでクエリを実行してみましょう。

``` r:R
library(DBI)
con <- dbConnect(RSQLite::SQLite(), ":memory:")

dbWriteTable(con, "mtcars", mtcars)

"
from mtcars
filter cyl > 6
select [cyl, mpg]
derive [mpg_int = (mpg | round 0)]
take 2..4
" |>
  prqlr::prql_to_sql() |>
  dbGetQuery(con, statement = _) |>
  as_tibble() # 表示を整えるためにtibbleに変換
#> # A tibble: 3 × 3
#>     cyl   mpg mpg_int
#>   <dbl> <dbl>   <dbl>
#> 1     8  14.3      14
#> 2     8  16.4      16
#> 3     8  17.3      17
```

確かに同じ結果になりました！

## 結論

SQLを書く必要があるとき、dplyr感覚でPRQLで書いたものをSQLに変換すると楽できるかもしれません！
脳トレを作ることが最大の脳トレ

あらゆる年齢の人に人気のゲーム、それが脳トレです。

なでしこは脳トレを作るのに、とても向いているプログラミング言語です。
なでしこで作れば、スマートフォンやタブレットで、脳トレを遊べるからです！

これまで、なでしこ貯蔵庫にいくつか脳トレが投稿されていますので、今回紹介したいと思います！

# 脳トレで早口言葉チャレンジ

https://n3s.nadesi.com/index.php?page=1914&action=show

> 早口言葉に挑戦してみましょう。ボタンを押して聞き取った言葉をそのまま話してください。記憶力が試される早口言葉です。

![脳トレで早口言葉チャレンジ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33180/16bc4da3-cda9-eda7-11dd-184a747e5697.png)


# 色読み脳トレ2

https://n3s.nadesi.com/id.php?870

> 左上から右下へ漢字に惑わされず「色」を読み上げてください！何秒で読めるでしょうか？

![スクリーンショット 2022-12-01 22.14.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33180/1bfafd4a-7c6a-6b8d-21ca-d4718761212b.png)


# 脳トレになる漢字間違い探しゲーム

https://n3s.nadesi.com/index.php?action=show&page=267

> あるいはどんどんゲシュタルト崩壊してゆくゲーム

![スクリーンショット 2022-12-01 22.17.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33180/313c8b79-62e5-5023-5b13-0d9a32b0567a.png)

# まとめ　- 自分でも作ってみよう！

そして、ここからが本題ですが、自分で脳トレを考えて、なでしこで作ってみましょう！
それが、一番の脳トレになります。

プログラムを作るということは、手順を考え、それを実現する方法を考えて、マニュアルを調べるという作業が必要になります。

ぜひ、自分で脳トレを作ってみてください！

そして、完成したら、[なでしこ貯蔵庫](https://n3s.nadesi.com/)に投稿してみてください！
Google Earth Engineを使いたい

## はじめに
みなさんは、Google Earth Engineをご存知でしょうか？「Google Earthなら知ってるー :raising_hand:」という方も多いかもしれません。今回は、Google Earth Engineがどういったものか解説していきたいと思います。

## Google Earth Engineを使いたい
### Google Earth Engineとは？
Google Earth Engine（以後、GEE）は、衛星画像といった地理空間情報を分析・可視化を可能にするプラットフォームです。衛星画像や地理空間データセットが提供されているので、それらを使って様々な分析が可能です。

https://earthengine.google.com/

GEEには600を超えるデータセットが提供されていて、古いものだと40年以上のものまであります。その膨大な量のデータセットを使って分析するのですが、分析を行うための開発環境が提供されています。こちらはCode Editorと呼ばれ、JavaScriptを使って分析することが可能です。

https://code.earthengine.google.com/

Code Editorの中身はこんな感じです。

![スクリーンショット 2022-12-01 22.10.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581736/2a590f2b-9bfd-a489-bff1-c131e4172ee2.png)

JavaScript以外にもPythonで分析するためのライブラリが用意されています。Google Colabを使った使用例が提供されているので、計算のことも考えるとPythonのライブラリを使うときはGoogle Colabを使った方がいいかもしれません。

https://colab.research.google.com/github/google/earthengine-api/blob/master/python/examples/ipynb/ee-api-colab-setup.ipynb

### どんな分析ができるのか？
GEEでは膨大なデータセットを利用した様々な分析を行うことができます。公式ではケーススタディとして、以下のものが挙げられていました。

- 世界の森林面積の変化
- 危険にさらされている生物種の生息地の分析・可視化
- 世界の表流水の分析
- など

その他のケーススタディに関しては、こちらに記載されています。

https://earthengine.google.com/case_studies/

これだけ聞いてもよくわからないかもしれないので、実際の例を見てどんなものか見てみましょう。Code Editorには、GEEが用意したスクリプトがいくつかあります。Code Editorの、`Scripts/Examples`にスクリプトがおいてあります。今回は、`Scripts/Examples/image`にある、`Normalized Difference`というスクリプトを実行してみます。

スクリプトをクリックすると、以下のように表示されます。Code Editor真ん中にスクリプトが表示されて、下半分には地図が表示されます。この地図に衛星画像や計算したものがオーバレイされて表示されてます。

今回の場合だと、地図の真ん中にはアメリカのカンザスシティが表示されています。

![スクリーンショット 2022-12-01 22.46.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581736/5097da16-51ed-cae8-0ee8-f0346ff88937.png)

スクリプトの実行には、スクリプトが記載されている部分の上部にある`Run`をクリックします。実行した結果は以下です。

![スクリーンショット 2022-12-01 22.45.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/581736/65a9c04d-7649-9061-cf03-70b10906ed51.png)

先ほどの地図が、黄色だったり緑色に染まりました。これは、NDVIという指標を可視化したものです。NDVI（Normalized Difference Vegetation Index）は、植生の分布状況を表す指数です。簡単に言うと植物がどれだけあるかを表す指標で、今回の例だと緑色が濃い場所ほど植物が多く存在していることを表しています。白い部分は逆に植物がない場所を示しており、今回の結果で見られる白い部分は湖などです。

このように、GEEでは植物がどれだけしているかを、とある指標を用いて可視化することができました。

## さいごに
今回は、GEEが何なのか、どういったことができるかを紹介しました。今後は、GEEでできる分析をより具体的に紹介していきたいと思います！
【激推し越えて好きぴ】Laravel LivewireとAlpine.jsとは？

::: note warn
初学者の方にも読みやすいようにかなり抽象的な内容となってます。
以降の記事から徐々に具体的な内容に踏み込んでいきます！！
:::

# 動的な機能を実装できるライブラリです
「動的」というのは画面がホイホイ切り替わる感じのアレです。ブラウザでリロードしなくてもデータ更新できたりボタン押したらメニューがにょきっと出てくる感じのダイナミックなやつです。

# LivewireとAlpine.jsってどんなのですか
### まとめたンゴ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/d70e1a1c-bcc4-8643-e3b9-ace3af9bd098.png)

　↑ 書き方や言葉の表現がちょっと回りくどい。

::: note warn
学習コストは「動くものがある程度自由に作れる」ようになるまでの学習コストを指してます。
言い換えれば「アンチパターンの理解とかは考慮せず、一通り動くものを作れるようになるまで」ってことです。
:::

# Livewireの紹介
Livewireでは<b><font  color="red">PHPの記法で動的な通信が実装できます。</font></b>
PHPだけだとデータを更新する際に画面全体の再読み込みが発生するわけですが、Livewireを使えば<b><font  color="red">画面全体を更新せずに一部のデータだけの更新で済みます。</font></b>

例えば表を表示するページがあった場合、表のデータを更新する際にページ全体を更新するのがPHPの挙動ですが、<b><font  color="red">Livewireを使えば表の中のデータだけを更新することができます。</font></b>
<br>
<br>
### Livewireを使用した場合と使用しない場合の挙動の例
表のデータを更新してみる。

①Livewireを使用しない場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/ff2a3d5a-3157-9dff-0abe-ef44a8512d3e.png)

②Livewireを使用する場合
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311883/ff611411-86bf-17f5-91f9-f626bb9660ea.png)
画面が白くならないからユーザーも快適に操作できて嬉しい。



# Alpine.jsの紹介
Alpine.jsではびっくりするぐらい簡単にJavaScriptで画面を操作できます。
<font color='red' ><b>役割としてはJQuery的な立ち位置と考えていいかもしれません。

::: note info
<b>「画面を操作」とは？ </b>
例えばHTMLのdivを挿入したり、divにテキスト埋め込んだり、inputに入力した値をpタグに出力するみたいな感じです。
こういうのを<font  color="red">DOM操作</font>って言うんですが、それがお手軽にできます。
:::

### 挙動とコード例

<p class="codepen" data-height="393" data-default-tab="html,result" data-slug-hash="bGKmNvP" data-user="gorimatyan" style="height: 393px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/gorimatyan/pen/bGKmNvP">
  Untitled</a> by gorimatyan (<a href="https://codepen.io/gorimatyan">@gorimatyan</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
　↑ TailwindCSSも使ってます

こういうモーダルとか、ドロップダウンとかサクッと書くことができます。非常に楽ちん。

### Like A Vue
どうやらAlpine.jsはVueを元にして作られたらしいのでそら似とるワケやね。
Vueが使えてサクッと書けて容量軽いJSのライブラリほしいな～って時にはぜひ導入を検討してみてください！！

::: note
公式ページ見たら「Vueで草」ってなって使いたくなるので公式ページ見てほらほら。
使ってみようかなとなって頂けたら幸いです。
https://alpinejs.dev/directives/data
:::

# 結論
Livewireは本来JavaScriptで書く部分をPHPで書ける。
さらにAlpine.jsを使えば画面の動きを簡単に制御できる。

### つまり、LivewireとAlpine.jsを併用して使えば
<b>
①JavaScriptを書く部分を減らすことで、フロント側とバックエンド側での開発効率が高まる。</b>

<b>②<font color="red">JavaScriptを使った制御はLivewireとAlpine.jsの2つで大体できる。</font></b>

# まとめると

<b>・Livewireを使えば本来JavaScriptで書く部分をPHPで書けてめっちゃ便利。</b>UI・UXもLaravelだけで開発するより良くなる。
・Alpine.jsを使えば画面の動きを簡単に制御できる。
・Laravelで使う場合、<b><font color="red">Livewireがバックエンド側でAlpine.jsがフロント側を担当する。
<br>

今回は手始めに超大まかな概要を記事にしました。
なるべく初学者の方でも分かるように書いたつもりですがいかがでしょうか。
CpawCTF Writeup Level 2 Q22.[Web]Baby's SQLi - Stage 1- (注意<spoiler>)

# Q22.[Web]Baby's SQLi - Stage 1-
```
困ったな……どうしよう……．
ぱろっく先生がキャッシュカードをなくしてしまったショックからデータベースに逃げ込んでしまったんだ．
うーん，君SQL書くのうまそうだね．ちょっと僕もWeb問作らなきゃいけないから，連れ戻すのを任せてもいいかな？
多分，ぱろっく先生はそこまで深いところまで逃げ込んで居ないと思うんだけども……．

とりあえず，逃げ込んだ先は以下のURLだよ．
一応，報酬としてフラグを用意してるからよろしくね！

https://ctf.spica.bz/baby_sql/

Caution
・sandbox.spica.bzの80,443番ポート以外への攻撃は絶対にしないようにお願いします．
・あなたが利用しているネットワークへの配慮のためhttpsでの通信を推奨します．
```

```https://ctf.spica.bz/baby_sql/
Stage1.Writing SQL
さて，SQLのおさらいです．下のフォームはSQL文を入れるとそのまま動作します．どうやらぱろっく先生は「palloc_home」というテーブルの2番目にいるようです．
```

簡単なsql文を入力すればよい

select * from palloc_home


cpaw{palloc_escape_from_stage1;(}
VCIアニメーションについて

※この記事は、[VCI Advent Calendar 2022](https://qiita.com/advent-calendar/2022/vci) の2日目の記事です。

自分が VCI にアニメーション付ける時のポイントを紹介します

# アニメーション作る時のポイント
## `Animation`コンポーネントを使う
例えば以下の VCI があります
![img2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/0d89b45c-e33f-7ff1-9654-febf8bf7f598.png)
`Cube_Rot` `Cube_Pos` `Sphere_Scl`にアニメーション付けたい時はまずこのオブジェクトたちの親`Subitem`に`Animation`コンポーネントをつける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/6a414a79-5b8d-95da-2e54-bb7bd6f82881.png)
後で`Animation`ウィンドウの`Create`でアニメーションファイルを作る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/181f7eeb-d12c-2168-9768-d9a2c286a1da.png)
## 原理説明
### なぜ`Animation`コンポーネント
実は Unity のアニメーションファイルは`Legacy` `Generic` `Humanoid`三種類あります
そして VCI が上手く対応出来るのか`Legacy`の方です
もし`Animation`コンポーネントを付けずにそのまま`Animation`ウィンドウの`Create`を使ったら`Generic`のアニメーションファイルが生成されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/96f3b67a-b4cd-6fdd-605e-75d39c5c2c95.png)
これでも使えるけれど、このアニメーションファイルのデフォルト回転方法が VCI に対応されていない
この記事の方法で生成したアニメーションファイルならばデフォルトで VCI に対応する回転方法になります
おと`Animation`コンポーネントの中に今このオブジェクトに付いているアニメーションを簡単に設定できます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/2adb76b7-a5e1-f404-b800-7bf647215d91.png)
### なぜ親に付ける
VCIのアニメーションは`Animation`コンポーネントが付いたオブジェクト自身の動きをアニメーションファイルに入れると VCI が出力出来ない、もしくは壊れた VCI が出力されます
例えば以下の構造たと緑の部分しか動けません
![img3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542363/081693bd-81ef-f2a5-f1a3-128f46230173.png)
この構造で`Subitem`の動きをアニメーションファイルに入れると VCI に出力できなくなります
# 最後まで読んだあなたに
アニメーションスタンドオブジェVCIの限定公開URLです、ありがとうございました！

https://seedonline.jp/products/7c96f86433fb1cc1815115cf21e7db448d2d909a8fd6bb78d20d7087497ae322
CpawCTF Writeup Level 2 Q21.[Reversing]reversing easy! (注意<spoiler>)

# Q21.[Reversing]reversing easy!

ファイルをバイナリエディタで開くと

![スクリーンショット 2022-12-01 220501.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/813031/4366eea5-cde7-4f8a-528a-64d599f8feb2.png)

フラグが見える



cpaw{yakiniku!}

デバッグしてる時間があるなら次の問題に進んだ方がよさそう（能力と適正に依る）
Figmaで1クリックでText Stylesを生成できるプラグインが便利！

## これは何

[Figma Tips Advent Calendar 2022](https://qiita.com/advent-calendar/2022/figma-operation-tips)の参加記事です

Figmaで新しいデザインを作成するとき、Text Stylesの定義がとても面倒で、何か簡単に定義する方法はないかなと調べていたら便利なプラグインを見つけたので、その紹介記事です

## プラグインの内容と使い方

[Text Styles Generator](https://www.figma.com/community/plugin/759472336242530542/Text-Styles-Generator)というプラグインで、ファイル内で定義されているText stylesを簡単に設定したり他ファイルからコピーしてくることができます。

https://www.figma.com/community/plugin/759472336242530542/Text-Styles-Generator

### Text stylesの設定方法

Text stylesを設定する方法はとても簡単です。

1. 設定したい名前をテキストに入力し、設定したいスタイルを指定する
1. ↑を選択した状態で「Text Styles Generator」の「Generate Text Styles」を選択する

![TextStylesGenerator.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/8672b62d-3b73-8e26-641e-0e86d81494cc.gif)

なんて楽ちんなんだ...！

さらに、「Draw Current Styles」の方を選択すると、現在のファイルで指定されているText stylesを「Text Styles Generator」で使用できる形で書き出してくれます。

これを利用すれば、過去に別プロジェクトで使用したText stylesや、Figma communityに公開されているText stylesを簡単に新しいファイルにインポートすることができます！

Figma communityに公開されているデザイシステムがまとまっているサイトがありますので、ぜひ試してみてください。

https://www.designsystemsforfigma.com/
FPGAプログラミング大全Xilinx編第2版 ツール導入 #1

FPGAに再入門しようと思いたち[FPGAプログラミング大全Xilinx編第2版](https://www.amazon.co.jp/FPGA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%A4%A7%E5%85%A8-Xilinx%E7%B7%A8-%E7%AC%AC2%E7%89%88-%E5%B0%8F%E6%9E%97-%E5%84%AA/dp/4798063266/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=1S5G3UKPB55O9&keywords=FPGA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%A4%A7%E5%85%A8Xilinx%E7%B7%A8%E7%AC%AC2%E7%89%88&qid=1669893715&qu=eyJxc2MiOiIwLjc2IiwicXNhIjoiMC4wMCIsInFzcCI6IjAuMDAifQ%3D%3D&sprefix=fpga%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E5%A4%A7%E5%85%A8xilinx%E7%B7%A8%E7%AC%AC2%E7%89%88%2Caps%2C151&sr=8-1)を頭からやっていく

時期的にも良いので一人Advent Calendarで25日続ける

### 目標
4004等の実CPUの実装

### 目次
| # | タイトル |
|:-:|:-:|
|   01|  ツール導入 |
|  02 |  未定 |


### 環境
【実装ボード】 [Digilent Artix-7 35T Arty FPGA 評価キット](https://japan.xilinx.com/products/boards-and-kits/arty.html#resources)
【OS】 Windows10

今回はハードウェア実装のためとりあえずVivadoのみインストールする

### ツールの導入
1. Xilinxの[HP](https://japan.xilinx.com/support/download/index.html/content/xilinx/ja/downloadNav/vivado-design-tools.html)からインストーラーのDL
![スクリーンショット 2022-12-01 215201.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45441/a760c1ef-8ffd-c3f1-e1a1-047916c2a70d.png)

大きな問題ではないがWindows or Linuxでないと動かないので注意

DL時にXilinxのアカウント作成を求められるので作る


2. インストーラーからインストール
DLしたインストーラーからインストールする
途中ログインを求められるので1.で作ったXilinxのアカウントでログインする
![スクリーンショット 2022-12-01 215614.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45441/4f284803-858a-75b0-a665-14f8c647a7a1.png)

途中でインストールするものを選択するが今回は　Vivadoのみとする
それでも途中60G以上のディスクスペースを要求されるので注意が必要
![スクリーンショット 2022-12-01 220104.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/45441/981c1351-2a41-4099-25fd-9d65f82c740f.png)

20G近いファイルをDLしてその後展開するのでそこそこ時間がかかる。

とりあえず今日はここまで

明日は実際にボードにつなげてみる
AR 表現に使用する 3D フレームワーク選定

# 3D 描画エンジンが必要だ

[MoAR](https://whatever.co/moar/) のビルをトラッキングする VPS 部分については[1日目](https://qiita.com/Saqoosha/items/b9fef6517831ac136a26)、[2日目の記事](https://qiita.com/Saqoosha/items/6272ab6f11407b4cc9d6)に書いたように ARCore の Geospatial API を採用することにしたけど、カメラ映像の上にオーバーレイしてさまざまな 3D コンテンツを描画するための 3D エンジンはいったい何を使うのがベストなのか？

# 前提条件

1. [App Clip](https://qiita.com/Saqoosha/items/5d2cd0aa08cb1b1d8eb1) と組み合わせて使えること。
1. Geospatial API と組み合わせて使えること。

Geospatial API に関してはこれが無理なら Immersal もしくは Location Anchors という代替案があるからよいのだけど、App Clip は QR コードから簡単に起動できてすぐ体験できるという部分を担っているのではずせない。

# Unity

モバイルアプリで AR コンテンツ作るなら普通は Unity を使う。Unity 用の AR フレームワークの ARFoundation は Geospatial API にも対応してるし。

しかし App Clip には[アプリサイズ 10MB 制限](https://qiita.com/Saqoosha/items/5d2cd0aa08cb1b1d8eb1#10mb-%E5%88%B6%E9%99%90)という大きな制限があるので、Unity アプリをビルドしたときに 10MB に収めることができるのかをまず調べた。

Unity 2020.3.20f1 で新規プロジェクトを作成して何も配置せずにそのまま iOS 用の Xcode プロジェクトを書き出してアプリサイズを確認してみると…

```
App + On Demand Resources size: 5.7 MB compressed, 21.2 MB uncompressed
App size: 5.7 MB compressed, 21.2 MB uncompressed
On Demand Resources size: Zero KB compressed, Zero KB uncompressed
```

なにもしてないのに **21.2MB!** 全然ダメ! Unity 使えない!（iOS 16 の 15MB 制限でもおさまらない…

# SceneKit / RealityKit / Metal

Unity が App Clip では使えないとなると選択肢としては iOS に含まれている [SceneKit](https://developer.apple.com/documentation/scenekit/) または [RealityKit](https://developer.apple.com/jp/augmented-reality/realitykit/)、もしくは Graphics API の Metal を直接叩くか？ で、

- Metal はなんでもできちゃうけど低レイヤーすぎて具体的なコンテンツ作り出すまでの足回りだけでもかなりのコーディングが必要そうなのでダメ。
- 将来的には RealityKit かなーと思いつつもまだあまりこなれていないし Metal とは逆にあまり低レイヤーなことができなそうで表現の幅がせまくなりそうなのでダメ。

消去法的に SceneKit かなーってとこでさらに調べてみると、わりと歴史があって（10年前からある…）ドキュメントもそれなりに充実していてレンダリングパイプラインにも手がいれられるぐらい低レイヤーもいじれそうということがわかったので SceneKit を採用。

ちなみに Xcode で iOS の Augumented Reality App テンプレートをビルドしたときのアプリサイズは…

```
App + On Demand Resources size: 464 KB compressed, 699 KB uncompressed
App size: 464 KB compressed, 699 KB uncompressed
On Demand Resources size: Zero KB compressed, Zero KB uncompressed
```

**699KB!** めちゃ軽！ しかもこれテンプレに含まれてる飛行機モデルが 220KB でテクスチャが 350KB なのでアプリ本体は 129KB だけ。

# SceneKit で開発する…

そこそこ歴史があってドキュメントもそれなりに用意されてるとはいえ Unity のコミュニティのデカさとは比べ物にならないぐらいググっても出てくる情報が極端に少なかったりそもそもなにも見つからんということがあって、Whatever エンジニア陣には SceneKit 経験者いなかったのもあいまって、ううう いつもの Unity だったら瞬間なのにーということが多々あったりした話はまた別の記事で。
Python参考サイト

# 参考サイト
https://zenn.dev/alivelimb/articles/20220528-streamlit-ml-app

https://zenn.dev/alivelimb/books/python-web-frontend


https://zenn.dev/alivelimb/articles/20220501-python-env


https://kajiblo.com/python-pyscript/





# 参考動画
https://www.youtube.com/watch?v=VtJ-fGm4gNg&t=8993s




https://www.youtube.com/watch?v=EQIAzH0HvzQ&t=755s

https://www.youtube.com/watch?v=liISuTWUNqU&t=2s



https://www.youtube.com/watch?v=SNTkI7aYzYE
画像表示でほんのちょっと躓いたこと

# image多過ぎでしょ　

　assets/images のフォルダにpngを大量に入れていました。　
　で、pubspec.yamlでは　

       -asstte/images/

 と一括指定にしていたんですよ。　

　でもあんまり画像が多いので、入れ子でフォルダを作ったんですね。そうしたら、表示できなくなった。imagesの中身全部って指定だと思ったのだけれど、そうではないんですね。　
　以下のように入れ子の各フォルダを指定しないとダメなのでした。　


        -assets/images/animation/
        -assets/images/results/

　簡単なことでしたね。でもちょっと焦りました。
ESP32 WiFi接続メモ

## WiFiライブラリ
ArduinoでWiFi通信をするためのライブラリ

##### WiFiライブラリをインクルードする
~~~
#include <WiFi.h>
~~~

~~~
WiFi.begin(ssid, password);
~~~
`sda` : SDAのピン番号
~~~
while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
}
~~~


~~~
server.begin();
~~~


~~~
WiFiClient client = server.available();
~~~

~~~
while (client.connected()) {
}
~~~


~~~
if (client.available()) {
}
~~~

~~~
char c = client.read(); 
~~~


~~~
client.println("HTTP/1.1 200 OK");
~~~


~~~
client.stop();
~~~

~~~

~~~

~~~

~~~
一発芸としての第二法則

 飲み会で「え，〇〇物理学科なの？なんか見せてよ」と無茶ぶりされたときに,あたふたしたくないですよね．そんなとき一瞬で示せるとカッコいい定理を紹介します．皆さんもぜひ自己紹介のタイミングで示してみてください.
 (かなり粗い理解をしている部分が多々あります．ご指摘などありましたらご連絡いただけると幸いです．)
# セットアップ 
 熱浴$B$と系$S$が接している状況を考えます．全系のハミルトニアンは，
```math
\hat{H}:=\hat{H}_S+\hat{H}_I+\hat{H}_B
```
とかけます．ただし，$\hat{H}_S,~\hat{H}_B$はそれぞれ系，熱浴のハミルトニアンで，$\hat{H}_I$は系と熱浴の相互作用を表すハミルトニアンです．
　初期条件は，$S$,$B$の間で相関がないような状態でかけます．
```math
\hat{\rho}(0)=\hat{\rho}_s(0)\otimes\hat{\rho}_B^{can}
```
$S$系は任意の状態を持ってきてよくて，$B$の初期状態はカノニカル分布$\hat{\rho}_B^{can}=\frac{\exp(-\beta \hat{H}_B)}{Z}$とします．$Z$は分配関数．系全体はユニタリ発展するから，$\hat{\rho}(t)=\hat{U}\hat{\rho}(0)\hat{U}^{\dagger}$と書けます．このときの系，熱浴の状態は$\rho(t)$の部分トレースでかけます．つまり，
```math
\hat{\rho}_B=\mathrm{Tr}_S\hat{\rho}(t),~~\hat{\rho}_S=\mathrm{Tr}_B\hat{\rho}(t)
```
となります．
## やりたいこと
熱力学第二法則は，大学1年生で習う熱力学では，定理というよりかは原理として導入されるものです．その表現は様々で，例えばトムソンの原理やクラウジウスの原理などが挙げられますね．(なんかの論文に第二法則の同値な言い換えが21個くらい載ってた気がするけどどれだか忘れちゃったし，ホントに載ってたかも忘れちゃった......)
　要は，平衡熱力学じゃない上のセットアップから第二法則を示すのが今からやりたいことです．実際，これ以降導入するvon Neumannエントロピー
```math
S( \hat{\rho}_S)=-\mathrm{Tr}[\hat{\rho}_S \ln \hat{\rho}_S]
```
は，密度行列の固有値に注目すれば形式的にShannonエントロピーと一致します．
## 定理と証明
系のvon Neumannエントロピー変化を$\Delta S_S=S(\hat{\rho}_S(t))-S(\hat{\rho}_S(0))$, 系の吸熱を$Q=-\mathrm{Tr}_B[\hat{H}_B(\hat{\rho}_B(t)-\hat{\rho}_B(0))]$とします．そもそも，熱浴は仕事をしないと思えば，(系の受け取るエネルギー)$=$(熱浴の出すエネルギー)$=$(熱浴のエネルギー減少)となることから理解できると思います．このとき，以下が成立します．
```math
\Delta S_S-\beta Q\geq 0
```
これが熱力学第二法則に相当します．(要は系と熱浴のエントロピー変化の和が非負ってコト．)
以下，証明．初期条件でのエントロピーは，
```math
\begin{align}
S(\hat{\rho}(0))&=-\mathrm{Tr_S}[\hat{\rho}_S(0) \ln \hat{\rho}_S(0)]-\mathrm{Tr_B}[\hat{\rho}_B^{can} \ln \hat{\rho}_B^{can}]\\
&=S_S(0)-\mathrm{Tr_B}[\hat{\rho}_B^{can}\ln\frac{\exp(-\beta \hat{H}_B)}{Z}]\\
&=S_S(0)+\beta\mathrm{Tr_B}[\hat{H}_B\hat{\rho}_B(0)]+\ln Z
\end{align}
```
とかけます．熱浴$B$の初期状態はギブス分布である($\hat{\rho}_B(0)=\hat{\rho}_B^{can}$)ことに注意してください．時刻$t$におけるエントロピーは，相対エントロピー
```math
D(\hat{\rho}||\hat{\sigma})=\mathrm{Tr}[\hat{\rho}(\ln \hat{\rho}-\ln\hat{\sigma})]
```
の非負性を用いれば，
```math
\begin{align}
S(\hat{\rho}(t))&=-\mathrm{Tr}[\hat{\rho}(t) \ln \hat{\rho}(t)]\\
&\leq-\mathrm{Tr}[\hat{\rho}(t) \ln (\hat{\rho}_S(t)\otimes\hat{\rho}_B^{can})]\\
&=-\mathrm{Tr}[\hat{\rho}(t)\ln(\hat{\rho}_S(t)\otimes\mathbb{I}_B)+\hat{\rho}(t)\ln(\mathbb{I}_S\otimes\hat{\rho}_B^{can})]\\
&=S_S(t)+\beta\mathrm{Tr}_B[\hat{H}_B\hat{\rho}_B(t)]+\ln Z
\end{align}
```
とできます．ここで，全系についてはユニタリー発展をしているので，
```math
\begin{align}
S(\hat{\rho}(t))&=-\mathrm{Tr}[\hat{\rho}(t) \ln \hat{\rho}(t)]\\
&=-\mathrm{Tr}[U(\hat{\rho}(0) \ln \hat{\rho}(0))U^\dagger]\\
&=-\mathrm{Tr}[\hat{\rho}(0) \ln \hat{\rho}(0)]=S(\hat{\rho}(0))
\end{align}
```
となります．以上の結果を整理すると，求めたかった不等式が示せました．
## 注意事項
　証明を見たときかなりコンパクトだったので「一発芸になるやん！」と思ってこの記事を書きましたが，この記事の執筆をしているうちに説明に思ったより時間がかかることに気が付いたので，これは飲み会の一発芸には向かないかもしれません．また，以上はIyoda,Kaneko,and Sagawa(2017)より引用した証明になります(究極の出典はあるかもだけど)．　このお三方が同じ飲み会にいらしている場合は控えることを強くお勧めします．

## 参考文献
Iyoda, E., Kaneko, K., & Sagawa, T., Phys. Rev. Lett. 119, 100601(2017)
(スマホアプリ開発ほぼ未経験が)ピアノ教室の先生向けに有用なアプリを作ってみようと思う

# 前書き

実家がピアノ教室で、母親一人で運営をしている状態。

Excelでレッスン予定表を作ったり、Wordで文書を作ったり、サラリーマンであればそんなものはお茶の子さいさいかもしれないが、コンピュータものとなると抵抗感を感じるとのこと。

たまに、息子である私が手伝うことがあるが、面倒だしなんなら今の時代スマホ１つでスケジュール管理・生徒や保護者への何かしらの通知が簡単にできたらなと思うこの頃。

ならば、ちょっとＳＥの自分がそういうアプリを作ってみようかなと思った次第。
じゃあ、早速作ってみよう！という前に、まずはどういうアプリを作るから整理しようと思う。

# アプリを作る前に
**アプリを使うターゲット**
・ピアノ教室の先生

**現状の課題(仮定)**
・レッスン以外の業務が面倒
ex. スケジュール管理・文書作成など。PCで作って、印刷して生徒に渡すというのって意外と手間じゃない？

**アプリを使うことで嬉しいこと**
・スマホ１つでピアノ教室の運営がほぼできる！
例えば、、、

:::note info
スマホから、生徒スケジュールが登録できる。
発表会の通知や、コンクール開催通知がスマホから手軽にできる。
出先でも簡単にレッスンスケジュールが確認できる。
保護者さん、生徒さんも簡単にレッスンスケジュールが確認できる。
:::

ターゲットはピアノ教室の先生なので、できるだけ簡単な操作でいきたいですね。
とりあえずアプリの概要はこんな感じ。

# 使う技術(予定)
<dl>
  <dt>フロントエンド</dt>
  <dd>ReactNative</dd>
  <dd>Javascript</dd>
  <dt>データベース</dt>
  <dd>未定(Postgresql...?)</dd>
</dl>

※画面モックについては、モックデザイン作成ツールとしてMarvelを採用してたたき台を作ってみようと思います。
Java スレッド基礎

## スレッドとは
スレッドは１つの流れの処理を表す単位。
スレッドの処理が単一で行われるをのをシングルスレッド、複数のスレッドを同時に並行させることをマルチスレッドという。

## スレッド作成

### Threadクラス
1つめはThreadクラスを継承したクラスを使用する方法。
runメソッドをオーバーライドして、スレッドとしての処理を記述する。
```java
class Sub extends Thread {
    public void read() {
       //処理
    }
}
```

そして、そのクラスのインスタンスでstartメソッドを実行すれば、runメソッドが実行される。
 
```java
public class Main {
    public static void main(String[] args) {
        Sub sub = new Sub();
        sub.start(); //スレッド実行と表示
    }
}

class Sub extends Thread {
    public void run() {
       System.out.println("スレッド実行");
    }
}
```

### Runnableインターフェース
2つめはRunnableインターフェースを実装する方法
Runnableインターフェースはrun()メソッドのみを持つ。そのためrun()メソッドだけをオーバライドすれば良い。
```java
class Sub implements Runnable {
    public void run() {
        //処理
    }
}
```

1.Runnableインターフェースを実行したクラスのインスタンスを生成し、
2.Threadクラスのインスタンス生成時に1のインスタンスを引数にする
3.startメソッドを2のインスタンスで実行する

```java
public class Main {
    public static void main(String[] args) {
        Sub sub = new Sub();
        Thread thread = new Thread(sub);
        thread.start(); //スレッド実行と表示
    }
}

class Sub implements Runnable {
    public void run() {
       System.out.println("スレッド実行");
    }
}
```

### マルチスレッド
複数のスレッドを実行する。
スレッドクラスを継承したクラスのインスタンスを複数生成して、それぞれでスレッドを実行するやり方。

```java
public class Test1 {
	public static void main(String[] args) {
		Country a1 = new Country("Japan");
		Country a2 = new Country("America");

		a1.start();
		a2.start();
		System.out.println("end");
	}
}
class Country extends Thread {
	private String country;
	Country(String country) {
		this.country = country;
	}
	@Override
	public void run() {
		for (int i = 0; i < 2; i++) {
			System.out.println(country);
		}
	}
}

/* ----実行結果-----
end
Japan
Japan
America
America
*/
```

## 他スレッドの終了を待つ
マルチスレッドにおいて、他スレッドの処理が終わるまで待機するにはjoinメソッドを使用する。
oin()は該当のスレッドが終了するのを永久に待ちつづける。

```java
public class Main {
    public static void main(String[] args) throws Exception {
        JoinTest t = new JoinTest();
        t.start();
        System.out.println("スレッド t の終了を待機します。");
        t.join(); // tのスレッドが終了するのを待つ
        System.out.println("スレッド t が終了しました。");
    }
}

class JoinTest extends Thread {
    public void run() {
      for (int i = 3; i >= 0 ; i--) {
        System.out.println(i);
      }
   }
}

----実行結果-----
/* 
スレッド t の終了を待機します。
3
2
1
0
スレッド t が終了しました。
*/
---joinを消した場合----
/*
スレッド t の終了を待機します。
スレッド t が終了しました。
3
2
1
0
*/
```
【論文読み】SCMにおける確率計画法を用いたコスト削減の検証

## はじめに
こんにちは。論文を読んだ結果の紹介記事です。  
今回紹介するのは、「SCMにおける確率計画法を用いたコスト削減の検証」という論文です。  

- タイトル：【論文読み】SCMにおける確率計画法を用いたコスト削減の検証
- 出典：紺野 剛史, et al.; 人工知能学会、 2018   
- URL：  https://www.jstage.jst.go.jp/article/pjsai/JSAI2018/0/JSAI2018_2M202/_pdf/-char/ja


## 概要
基本モデルと確率計画法で、改善率をケーススタディした。  
不確実性を考慮することで、ケーススタディ、実データ、いずれでも総費用を削減できる結果となった。  
生産量の上限を変化させた場合の比較では、生産量の上限が大きいほど、改善率が大きな結果となった。

## 特徴
- 基本モデル  
    在庫費用、バックオーダー費用、生産量の上限、で線形計画問題として定式化

- 確率計画法  
    - 予測需要量の不確実性を考慮する。事前に過去の実績値から何らかの方法で各期の各製品の予測需要量の同時分布を推定する。
    - シナリオ数S、それぞれのシナリオの生成確率p、とする。需要量、バックオーダ費用もシナリオ毎の変数とし、線形計画問題として定式化


## 想定される適用例
- SCMでのコスト削減  


## 参考
- [SCMにおける確率計画法を用いたコスト削減の検証](https://www.jstage.jst.go.jp/article/pjsai/JSAI2018/0/JSAI2018_2M202/_pdf/-char/ja)
vscodeのターミナルのGit Bashの表示をUTF-8にしたいとき

### 日本語をprintfしたときに文字化けする
OSはWindowsです。
いつものようにprintfで何かしらの日本語を出力しようとすると、文字化けが起こりました。UTF-8のものをShift-JISで読んでいるパターンの文字化けです。

### PowerShellの場合
vscodeのターミナルでPower Shellを使った場合、比較的短時間で解決しました。
vscodeの設定ファイルsetting.jsonのterminal.integrated.profiles.windowsのPowerShellの欄を以下のように変えたらできました。

        "PowerShell": {
            "source": "PowerShell",
            "icon": "terminal-powershell",
            "args": ["-noexit", "chcp", "65001"]
        }
要は、argsとしてchcp 65001を入れると表示する文字コードをutf-8にできるということです。
### Git Bashの場合(失敗したほう)
問題はこっちで、Git for Windowsを使っている場合、Program Files/Git/にgit-bash.exeが、Program Files/Git/bin/にbash.exeがあると思うのですが、前者では文字化けしないのに後者では文字化けが起こりました。
ググるとlocaleを変えろという話がでてきたので、以下を~/.bashrcに追加しました(これではうまくいかなかった)。

    export LANG="ja_JP.utf8"


### Git Bashの場合(成功したほう)
いろいろ試した結果、解決方法は全然vscodeとかGit Bashとかの設定ではなく、Windows自体の設定でした。

コントロールパネルから「時計と地域」みたいなところに行って、「日付、時刻、数値型式の変更」→「管理」→「Unicodeではないプログラムの言語」→「システムロケールの変更」→「ワールドワイド言語サポートでUnicode UTF-8を使用」にチェックを入れて再起動するとうまくいきました。

どうやら、bash.exeのベースとなるコンソールソフト(みたいなもの)がShift-JISのままで、内部のbashの言語設定を変えてもその外側で文字化けが起こっていたようです。

「ワールドワイド言語サポートでUnicode UTF-8を使用」は執筆時点でまだベータの機能なので、古いプログラムが動かなくなる可能性があるそうです。他のよい方法があれば教えていただきたいです。
さくらのオブジェクトストレージにAPIリクエストする

さくらのオブジェクトストレージに画像を格納する機会があり、WebAPIとかで簡単にアップロードできるんだろうなと思っていたらめちゃくちゃ苦戦したので、忘れないうちに動くソースを記事に残しておきます。

さくらのオブジェクトストレージは、Amazon S3互換APIで提供されているとのことで、通常ならAmazon S3をサポートするクライアント導入すればそのまま動くんだと思います。

自分の場合、AWS関連の知識が皆無だったのと、今回は画像アップロードしか使わないつもりだったので、そのためにS3クライアントについて調べたりするより、一個リクエスト投げる処理書いちゃったほうが速いのでは？と思ってCurlで書くことにしました。

多分それが、急がばなんとやらでした。

まずS3互換APIって言うけどS3 APIのドキュメントどこにあるの？？ってところから躓く。。

結局見つけられなかったので、同じことをやろうとしている人の記事をかろうじていくつか見つけ、参考にリクエスト組み立ててみることに。

リクエスト内容に署名してヘッダに添付するタイプのAPIなのですが、これを自分で組み立てるのが中々難しく苦戦。

例えば公開設定でアップロードするためのこのヘッダ`x-amz-acl:public-read`、普段HTTPリクエストヘッダ書くノリで`:`の後にスペース入れただけで受け付けてもらえなくなりました。

他にも色々詰まった気がするのですが、とりあえず動くソースをそのまま残しておきます。

```php
$endpoint = 'https://s3.isk01.sakurastorage.jp'; // 固定
$accessKeyId = 'xxxxx';
$accessKeyToken = 'xxxxx';
$bucketName = 'xxxxx';
$fileName = 'xxxxx.jpg';
$method = 'PUT';
$contentType = 'image/jpeg';
$content = file_get_contents('path to file');
$md5Content = base64_encode(md5($content, true));
$date = gmdate(\DateTime::RFC2822);
$resource = '/'.$bucketName.'/'.$fileName;
$aclHeader = 'x-amz-acl:public-read'; // 公開設定でアップロード

// リクエスト内容に署名してヘッダに含める
$stringToSign = $method."\n".$md5Content."\n".$contentType."\n".$date."\n".$aclHeader."\n".$resource;
$signature = base64_encode(hash_hmac('sha1', $stringToSign, $accessKeyToken, true));
$auth = 'AWS '.$accessKeyId.':'.$signature;

$headers = [ 
  'Date: '.$date,
  'Content-Type: '.$contentType,
  'Content-MD5: '.$md5Content,
  'Content-Length: '.strlen($content),
  'Authorization: '.$auth,
  $aclHeader
];

// Curlでリクエスト
$options = [ 
  CURLOPT_URL => $endpoint.$resource,
  CURLOPT_CUSTOMREQUEST => $method,
  CURLOPT_HTTPHEADER => $headers,
  CURLOPT_POSTFIELDS => $content
];
$ch = curl_init();
curl_setopt_array($ch, $options);
$response = curl_exec($ch);
curl_close($ch);
```
nodebrewでバージョン指定してもバージョンが変わらない

バイトのときに少し触って以来久々にNode.jsを触る機会があり，Node.jsのバージョンアップから始めた．
# 状況
nodebrewを使わずにnodeを使っていたので，nodebrewをインストールして始めようとしたが，
```zsh
nodebrew install-binary v18.12.1 
```
でインストールして
```zsh
nodebrew use v18.12.1
```
でバージョン選択しても
```zsh
node -v 
```
```zsh
v18.10.0
```
となり，バージョンが変わらない．
```zsh
export PATH="$PATH:/Users/~~~ユーザー名~~~/.nodebrew/node/v18.12.1/bin"
```
としてパスを通しても変わらない．

# 解決
```zsh
brew list
```
を見ると，homebrewでnodeをインストールしていたため，
```zsh
brew uninstall node
```
でbrewで入れたnodeをアンインストール．
```zsh
which node
```
nodeの場所を聞くと
```zsh
/Users/~~~ユーザー名~~~/.nodebrew/node/v18.12.1/bin/node
```
お，いけてそう．
```zsh
v18.12.1
```
いけた！
Chromeを拡張する「Chrome Extention」を組織ドメインへ公開しよう

# 目的
Chrome Extentionを、Google Workspaceの組織内に公開する

# TL;DR
- Google Workspaceを企業で利用している人向け
- 社員に向けてオリジナルのExtentionを公開することが出来ます。
- GWSのChrome管理機能を使えば強制的に配布したりすることも出来ます
- 開発の仕方は一般的なChromeExtentionと同じです。
- 500円握りしめてから読みましょう（1回限り）　※クレジットカード必要

# Chrome Extentionの公開までの流れ

自分で使うだけでなく、作成したExtentionを公開してみたいという人も多いと思います。あまりChrome Extentionを公開するというニーズは少ないのか登録料の問題かあまり記事はないようなで紹介をします。ここではGWSのドメイン限定の利用方法となります

## Developer 登録

https://chrome.google.com/webstore/devconsole/register
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11540/358e653a-ff46-b905-bf20-f7e6f1c3181c.png)

支払いをクリックするとカードの登録から購入処理を行うことが出来ます。

![貼り付けた画像_2022_12_01_20_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11540/13966b8a-8ba0-e5ee-6a0f-a62c5abb7f2b.png)

登録が完了すると「Developer Dashboard」にアクセスすることが出来ます。
EEA関連の質問事項が出てきます、ここでは試験用のアカウントなので下の方を選択します（適宜皆様の環境に合わせて下さい）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11540/7d8c9181-12fe-c1f5-5d71-8c1b2e867cb3.png)

Developer Dashboardから、アプリを申請を行うことが出来ます。また公開に際してのオプションなどがあります。

![貼り付けた画像_2022_12_01_21_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11540/6d391baf-684e-3e59-8dd0-76cde485f1fa.png)

* アカウントの設定で、「連絡先メールアドレス」を登録しておく
* アップロードするアカウントは2要素認証を設定しておく

## Google Workspace側の設定

Google Workspaceの管理コンソールにアクセスします（ https://admin.google.com/ac/chrome/apps/user/settings )
デバイス→Chrome→アプリと拡張機能→ユーザとブラウザ

![貼り付けた画像_2022_12_01_21_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11540/aee7e0ec-4f64-2ac3-d5a2-b27ea5ac5006.png)

この設定を行うことで、限定公開を行うことが出来るようになります。

（以下はDeveloper Dashboard側での確認）

ビルド→決済と配布地域→公開設定のなかで、「非公開」の項目に限定公開のオプションが追加されます

![貼り付けた画像_2022_12_01_21_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11540/71fd40de-ae96-94ee-d72c-f9227e8b4933.png)

## 拡張を公開する

組織での限定公開では諸々のパラメータがなくても審査に出すことが出来ます。（審査自体をスキップすることは出来ません）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11540/c9ba2edf-7430-b945-6d66-c3f9c2327eb9.png)

* 最低限、アイコン(128x128)は必要

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11540/abcca4a5-00f5-2f79-3efc-90831c43ffc2.png)

12時間程度待つと公開がされます。

![貼り付けた画像_2022_12_02_14_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11540/4a963c01-5fb3-dfd9-2579-113cd30e3bb9.png)

* ID:で記載された内容をコピーします

公開されたら、GWSのAdminコンソールから先程のIDを利用してChromeアプリを追加します。

![貼り付けた画像_2022_12_02_14_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/11540/4cf5dc89-c39b-9bdf-8676-3f1729cc3391.png)

* これで組織のユーザには自動的にインストールさせるなどが選択をすることが出来ます。


# まとめ

企業内でChrome拡張で限定した使いたい場合にはこのような機能を利用することで実現することが出来ます。自分たちの利用方法に特化したツールなどを全員で簡単に共有することが出来るためアイディア次第で仕事の効率化などに貢献できる機能ではないかと思います。

* 500円を支払うアカウントは、個人アカウントではなく別のアカウントで作りましょう（苦笑）
* Developer Dashboardの「アカウント」の設定の中に「グループ投稿のメンバー」という項目がありGoogleグループ外指定出来ます。この設定で、複数のデベロッパーが同じ投稿者アカウントにアクセスできるようになります。
laravel ルートネームに紐づくルーティング情報があるか判定する

:::note info
この記事は[miriwoお一人様 Advent Calendar 2022](https://qiita.com/advent-calendar/2022/miriwo)の1日目の記事です
:::

# 概要

- ルートネームに紐づくルーティング情報が存在するかを確認する方法をまとめる。

# 方法

- `Route::has()`を用いる。
- 下記の様に記載するで紐づくルーティング情報が存在すればtrueを、存在しない場合falseを返す。

    ```php
    use Illuminate\Support\Facades\Route;

    Route::has('ルートネーム')
    ```

- ルートネームに紐づくルーティング情報がなかった時にエラーを投げるような処理に使える。

    ```php
    use Illuminate\Support\Facades\Route;

    if (!Route::has('ルートネーム')) {
        //エラー投げる処理
    }
    ```

# 余談

- 上記の方法を知るまで、`route()`関数を使おうと思っていた。
- `route()`関数は存在しないルートネームを引数に指定した場合、`Symfony\Component\Routing\Exception\RouteNotFoundException`を返す。これをtryCatch文で検知しようと思っていた。

    ```
    Symfony\Component\Routing\Exception\RouteNotFoundException with message 'Route [ルートネーム] not defined.'
    ```
- しかし`route()`関数は引数のルートネームに紐づくルーティングにパスパラメーターが含まれていた場合、第二引数で配列で渡してあげないとURLを生成できない。
- ルートネームに紐づくルーティングがあったとしてもパスパラメーターが含まれるルーティング情報の場合、引数をわたさないと`Symfony\Component\Routing\Exception\RouteNotFoundException`を返すのでちょっと面倒

# 謝辞

- 本内容は弊社の先輩エンジニアさんに教えていただきました。本当にありがとうございます！
- 自身で日本語で検索した時は全然ヒットしなかった旨を先輩に伝えたところ「英語で検索したほうが情報量多いよ。今回だと`laravel route name exist check`とか！単語並べるだけでもヒットするよ！」と教えていただきました！本当にありがとうございます！

# 参考文献

https://laravel.com/api/7.x/Illuminate/Routing/Router.html#method_has

https://laracasts.com/discuss/channels/general-discussion/check-if-a-route-or-route-name-exist-in-laravel-7

https://laracasts.com/discuss/channels/laravel/route-name-exists
CpawCTF Writeup Level 2 Q20.[Crypto]Block Cipher (注意<spoiler>)

# Q20.[Crypto]Block Cipher
```
与えられたC言語のソースコードを読み解いて復号してフラグを手にれましょう。

暗号文：cpaw{ruoYced_ehpigniriks_i_llrg_stae}

crypto100.c
```

```:crypto100.c
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
int main(int argc, char* argv[]){
  int i;
  int j;
  int key = atoi(argv[2]);
  const char* flag = argv[1];
  printf("cpaw{");
  for(i = key - 1; i <= strlen(flag); i+=key) for(j = i; j>= i - key + 1; j--) printf("%c", flag[j]);
  printf("}");
  return 0;
}
```
引数に文字列と整数が与えられて文字列の長さ分の文字の順番の何かしらの操作が行われる
文字は暗号文：cpaw{ruoYced_ehpigniriks_i_llrg_stae}として良さそう。
整数はkeyとiとjのループ文から見て4が良さそう。
とりあえず1から与えて実行する。

```
>a.exe ruoYced_ehpigniriks_i_llrg_staeae 1
cpaw{ruoYced_ehpigniriks_i_llrg_staeae}
>a.exe ruoYced_ehpigniriks_i_llrg_staeae 2
cpaw{urYoec_dheipngriki_s_illgrs_ataee}
>a.exe ruoYced_ehpigniriks_i_llrg_staeae 3
cpaw{ourecYe_diphingkiri_sll__gratseae}
>a.exe ruoYced_ehpigniriks_i_llrg_staeae 4
cpaw{Your_deciphering_skill_is_graeat}
```

cpaw{Your_deciphering_skill_is_great}
Conv1Dレイヤーを使うとJupyterカーネルがクラッシュする時の対応

VS Code内のJupyterカーネル(GPU環境)で学習をしようとしたらカーネルごとクラッシュしたのでその対応です。

# 環境
+ OS : Windows10
+ GPU : GeForce RTX 2070 SUPER
+ Tensorflow 2.10.1 (GPU)
+ CUDA v11.8

# エラー箇所
エラーが出るまで削ったモデル
```python
model = Sequential()
model.add(Conv1D( #<---こいつがあるとクラッシュする
            filters=6,
            kernel_size= 5,
            padding='same'
        ))

model.add(Flatten())
model.add(Dense(1))
model.add(Activation("sigmoid"))
```
コンパイルしてmodel.fitを呼ぶとカーネルごとクラッシュします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/515818/4ee17f87-dc1c-e69e-c0e3-1d933d1689b1.png)
```
Canceled future for execute_request message before replies were done
```

# 原因
dllが足りてないようです。
+ 似たような問題
    + https://github.com/tensorflow/tensorflow/issues/54456
    + https://stackoverflow.com/questions/72356588/could-not-locate-zlibwapi-dll-please-make-sure-it-is-in-your-library-path
# 解決方法
zlibwapi.dllを入手して配置します。
次の記事の「zlibwapi.dllのインストール」項目の指示に従ってください。
+ [Win10で深層学習の環境を整える](http://hara-jp.com/_default/ja/Memo/Cuda_Win10.html)
Android UnitTestでR.stringのテストを劇的に見やすくする

# 概要

Android で普通の Unit Test (Android Test/Instrument Test じゃない方のテスト) で R.string.xxx についての Assert を実行すると下記のような謎の数値のエラーになっちゃうんですよね。

```kotlin:テストコード
val actual = hoge.getTextId()
assertEquals(R.string.xxx, actual)
```

出力されるエラー:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/29899/8ea79e11-6778-a335-43b7-8f1ca14a5655.png)

こうだしたいですよね:
```
expected:<R.string.xxx> but was:<R.string.yyy>
Expected:R.string.xxx
Actual  :R.string.yyy
<Click to see difference>

java.jang ... (以下略)
```

ですが、AndroidTest でないと Resource にアクセスできないし、そもそもリソースのキー名は取れないし、ググっても方法見つからないし、難しい壁が立ちはだかってます。

ですが、方法あったんですね。
`Reflection` で `R.string` 解析してしまえばいいんです。
具体的に説明します。


# 用意するクラス

```kotlin:TestBase.kt
import kotlin.reflect.*

abstract class TestBase {

    fun assertResStringEquals(expected: Int, actual: Int) {
        assertEquals(getResStringName(expected), getResStringName(actual))
    }

    companion object {
        fun getResStringName(id: Int): String {
            return resStringId2Name[id] ?: "$id"
        }

        private val resStringId2Name: Map<Int, String> = R.string::class.members
            .filter { it.parameters.isEmpty() && it.visibility == KVisibility.PUBLIC }
            .associate {
                val name = it.name
                val id = it.call() as Int
                id to "R.string.$name"
            }
    }
}
```

これだけです。


# テストクラス

実際のテストではこのように使います。

```kotlin:HogeTest.kt
class HogeTest : TestBase() {
    @Test
    fun hoge() {
        val actual = hoge.getTextId()
        assertResStringEquals(R.string.xxx, actual)  // ここを変えただけ
    }
}
```

これで理想通りにキーをベースにエラー出力されます！
簡単ですね！
プログラミング学習を学ぶ前に知っておきたいこと~目的編~

![_c_chojudaB0023_s512_chojudaB0023_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/ac237196-0365-4a6e-e7c0-d64e23e14801.png)
出典元：[ダ鳥獣戯画](https://chojugiga.com/2016/11/03/da1chojudab0023/)より

## 初めに
この記事は**プログラミング学習を学ぶ前に知っておきたいこと**と題したシリーズの一つです。
このシリーズは各テーマごとに連日投稿予定です。
## このシリーズ記事の対象者
- プログラミングに興味を持って、学習を検討している方
- 学習したいけど、何から手をつけたらいいのかわからない方
## 学習開始前の心得
### 安易に課金しない
プログラミングスクールに通う方で見られるのが、
「これだけお金を払ったんだから必ず稼げるようになる」
「教えてもらったことだけやれば仕事ができるようになる」
という認識です。
まず必ず稼げるという保証も、最低限これだけやっとけば仕事にありつけるという保証はありません。
(スクールの広告にも**必ず**という文字は入っているところは無いはずです…)

プログラミングスクールに向いている方は
- １人で学習の継続をする自信がない(けど学習をしたい、継続できるような人になりたい)
- 定期的に質問して解答してくれる場所(人)が欲しい
といった感じです。

正直なところ、無料で学べる場所はたくさんあるのに、安易な理由でお金を払うのは非常にもったいないと思っています。
まずは手軽に学べるところから初めて、そこから自分にあった学習方法に課金していくのがベストかなと思います。
※無料で学べるサイトなどは後の記事でご紹介します！

### そもそもなんのために学習するのかを明確にする
実際の学習する目的とは別に、人に聞かれた時に答えられるような理由を考えておきましょう。
こういうきっかけでアプリを作ってみたい、Webサイトを作成してみたいと思った、のような程度で構いません。
特にプログラミングとは全く関連の無い職から転職を考えている方は、面接で必ず聞かれますので必須です。

### つくりたいのはWebアプリケーション？スマホアプリケーション？それともゲーム？
![languages](https://gowithcode.com/wp-content/uploads/2021/04/top-programming-languages.jpg)
出典元：[GO WITH CODE](https://gowithcode.com/top-programming-languages)より

上記３つはよく一緒にされがちですが、必要とされる言語や環境が異なります。
初心者がいきなり同時に学ぶのは無理があるので、どれか一つに絞りましょう。
参考までに難易度や必要とされるPCのスペックは

**Webアプリケーション < スマホアプリケーション < ゲーム**

の順になります。

### 最後に
短い記事でしたが最後まで見ていただきありがとうございました。

明日は基礎知識編を投稿予定です。
Webエンジニアへの道 -青春時代編-

# なんで書こうと思ったか

[デフエンジニアの会のアドベントカレンダー](https://qiita.com/advent-calendar/2022/deafengineers)ということと、私自身が入って間もないこともあり、
自己紹介的な意味も込めて、また、Webエンジニアを志してる人に参考になれば、ということで書いています。

以下、砕けた感じで書きます。

# 全ての始まり
初めてHP、いや、初めてPCというのを見たのは、私が高校生の時。
僕の叔父の家に遊びに行ってそこにあったパソコンを見て、どんなやつなんやろ？と触ってみたのがきっかけ。
その時はパソコンっておもろいなと思っただけども。
多分親がそれみて、大学合格を機に私にパソコン買ってくれた、、、と思う。（うろ覚え）

# 大学時代

工学部とか行ってないです。（そもそもWebデザインって工学部だっけ。。。？）
数学とか物理とかが苦手でとても理系とか無理だった。
結局は文系の大学に行った。

そこで手話サークルに入って、初めて手話を覚えた。
先輩が手話サークルのHPを運営していたので、
非公式だけど（先輩たちも知ってたはずなので半ば公認？）HPに
興味を持って自分でサークル活動に関するHPを作った。
当時はやっていたアレ、テーブルレイアウトで組んでました。
今の若者はテーブルレイアウトって知ってるんだろうか？　いや知るまい。
知りたかったらググってください。

当時は掲示板が盛り上がっていたのもあって、Perlに興味を持ってたけど結局やらず汗
今考えると勿体無いことをしたと思う。
今思い出したけど、C言語とかも触りだけかじってたなぁ。
何に使えるか全くわからんくて挫折したけど。

そういえばこの時期、CSSなるものをやってみたんだけど、
確かfloatでテーブルレイアウトと同じように組めなかったもんで諦めたのを覚えている。
この時はHTMLとテーブルレイアウトだけを身につけた気がする。

手話サークルだけでなくて他にも要約筆記の啓発のためにHPを別に作ったり、
大学以外の手話サークルにも参加してそこのスタッフになってHPを作ったり
ガンガンHPを作って発信してたなぁ。

※要約筆記・・・その場で話されていることを文字情報にして伝えるサポート法。ペンで書く方法とパソコンで書く方法がある。要約筆記でググってみてください。

もちろん自分のHPも作っていた。
その時はイタイなぁと思うけど、詩を書いて載せてた。
友達の中で詩を書いてる人が身近にいてHPに載せてたので、
それをみて私も書きたいなと思ったのかな。忘れたけど。
そういえばパソコンにデータ残ってるわw
公開するつもりはないけど。

当時使ってたのは、確かYahooジオシティーズ。知ってる人いるかな？

そういえばこの時代、ミクシィってのも流行ってたんだよなぁ。懐かしい。
アカウントまだ残ってんのかな？

# 大学院時代

この時に、[手話エンターテイメント発信団oioi](https://www.oioi-sign.com/)という団体に入った。
この時にHPも作って、この時に初めてCSSにはっきり取り組んだ。
研究の合間に色々やってなんとかHPができた時は感動した。

この時にモバイルサイト（携帯用のサイト）も作ることも考えたんだけど、
時間がなかったりもして諦めた記憶がある。
この時はレスボンシブWebデザインはまだなかった。
（初めて出たのは2010年）

# 会社に入るまで

就職活動は一応、Webデザイナーで探してたんだけど、デザインができなかったので、
（今もできないけどw）　Webエンジニアで今の会社に内定が決まった。
まさか、会社に入って違うことをやると思わなかったけど。
その話は次の記事で。

# 振り返ってみて
学生時代を振り返ってみて、思うことは、自分の思いや考えを伝えるツールとして、はたまた、
みんなの思い出を共有して振り返るツールとしてHPを運用してたんだなぁと思った。
でもこういう思いがHPを作る原動力になったことは間違いないです。

多分この思いが、今、回り回って、デフエンジニアの会でも言ってますけど、
人のために役立つアプリだったり、ツールを作ってみたいなという思いに
繋がっているのだと思っています。
現に作ってみたいアプリだったりHPだったりがいくつか頭の中に隠されてます（笑）

何が言いたいかっていうと、ただ、Webエンジニアになりたい、ってだけじゃなくて、
プログラムを使って何をしたいか？というのを強くイメージすることが大事なんじゃないかなという
ことです。
そうじゃないと続かないから。挫折するので。

だから皆さんもぜひ、プログラムを使って何をしたいか、イメージしてみてそれに向かって
プログラミングしていきましょう！

私も頑張ります〜！

次は会社編に続きます！
KPTがうまくいかないのでFDLにふりかえりのスタイルを変えてみた話

## はじめに

こんにちは。[PharmaX株式会社](https://www.pharma-x.co.jp/)エンジニアの古家です。
この記事はPharmaXアドベントカレンダー2022の2日目の記事になります。

https://qiita.com/advent-calendar/2022/pharma-x

1日目は薬剤師エンジニアである加藤の[電子処方箋の仕組みについて](https://note.com/pharmax/n/nef4c4b8713e7)でしたが、今回は薬剤師ネタではなく、弊社開発チームの取り組みについて書いていきたいと思います。

## 背景

今まで週に1回、KPTでふりかえりを行っていましたが、以下のような課題がありました。

- KeepよりもProblemが沢山でる
- Problemの深掘りの議論に時間がかかり、Tryに繋がる改善は週に1-2個
- 改善できないProblemが溜まっていき、チームの雰囲気が悪くなる
- 議論が少なく、特定の人しか話していない

段々と出されるアイデアの数がProblemもKeepも少なくなるという悪循環になってしまっており、やり方を変えたいと感じていました。

## ふりかえりとは

仕事が一段落したあとにチームメンバーで集まり、チームのやり方やチームワークについて点検し、改善するための特別なミーティングのことです。

レトロスペクティブ（ふりかえり）はアジャイル開発手法の一つであるスクラムでは、イベントの中の一つとして定義されています。

[スクラムガイド](https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Japanese.pdf)には以下のように定義されています。

- 個⼈、相互作⽤、プロセス、ツール、完成の定義に関して、今回のスプリントがどのように進んだかを検査する
- スプリント中に何がうまくいったか、どのような問題が発⽣したか、そしてそれらの問題がどのように解決されたか（または解決されなかったか）について話し合う
- ⾃分たちの効果を改善するために最も役⽴つ変更を特定する。最も影響の⼤きな改善は、できるだけ早く対処する。次のスプリントのスプリントバックログに追加することもできる

ただスクラムガイドの定義だと「プロセスや問題を改善する」方向に意識が向きがちだなと感じていました。

色々調べていく中で[アジャイルなチームをつくる ふりかえりガイドブック](https://www.amazon.co.jp/dp/4798168793?tag=searticle1-22)の著者である森一樹さんが提唱している「ふりかえりの3つの目的、3ステップ」が一番しっくりきたので、ふりかえりの目的としてはこちらを参考にさせて頂くことにしました。
[https://qiita.com/viva_tweet_x/items/262f89c7d23793c5cf3e](https://qiita.com/viva_tweet_x/items/262f89c7d23793c5cf3e)

ふりかえりの利用範囲はアジャイル開発には限定されず、ソフトウェア開発でなくても使うことができます。

## FDL（ファン・ダン・ラーン）とは

Fun・Done・Learnの略で、2018年に行われた[Scrum Coaches Retreat in Okinawa](https://www.scrumalliance.org/events/coaching)に集まったアジャイルコーチたちが作ったアクティビティです。

[安井力さん](https://qiita.com/yattom/items/90ac533d993d3a2d2d0f)のQiita記事に概要が記載されていますので、まずはこちらをご覧ください。

ひと目みて「楽しさ」にフォーカスしている点に魅力を感じ、KPTから乗り換えてみることにしました。始める前にFDLが良いなと個人的に思ったのは以下の3点です。

- 楽しかったことをシェアすることで前向きにふりかえりを始めやすそう
- 学びをシェアすることで成長したという実感が得られそう
- 前向きに考えられるのでアイデアが出やすく、データを収集しやすそう

## FDLを取り入れたふりかえりのやり方

まだやり方は改善中ですが、振り返りは以下のタイムスケジュールで取り組んでいます。

- Figjam に各自で付箋に書き出してみる時間 10分
- 書き出した付箋を分類しながらトークしていく時間 25分
- 次のスプリントではどの領域を狙いたいかを話す 5分
- その領域の付箋を増やすためのNext Actionを話す 5分
- ふりかえりのふりかえり 15分

ツールにはFigJamを使っており、ふりかえりのふりかえりはシックスハット法で行っています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33823/b3abd7d6-42ca-cfb4-6e8f-dedb2317b6bf.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33823/033d2892-5a09-190c-feaa-6696de244d95.png)

## 実際やってみて

KPTを使っていた頃に比べると、アイデアが沢山でるようになったと感じています。また、Fun・Done・Learnという枠組みは出来事ベースで書いていくことができるので、意外とこんなことまでできていたんだなと成長を実感することができており、ふりかえり自体がとても楽しくなりました。

## 今後の課題

Fun・Done・Learnは場作りやデータ収集のアクティビティとしては優秀なことは分かったものの、そこからのアイデア出しとアクション決定するための流れがまだ上手くできていません。

ふりかえり自体もやることでブラッシュアップするものだと思いますので、この課題についてカイゼンできたらまた記事にして紹介したいと思います。
個人的な新しいプログラミング言語に取り組むときの学習方法

# はじめに

新しくプログラミング言語を学ぶときに使用している型みたいなもので
筆者が現状このように学習を進めている、すすめていったら良いかなと思っているものです。

今回はGo言語について話していますがGoでなくともこのように学習をすすめたら
実務に入りやすいかなと思う方法を記述しております。

実務でスクリプト言語を扱うことが多いのですが
コンパイラ言語も使いたい、ということで人気のあるGo言語の基礎の部分を触ってみました！

まずは触ってみるのが一番ということで
他言語との違いだったりGo言語ならではの仕組みだったりを確かめながら実際に触ってみると
理解が深まると個人的には思います。

記事の流れはおすすめ記事 → ロードマップというようになっておりますので
気になるところからお読みいただけたら幸いです。

# 対象読者

こちらの記事はGo言語について深く触れるものではなく、
Go言語を触ってみたいけど何からはじめていいかわからないという方や
他の言語でも学習方法に困っている方におすすめな記事です。


# 目次
- [はじめに](#はじめに)
- [対象読者](#対象読者)
- [目次](#目次)
- [おすすめ学習サイト](#おすすめ学習サイト)
- [ロードマップ](#ロードマップ)
- [まとめ](#まとめ)
- [参考文献](#参考文献)

# おすすめ学習サイト

書籍とか動画とかで学習をすすめてもよかったのですが
まずはどのようなものか知りたい、他の言語との違いを確かめながら学習をしたかったので
[とほほのGo言語入門](https://www.tohoho-web.com/ex/golang.html)でGo言語について知るところからはじめました。

こちらの記事ですが、非常にわかりやすくまとめられているのでおすすめです！

実際に動かしながらやりたいという方はPCやDockerなどで環境を用意して動かしてもいいのですが
もっとかんたんに[The Go Playground](https://go.dev/play/)で触ってみると良いかもしれません。


# ロードマップ

1. [とほほのGo言語入門](https://www.tohoho-web.com/ex/golang.html)を触ってみる
    1. こちらではなくてもGo言語とは〇〇というような記事だったり、Go言語と他プログラミング言語との違いは？など検索したらたくさん記事は出てくるかと思います。
    1. お好みでの学習で良いかと思いますが、自分は手を動かしながらGo言語を触りたかったでとほほのGo言語入門からはじめました。
1. Udemyなどの動画教材やTechpitなどのWebで学べる教材、Youtubeや公式チュートリアルでWebアプリを作成してみる
    1. 実際に自分が手を動かしながら構築することで理解が深まる。
    1. 教材などは自分に合うものを選ぶ。(Webアプリを作成できるもので評価の高いものであれば問題ないかと思います。)
1. 教材などで作成したもの以外で何か作成してみる
    1. 教材の内容をなぞってやるだけではなく自分で設計してやってみることで身になる。
1. 書籍を購入しさらに現場レベルでの実践的な使い方を学ぶ
    1. 書いたコードをさらに実践レベルにもっていくために書籍で補完し、自分の書いたコードを見直してみる。
1. 実務で使用する

# まとめ

ロードマップとか書いていますが
筆者はまだロードマップの1番を終了しこれから2番目に入るところです。

いつも学習するときはこのような感じ（1→5というパターンも往々にしてありますが）なので
今回もこのように進めて行きたいと思います。

また、自分が使用してみてよかったなと思うものはまたご紹介させてください。


最後まで読んでいただきありがとうございました！


# 参考文献

- [とほほのGo言語入門](https://www.tohoho-web.com/ex/golang.html)
RealmSwiftでエラー：Thread 1: Fatal error: ‘try!’ expression unexpectedly raised an error: Error Domain=io.realm Code=10 “Migration is required due to the following errors:

# 前提
Realmでデータ構成を書き換えたら、下記のエラーが発生。
![スクリーンショット 2022-12-01 20.44.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778525/3538f765-f2df-febd-3fe8-331b7dfa3e8f.png)

# エラー内容
Realmのデータ構成を書き換えたらマイグレーションという処理をしなければならないよ。
という内容のエラーになります

ですが、アプリリリース前の場合は簡単に対応可能です。

アプリリリースしている場合には、マイグレーション処理が必要となる
↓

https://qiita.com/airy_flutter/items/218c900a5d4214a6bde1

https://exgyaruo.com/programming/realm/realmswift-%E3%81%A7%E3%83%9E%E3%82%A4%E3%82%B0%E3%83%AC%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%87%A6%E7%90%86%E3%82%92%E3%81%99%E3%82%8B

# 対処方法
## 1.ホーム画面に戻る
![スクリーンショット 2022-12-01 20.56.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778525/fd5fc054-53db-7a7c-921f-903a95b3feaf.png)

## 2.アプリを削除
![スクリーンショット 2022-12-01 20.58.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778525/dffc5719-2676-84ac-ff33-83002492e6da.png)


## 3.Xcodeに戻り再起動する
![スクリーンショット 2022-12-01 21.03.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778525/74adcf30-0601-cc2e-25f0-99fce819bf5a.png)

# まとめ
アプリリリースしている場合はマイグレーション処理が必要となりますが、
リリース前段階で、上記のエラーが出た場合には簡単に対処可能です。
CpawCTF Writeup Level 2 Q19.[Misc]Image! (注意<spoiler>)

# Q19.[Misc]Image!
```
Find the flag in this zip file.
file
```

とりあえず解凍してみる

```
>unzip misc100.zip
Archive:  misc100.zip
 extracting: mimetype
 extracting: Thumbnails/thumbnail.png
  inflating: meta.xml
  inflating: settings.xml
  inflating: content.xml
  inflating: styles.xml
   creating: Configurations2/popupmenu/
   creating: Configurations2/statusbar/
   creating: Configurations2/menubar/
   creating: Configurations2/toolbar/
   creating: Configurations2/floater/
  inflating: Configurations2/accelerator/current.xml
   creating: Configurations2/toolpanel/
   creating: Configurations2/progressbar/
   creating: Configurations2/images/Bitmaps/
  inflating: META-INF/manifest.xml

```

ファイルの構成から見てodgファイルぽい。他としては
```
>cat mimetype
application/vnd.oasis.opendocument.graphics
```
とか中にpngがあるが、フラグが隠されている。

https://ja.wikipedia.org/wiki/OpenDocument

wordでzipファイルがそのまま開くことができフラグがある。

cpaw{It_is_fun__isn't_it?}