OmniAICreator/Qiita-1.07M huggingface dataset:
Terra Academy で公開されているチュートリアルでTerra + Cosmwasm で dApp を構成する

## 概要

今年色々あったTerraチェーン上でスマートコントラクトを構築してみたかったので、
Terra Academy で公開されているチュートリアルを追ってみました。
今回は追ってみるのは２回目なのですが、１回目の時はスマートコントラクトへの理解すらなかったため、
今ならもっと良くやっていることを理解できるのではないかと考えています。

具体的には、`Solidity` や　`Solana`で開発を行った経験が加わったので、
`Terra`におけるこのツールやコマンドは、ああ、これに対応するのね、みたいなのが分かればいいなと思っています。

チュートリアルを追って、つまづきやすいところなどに言及したりしつつ、
最終的にはdAppを構成することを目標にします。

今回は手順とそれらの`Solidity`との対応などをみようと思います。
別記事でプログラムの詳細についても見て詳細を書こうかと思っています。

## ドキュメント

https://docs.terra.money/

## Terrain でスマートコントラクトの雛形作成

`Terrain`はスマートコントラクトをビルドしたり、デプロイしたりできる開発ツールであり、
`Solidity`では`Truffle`みたいなイメージで大丈夫だと思います。

ただ、チュートリアルに沿って

```
terrain new my_terra_dapp
```
でプロジェクトを生成した際に、このレポジトリにはフロントエンドのコードも含まれることに気づきました。その意味でもっとオールインなツールだなと感じました。




## LocalTerra

`Local`で`Terra chain`を走らせるためのツール（というかDockerサービス）です。
`Solidity` の時は`Ganache`を使いましたね。
`LocalTerra`にも同じように開発用のウォレットが１０個プレインストールされています。

詳細はこちら。

https://docs.terra.money/develop/localterra/accounts/


インストールは`github`経由で行います。

```bash
git clone https://github.com/terra-project/localterra
cd
docker-compose up
```


## Terrain でスマートコントラクトのビルドとデプロイ

ワンコマンドで`Terrain`を用いてスマートコントラクトを先ほどの`LocalTerra`にデプロイすることができます。

```
cd my_terra_dapp/
terrain deploy my_terra_dapp
```

デプロイした後は、`terrain console`を用いて、cli からスマートコントラクトのAPIにアクセスすることも可能です。

![Screen Shot 2022-12-02 at 13.57.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/9b3e5e33-0c19-6548-f9da-861badc1111e.png)



## フロントエンドコードと組み合わせる

chrome extension の`terra station`を用いることで、
フロントエンドからスマートコントラクトを操作するデモアプリを使用することができます。


```
cd frontend
npm start
```

ここで、ウォレットは`LocalTerra`にあらかじめ登録されているものをインポートするので、以下のneumonic を使用します。

```
satisfy adjust timber high purchase tuition stool faith fine install that you unaware feed domain license impose boss human eager hat rent enjoy dawn
```

![Screen Shot 2022-12-02 at 14.06.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/0f9b5b5f-97e3-34ea-3b5b-85c06e67f881.png)

既存のウォレットをインポートして、ネットワークを`Local Terra`に変更して接続すると、
ご覧のようにプリセットされた開発用Lunaが入っていることが確認できます。

`increment`関数を実行すると、
![Screen Shot 2022-12-02 at 14.06.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/af55daab-37d8-1063-9b69-e317f8cf9b6b.png)


以下のようにカウントが更新されていることが確認できました。

![Screen Shot 2022-12-02 at 14.07.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/fdecc172-3d14-9338-acfa-6150fd3ff64f.png)

これで公式の　`Terarin` + `LocalTerra` のチュートリアルは完了となります。
お疲れ様でした。


## まとめ

今回は、`Terra Academy`および`Terra Docs`で公開されている
公式のチュートリアルに沿って、`LocalTerra`によりローカルに擬似的に生成したチェーン上にスマートコントラクトをデプロイし、実際にエンドポイントのAPIを`cli`, `フロントエンド` から呼ぶところまで実行してみました。

一度`Solidity`や`Solana`などでウェブ３アプリの開発経験があれば、すんなりとチュートリアルは実行できたのではないでしょうか、
次の記事では実際のスマートコントラクトを構成するプログラムおよび、クライアントコードの中身についてもみていけたらなと思います。




今回はこの辺で。

@kenmaro
日本語対応したStableDiffusionとか気になったモデルを試してみたかった

## 概要

最近気になっていたモデルを三つ試してみたというだけの記事を書きます。


## 試したもの３つ

- 日本語対応のStable Diffusion
- Microsoft Office 365 のwordの議事録機能
- Text to Pokemon生成AI



## 日本語対応のStable Diffusion

こちらにプレスリリースが載っていたので試してみました。

https://prtimes.jp/main/html/rd/p/000000035.000070041.html

Huggingface に使い方が載っています。
ただし、チュートリアルどおりに進めると、小さなバグがあったため、Github のissue をみて解決しました。


https://huggingface.co/rinna/japanese-stable-diffusion

https://github.com/rinnakk/japanese-stable-diffusion/issues/7


Google Colab で試した結果が下の通りです。

![Screen Shot 2022-12-01 at 20.57.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/2fd104e1-be7c-a73d-da98-6c3889a51691.png)

結構色々遊べそうですね、、！


## Microsoft Office 365 のwordの議事録機能

議事録を簡単にとってくれるサービスにはどんなものがあるのだろうと思っていたのですが、
いくつか試した中ではOffice 365 のword が一番優秀でした。


ブラウザ版のwordの、Dictateのセクションから、Japaneseを選択してマイクのボタンを押すと、
音声をwordファイルに書き出してくれます。

![Screen Shot 2022-12-01 at 21.49.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/31a20664-3dc1-5335-c95c-ad98ee044552.png)

雑談した結果がこれ。そこそこいいですが、惜しいなという感じです。
しかしながら、他のサービスはこれにも満たないくらい残念な結果だったので、Microsoftはやはりすごいなと思います。


```
まあちょっと今行けるかわからんけどまあけっこう声が大きければ割とちゃんと取ってくれるっていう感じ結構すごいですよ。
でなんかこれをそのままえっと捨てボディビジョンに入れたらどうなるんだろうっていう王の考えてそれはもうなんか実はあるものの安芸合わせで出来るんじゃないと思ったけどまあまあまあムズイっていう。
なんかその単語やったらいいけどこれ文章をなんかあんだけ長いやつを煎じぐらい一気にばんって入れたら全然できんくてやっぱ無理なんや。

これやっぱ句読点は出てこないよね。
丸入れるのももしかしたらできたかもしれ。
ああ、なんかちょっと微妙か？廣瀬家。いやね、これすごいのがその言語を結構選べるっていうのが、映画だったらもっと多分。
ああ。でなんかこれで思ったのが、その。自分が座っているところで自分が喋ると多分結構音拾ってきちんといいんやけど、
なんかあっちでしゃべってる人が喋ると多分制度いけないパンしてだからなんか。
人による。人によって、場所のその。マイクとかが多分一番いいかなっていう。結構いいよ。 
```

## Text to Pokemon生成AI

最後に、

https://replicate.com/

を眺めて面白そうだった、テキストからポケモンを生成するモデルで遊んでみました。

https://replicate.com/lambdal/text-to-pokemon

結構面白かったので遊びたい方はぜひみてみてください。



## まとめ

今回は気になったSaaS型のAIでいろいろ試してみただけの記事になってしまいましたが、
ほんとうにいろんなモデルが無料である程度使える世の中になっていて、
AIモデルを学習したり、自分で作るという目的ではなく、使い倒す、という観点で言うと
本当にたくさんのことができるということを実感しました。

最先端のモデルが膨大な量のデータを捌いているのを目の当たりにして、これからどんな世の中になるんだろう、
というふうに考えた１日でした。



今回はこの辺で。


@kenmaro
Solidity + Nextjs で送金サービスを構築する（スマートコントラクトコードまとめ）

## 概要

前回の記事で、

`Solidity + Truffle + Ganache + Nextjs`の構成でWeb３アプリ構築を行う際の手順を記事にしました。

その時はバックエンドとなる`Solidity`のプログラム自体には言及しなかったので、今回少しだけ言及しようと思います。


## Solidity のスマートコントラクト

`Truffle`を用いて`Truffle init`すると、

- contracts
- migrations
- test
- truffle-config.js

が生成されます。

https://github.com/kenmaro3/solidity-venmo/tree/main/smart_contract

このうち、実際のスマートコントラクトのロジックが書かれるのは、

`contracts`フォルダの中です。


https://github.com/kenmaro3/solidity-venmo/blob/main/smart_contract/contracts/Transactions.sol

こちらのファイルを少しだけ今回は解説します。

```solidity
// SPDX-License-Identifier: UNLICENSED

pragma solidity ^0.8.15;

```

この最初の宣言はテンプレートとして考えて良いでしょう。
ライセンスに関する記述と、`Solidity`のバージョンをpragma によって指定します。



```solidity

contract Transactions {
    uint256 transactionCount;

    event Transfer(address from, address receiver, uint amount, string message, uint256 timestamp);

    struct TransferStruct {
        address sender;
        address receiver;
        uint amount;
        string message;
        uint256 timestamp;

    }

```

次に、`contract` の内容となる`Transactions`を実装していきます。

`transactionCount` は、スマートコントラクトによって何件の取引が行われたかの総数を管理するプロパティです。

次に、`event Transfer`は、実際に呼ばれるチェーン側のAPIで、どのアドレスからどのアドレスにどのくらいETHを送信するか、というAPIになっています。クライアントから直接呼ばれることはないですが、
クライアントから呼ばれた関数の中で呼ばれるプレイベート関数と考えて大丈夫です。





```solidity

    TransferStruct[] transactions;

    function addToBlockchain(address payable receiver, uint amount, string memory message) public {
        transactionCount += 1;
        transactions.push(TransferStruct(msg.sender, receiver, amount, message, block.timestamp));

        emit Transfer(msg.sender, receiver, amount, message, block.timestamp);
    }



```

`TransferStruct[] transactions;` は、全てのトランザクションを保存したアレイで、
履歴をクライアント側から参照するために使用します。

`function addToBlockchain` はクライアント側から実際に呼ばれるAPIで、
`(address payable receiver, uint amount, string memory message)`
を引数として取ります。

`address payable receiver`はETHを送信する先のアドレスであり、
`payable`キーワードは、このアドレスがETHを受け取ることのできるアドレスであるということを表記しています。
`string memory message`の`memory`キーワードに関しては、今の所はつけるべきキーワードという理解しかしていません。
`Transfer(msg.sender)` によってチェーン上のETHの取引が行われます。
`msg`キーワードは`Solidity`によるキーワードです。



```solidity
    function getAllTransactions() public view returns (TransferStruct[] memory) {
        return transactions;
    }

    function getTransactionCount() public view returns (uint256) {
        return transactionCount;
    }
}
```

`getAllTransactions, getTransactionCount` はどちらも取引を行うAPIではないため、
`view`というキーワードが付けられています。（つまりこのAPIについてはガスを払わなくても良い。）

以上で簡単ではありますが、一通りの説明となります。




## まとめ

今回は、自分が初めて作ったSolidity スマートコントラクトをバックエンドとしたWeb3アプリの、
スマートコントラクトのプログラムの中身の自分なりの解釈について書いてみました。

今回は簡単なロジックのみが実装されたスマートコントラクトでしたが、
次回はもっと複雑なものも構成してみたいと考えています。


みなさんも楽しいweb3ライフを。


今回はこの辺で。


@kenmaro
Selenium でループを書いたときの　stale element reference: element is not attached to the page document　エラー回避備忘録

## 概要

久しぶりにSelenium を使ったら、
ループ処理のところで

```bash
stale element reference: element is not attached to the page document
```

といういうエラーに遭遇し、少しだけ詰まったので備忘録として残しておきます。


## 問題となったコード

汚いコードなのは許してください。。

```test.py

divEl = driver.find_element_by_class_name("htBlock-adjastableTableF_inner")
tableElem = divEl.find_elements(By.TAG_NAME, "table")
tbodys = tableElem[0].find_elements(By.TAG_NAME, "tbody")
trs = tbodys[0].find_elements(By.TAG_NAME, "tr")

for i in range(len(trs)):
    tmp1 = trs[i].find_element_by_class_name("htBlock-adjastableTableF_actionRow")  # td

```

このループにおいて、０回目のループでは問題なく

```python
tmp1 = trs[i].find_element_by_class_name("htBlock-adjastableTableF_actionRow")  # td
```

が行えていたのに対し、１回目のループでタイトルのエラーとなっていました。


## 解決策


```test.py
divEl = driver.find_element_by_class_name("htBlock-adjastableTableF_inner")
tableElem = divEl.find_elements(By.TAG_NAME, "table")
tbodys = tableElem[0].find_elements(By.TAG_NAME, "tbody")
trs = tbodys[0].find_elements(By.TAG_NAME, "tr")

for i in range(len(trs)):
    divEl = driver.find_element_by_class_name("htBlock-adjastableTableF_inner")
    tableElem = divEl.find_elements(By.TAG_NAME, "table")
    tbodys = tableElem[0].find_elements(By.TAG_NAME, "tbody")
    trs = tbodys[0].find_elements(By.TAG_NAME, "tr")
    tmp1 = trs[i].find_element_by_class_name("htBlock-adjastableTableF_actionRow")  # td

```

ループの中でページ内のDOM情報を再度取得するように書くと、問題なくプログラムが実行されました。


以上。
Solana(Anchor) + Nextjs でTODOアプリケーション構築 のまとめ

## 概要

Web３ハッカソンをきっかけに、
最近はバックエンドをブロックチェーン上のスマートコントラクトを使って実装したアプリケーション作りにハマっています。

今回は、ハッカソンでもチャレンジしたSolanaチェーンを用いて、TODOアプリ作りをやってみました。
ハッカソンでは`NativeRust`で構築しようとしてやはり難しかったのですが、
`Anchor`を使うと、慣れは必要ですが、割と簡単にスマートコントラクトを実装できました。
また、`SolanaPlayground`を使うとスマートコントラクトの

- Build
- Deploy
- Test
- フロントエンドへの組み込み

が非常に楽で、いい開発環境が整ってきていることを感じれたので、
その辺りに関しても少し書いてみたいと思います。


フロントエンドのプログラムはこちらに上げています。
バックエンドのプログラムの詳細は長くなってしまいますので次記事に書こうと思います。

https://github.com/kenmaro3/solana-todo


## 使用する技術スタック

- フロントエンド (Nextjs)
- バックエンド (Solana Anchor, Rust + QuickNode + Solana Playground)
- ウォレット（Phantom)
- デプロイ (Netlify + Solana Devnet)

となります。


## 参考にしたマテリアル

数年前からReactを勉強した時からフォローしている、`CleverProgrammer`の動画を参考にしました。
とてもわかりやすいので、みたことがない人はぜひみていただきたいです。

https://www.youtube.com/watch?v=3_zoGgffxac&t=3658s




## 各実装のポイント

先述の

- フロントエンド (Nextjs)
- バックエンド (Solana Anchor, Rust + QuickNode + Solana Playground)
- ウォレット（Phantom)
- デプロイ (Netlify + Solana Devnet)

と書いた技術スタックですが、要点をかいつまんで書いてみようと思います。



### フロントエンド

フロントエンドはNextjs を用い、

- Phanton ウォレットへの接続
- ウォレット接続のProvider の実装
- Solana Playground からIDLの取得、Nextjsに組み込み
- スマートコントラクトのエンドポイントへの接続、APIコール
- APIコールのためのカスタムフックの実装

を実装するところがコアとなっています。
おそらく、Nextjsを触ったことがある人なら問題なくコードレベルで理解できると思います。


### バックエンド

バックエンドは、いろいろなツールを駆使しながら、開発を非常にスムーズに行うことができ驚きました。
（Web3ハッカソンの時にこれらを知っていればもっと楽にできたはず、、）

- Solana Playground による開発環境

https://beta.solpg.io/

Playground を使用することで、開発環境を準備する手間を省くことができます。
また、開発用のウォレットは付いてくるので、Devnetであれば簡単にairdrop をPlayground から行うことで、デプロイを実行することができます。
さらに、デプロイしたスマートコントラクトに対して、テストをPlayground上で実行できるため、非常に強力なIDE環境だと感じました。
これを使うのと使わないのではかなりストレスが違うと思います。

また、まだ試していないですが非常に最近VSCでもPlaygroundが使えるようになったとのことでした。

https://twitter.com/CryptoYuen/status/1597782583399444480


- Anchor を使ったスマートコントラクト実装

私はハッカソンに出た時は、最初の理解をもっとしたいということ、
スマートコントラクト上で暗号計算を行いたいという理由から、NativeRustでの実装を行いましたが、
普通にdAppを作るという観点からは、Anchorを使うことを強くお勧めします。
理由は、強力なマクロを使ってコンテキスト（クライアントAPIをコールするときの引数）をある程度手軽に実装できるからです。
Rustならではの構文もありますが、どちらかというと全部理解するというより慣れが肝心なので、いくつかAnchorを使ってアプリを実装すると大丈夫だと思います。
一度苦労するという意味ではNativeを選ぶ選択肢もあります（Playgroundでも選択可能）が、
どちらも試した個人的意見としては、学習用途以外ではNativeをあえて選ぶ意味はあまり見出せないかなと思います。

- QuickNodeを使ってエンドポイントを設定

QuickNodeを使うと、スケーラブルなスタティックエンドポイントを、さまざまなチェーン上で構築してくれ、
そのエンドポイントをNextjsに設定するだけでスマートコントラクトに接続可能になります。
とても便利ですし、無料でもある程度使えるので、使わないてはないかなと思いました。
他にも似たようなサービスがあるとは思いますが、そちらは使っていないので今の所比較できていませんが、
QuickNodeを使って不便なところは特に感じませんでした。
このようにディベロッパーに対してのサービスを提供するのはすごくありがたいですね。

https://www.quicknode.com/


## まとめ

今回は、
Solana(Anchor) + Nextjs でTODOアプリケーション構築
をやってみたのでそれについて記事を書いてみました。

Solidityでも同じことをやったらどういう開発でできるのか、
Vuejsでフロントを実装したらどういうふうになるのかなど気になることはあるので、
それらも試してみれたらと思っています。



今回はこの辺で。

@kenmaro
2022年時点リアルタイムセマンティックセグメンテーションのまとめ（データセット編）

## 概要

セマンティックセグメンテーションは、
機械学習を使って画像や動画に対して見えている物体をピクセル単位で判別し、色を塗り分けるタスクですが、
昨今はいろいろなモデルが登場し、自動運転などのアプリケーションを対象とした、
リアルタイム性のあるものも登場しています。

今回は、そのようなセマンティックセグメンテーションモデルのまとめをやってみようと思います。



## よく使われるオープンデータセット

まずは、SoTAなどを叩き出しているモデルたちが使っている、オープンデータセットの紹介を行います。
これらのオープンデータセットを用いてモデルの精度と速度を比較し、それらが改善したというような論文が数多く出ています。
いろいろなデータセットがあるので、一度チェックしてみると面白いと思います。

### Pascal Context
400 以上のクラスを持ったデータセットで、３つのカテゴリを持っています。
さまざまなシチュエーションでのセグメンテーションに使用されます。
４００以上のクラスはあるものの、データセットはスパースであり、頻出の５９クラスに対して学習データとして用いられることが多いようです。

![Screen Shot 2022-11-29 at 11.59.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/fc7fd1ef-a7fc-5559-3ddf-f111db695e63.png)

リンクはこちら。

https://www.cs.stanford.edu/~roozbeh/pascal-context/

### City Scapes

セマンティックセグメンテーションを行ったことがある人は必ずみたことがあるデータセットです。
自動運転のセグメンテーションに使用されます。
３０クラスの塗り分けがされており、５０００枚の画像が緻密にアノテーションされたもの、２００００の画像は荒くアノテーションされている、とあります。

![Screen Shot 2022-11-29 at 12.00.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/a228bbc2-b633-0bea-bf31-735154022bfa.png)

リンクはこちら。

https://www.cityscapes-dataset.com/

### CamVid

これもよく出てくるデータセットです。自動運転のセグメンテーションに使用されます。
約７００フレームの画像と、３２のクラスが含まれたデータセットです。

![Screen Shot 2022-11-29 at 12.02.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/1c32c897-5ab6-3397-3ed5-48fc81ed8f41.png)

リンクはこちら。

http://mi.eng.cam.ac.uk/research/projects/VideoRec/CamVid/

###  COCO-Stuff

巨大なデータセットであり、16.4 万画像を持ち、１７２のカテゴリに別れた８０個、９１個の大小の物体を含んでいます。

![Screen Shot 2022-11-29 at 12.03.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/845ac2a0-5ab9-e379-263c-13ebd9556d76.png)

リンクはこちら。

https://github.com/nightrome/cocostuff

### Foggy CityScapes

先ほどのCityScapeデータセットの、霧がかかっているバージョンです。
このデータセットは、CityScapeデータセットに対して人工的に霧（もや）を重ねたものです。
みてみると、非常に自然に霧がかかっているように見えます。
データ自体はCityScapeを受け継いでいるので、CityScapeで結果の出たモデルに対して、
天候がどう影響するのか、ということをテストするのに最適なデータセットです。


![Screen Shot 2022-11-29 at 12.04.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/b9329e62-b206-2071-b804-e56ee58423d0.png)

リンクはこちら。

https://www.cityscapes-dataset.com/foggydownload/

### ADE20k

風景のセグメンテーションデータセットです。名前にもある通り、２万枚の画像を含んでおり、
細かいアノテーションがされた大きなデータセットとなっています。
空、道路、芝生、人、車、ベッドなど、さまざまなオブジェクトがアノテーションされています。

![Screen Shot 2022-11-29 at 12.07.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/7dc624b1-e09d-85b3-3a7f-d7a3cb9bc58a.png)

リンクはこちら。

https://groups.csail.mit.edu/vision/datasets/ADE20K/




## まとめ
今回は、セマンティックセグメンテーションの多アスクで頻出のデータセットについて
今一度紹介しました。次は実際のSoTAを叩き出しているアルゴリズムについてまとめていきたいと考えています。


今回はこの辺で。


@kenmaro
準同型暗号ライブラリconcrete のWebAssembly化に取り組んだ話

## 概要

Web3ハッカソンに出場し、（結局制約が多すぎて諦めたのだったが）Solanaスマートコントラクト上で格子暗号ライブラリを動かして、鍵交換などを実装した「セキュアな位置情報共有アプリ」を作ろうと考えていました。

SolanaチェーンはRustで実装されており、スマートコントラクトもRustで実装できるため、
開発当初は、「これは格子暗号ライブラリのconcrete」と相性が良いのでは（concrete はRust実装されている）
と考えて、スマートコントラクト上で動かしてみよう！となっていました。

結果として、そのスマートコントラクトへとアクセスするクライアントはJavascript （Vuejs）で実装しようと思っていたので、concrete の必要な部分の関数を、クライアント内で実行できるように、
concrete をWebassembly でラップしてみようじゃないか、と考え、実装した時の備忘録を書きたいと思います。


## 実装したレポジトリ

https://github.com/kenmaro3/concrete/tree/wasm

ここに、wasmへのエクスポートを実装しています。

https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm

実装の流れや、エクスポートのコマンド自体は上のドキュメントに沿って実装しました。

```bash
wasm-pack build --target web
```
によって pkg フォルダが生成され、

```bash
(myenv) kmihara ~/Documents/web3-hackathon/concrete-experiment $ ls -l pkg/
total 504
-rw-r--r-- 1 kmihara staff    208 Oct 30 13:56 README.md
-rw-r--r-- 1 kmihara staff   3490 Nov 28 23:06 concrete_experiment.d.ts
-rw-r--r-- 1 kmihara staff  14106 Nov 28 23:06 concrete_experiment.js
-rw-r--r-- 1 kmihara staff 481004 Nov 28 23:06 concrete_experiment_bg.wasm
-rw-r--r-- 1 kmihara staff   1192 Nov 28 23:06 concrete_experiment_bg.wasm.d.ts
-rw-r--r-- 1 kmihara staff    272 Nov 28 23:06 package.json
```

のような中身ができていたら完成です。


実際に pkg フォルダを生成できたら、javascript から実際に呼んでみます。

```index.html
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>hello-wasm example</title>
  </head>
  <body>
    <script type="module" src="index.js">
    </script>
  </body>
</html>
```

```index.js
import init, {generate_sk} from "./pkg/concrete_experiment.js";
init()
.then(() => {
    console.log("will do generate_sk")
    let sk = generate_sk()
    console.log("finished generate_sk")
    console.log(sk)
```

とし、（非常に見難いですが）以下のようにクライアントサイドでconcrete ライブラリによる鍵生成ができることを確認できました。

![Screen Shot 2022-11-28 at 23.05.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/4c503021-9c30-9a61-4969-b4b5a97a508f.png)


## まとめ

ハッカソンという短い期間での実装の中で、concrete をスマートコントラクト上で実行しようとしたのは、
結果としては失敗することになるのですが、
このように、付随技術としてWebAssembly へのバインディングを実装できたりと、いろいろとやはり学んだものが多かったです。

今回は一旦実装をストップしてしまいましたが、
また時間を作ってconcrete ライブラリの活用については今一度チャレンジしてみたいです。
特に、スマートコントラクト上で動かさないとしても、今回のWasmバインディングを用いて、
ブラウザ上で鍵生成や復号、サーバへの暗号の送信など、いろいろなことを試してみれるかなと思いました。

試してみたらまた記事にしようと思います。


今回はこの辺で。


@kenmaro
Web3 ハッカソンに出て初めてのブロックチェーンアプリケーションでSolanaと格闘した話。

## 概要

Web3ハッカソンに出場したレポートと、
作ったモックアップについて紹介し、供養したいと考えています。

提出に使用した loom へのリンクはこちら。

https://www.loom.com/share/03c285c675164224a051847c82d3a074


## 作ったアプリ

Tesolana は、
自分の位置情報を友達と「セキュア」に共有することのできるWeb3アプリです。
Tesolana はSolanaチェーン上にデプロイされたスマートコントラクトで作られたdAppです。
Tesolanaは、暗号技術を用いて、自分のフレンドユーザのみに安全に位置情報を共有できます。
ユーザの位置情報は暗号化され、不特定多数のユーザや、スマートコントラクト側はユーザの位置情報を知ることはできません。

各ユーザがアップロードした位置情報はSolanaのデータアカウントに保存され、他のユーザもその情報を取得できますが、他のユーザが取得できるのは暗号化された位置情報のみです。
ユーザ１がユーザ２をフレンド登録すると、スマートコントラクトは、ユーザ１のデータアカウントに登録されているユーザ１の位置情報（暗号）を、ユーザ２の鍵ペアで復号できる暗号に作り替え（プロキシ再暗号）、ユーザ２のデータアカウントに書き込みます。
そのようにして、サーバサイドにも、ユーザサイドにも位置情報を公開することなく、必要な人たちにのみ位置情報を公開することのできるようなdAppを今回は作成しました。


## システム構成

![image (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/628340e0-856d-9d06-507c-74d7e04441e1.png)


## ソースコード

フロントエンド
https://github.com/b02505048/tesolana
バックエンド（スマートコントラクト）(experiment ブランチ）
https://github.com/b02505048/solana_program




## 使用したtech stacks

フロントエンド
vuejs, web3js

バックエンド
solana_program, rust

使用したBlockchain
Solana

deployしたContract
バックエンドのコントラクト

application codeやその他のfile
アプリケーションはフロントエンドにコードがあります。



## 準同型暗号を用いて、チェーン上のパブリックな情報を暗号化して保存（したかった）

この安全な位置情報の共有を達成するために、準同型暗号を用いました。準同型暗号は、暗号化したまま計算ができる暗号のことです。さらに今回は、この暗号にプロキシ再暗号化の技術も用い、ユーザ１の位置情報を、暗号化したまま、ユーザ２が復号可能な暗号へと変換する技術を用いました。

準同型暗号を用いると暗号状態での計算が可能になるため、例えば、ユーザ１とユーザ２の距離を、暗号状態の位置情報から計算することができます。
また、プロキシ再暗号を用いると、サービスを使っているユーザの特定のユーザ（今回はフレンドのみ）に対して自分の位置情報を公開することができます。
例えば、ユーザ１がユーザ２をフレンドを登録すると、ユーザ２のみがサービス経由でユーザ１の位置情報を取得することができます。ここで大事なのは、サービス側（スマートコントラクト側）もそれらの位置情報を知ることができないので、ユーザは安心して位置情報を共有できるところです。



## 準同型暗号を用いたかったが、苦戦した言い訳

今回、プロジェクトをスタートした時は、 完全準同型暗号であるconcrete ライブラリを使用して暗号のロジックを 書こうというところからスタートしました。 concrete ライブラリのいいところは、

準同型暗号が実装されている（暗号状態で計算できる)ため、位置情報の分析を暗号状態で行えること）
鍵交換が実装されている（プロキシ再暗号化とも呼ばれる）が可能であり、ユーザ１の位置情報をユーザ２にのみ復号可能なように暗号文を変更できる
などでした。 しかしながら、concrete ライブラリは計算資源を大量に必要とすることから、 Solanaのスマートコントラクトとしてデプロイすることが非常に困難であることがわかりました。

また、次にトライしたrecryptライブラリは、 鍵交換の機能を実装しているライブラリであり、準同型暗号ではありませんでした。 しかしながら、位置情報の共有のみを目的とした場合、鍵交換が可能であればアプリケーションとして 成り立つことから、スマートコントラクト上への実装を試みました。

しかしながら、このライブラリも、unsafeなオペレーションが含まれていることから 簡単にはスマートコントラクトへの実装ができず、限られた時間の中でこれらのライブラリを実際にスマートコントラクト上で動かすことは困難であるという決定をする必要がありました。

従って、今回のプロジェクトでは我々が「モックアップ暗号」として、 grasscrete というあくまでも暗号ではなく、位置情報にランダム性を持たせ、暗号ライブラリとしてモックアップの意味で使用する、というアプローチを取りました。

このgrasscrete は、ランダム性をデータに付与するものですが、実際の鍵を知らなければ位置情報が秘匿される仕様になっており、上記で言及した

準同型性
鍵交換の可能性 をどちらもクリアーしています。
このgrasscreteはあくまでもモックアップのためのものであり、 今後セキュリティが向上するような改善をおこなっていくことが前提となった工夫であることに言及しておきます。


## まとめ

今回はWeb３ハッカソンに出場し、初めてのSolanaブロックチェーンに苦戦しながらも、
どうにか格子暗号を操作するチェーンをデプロイできないかと苦戦し、
それらが実現した時の「セキュアな位置情報共有アプリ」について実装を頑張った経験について書きました。

ブロックチェーンはやはりバックエンドDBのような使い方が普通であり、
重い計算をするような設計にはなっていないことなどを知り、考えが甘かったなと思ったということ、
Anchorを用いずにPureRustでエンドポイントを作ろうとして低レイヤでの作業がしんどく、判断を誤ったなと思ったことなど、いろいろと反省がありました。

しかしながらブロックチェーンを用いたバックエンドの実装は楽しく、
一緒に出場した２人のメンバーとの開発経験は非常に勉強になることばかりで、これからももっと勉強してWeb3アプリケーションの開発もやっていきたいなと思っています。
Solana、イーサ、Terraあたりをぜひもっと開発してみていろんなものを作ってみたいなと思っています。

また、機会があればWeb３ベースのハッカソンにも出場してみたいと思っています。


今回はこの辺で。


@kenmaro
2022年に取り組んだスクレイピングを供養する

## 概要

2022年に、ウェブアプリ構築を目標としてデータ取得をし、
結局アプリを作らずに残ってしまったスクレイピングのコードを、備忘録の意味も込めて供養しようと思います。

## プロジェクト① 
### クラフトバンクのウェブサイトから、建設業者の規模感スクレイピング

https://github.com/kenmaro3/construction_scraping


## プロジェクト②
### スーモから、中古の一戸建て、マンションの物件情報スクレイピング

https://github.com/kenmaro3/estate-flask
AWS認定クラウドプラクティショナー合格に向けて Day6

# 前回の内容
[AWS認定クラウドプラクティショナー合格に向けて Day5](https://qiita.com/Ayako_0224/private/cc8b881db92cf4f808d6)

# AWSの操作
- AWSマネジメントコンソール
- SSHなどのソフトウェア
- AWS CLI

## AWSマネジメントコンソール
基本的にはここでほとんどの操作が可能
WEB画面からAWSを設定するGUI

## インスタンス接続
設置したサーバーの操作はWindowsサーバーやLinuxサーバーなどの標準に応じたソフトウェアを利用

## SSHソフトウェア
Linuxインスタンスに接続するソフトウェア
設置したサーバー等にアクセスして内部の設定やソフトウェアの操作を実行する通信方式およびそのソフトウェアのことを指す

## AWS CLI
CLIで複数のAWSサービスを制御したり管理するツール
マネジメントコンソールではできない操作などもあるため慣れたら効率的で便利

# 基本操作
AWSマネジメントコンソールでインスタンスを設置したりリソースの立ち上げを行う
SSHで接続しインスタンス操作するのが基本

# AWS マネジメントコンソール
以下のウィジェットがホームのダッシュボードにデフォルトで設置されている
アクションから自分の好みのウィジェットを追加したりなどカスタマイズすることも可能

- 最近使ったサービス
- AWSへようこそ
- AWS Health
    平常・異常かを端的に知らせてくれる
- コストと使用状況
    先月と今月、月末の予想コストを知らせてくれる
- ソリューションを構築
    端的にやりたいことをサジェストしてくれる
- Trusted Advisor
    使用傾向からオススメの情報があれば出してくれる
- AWSを詳しく知る
- 最新のお知らせ
- 最近のAWSブログ記事

# アカウントに関する設定
## AWS Organizations
複数のアカウントを管理する場合に使用する

## Service Quotas
AWSはそれぞれのサービスに上限が決まっている
上限情報をServise Quotasで確認・変更することが可能

## 請求ダッシュボード
簡単な請求情報を確認するためだけならホーム画面の「コストと使用状況」で十分だがより詳細をチェックしたいときに使用する
支払い状況など過去分も確認ができる

## セキュリティ認証情報
IAM(アクセス管理のサービス)の画面に飛ぶ

次の記事は➡︎[AWS認定クラウドプラクティショナー合格に向けて Day7](https://qiita.com/Ayako_0224/items/e5042aef77dc5fec8f7d)
Nextjs を用いてLIFFアプリを作る時のおすすめのHTTPS環境

## 概要

前回の記事で、
`Nextjs + Tailwind + Firebase(Firestore) + LIFF`
の構成でLIFFアプリを作ったので、LIFFアプリの良さについて語ってみる、
みたいな内容を投稿しました。

今回は、実際に開発していた時に感じた、非常に便利な開発環境について書いてみようと思います。


## LIFFアプリエンドポイントの設定

書いていて、LIFFアプリの開発環境についてはいろいろと記事がすでに存在することがわかりましたが、
気にせず進めたいと思います。

![Screen Shot 2022-11-28 at 22.00.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/519792/63fed731-9f82-b058-b08a-55fb144da0db.png)

LINEディベロッパーのサイトから、
LINEログインチャネルをLIFFアプリ登録した後、
エンドポイントを設定する画面です。

私はここに Heroku にデプロイしたエンドポイント（ある意味本番環境のエンドポイント）を登録しているのですが、これは本番環境としてデプロイした際に登録したものです。
開発の段階では、アプリを修正するたびにデプロイをわざわざ行なってデバッグするのはかなりの手間になります。
このエンドポイントには、httpsのものを入力する必要があるため、
自分で開発しているローカルのhttp のIPをそのまま入力することはできません。


## 解決策
これを解消するには、大きく２つのやり方が存在します。

1. ngrok https://ngrok.com/ を使用し、https環境を構築する
2. ローカルに自分で証明したhttps環境を作る


個人的には、ngrokを使うのもいいと思いますし、２番の方法でも開発はしやすかったです。
１番の方法も、２番の方法も、Nextjs, vuejs など使っているフレームワークなどにはよらず、汎用的に使えます。

私は、以下の素晴らしい記事をフォローして、２番の方法で開発をしました。

https://zenn.dev/jiyuujin/articles/liff-on-nextjs

この記事のHTTPS環境をつくる　のセクションをみていただければ問題なくわかると思います。


https://github.com/kenmaro3/nomikai-kanji/blob/main/server.js

このserver.js をみていただければわかりますが、自分で生成した

- localhost.pem
- localhost-key.pem

を所定のフォルダに入れて、

```bash
HTTPS=true node ./server.js
```

によりローカル環境にHTTPS環境を構築する必要があります。
一度ローカル環境にHTTPS環境を構築できれば、LIFFアプリのエンドポイントにはそのローカルIPを入力しておき、開発、本番環境にデプロイしたタイミングで、本番用のエンドポイントをLIFFアプリに登録することで、
開発がとてもスムーズになります。


## まとめ

今回は、LIFFアプリの開発を行う際の、おすすめのHTTPS環境として、
ローカルで自分でHTTPS環境を構築する
ということについて書きました。

開発環境を整えて、あまり苦しまずにアプリの開発に専念できることはとてもいいことですね。。

みなさんも良いLIFFアプリライフを。



今回はこの辺で。


@kenmaro
Nextjs のapi で [ERR_HTTP_HEADERS_SENT] と出た時の備忘録

## 概要

Nextjs 自体は長いこと使っていた（つもり）でしたが、
初歩的なところでタイトルのエラーと遭遇し、解決をすぐにできなかったので、備忘録として残しておきます。

```
error - Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
```


## 問題のコード


```pages/api/users/[id].js

export default async function handler(req, res) {
    const method = req.method;
    const { id } = req.query

    switch (method){
      case "GET":

      res.status(200).json({ res: id})

      case "POST":
      res.status(200).json({ res: id})

　　　 default:
      res.status(200).json({ res: id})
    }

}
```

上のようなコードを走らせ、front 側から　axios でコールすると、

```
error - Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
```

というようなエラーとなっていました。

わかる人はすぐに原因が分かりますよね、、
エラーの原因を調べると、リクエストに対してレスポンスが複数回返ってきているからだ、
ということがわかりましたが、なんで複数回返っているのかが理解できていませんでした。


## 解決策

初歩的なミスでしたが、`break`を行なっていませんでした。。


```pages/api/users/[id].js

export default async function handler(req, res) {
    const method = req.method;
    const { id } = req.query

    switch (method){
      case "GET":

      res.status(200).json({ res: id})
      break

      case "POST":
      res.status(200).json({ res: id})
      break

      default:
      res.status(200).json({ res: id})
      break   
    }

}
```

と書かないと、switch 文から抜けずに、複数のswitch 文に引っ掛かってしまうということでした。
javascript の文法を理解していなかった問題でした。

もちろん、きちんとapi 内でリクエストの場合わけができていればこのエラーは回避できるので、
以下のように書いても大丈夫です。（私は最初break を書き忘れているとわからなかったので、下のやり方で回避しました。）

```pages/api/users/[id].js

export default async function handler(req, res) {
    const method = req.method;
    const { id } = req.query;

　　 if(method === "GET"){
      res.status(200).json({ res: id})
    }
    else{
      res.status(200).json({ res: id})
    }

}
```


## まとめ

今回は、Nextjs のapi を実装する時の初歩的なミスによって出たエラーの備忘録を書きました。
簡単なミスではあったのですが、私は意外と気づかずに放置してしまっていたので、
もし同じエラーに出会した人の参考になれば幸いです。

みなさんも楽しいNextjs ライフを。

今回はこの辺で。

@kenmaro
Nextjs のdynamic routing でundefined になり少しハマったこと

## 概要

Nextjs のrouting を使ってdynamic routing を行う時

`localhost:3000/items/1`

に対してid == 1 のitems を表示するページを
作る際、

`pages/items/[id].js`

を用意することで、dynamic routing が可能です。

この時のidの取得で undefined が出て少しハマったので備忘録として書いておきます。


## 問題だったこと


この時、`localhost:3000/items/1`　から id となる 1 を
取得する時のコードは簡単には以下のようにかけます。


```pages/items/[id].js
import React from 'react'
import { useRouter } from "next/router"
import { useState, useEffect } from "react"

function Pages(){
  const router = useRouter()
  const [itemId, setItemId] = useState()

  useEffect(() => {
　　　const {id} = router.query
     setItemId(id)

  }, [router])

return(
  <div>{itemId}</div>
 )

}

```

このような疑似コードですが、
useEffect で id を取得するはずでしたが、userId はundefined となっていました。


## 解決策

useEffect の条件を、router から　router.isReady へと変更すると安定して取得できるようになりました。

```js
  useEffect(() => {
　　　const {id} = router.query
     setItemId(id)

  }, [router.isReady])
```


## まとめ

今回は、簡単ではありましたが、
自分がNextjs のrouting を使っていて少しハマってしまったことについて
備忘録的にまとめてみました。

細かいところでしたが、あまり調べた時に出てくる記載が少なかったため、
この記事を誰か見て問題が解決できることを願っております。


今回はこの辺で。

@kenmaro
OpenFHEのバージョン１系が出た！！準同型暗号のIEEE標準化も間近か！？

**@kenmaro**です。
普段は主に**秘密計算、準同型暗号などの記事について投稿しています**。
秘密計算に関連するまとめの記事に関しては以下をご覧ください。

> - [秘密計算エンジニアを始めて２年半が経った。](https://qiita.com/kenmaro/items/48059dd60f79e80f5ef8)
> - [秘密計算エンジニアを始めて3年が経った。](https://qiita.com/kenmaro/items/a1d90a074d552b7bf886)


## 概要

今回は、準同型暗号に関する結構いいニュースをお伝えします。
いろいろと準同型暗号（格子暗号）についてのライブラリがあり、私としては

#### Microsoft SEAL

https://github.com/microsoft/SEAL

#### Concrete

https://github.com/zama-ai/concrete

#### Parisade

https://palisade-crypto.org/

などに関してお伝えしてきました。

これらのライブラリは今でも使っていますし、素晴らしい実装で、アプリケーションを作るのにも耐えうる実装がなされています。

今回は、米国の準同型暗号の研究系スタートアップ　
`Duality Technology` のメンバーや、MITのメンバーたちが開発している、
`OpenFHE` ライブラリがバージョンv1系をついに安定版リリースしたことについて言及したいと思います。

https://github.com/openfheorg/openfhe-development


## なぜOpenFHE なのか

他にもいろいろな格子暗号のライブラリがある中で、なぜ`OpenFHE`のリリースに注目するべきかというと、
開発しているメンバーたちが格子暗号（準同型暗号）の標準化について非常に積極的に動いているからです。
標準化については、一般的には`IEEEで標準化`が行われた後、`ISOで標準化`が行われるとされています。

開発メンバーの一部の`Duality Technology` には、非常に有名な暗号学者や、`NIST`などにも働きかけのできる強力なメンバーが多数存在しており、米国では`政府の援助`も大きく受けています。
また、`Intelやその他の巨大企業もバックアップ`していると思われます。

彼らが公式にライブラリを整備している背景には、標準化を大きくプッシュしているからだと考えられ、
予想では**２０２５年までにはIEEE, ISOの標準化も可能という見解**です。


### OpenFHE の格子暗号実装形式

OpenFHEには

- BFV
- BGV
- CKKS
- CGGI(TFHE)

という格子暗号で使われる形式のほとんど全てが実装されています。

### OpenFHEはこれからデファクトスタンダートライブラリに？

今後は、IEEEやISOなどの標準化がステージングされていくにつれて、
このライブラリを本流としてセキュリティに対する評価や実装が信頼たるものなのか、
というような議論がされていくと考えられます。

`OpenSSLがメインストリームのライブラリとして使われるようになったように、
OpenFHEがこれから標準化の波を受けて、格子暗号ライブラリのデファクトスタンダードとなることが想像できます。`

今までのSEALライブラリや、他のライブラリとも競合して性能や使いやすさがアップしていくという意味で、
他のライブラリをもちろん学習してもいいですし、

`これから格子暗号を触ってみようと考えている方は
OpenFHEからスタートしてみるのがいいのでは？`
と個人的に思っています。


## OpenFHE v1 の特徴

OpenFHEv１のリリースに書かれている中で、特筆すべき機能や性能があったのでここで紹介します。
これについてもとてもテンションの上がる内容となっています。

- **CKKS形式のブートストラップが２倍高速化**
- **CKKS形式に対して、sin, cosine, sigmoid などの非線形関数に公式対応（近似による対応）**
- **ウェブアセンブリへのコンパイル機能の追加**

これはどれもすごいことです。。！！
興味がある人は今すぐ試してみましょう、私も試してみてまた記事にしたいと考えています。
CKKS形式のブートストラップ、非線形関数はおそらく実用的な速度を持ってはいないと思いますが、
どの程度の使用感なのか、楽しみですね。
私としては全て試したいですが、特にWasm対応は早く試したいです。

## まとめ

今回は、OpenFHEライブラリのv１系の公式リリースをもって、

- `IEEE、ISO標準化への大きな一歩となった`
- `ディベロッパーとして試すべき新機能が目白押し`

という２点についてお伝えしました。

準同型暗号、格子暗号にはいろいろな制約や速度の問題などもありながら、
**ソフトウェアレイヤではいろいろなライブラリが開発され、OpenFHEがこれからそのライブラリ群を引っ張っていく**
のではないか、

また、それと同時に
**ハードウェアによる高速化、ライブラリとの繋ぎ込みがこれから数年で行われ、準同型暗号の社会実装がどんどん進んでいくのではないか** と考えています。


これからも期待と共に実装レイヤで私も頑張ろうと思います！





今回はこの辺で。


@kenmaro
Slackワークスペースをソリューションで季節感あふれる感じにした話

※ この記事は「[Eureka Advent Calendar 2022](https://qiita.com/advent-calendar/2022/eureka)」4日目の記事です。

こんにちは、MISチーム（情報システム）でコーポレートエンジニアのマネージャーをやっているnakashunです。

[前回](https://zenn.dev/namoo_san/articles/f980c5e6573760)に引き続き、全く業務に関係ない事を書きます。

## :christmas_tree: 12月といえば、クリスマスシーズン

街はクリスマス一色ですよね :relaxed: 

クリスマスと言えば、各社サービスでは背景に雪が降ったり　タイトルに雪が積もったり

ユーザー向けに様々な演出を考えられていて、季節感を実感できる時期だなぁと思います。

オフィスにクリスマスツリーを設置したり、クリスマスの飾り付けや綿で雪が積もったようなデコレーションをしたりと

関係者の皆様は季節感の演出に工夫をされているところもあるんじゃないでしょうか :eyes:

## :thinking: 情シスとして、ユーザー（メンバーの皆様）へ提供できる価値を考える

12月になってしまいアドベントカレンダーのネタもなく、記事の公開まであと3日となり大変焦っているところで

**情シスとして、ユーザーに季節を感じてもらう為に何ができるのか**

といった特に意味のわからない思考になりました。

ひとまず、CTOに無断でSlackアイコンを変えてみることにしました。

![スクリーンショット 2022-12-02 13.59.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/b4ca6e60-9ccc-35a2-bbcd-d7a9012fd45b.png)

弊社のSlackアイコンに、サンタ帽を追加し季節感満載です。

## :boom: すぐ気付かれた

1週間ぐらい気付かれないかな〜　と思っていましたが

変更してすぐにみんなのtimesで話題になっていました。

![スクリーンショット 2022-12-02 14.00.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/d6acbe64-6306-6b2b-eb2f-a85536ca4e32.png)
![スクリーンショット 2022-12-02 14.01.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/f999ad78-bedb-07ce-8273-5a0cdfc46c86.png)
![スクリーンショット 2022-12-02 14.01.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/11fa76a6-26a3-488c-fa59-b1c8b76b46d9.png)
![スクリーンショット 2022-12-02 14.01.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/ee4e5d0e-7368-f4fc-f32e-75bd26867afc.png)
![スクリーンショット 2022-12-02 14.02.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/f62630a0-f4a7-f22d-4878-021d69c88f14.png)
![スクリーンショット 2022-12-02 14.02.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/ec801cbb-87d0-bbe1-0d6f-beda13854120.png)
![スクリーンショット 2022-12-02 14.02.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/28097ab5-afec-249f-6a7c-5bf8cc782eec.png)

みんな意外とSlackのアイコンの変化に気付いてくれることに大変驚きました。

## :upside_down: もっと季節感を演出したい

アイコンだけだと寂しいので、クリスマスっぽいカラーテーマも配布しました :christmas_tree: 

![スクリーンショット 2022-12-02 14.00.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/127585/51ae57cd-a328-dbd1-5f44-dfc264e903f4.png)

``` text
#142600,#42362B,#6DB000,#FFFFFF,#5BA842,#FFFFFF,#FFFFFF,#DE0000,#193600,#FFFFFF
```

チームメンバーからのアイデアとして、更にクリスマスのCustom Emojisを大量に追加する　という案もありましたので

来年のAdvent Calendarのネタがなかったら、クリスマス専用Custom Emojisの作り方について記事を書こうと思います。

現場からは以上です。

明日は、@switza による記事となります👀　（タイトルがまだ見えなかった）

皆様良いお年を :bamboo:
【Rails API】hash値で検索をかけたい場合

## はじめに
調整さんのようなWebアプリを作成していて、ルーティング・コントローラー内で、イベントをidではなくhash化されたidを使用した時の備忘録

### マイグレーションファイル
```ruby
class CreateEvents < ActiveRecord::Migration[7.0]
  def change
    create_table :events do |t|
      t.references :user, foreign_key: true, null: false
      t.references :category, foreign_key: true, null: true
      t.string :name, null: false
      t.text :description, null: false
      t.boolean :is_public, null: false, default: true
      t.string :hashed_url, null: false
      t.datetime :deleted_at, null: true

      t.timestamps

      t.index :name
      t.index :hashed_url, unique: true
    end
  end
end
```
eventテーブルにhashed_urlカラムを作成した。
こちらに保存されたhash値を使い、調整さんのようにhash化されたURLでイベントを管理できるようにしていく
http://hogehoge/api/events/c38d9f25-18ce-4133-8ce9-8d7e3abca9
↑URLイメージ

## 実装
### event作成時にhashed_urlを自動生成
```ruby:events_controller.rb
class Api::EventsController < ApplicationController

  def create
    event = Event.new(event_params.merge(hashed_url: SecureRandom.uuid))
    if event.save
      render json: event
    else
      render json: event.errors, status: :unprocessable_entity
    end
  end

  private

  def event_params
    params.require(:event).permit(
      :name,
      :category_id,
      :user_id,
      :is_public,
      :description
    )
  end

```
SecureRandom.uuidで生成されたhash値をmergeメソッドで受け取り、eventテーブルに保存

### hashed_urlでイベントの詳細表示
```ruby:routes.rb
Rails.application.routes.draw do
  namespace :api do
    resources :events, param: :hashed_url
  end
end
```
routes.rbでhashed_urlをparamとして受け取り設定

```ruby:events_controller.rb
class Api::EventsController < ApplicationController
  before_action :set_show_event, only: %i(show)

  def show
    render json: @event
  end

  private
  
  def set_show_event
    @event = Event.find_by(hashed_url: params[:hashed_url])
  end

```
DevOps文化を習得するための7つの中核原則


ソフトウェアを安全に素早くリリースするための抑えておくべきポイントを勉強したので、まとめてみました。

***


**①確固とした協力体制を築く**
	DevOpsでは開発と運用を結びつけることで他と割り体制を解消する。
	チーム全体がリリースするソフトウェアに全面的な責任を負う。
	メンバーは一丸となってデベロッパーの生産性と運用の信頼性の最適化に努めなければならない。
	プロセスの継続的な喜善を通じてビジネス目標の実現に繋げていく必要がある。


**②可能な限り自動化する**
	DevOpsでは反復可能なタスクは自動化されるため、イノベーションに専念できる。
	オートメーションは開発、テスト、デプロイの迅速化のための手段となる。
	オートメーションは、コードの統合、レビュー、テスト、セキュリティ、デプロイなどあらゆるフェーズに存在する。
	[IaC]はその一例で、事前定義または承認された環境で使用され、反復可能かつ一貫性のある環境が構築される。


**③お客様のニーズに焦点を当てる**
	顧客最優先という考え方は開発を促進する上で重要な鍵となる。
	DevOpsチームはフィードバックループを用いて顧客と常に連絡し合い、そのニーズに見合う開発をする。
	マイクロサービスアーキテクチャでは素早く軌道修正し、顧客のニーズに合わせた開発を迅速に行える。
	プロセス合理化とオートメーションにより、顧客の優先事項に開発作業を合わせに行く。


**④小規模に開発して頻繁にリリースする**
	アプリケーションアーキテクチャは小型化し、緩やかに連携するコンポーネントとして設計する。
	開発作業を統括する包括的なポリシーを設け、必要なアーキテクチャに合わせてチームを編成する。
	小規模で頻繁なコードのリリースなどの先端的な開発手法を採用することで俊敏性を獲得することができる。


**⑤各フェーズにセキュリティを組み込む**
	継続的デリバリーをサポートするには、セキリュティについて、アプリケーションのライフサイクルの各フェーズで増加した分だけ自動的に強化し反復的に対応する必要がある。
	開発チームと運用チームにはライフサイクルの各ステップにセキュリティを組み込むための教育を提供する。
	修復コストが嵩んでしまう前に、潜在的な脆弱性を特定して解消することができるようにする。


**⑥継続的な実験と学習**
	DevOpsでは問い合わせ、イノベーション、学習、個人指導が推奨され、プロセスに組み込まれる。
	チームはイノベーションに取り組み、進捗状況をモニタリングする。
	リーダーは失敗を受け入れ、チームは失敗を学習機会ととらえるように励ましていく。
	環境づくりにDevOpsツールを使用することもしばしばある。


**⑦継続的な改善**
	チームが共通の目標達成と継続的改善に取り組むために、厳選されたメトリクスを貼っておく、
	開発パフォーマンスの向上や安定性の強化等に継続的に取り組んでいく。
	適切なモニタリングツールを使用することで、アプリケーションの通常動作の指標を設定する。


***

リリース/デプロイに関する技術の発展は目まぐるしいため、
上記原則を意識した開発組織・開発チームの組成を目指したい。

**参考**
[Getting Started with DevOps on AWS](https://aws.amazon.com/jp/training/learn-about/devops/)
"Thread 1: signal SIGTERM"の表示に関して

シミュレーター使用後に❌ボタンにてシュミレーターを終了していたところ以下のエラー?(エラーというわけではありませんが)が表示されます。気になり調べてみました。
![スクリーンショット 2022-11-28 21.39.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2978721/19aa918a-e17c-9a11-402b-ac750a5f16fb.png)




以下の記事を読み
https://www.hackingwithswift.com/example-code/uikit/how-to-fix-the-error-failed-to-instantiate-the-default-view-controller-for-uimainstoryboardfile

シミュレーターの方ではなくXcodeにて停止を実行したところ上記のものは表示されなくなりました。
laravel existsバリデーションルールについて

# 概要

- laravelのexistsバリデーションルールについて別ページにまとめたのでリンクを貼っておく。

# 内容

https://anteku.jp/blog/develop/laravel-post%e3%81%95%e3%82%8c%e3%81%9f%e5%80%a4%e3%81%8c%e6%8c%87%e5%ae%9a%e3%81%95%e3%82%8c%e3%81%9f%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%ae%e3%82%ab%e3%83%a9%e3%83%a0%e3%81%ab%e5%ad%98/
Salesforceプロファイルと権限セットの設計方法

# これは何？
この記事は「[24日後に立派なSalesforceエンジニアになるWEBエンジニア Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kakakaori)」の5日目の記事です。20日後に立派なSalesforceエンジニアになるために今日は昨日の続きで権限周りについて見ていきます。

昨日はデータへのアクセス権という観点で見ていきました。その中でオブジェクト権限は権限セットでもプロファイルでも設定ができると説明したのでこの記事ではプロファイルと権限セットの違いやどう使い分けていけば良いか私なりの理解で書いていきます。

# プロファイルと権限セットの違い
|  |プロファイル | 権限セット |
|:-|:-| :-|
| 1ユーザーにつき  |  1つ割り当てられる |  複数割り当てられる |
| ページレイアウトの割り当て   |○<br />例）正社員プロファイルとアルバイトプロファイルで同じ取引先ページを見ていても、その中に表示する内容を変えることができる  | ×  |
| ログイン時間帯の制御  | ○<br />例） 土日はログインできないようにする、平日は22時までしかログインできないようにする | ×  |
|  ログインIPアドレスの制御 | ○  | ×  |
|  オブジェクトへのアクセス権設定 | ○  | ○  |
|  項目へのアクセス権設定 | ○  | ○  |

上記以外の権限については基本的にプロファイルでも権限セットでもどちらでも設定が可能。数も多いので割愛。権限セットについて詳しくは[こちら](https://help.salesforce.com/s/articleView?id=sf.perm_sets_overview.htm&type=5)。

上記の比較表を見てもらうと「権限セットなくてもいいんじゃない？」と思いませんか？
でももちろんそんなことはないんです。

# 基本的な考え方
これに関しては明確な決まりがあるわけじゃないけど、権限設定を行う際は以下を考慮して行うのが良さそう。

- プロファイルは最小構成にする
- 権限セットで足していく
- 職種については権限セットグループで表現する

## 具体例
例えば以下のような組織の場合。

- 組織としては営業部とカスタマーサポート部（CS）がある
- CSの中にはインバウンドチームとアウトバウンドチームがある
    - 両チームと取引先の閲覧ができる
    - インバウンドチームは受電ログというカスタムオブジェクトの作成と削除ができる
- 営業部は商談の作成ができる
- 営業部、CSそれぞれのマネージャーはダッシュボードの編集ができる
- CSのマネージャーはレポートの編集ができる
- CSの一部メンバーはインバウンドチームとアウトバウンドチームを兼務している

### プロファイルはどうする？
プロファイルは「一般ユーザー」という最小権限のプロファイルを1つ作るか、「営業」「CS」という2つのプロファイルを作るかの選択肢がある。この場合
- 「営業」と「CS」で異なるページレイアウトを割り当てたいか
- 「営業」と「CS」で異なるログイン時間帯の制御やIPアドレスフィルタリングを指定したいか

で考えると良いと思う。
営業は平日9時〜18時、CSは全日9時〜２０時まで働いていると仮定して今回はプロファイルは「営業」と「CS」で2つ用意する。

### 権限セットと権限セットグループはどうする？
必要になりそうな権限セットは
- 取引先の閲覧権限
- 商談の作成権限
- 電話ログの作成権限
- 電話ログの削除権限
- ダッシュボードの編集権限
- レポートの編集権限

これらを権限セットグループでまとめていくと
- インバウンドチーム
    - 受電ログの作成権限
    - 受電ログの削除権限
    - 取引先の閲覧権限
- アウトバウンドチーム
    - 取引先の閲覧権限
- 営業部マネージャー
    - ダッシュボードの編集権限
- CS部マネージャー
    - ダッシュボードの編集権限
    - レポートの編集権限
- 営業
    - 商談の作成権限

のようになるので最初の要件をユーザをおいて当てはめていくとこんな感じになる。
|   | 営業  | 営業<br />マネージャー  | アウトバウンド兼<br />インバウンド  | アウトバウンド  | インバウンド  | CS<br />マネージャー  |
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
| プロファイル  | 営業  | 営業  | CS  |  CS | CS  | CS  |
| 権限セットグループ  |  ・営業 | ・営業部マネージャー  | ・インバウンドチーム<br />・アウトバウンドチーム  | ・アウトバウンドチーム  | ・インバウンドチーム | ・CS部マネージャー  |

## 権限セットの考慮事項
また権限セットの中にあった「受電ログの作成権限」と「受電ログの削除権限」は1つにまとめて「受電ログの管理」という権限セットにすることもできるが、あえて分けて作っている。なぜかというと権限セットの編集ページはこのような画面になっているのだが

![スクリーンショット 2022-12-02 14.27.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/4e75b3c1-818a-d235-472e-4f0a4492b0d5.png)


見てわかるようにこの権限セット（画像で言うと「App_サービスコンソール」という権限セット）に何の権限がついているか一覧で見ることができない。確認する場合は画像内にあるリンク「割り当てられたアプリケーション」や「割り当てられた接続アプリケーション」をクリックして１ページずつ遷移して見ていかなければならない。
そのため１権限１権限セットにして、権限セットに命名規則を持たせることで、その名前の権限セットが具体的に何の権限を持っているのかがわかるようにしている。
例えば「割り当てられたアプリケーション」の権限に関する命名規則を「表示ラベル：App_アプリケーション名」「API参照名：App_AppName」としていた場合、画像の権限セットは「App_サービスコンソール」になっているので「割り当てられたアプリケーション」の中にある「サービスコンソール」の権限が割り当てられていることがわかる。

![スクリーンショット 2022-12-02 14.31.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/83cb12bd-e036-ffda-d80a-5e98167cc5b7.png)

# 最後に
今日は権限セットとプロファイルについて学んでいきました。
この部分に関しては正直どうやるのがベストなのかまだまだ模索中ではありますが、今のところはこの管理方法が一番良さそうだと感じています。権限セットの数自体は非常に多くなってしまうけど。。

明日はメール周りの設定について見ていきます。
データ分析環境のアーキテクチャ

みなさん、こんにちは！

本日はデータ分析環境の「アーキテクチャ」という言葉についてお話したいと思います。
システムの「アーキテクチャ」といわれると、
　あんなアプリをこんな感じで組み合わせて…
みたいなことを考えるかなと思いますが、今日のお話はそれとは一味違ったお話です。

# データ分析環境のアーキテクチャを考えるのは何のため？
これ。どうして、何のためにアーキテクチャを考えないといけないのでしょうね。その質問の答えは別の角度からの質問の答えを考えればすぐにわかります。

別の質問とは「データ分析は何のために行うの？」です。企業の皆さんが日々データの分析を行う理由は何でしょう。それは「皆さんや皆さんの会社が抱えているビジネスの課題を解決するため」でしょう。同じようにデータ分析環境のアーキテクチャをきちんと考えないといけないのは
　「そのデータ分析環境がビジネス課題の解決に有用となるため」
です。それができないデータ分析環境はビジネスにおいて必要なものにはならないのです。

# アーキテクチャのB.I.A.S.
B.I.A.Sとは４つの単語のそれぞれの頭文字です。それぞれどんな単語の頭文字でしょうか？
サクッと答えを明かしてしまうと、

　**Business（ビジネス）:** 企業が行うビジネスとそこにある解決すべき課題
　**InforMation（情報）：** その課題を解決するためになくてはならないデータ
　**Application（アプリ）：** 情報をビジネス現場で利用しやすいようにするアプリケーション
　**System（システム）：** アプリを稼働するために最適なシステム構成

になります。
冒頭のお話が当てはまるのはこの中のAとSになることが容易に想像できるかと思います。それ以前のBやIの観点が抜け落ちていてはビジネス課題の解決が行えないシステムになりそうというのは直感的にわかっていただけると思います。

# 定義レベル
よいデータ分析環境を実現するためにはこれらビジネス、インフォメーション（情報）、アプリケーション、システムの４つのアーキテクチャを考える必要があるのですが最初から完成されたものを考え出そうとしてもそれはとても難しいことです。
企業で利用される情報システムを構築した経験がある方なら理解していただけることかと思います。

アーキテクチャを考えるうえでも同様にまず大まかな絵をかいて徐々にそれを深化させていくという考え方は大切になります。一般的に４段階程度で考えることが多いと思います。

　**Conceptual：** 概要レベルでざっくりと考える
　**Logical：** 論理的な構成を考える
　**Solution：** 課題解決手法として具体的に考える
　**Deployment：** 現実に存在するハード・ソフトでの実現方法を考える

このように段階を踏みながら考えをまとめると誰から見ても理解しやすいものがつくりやすくなると考えます。

# 環境整備のステップ
最後にもう一つ考えなければならないのはどのように環境を整備していくかということです。これから新しくデータ分析環境を整えていくとしましょう。データ分析システムの最終形態は「企業内で発生するあらゆる課題の解決をサポートすることが可能」なものですが、当然そこにたどり着くためには時間もお金もかかります。そのため通常の企業ではステップ・バイ・ステップで物事を進めていくことになるでしょう。

このお話をしたときによく重要な観点が抜け落ちることがあります。それはスタート地点はどこなのか、言い換えると「自分たちは今どこにいるのか？」を知ることです。
これを正しく理解していないと本来必要なないステップを踏むことになったり、逆に何かが足りないということが発生したりします。

現在の正しい立ち位置と、きちんと定義された最終的なゴールがあって、その間をどのようなステップで進んでいくか、それを定義する必要がります。

# アーキテクチャ・キューブ
これまでに述べたきた観点は３つです。ということはこれを組み合わせると３次元の立体となります。

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742714/5a72262c-ebb4-ef1e-baaf-2b1660b02243.png)

私たちはこれをアーキテクチャ・キューブと呼びます。このような考え方で作られたデータ分析環境こそがビジネスに貢献できるものとなるとそう思っています。

#### Teradata Vantageへのお問合せ
[Teradata Vantage へのお問合せ](https://www.teradata.jp/About-Us/Contact)
Sourcetreeが動かなくなったので原因を調べてみた

結論を言うと2つ原因があった

### ~/ssh/.config
会社のパソコンでユーザー名を変更してくれという依頼があって変更を行いました。
そのせいで、
IdentityFile部分のファイル名が異なってしまったのでだめになってしまったようです。

なので、
```
IdentityFile /Users/[ユーザー名]/.ssh/id_rsa
↓
IdentityFile ~/.ssh/id_rsa
```
に変更


### リポジトリ
動かないので原因などを調べるために
httpに変更していたので、sshに変更しました。

私の場合は上記2つで動作するようになりました。
Processingでシンプルなものを作ってみた（第0001弾）

ーーー　シンプルな信号を描画してみた　ーーー

小さい頃、ピコを使って信号の絵を描いていたことを思い出し、
Processingでやってみた。

工夫したところ
・ウィンドウサイズに応じて対応する
・図形描画に関しては自作関数を作成してその中にコードを書いた


(1) ウィンドウサイズ：640x480[px]
![スクリーンショット 2022-12-02 12.35.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003934/8aa2338c-49cb-ef66-eaac-ebb804af1be9.png)

(2) ウィンドウサイズ：160x120[px]
![スクリーンショット 2022-12-02 12.35.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3003934/a39605c0-d9e8-ec45-8a4a-6d2a0d20e401.png)

```image.pde
int sizeH = 480;
int sizeW = sizeH * 4/3;

void settings()
{
  size(sizeW, sizeH);
}

void setup()
{
  background(255);
  noStroke();
}

void draw()
{
  translate(width / 4, height / 8);
  trafficLight();
}

void trafficLight()
{
  fill(0, 128, 255);
  rect(0, 0, height * 5/8, height * 5/24);
  
  fill(0, 192, 0);
  translate(height * 5/48, height * 5/48);
  circle(0, 0, height * 1/6);
  
  fill(255, 255, 0);
  translate(height * 5/24, 0);
  circle(0, 0, height * 1/6);
  
  fill(255, 0, 0);
  translate(height * 5/24, 0);
  circle(0, 0, height * 1/6);
  
  fill(0, 128, 255);
  translate(-height * 25/48, height * 5/48);
  rect(0, 0, height * 1/48, height * 5/8);
  
  fill(0, 128, 255);
  translate(0, 0);
  rect(0, 0, -height * 5/24, height * 5/12);
  
  fill(255, 0, 0);
  translate(0, 0);
  rect(-height * 1/48, height * 1/48, -height * 1/6, height * 1/6);
  
  fill(0, 192, 0);
  translate(0, height * 5/24);
  rect(-height * 1/48, height * 1/48,-height * 1/6, height * 1/6);
}
```
Android Studioでホスト名を解決する方法

```terminal
-- AVDのリスト確認
$ emulator -list-avds
3.2_QVGA_ADP2_API_30
Pixel_3a_API_33_arm64-v8a

-- 任意のAVDを書き換え可能なモードで起動
$ emulator -avd Pixel_3a_API_33_arm64-v8a -writable-system
```
起動した後、別タブのターミナルで以下を実行すると既存のhostsを取得できます。(やらなくても良い)

```terminal
$ adb root
$ adb remount
$ adb pull /system/etc/hosts 

--　設定したいhostsがCurrentDirectoryにあるとして
$ adb push hosts /system/etc/hosts
```

確認するとホスト名の解決ができている。
【JavaScript】JavaScript、はじめました。①コードの書き方の基本、文字列と数値のちがい

※この記事は、プログラミング学習サイト「Progate」の学習内容に関するものです。

昨日から、Progate を使って <b><font color=#ff00aa>JavaScript</font></b> を学習し始めました！
基本的な内容ではありますが、学習した内容を以下まとめていきます。

今日は記念すべき第1回なので、基本中の基本！
<b>【コードの書き方の基本】</b>と<b>【文字列と数値のちがい】</b>についてまとめました。
本当はもっと先まで書けるのですが･･･まとめるのにそれなりに時間もかかるのでｗ

<b>【コードの書き方の基本】</b>
　<b>console.log( );</b> で、(　　)内の文字列や数値をコンソールに表示できる
　※<b><font color="red">文末の ; (セミコロン) 忘れに注意！</font></b>
```:例①:
console.log("12");
```
```:コンソール:
12
```
　※この <b><font color="orange">12</font></b> は <b><font color="orange">文字列</font></b> として出力されている
```:例②:
console.log(12);
```
```:コンソール:
12
```
　※この <b><font color=#0077ff>12</font></b> は <b><font color=#0077ff>数値</font></b> として出力されている

<b>【文字列と数値のちがい】</b>
　console.log( ); の(　　)内に、複数の文字列・数値を <b><font color="red">+</font></b> で接続した状態で
　入れると･･･
　①　<b><font color="orange">文字列</font></b> の和 → (　　)内に<b><font color="orange">文字列を記述した順に並べて出力</font></b>
　②　<b><font color=#0077ff>数値</font></b> の和 → (　　)内で<b><font color=#0077ff>数値の足し算を行い、その和を出力</font></b>
```:①の例:
console.log("12" + "34");
```
```:コンソール:
1234
```

　
```:②の例:
console.log(12 + 34);
```
```:コンソール:
55
```
　※<font color="red"><b>文字列と数値の和を出力しようとするとエラーが出る</font></b>ので注意

第1回はここまで！
次回は<b>【変数】と【定数】</b>について書いていきます！
ご覧いただき、ありがとうございました！
AWS認定クラウドプラクティショナー合格に向けて Day5

# 前回の内容
[AWS認定クラウドプラクティショナー合格に向けて Day4](https://qiita.com/Ayako_0224/private/60625e275beba9481aaa)

# AWSの意義
そもそもなぜAWSを選ぶのか？
1. シェア32%で世界一
2. 研究・開発への投資額が圧倒的
3. クラウドの最先端を進んでいる
  re:Inventなどで最新の機能やサービスがクラウドの流行を作っておりMicrosoftやGoogleがそれに続いている状況が続いている

# AWSの活用メリット
## IaaSから見るAWS
AWSの基本サービスがIaaSであり、様々なインフラをオンデマンドで利用することができるのがメリット

## PaaSから見るAWS
AWSのIaaSに加えて、アプリケーション開発ツールPaaSを利用して、アプリケーションを構築することができるのがメリット
コーディングツールやコード管理などの支援ツール・インフラなども豊富に用意されている

## SaaSから見るAWS
AI翻訳や文章解析AIなど既にAWSで提供されているサービスを利用できるのがメリット
APIのみ利用することなど最先端の機能を借りてきて使うことも可能

# クラウドのメリットデメリット
メリット...オンデマンドでリソースを柔軟に早く活用することができる
デメリット...クラウド業者のサービスに依存してしまう(ベンダーロックイン)

## ベンダーロックイン
システム構築を自社内で行っていればサーバーやソフトウェアの変更はある程度容易に対処できる
EC2などオンプレミスサーバーに近い仮想サーバーの移行は簡単
しかし、AWS独自のサーバレスの仕組みをアプリに組み込んで機能開発をしてしまうと環境移行が困難になる

オンプレミスの環境にAWSを持ってくることも可能
AWS Outpostsの環境をセットアップして独自に利用できるように構築する

本当にAWSに依存していいのか考えることが必要

次の記事は➡︎[AWS認定クラウドプラクティショナー合格に向けて Day6](https://qiita.com/Ayako_0224/items/e3c14f922625cf54b4d3)
i18n allyを使ったら多言語置き換えの負荷が減った話

リンクアンドモチベーションでフロントエンドエンジニアをしている菊池です。

最近Vueアプリケーションの多言語対応が必要になったのですが、少し前に[vitesse](https://github.com/antfu/vitesse)を触った時に気になっていたi18n allyというVSCode拡張を試してみました。

実際にプロジェクトで使ってみて感触が良かったのでその紹介をしたいと思います。

この記事は[モチベーションクラウドシリーズ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/mcs)の2日目の記事です。

## i18n allyの説明

i18n allyは多言語まわりの便利な機能を提供するVSCodeの拡張です。

https://github.com/lokalise/i18n-ally

VueやReactでよく使われている多言語ライブラリは大体対応しているほか、バックエンドのi18nにも対応しています。
https://github.com/lokalise/i18n-ally/wiki/Supported-Frameworks

機能の1つである「[Inline Annotations](https://github.com/lokalise/i18n-ally/wiki#inline-annotations)」は、`t('common.error.text')` のようなキーから言語ソースを辿り、翻訳文言をVSCode上でインラインで表示するようになります。
![13d81122-8cbf-9cf9-bf2c-a9bf59bd16fd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939205/f3146452-7e7f-b947-2a88-57c3a7fad2f4.png)
これが↓のように表示される
![c527d55e-93c3-43d4-06ab-f15a662d97a0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939205/25eed187-326b-4aef-fe35-544b852b35ff.png)
他にも、翻訳文言がない場合には警告を表示したり、
![27388847-d2dc-afab-31a8-1727061cc4e1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939205/f5ab2ff7-d8ca-821d-e7a1-f1edb1650c9e.png)
日本語にあって英語にない、みたいな翻訳ファイル毎の文言抜けを表示できたりします。
![ab3f12bc-0130-d5f4-8eea-63abf14b282c.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939205/e85a31ec-1d6c-170d-1cdc-607f6285dbfd.png)

## 導入方法

導入は簡単で、VSCodeに[拡張](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally)をインストールするだけです。

ただし、デフォルトでは以下のようなディレクトリ構成前提で翻訳ファイルを取得します。

```
  locales         # i18n, langs, locale are also acceptable
  ├── en.json
  ├── de-DE.json
  ├── zh-CN.yml   # YAML
  ├── zh-TW.ts    # You can mix different formats
  ├── ...
  └── <country-code>.json
```
refs. https://github.com/lokalise/i18n-ally/wiki/FAQ#-directory-structure

これ以外の構成の場合は、設定でカスタマイズが必要になります。

## 使ってみての所感

個人的に使ってみて良いと感じたのが、「多言語置き換え作業の進捗が分かる」ことです。

今まで文言を `t('title')` とかに置き換えても、画面上でチェックするまで「これちゃんと置き換えられたのかな、、」という微妙な不安というか、作業実感が得られなかったのですが、
これはVSCode上で「置き換え出来た文言」「キーが見つかってない文言」「ハードコードされてるっぽい文言」が分かるので、これを100%にする = 完了という分かりやすい目印になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/939205/c68fe204-fbd7-f374-3a88-1cc0edbf39ec.png)
特に翻訳対応の初回は大量のハードコード文言を置き換えていく地道な作業になるので、その負担が減るだけでも十分効果があったなーと思いました。

## さいごに

今年も弊社はアドベントカレンダー２つやってます。
明日は @naoki_kuhara と @Yakumo-0109 が投稿してくれるようです。お楽しみに！