OmniAICreator/Qiita-1.07M huggingface dataset:
快適なSNSにするためのCSSセレクタを書く

## SNS疲れの原因になる余計なものを消したい
フォロー・フォロワー数、いいね数、「おすすめ」…etc
こういうものの表示を設定メニューで切り替えられないとき、ブラウザ版に限ればユーザースタイルシートを使って表示を調整する手があります。
ユーザースタイルシートの設定といえばブラウザ拡張のStylusが有名どころでしょうか。

### 消したい要素のセレクタを書くために
いざCSSで調整しようと要素を見てみるとユーティリティクラスしかなかったりハッシュ化されてランダムなクラス名だけがついた`div`タグだらけだったりすることがあります。
こうなってると任意のセレクタを書くためには要素名・クラス名だけでは消したい場所を指定するのが厳しく他で要素を限定しなくてはいけません。

この **「要素名・クラス名に頼らず特定の要素のセレクタを書く」** というのが多様なCSSセレクタを覚えるためのいい練習になったりします。
最近使えるようになった[:has()](https://developer.mozilla.org/ja/docs/Web/CSS/:has)なんかはめちゃくちゃ重宝することに気づきます。

以下はX（旧Twitter）で画面から消したいものを消すときのセレクタの一例です。
指定した要素を`display: none;`で非表示にしていきます。

## X（旧Twitter）の画面から消したいものを消す

### いいね・RT・ブックマーク数を消す

ポストの下に表示される数字を消します。
（近日のアプデでもう公式で消えるという噂もありますが…）

```css
span[data-testid="app-text-transition-container"] {
    display: none;
}
```
ハッシュ化クラス名だらけの`div`と`span`群をたどりながらハッシュ化されていない部分で共通点を探します。
すると数字を囲っている`span`に`data-testid="app-text-transition-container”`という属性が共通で入っていることに気づきます。
（名前からして数字のカウントアップダウンのアニメーションに共通するものでしょうか？）
属性をセレクタに使いたいときは`[{属性名}="｛値}"]`と書くので`[data-testid="app-text-transition-container"]`とするとこの数字の部分だけ選択できます。
この`data-testid`属性は比較的わかりやすい値が入っているので手がかりにしやすいです。

### フォロー・フォロワー数を消す

プロフィール画面やTLのアイコンにマウスオンしたときのフォロー・フォロワー数を消すことができます。
フォロワー数が減ると気になってしまう人にはぜひ取り入れてほしい。

```css
a[href*="follow"] {
    display: none;
}
```

フォロー・フォロワー数を表示している箇所の共通点を探します。
どちらも`a`タグの`href`属性に”follow”の文字が入っています（`/verified_followers`と`/following`）

`{属性名}*=“{部分一致させたい文字列}”`と書くと属性の値の部分一致を指定できます。これを使って `href`属性に”follow”の文字列が入っているものをまとめて選択できるようになります。

### ポストメニューで余計な操作メニューを消す
ポストの”...”にあるこのメニューのことです。

![スクリーンショット 2024-04-29 19.00.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3686558/4a5cbbda-2614-dcaa-948a-6bba453f9afd.png)

ポストの引用RTが見たくてよくこのメニューを押すのですが周りにあるフォローやミュート・ブロックボタンの誤操作が怖いのでこのあたりのメニューを消します。

```css
div[role="menuitem"]{
    display: none;
}
```
このメニューのアイテムを見ると共通して属性に`role="menuitem”`があります。
エンゲージメントの表示やリストへの追加などは`a`タグ、フォローやミュート・ブロックなど一番触りたくないメニューは`div`タグになっています。
ちょうど残したい操作のメニューが`a`タグになっているので`role="menuitem”`を持ってる`div`タグだけ消してしまいます。
※ `div`タグの法を消すと通報ボタンや「興味がない」のメニューも消えるのでこれを残したい場合は調整がいります。
※ ここのメニューは画面によって表示されるものが変わるので[:nth-child()](https://developer.mozilla.org/ja/docs/Web/CSS/:nth-child)を使って限定すると意図したメニューが消えない事があるので注意。

### ホームの「おすすめ」タブを消す
余計な情報で心を乱してくる一番の元凶のこのタブを消しましょう。
（おすすめに表示されたフォロイーのポストは通常のTLに表示されない問題はあるようですが...）
```css
div[role="presentation"]:has(a[href="/home"]):first-child {
	display: none;
}
```

ホーム画面のタブを見るとすべてのタブに`[href="/home”]`の入った`a`タグがあります。
その親になってる`div`には`role="presentation”`があることと、おすすめタブは常に一番左（一番最初）にあるので「`href="/home”`を子に持った`role="presentation”`属性のある最初（`:first-child`）の`div`」で選択できます。

### メディア・リンクがあるポストだけ表示する

テキストだけのポストを非表示にすることで、「作家さんの自我ポスト減らして作品だけ見たい」を実現する手段のひとつです。

```css
article[data-testid="tweet"]:not(:has([data-testid="tweetPhoto"])):not(:has([target="_blank"])):not(:has([data-testid="card.wrapper"])){
	display:none;
}
```
`:has()`で画像・外部リンクを子に持っているポストの`article`タグを指定して[:not()](https://developer.mozilla.org/ja/docs/Web/CSS/:not)で「それ以外」にすることでテキストだけのポストを選択します。

もっと効率いい書き方ありそうだしそもそもアプデがあると無効になるものですが…
クラス名以外でのセレクタの書き方を覚えるにはいい練習になるしついでにSNSも快適になるよ、という話でした。

ポイントはハッシュ化クラス名だらけの`div`や`span`群の中からハッシュ化されていない部分で共通点を探すことです。
今回はXの例だけ書きましたが他のSNSでも応用できると思います。
S3署名付きURLの仕組みが面白かった

# はじめに
S3署名付きURL発行機能を触っていたのですが、仕様がおもしろかったので整理します。

結論から言うと、以下の記事原文と、その解説を行ってくれている記事２つが全てです。

https://aws.amazon.com/jp/blogs/security/iam-policies-and-bucket-policies-and-acls-oh-my-controlling-access-to-s3-resources/

https://qiita.com/nasuvitz/items/1a50d5ba9009ff72e3ba

>その本質は 「URLを発行するIAMユーザーまたはロールで可能なS3に対する操作を、URLを介して、期限付きでできるようにする」 です。

## やってみた
### S3バケットを用意 S3バケットを用意
適当に拾った犬の画像でテストします（可愛いから）。

https://stock.adobe.com/jp/images/%E7%AC%91%E9%A1%94%E3%81%AE%E6%9F%B4%E7%8A%AC/41495025

バケットとオブジェクトを用意します。

![cap0.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/35391dad-3d4c-e229-7d91-df98447b59c3.png)

### CloudShellとgetObjectのみ許可したユーザーを用意
S3コマンドで署名をテストするので、
CloudShellとS3:GetObjectのみを許可するユーザーグループを作成します。

![cap1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/334f1ebe-e4f5-2a3f-0267-bf8400458676.png)

### 動作確認
早速動作確認します。

まずは何もせずにGETしてみます。

![cap2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/0344381d-9fc4-5482-c97b-41110199491c.png)

403が返却されます。
ブラウザでも同様の表示が確認できます。

aws cliで署名付きURL発行コマンドを実行します。

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/ShareObjectPreSignedURL.html

ドキュメントを見るに、以下の形式でよさそうです。
```aws s3 presign s3://DOC-EXAMPLE-BUCKET1/mydoc.txt --expires-in 604800```
実際にCloudshell内でコマンドを実行してみます。

![cap2_2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/4304eec9-4d3f-5210-06a6-33b354b90857.png)

コマンドを実行すると、長いURLが返却されました。

![cap3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/cff9849b-fa5d-919b-f26c-ececc69d67eb.png)

ブラウザでURLを入力すると、可愛い犬の画像が表示されました。

ここまでで、**署名付きURL発行には、s3:GetObjectのみ必要**なことが分かりました。

逆に言うと、```aws s3 presign```コマンドには権限が不要なのでしょうか？
試してみます。

### 署名付きURL発行ユーザーのIAMポリシーを変更してみる

![cap4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/66a5ffef-c125-ccdc-ecb6-f9b83614970e.png)

テスト中のユーザーが所属するユーザーグループから、s3:GetObjectを許可していたポリシーをデタッチしました。

この状態で、```aws s3 presign```コマンドを実行してみます。

![cap5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/637022a5-356a-d82c-d515-8e76f26b9035.png)

長いURLが返却されました。コマンド自体は成功しているようです。
ブラウザで確認してみます。

![cap6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/fc86f5cc-ade8-6d1c-f0c2-69b0ec78d5e4.png)

よく見る403の画像が表示されました。面白いですね。

## おさらい
文頭にも記載しましたが、署名付きURL作成機能の本質は以下の通りです。

>その本質は 「URLを発行するIAMユーザーまたはロールで可能なS3に対する操作を、URLを介して、期限付きでできるようにする」 です。

つまり、URLを介して、```aws s3 presign```コマンド実行者の権限を与えているに過ぎないわけですね。

KMSキーをS3の暗号化キーに指定し、```S3:GetObject```権限は持つが、```KMS:Decrypt```などの権限を持たないユーザーで署名付きURLを発行し、アクセスしてみると、この仕様がよく分かります。

![cap7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3654730/000f50cd-976b-3cf7-deaa-30fea564a83c.png)

署名付きURLを発行したユーザーがkms関連の権限を持っていないことが原因で、
オブジェクトにアクセスできない旨が記載されています。

URLのパラメータをもとに、AWS側でURL発行IAMユーザーの権限をチェックしている挙動がうかがえます。

そのため、URL発行コマンドそのものについてはポリシーなしでも可能なようです。

# おわりに
そんなに面白くないだろうと思って触ってみたS3の署名付きURL発行機能ですが、
仕様が少し面白かったので記事にしてみました。

こういう発見があるので、あまり興味ない機能・リソースでも、気軽に触っていきたいです。

# 参考サイト

https://dev.classmethod.jp/articles/try-different-settings-for-cmk-key-policy/
BizRobo! ver10のOpenステップと対応するver11のDAステップ

近頃、BizRobo!をver10からver11へバージョンアップされる方が多いのではないでしょうか？

そこで今回は、ver10からver11へバージョンアップした際に少し苦戦した記憶のあるDAステップについてお話できればと思います。

※今回はver10.7とver11.4で説明します



# Openステップについて
まずはOpenステップについて説明します。

　<INS>Openステップとは</INS>
　DAでサイトやExcelを操作しようと思った際に「サイトやアプリを起動する」
 　という操作を行ってくれるステップ

Openステップを使うことで、対象アプリやサイトの起動が1ステップで完結できます。

しかし、このver10でよく使っていたOpenステップがver11では無くなり、パワーアップして個々のステップへと分散されました。
そこで、ver11ではどのようなステップに打って変わったのかを説明していきます。


# ①実端末でサイトやアプリを起動させる場合

ver10.7
【Openステップ】

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/d8c72494-db92-6f4d-9bfd-b609396fc5ed.png)


「URL」欄にパスやURLを記入

![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/3d2a99c5-3484-cd10-868a-e31d130c6445.png)

ver11.4
【ウィンドウステップ】（アプリケーション > ウィンドウ）

![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/6dbe9aba-7c82-fa5c-de10-c11057b00efa.png)

「実行可能」の欄にパスやURLを記入
※初期設定で「最大化を開始」にチェックが入っているため、
　画面の最大化が不要な場合はチェックを外してください

![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/7ed2d485-144d-2df7-f181-809916b87b7d.png)


# ②Chromium上でサイトを立ち上げる場合

ver10.7
【Openステップ】を使用
「Use」の欄で「local」を選択
「URL」欄にサイトのURLを記入

![画像5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/e405f266-2640-e510-7f35-480ed4c2a00e.png)

ver11.4
【参照ステップ】（アプリケーション > 参照）
「アプリケーション名」の欄に任意の値を記入
「URL」欄にサイトのURLを記入

![画像6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/04e6404c-1023-d371-e8d0-13b5a37a715c.png)

※「アプリケーション名」に記載した名称はアプリケーションのname属性の値として反映されます。

![画像7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/a1227333-4ef1-4ed3-58f0-286468d97c74.png)


# ③Built-in-Excel（DAのlocalブラウザ上）でExcelを立ち上げる場合

ver10.7
【Openステップ】
「Use」の欄で「local」を選択
「URL」欄に「excel://」+「開きたいExcelパス」を記入（例 excel://C:/User/～）
※ここでのファイルパスは「\」を「/」に置き換えて記入する必要があります

![画像9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/bdabeefd-bd5e-4d1c-1fcd-92984de33368.png)


ver11.4
【Excelステップ】（アプリケーション > Excel）
「使用」の欄で「local」を選択
「ワークシートのパス」の欄に開きたいExcelパスを記入（例 C:\User\～）

![画像10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3346701/8b415b45-e3d7-de5c-e628-8d2c02ed2808.png)


# 
以上がver10のOpenステップに対応するver11の各ステップになります。
私自身、色々とステップ内で指定できる設定が増え、便利になったなぁと感じています。

誰かのお役に立てれば嬉しいです。
最後までお読みいただきありがとうございました。
Remixでloaderにクエリを渡して実行したい

# はじめに

Remixのローダーでパラメーターを受け渡すような実装でつまづいたのでまとめます

# 問題

セレクトボックスを変更したタイミングでfetcher.loadを実行して、クエリパラメータを付与してデータ更新をするような実装をしようとしました

```ts
      fetcher.load("") => OK
      fetcher.load("/?keyword=" + keyword) => NG
```

このようにいまいるページ`/`でクエリをやりたかったのですが、うまくいきませんでした

# 解決方法

```ts
      fetcher.submit({ originKeyword: keyword }, { method: "GET" });
```

このようにsubmitでGETをすることでloaderを動かす方法でうまくいきました

# おわりに

Remixはloaderがどんどん大きくなっていってるのでうまいことリファクタリングしていきたいです

# 参考

https://zenn.dev/nnt/scraps/fa6b3963bff7b2
【個人開発】Bun + Vite + Remixを使い、１ヶ月でWebアプリ作ってみた　~開発編

# はじめに
Bun + Vite + Remixの環境にした経緯や、企画の内容に関しては一つ前の記事に詳しく書いています。[前回の記事](https://qiita.com/sintaro-katuta/items/a25791c0c5250ab674c9)

https://qiita.com/sintaro-katuta/items/a25791c0c5250ab674c9

# 開発環境
### フロントエンド
| 言語・フレームワークなど | バージョン |
|:-:|:-:|
|bun|1.0.30|
|vite|5.1.6|
|remix|2.8.1|
|tailwind|3.4.1|
|fullcalendar|6.1.11|
|axios|1.6.8|
|prisma|5.11.0|
|react|18.2.0|
|typescript|5.4.2|
|remix-auth|3.6.0|
|remix-auth-form|1.4.0|

Dockerを用いたbunの環境構築方法は[こちら](https://qiita.com/sintaro-katuta/items/00ae77a832e4ed1291d7)

https://qiita.com/sintaro-katuta/items/00ae77a832e4ed1291d7

bunの環境が用意できたら
```:shell
bun create vite my-app
```
どこかでRemixを選択するところがあるので
```
✔ Select a framework: › Remix
or
✔ Select a variant: › Remix
```
### バックエンド
Vercelが用意しているDBのPostgresがあるので今回はそれを使用しました。
これでしか使えない機能などは使っていないので詳しくは[公式ドキュメント](https://vercel.com/docs/storage/vercel-postgres)を見てください。

https://vercel.com/docs/storage/vercel-postgres

## 手こずったところ
:::note warn
注意
そもそも日本語も英語も記事が少ないです
:::
かなり最新の技術のためかあまりにも少なくて手こずりました。
```json:package.json
    // この--hostがないとアクセスできなかった
    "dev": "vite dev --host
```

```tsx:sample.tsx
    import type { LoaderFunctionArgs, ActionFunctionArgs } from "@remix-run/node";

    export async function loader({ request }: LoaderFunctionArgs){
        // ここはサーバー側で最初にdbの取得やauthなどを設定する
        
    }
    export async function aciton ({ request }: ActionFunctionArgs){
        // ここはクライアント側が何かしらのアクション(buttonが押された時)にdbに追加などを設定する
        
    }
    export default functon sample(){
        //ここはいつものReactやNextでおなじみの
    }
```
基本的にはこのloaderとactionを駆使してなんとかしなくてはならないので例えば
一つのページに2つ以上actionがある場合(検索して、追加するなど)はかなり面倒なことをしなくてはならないので大変でした。

## 余談
Fullcalendarがとても使い勝手が良かった

https://qiita.com/OtsukaTomoaki/items/0fa05e0d408cccf4d187

## まとめ
TypeScriptをつかってバックエンドも開発したい方やシンプルな構造や小さいサービスなどに向いてるフレームワークだと感じました。

ここまでお読みいただいた方ありがとうございます。

もし良ければ覗いてみてください！

https://training-note.vercel.app/training
next view trantisionsを使ってみた

# Nextjs で view transition api を使ってページ遷移時にアニメーションを実装する

## はじめに

Nextjs でページ遷移時にアニメーションを実装する方法を調べていたところ、[view transition api](https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API) という API があることを知りました。
Astro でも使えるようになったのを知っていたのですが、Nextjs でも使えるのか気になったので調べてみました。

## 知ってはいたけど

[view transition api](https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API) を使う例はたくさんあったのですが、直接 CSS を書いたり、使い方が難しかったり、ブラウザがサポートしていないなどの理由で使っていませんでした。

## [view transition api](https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API) とは

[view transition api](https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API) はまだ実験的な機能です。
2024/04/30 時点では、Chrome と Edge でしかサポートされていません。

## [next view trantisions](https://github.com/shuding/next-view-transitions?tab=readme-ov-file#next-view-transitions)が現れた！

[next view trantisions](https://github.com/shuding/next-view-transitions?tab=readme-ov-file#next-view-transitions) を Github で見つけました。
使い方が、

1. Nextjs の Layout コンポーネントにラップ
2. `import { Link } from 'next-view-transitions'` `next-view-transitions`由来の `Link` コンポーネント使用

だけで実装できるので、簡単に使えそうです。

詳細：https://github.com/shuding/next-view-transitions?tab=readme-ov-file#usage

## 使ってみた

ニセモノのポ ◯ モンの画像を生成して、ページ遷移時にアニメーションを実装してみました。
サイトの大枠は[v0](https://v0.dev/)で作りました。

https://github.com/yuyakinjo/next-view-transition

## 動作動画

### next-view-transitions なし

![transition-false.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183059/952e3142-d28a-5ad9-be80-c93f9b81720b.gif)


### next-view-transitions あり

![transition-true.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/183059/f63a3b64-0882-996d-202e-dc6f7530c763.gif)


## まとめ

とても簡単にポケ ◯ ン図鑑のリスト画面・詳細部分が作れました。
まだすべてのブラウザでサポートされていない点に注意です。

よい連休を。

## 参考

モンスター生成サイト：https://nokemon.eloie.tech/
[AIX]findでアスタリスクを使用する際の注意

下記のディレクトリ構成が検証しています。
```
# find .
.
./a
./a/test1
./b
./b/test2
./c
./c/test3
```

```
# find . -xdev -name test
./test
# find . -xdev -name test1
./a/test1
```
-name test、-name test1の場合は、想定通りの結果が得られます。
```
# find . -xdev -name test*
./test
```
しかし、-name test*とすると./testしか出力されません。
これは、カレントディレクトリにtestというtest*に該当するファイルが存在するため、findコマンドに引数が渡される前にkshがアスタリスクを展開してしまうためです。
```
# truss -a find . -xdev -name test* 2>&1 | grep argv
 argv: find . -xdev -name test
```
この動きはtrussで確認することができます。
```
# find . -xdev -name t*1
./a/test1
# truss -a find . -xdev -name t*1 2>&1 | grep argv
 argv: find . -xdev -name t*1
```
-name t*1など、カレントディレクトリにパターンにマッチするファイルが存在しない場合はアスタリスクが展開されずにそのままfindコマンドに渡されるため、サブディレクトリのtest1が表示されます。
```
# find . -xdev -name "test*"
./a/test1
./b/test2
./c/test3
./test
# truss -a find . -xdev -name "test*" 2>&1 | grep argv
 argv: find . -xdev -name test*
```
カレントディレクトリにマッチするファイルが存在する場合でも、ダブルクォーテーションで囲むことでアスタリスク展開が抑止されるため意図した結果が得られます。
```
# set -o noglob
# find . -xdev -name test*
./a/test1
./b/test2
./c/test3
./test
# ksh -fc "find . -xdev -name test*"
./a/test1
./b/test2
./c/test3
./test
```
また、noglobや-fオプションを使用することでもアスタリスク展開を抑止することができます。
backendでReactを起動してみた

# なぜバックエンドで起動する必要があるのか？
- バックエンドとフロントエンドでAPI通信を行う際にCORSの設定が別途必要になる
理由）localhostのportが異なるため
※フロントエンド（port:3000）とバックエンド（port：8080）



# 実際に設定してみる

## package.json
CLI一覧

https://ja.vitejs.dev/guide/cli.html


```diff_json:package.json
  "scripts": {
+    "dev": "vite build --emptyOutDir --watch --mode development",
-    "dev": "vite --host --open",
  },
```
### ```--emptyOutDir```
- ビルド先がrootの外にあることを明示的にする

https://ja.vitejs.dev/config/build-options.html#build-emptyoutdir

### ```--watch```
> --watch フラグを有効にすると、vite.config.js やバンドルするファイルを変更した際に、リビルドがトリガーされます。

https://ja.vitejs.dev/guide/build#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%A4%89%E6%9B%B4%E6%99%82%E3%81%AE%E3%83%AA%E3%83%92%E3%82%99%E3%83%AB%E3%83%88%E3%82%99

### ```--mode development```
> デフォルトで、開発サーバー（dev コマンド）は 
development モードで動作し、build コマンドは production モードで動作します。
つまり、 vite build の動作中は、もし .env.production があれば、環境変数をそこから読み込むということです。

- それ以外にも、ホットリロード対応や詳細なエラーメッセージが出るなど色々あるらしい
（その分、```production```と比べて速度は落ちるらしい）

https://memorandom.whitepenguins.com/posts/vite-envvar/#%e3%83%a2%e3%83%bc%e3%83%89

## vite.config.ts
- バックエンドの静的ファイル保存場所を指定する

```diff_javascript:vite.config.ts
export default defineConfig({
  plugins: [react()],
+  build: {
+    outDir: '../backend/src/main/resources/static/',
+  },
...  
```
SurfacePro2にUbuntuを導入する

# はじめに
使わず眠っていたSurfacePro2(windows8.1)を復帰させるため
Ubuntuを導入したので、その手順の紹介記事となります。

# ハードウェア紹介
対象となるSurfacePro2は、2013年に発売されたタブレット型PCで
現在も新製品が販売されているMicrosoftのSufaceシリーズの1つです。
サイズが小柄な割には良いCPUを積んでいたのもあり
発売が始まったとたんに争奪戦となっていた記憶があります。
（ちょうど人気の中だった某ブラウザゲーの影響もあったそうな

持ち運びが楽なのはメリットだったのですが、その分拡張性は無いに等しく
USBポートは1つのみなので設置して使う時にはハブの装着が必須でした。

ただ排熱処理はしっかりと考えられており、排気口が背面パネルに設置され
上部へ向けて排気するので、閉じて使っても熱がこもらないようになっています。
更に排気用のファンは2つ有るため、これらも排熱する上で心強いです。

また本記事の個体は、持病の電源スイッチ不良を抱えているのでUbuntu導入後は
基本的に電源を落とさない運用を行っています。
外部モニターに接続して、クラムシェルモードで利用しているため排熱処理が
しっかりしている点は運用する上で役立っています。

# UEFIの設定
Ubuntuの導入にはSecure Bootの無効化を行う必要があるので
先ずはその設定を行います。

SurfacePro2でUEFI画面に入るには、電源が入っていない状態から
音量を上げるボタンと電源スイッチを同時押しすることで可能になります。
（電源スイッチ不良を抱えているので難作業でした・・・

UEFI画面のメニューは以下のようになっています

> Trusted Platform Module (TPM)　　［Enabled］
> Secure Boot Control　　　　　　　［Enabled］
> Install Default Secure Boot Keys
> Delete All Secure Boot Keys
>
> Exit Setup

Secure Bootを無効化するため
"Secure Boot Control"の"［Enabled］"を"[Disabled]"にします。

設定の切り替えが住んだら、"Exit Setup"を選択しましょう。
（これらUEFI画面の操作は画面タッチでも行えます)

再起動が始まると、Windowsの起動時に赤い画面が表示されるようになりますが
これはセキュアブートを解除したことを示すものになります。

# Ubuntuのインストール
セキュアブートを無効化したら、USBインストールメディアを用いての作業となります。
(USBインストールメディアの作成方法については省略します

SurfacePro2はUSB差し込み口が1つのみなので
ハブを利用しなければマウス・キーボードの有線接続とインストールメディア接続の両立が
出来ないことは注意してください。

大まかな手順としては以下となります。
1. SurfacePro2をシャットダウンした状態にする
2. ハブを利用し、USBインストールメディアとマウス・キーボードを装着する
3. 音量を下げるボタンと電源スイッチを同時押しして、起動する
4. GRUBメニューが表示されるため、「Try or Install Ubuntu」を選択する
5. 画面の指示に従ってインストール作業を行う

本記事では元から入っているWindowsを削除しUbuntuを入れるため
「ディスクを削除してUbuntuをインストール」を選択しています。

Windowsでパーティションを作成し、そこへのUbuntuインストールまでは出来たのですが
OS起動順位の設定方法がわからずデュアルブート運用は断念しました・・・

# インストール後の状態
システム画面
![surfacepro2_ubuntu1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780391/b048c8c7-b57f-6f19-8eb4-7343eb8eedc4.png)

リソース管理画面
![surfacepro2_ubuntu2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3780391/4f3d37c8-65ac-15f1-3692-ea6386c00b65.png)

# あとがき
使用感としてはSSDを積んでいるので起動が早く、メモリも8GBを積んでいるおかげで
スワップは発生せずサクサクとした操作が行えています。
発売から10年以上たっているPCですが、Youtube動画を流しながら並行して
事務作業を行うぐらいであれば問題は無さそうです。

本体背面に"Windows8.1Pro"の刻印があるが、入っているOSは"Ubuntu"という
ちょっと面白いマシンになりましたが改めて大事に使っていこうかと思います。


# 参考サイト一覧
- [Surface デバイスで BIOS/UEFI を使用操作方法](https://support.microsoft.com/ja-jp/surface/surface-デバイスで-bios-uefi-を使用操作方法-0f5953d2-befa-3617-a0e5-9735945af774)
- [Surface Pro 2 でUbuntu 14.04を動かす](https://www.zopfco.de/entry/2014/04/26/204313)
- [Surface Pro 4にubuntuを入れた](https://ipemo.hatenablog.com/entry/suraface4ubuntu)
SELinuxって何ぞや？

# はじめに
皆さんは検証する際にSELinuxは無効にしますか？私は必ず無効にします。
正直なところ、いつも何も考えずにとりあえず無効にしており、「SELinuxって結局何のためにあるのか？」というのがピンと来ていなかったので、浅く理解できることを目標に概要確認から動作検証をしたいと思います。

# SELinuxとは

SELinux (Security-Enhanced Linux) は、システムにアクセスできるユーザーを管理者がより詳細に制御できるようにする Linux® システム 用のセキュリティ・アーキテクチャです。

SELinux は、システム上のアプリケーション、プロセス、ファイルのアクセス制御を定義します。アクセス制御にはセキュリティポリシーを使用します。セキュリティポリシーは一連のルールで構成されており、アクセス可能なものとそうでないものを SELinux が識別できるようにします。

https://www.redhat.com/ja/topics/linux/what-is-selinux 

```
理解できそうで微妙にわからない。。。
アクセス制御は「chmodコマンドでパーミッションで済む話では？」と思いましたが、
以下を理解するとそうではないことがわかりました。
```
# SELinuxを理解するうえで重要な概念

### 任意アクセス制御 (DAC) ⇒いつもの権限管理
オブジェクトへのアクセスを制御するセキュリティモデルの一つです。このモデルでは、オブジェクトの所有者がアクセス権を設定し、他のユーザーがそのオブジェクトにアクセスできるかどうかを決定します。例えば、ファイルシステムでファイルの所有者が誰がそのファイルを読み取り、書き込み、実行できるかを決めることができます。

### 強制アクセス制御 (MAC) ⇒SELinux
より厳格なセキュリティモデルです。このモデルでは、アクセス権は中央の権限ある機関によって管理され、個々のオブジェクトやユーザーにラベルを付けてアクセスを制御します。例えば、機密情報を扱うファイルには「機密」のラベルが付けられ、そのラベルに適切なアクセス権を持つユーザーのみがアクセスできるようになります。

```
上記より、なぜSELinuxが必要かという問いに対して、
「DACは柔軟であるがゆえに穴ができてしまう可能性があるので、MACによって厳格に管理する必要がある。」
という理解をしました。
```

# SELinuxのモードについて
SELinuxのモードは3つあるようです。

Enforcingモード  
SELinuxが有効であり、設定されたポリシーに基づいてアクセス制御が行われます。ポリシーに違反するアクセスは拒否され、ログに記録されます。

Permissiveモード 
SELinuxは有効ですが、ポリシー違反があってもアクセスを拒否せず、警告メッセージをログに記録するだけです。このモードは、問題のトラブルシューティングやポリシーの調整に役立ちます。

Disabledモード 
SELinuxが無効であり、アクセス制御は行われず、ログも生成されません。

# 動作確認検証
Webサーバ(192.168.150.3)へアクセスし、デフォルトの状態ではアクセスできないことを確認、SELinuxへポリシー追加することによってアクセスできることを確認します。

①デフォルトの状態でWebサーバ(192.168.150.3)へアクセスし、失敗していることを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1196093/7fcba686-9ee1-2cf3-0efb-93524d8c6edf.png)

②Webサーバへ設定追加
```
[root@localhost html]# getenforce
Enforcing

[root@localhost ~]# sudo setsebool -P httpd_can_network_connect on 
#HTTPD（ApacheなどのWebサーバー）のスクリプトやモジュールがネットワーク経由で他のサーバーやサービスに接続できるかどうかを制御します。

[root@localhost ~]# sudo setsebool -P httpd_can_network_relay on
#HTTPDがバックエンド・サーバーにHTTPトラフィックをリレーできるようになります。

[root@localhost ~]# sudo restorecon -Rv /var/www/html
#SELinuxのポリシーを再読み込みして、変更を有効にします。

[root@localhost ~]# sudo systemctl restart httpd
#SELinuxの設定を反映させるために、Webサーバーを再起動します。
```

:::note info
プロセスやモジュール間のアクセス制御を許可しており、非常に細かくポリシーを記載できることがわかります。
:::

③設定追加後、Webサーバ(192.168.150.3)へアクセスし、成功していることを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1196093/8d3e8a2b-d52d-a1b4-a8fa-0526ab106012.png)


# さいごに
結論、「SELinuxって結局何のためにあるのか？」という疑問は、「DACによる管理だけでなく、セキュリティポリシーを適用することで、漏れのない一貫したセキュリティを保つため」にあるのかなと感じました。
以上、自分なりに解釈・検証してみましたが、何か間違ったことを言っていたらご指摘いただけると嬉しいです。ここまで読んでいただきありがとうございました。
【PHP】三項演算子

# if文とは
様々なプログラミング言語では条件分岐の1つであるif文が使われる。
以下のように使うことができる。

```ruby:PHP
function sort(string $dir, array $arr): array {
  if($dir == 'R'){
    sort($arr);
  }else{
    rsort($arr);
  }
  return $arr;
}
```


上記では`$dir`という文字列が'R'であれば`$arr`配列の中身を昇順に並び替え，'R'以外であれば降順に並び替える処理を行う。if文を使用すると8行のコードを書く必要があるが、三項演算子を使用することで簡潔に書ける場合もある。

# 三項演算子とは
三項演算子は演算子のひとつで3つの項目を使用する唯一の演算子である。書式は次の通り。

```ruby:PHP
条件式 ? 式1 : 式2
```
条件式を評価し、TRUEであれば式1、FALSEであれば式2を返す。また、三項演算子の短縮形として`?:`も存在する。

:::note warn
三項演算子を "積み重ねて" 使用することは避けましょう。 ひとつの文の中で括弧で囲わずに複数の三項演算子を使用した際の PHP の振る舞いは、 他のプログラミング言語のそれと比べて、少々わかりにくいものです。 PHP 8.0.0 より前のバージョンでは、三項演算子は左から右に評価されていました。 他の殆どのプログラミング言語では、右から左に評価されます。 左から右に評価される振る舞いに依存することは、PHP 7.4.0 以降は推奨されません。 PHP 8.0.0 以降は、三項演算子はどの演算とも結合しなくなっています。
:::


## 参照
https://www.javadrive.jp/php/if/index8.html

## 三項演算子の書き方
if文で書いた処理を三項演算子で書き直すと以下のようになる。

```ruby:PHP
function sort(string $dir, array $arr): array {
  $dir == 'R' ? sort($arr): rsort($arr);
  return $arr;
}
```

三項演算子を用いることで行数が半分になった。


# 最後に
他の方も同じソースコードを触ることを考え，より分かりやすく簡潔なコードを作成することを心掛けていきたい。その手法の1つとして三項演算子を使っていこうと思う。
Data Cloud ライセンス、権限など

[Data Cloudのまとめに戻る](https://qiita.com/Keiji_otsubo/items/ce366c02186b6bb5b39b)


+ [Salesforce Data Cloud を有効にするための最初のステップ](https://www.salesforceben.com/your-first-steps-to-enable-salesforce-data-cloud/)
+ [Help : Data Cloud へのアクセスとプロビジョニング](https://help.salesforce.com/s/articleView?id=000396444&type=1)

Sandboxでは使用できない。

+ [Help : Manage Data Cloud Users](https://help.salesforce.com/s/articleView?id=sf.c360_a_setup_user_setup_tasks.htm&type=5)
+ [データ クラウド: データ バンドルのインポート エラー](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007XH1le)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/c0c471cb-3572-af9a-2976-acfdbae32bb2.png)

+ [データクラウドへのアクセス](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007X8wMp)

:::note
データ クラウド アカウントにまだアクセスできない場合は、アカウントの種類に応じて、いくつかの異なる方法でアカウントを取得できます。データクラウドへのアクセスとプロビジョニングについては、以下の手順を確認してください。

https://help.salesforce.com/s/articleView?id=000396444&type=1
https://help.salesforce.com/s/articleView?id=000389708&type=1
:::

+ [ Customer Community Plus User licenseがDMOにアクセスできない](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007ajphq)


# 新しい Data Cloud 権限セットへの移行

https://help.salesforce.com/s/articleView?id=release-notes.cdp_rn_2024_winter_data_spaces_permission_set_migration.htm&release=246&type=5

 新しい標準権限セットは、データスペース対応機能のオブジェクトから「すべて表示」および「すべて変更」オブジェクト権限を削除して、データスペース内の強化されたデータセキュリティをサポートします。また、データスペースと権限セットの関連付けや、データスペース対応機能へのアクセス権の絞り込みが容易になります。すべてのユーザーは、Data Cloud データのアクセス権を管理するために、強化されたセキュリティデータスペースにアップグレードする必要があります。既存の権限セットの新しい名前および同等の新しい権限セットの名前を理解するには、以下の表を参照してください。

「Data Cloud 管理者」および「Data Cloud Marketing Admin (Data Cloud マーケティング管理者)」標準権限セットは、すべてのデータスペースへのフルアクセスが許可されているため、従来のセキュリティデータスペースと強化されたセキュリティデータスペースの両方と互換性があります。Data Cloud 管理者ユーザーを新しい権限セットに移行する必要はありません。

# オブジェクトに対する権限

+ [Data Cloud で Salesforce CRM にアクセスするためのオブジェクトおよび項目権限](https://help.salesforce.com/s/articleView?id=data.c360_a_enable_user_permissions_external_salesforce_org.htm&type=5)

「すべてのレコードの参照」、「すべてのレコードの編集」、および「すべてのフィールドの参照」権限はオブジェクト権限です。データを取り込むには、オブジェクトおよび項目に対して「すべてのレコードの参照」および「すべての項目の参照」権限が付与されている必要があります。

関連オブジェクトを Data Cloud に取り込まない場合でも、関連オブジェクトに対する権限を付与します。関連オブジェクトを参照する取り込み済みオブジェクトには、関連オブジェクト情報にアクセスしてデータストリームを作成する権限が必要です。

SurveyQuestionResponse オブジェクトへのアクセスは、SurveyResponse オブジェクトによって制御されます。Survey オブジェクトのデータを確実に取り込むには、SurveyResponse オブジェクトに「すべてのレコードを表示」または「すべてのレコードを変更」権限を付与します。
Salesforce CRM 組織の権限セットを変更すると、Data Cloud のデータバンドルのデフォルトの動作に影響する可能性があります。

+ [Permission errors adding Service bundle data stream](https://trailhead.salesforce.com/trailblazer-community/feed/0D5KX00000PWBfP)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/c503d93e-249e-43fe-b897-ee38694e5fe9.png)
Github Actions – Ubuntuのフォントをキャッシュ&リストアする ( Noto Font の例 ) 

# Workflowの例

`/usr/share/fonts/` にフォントがインストールされるようなので、このディレクトリを対象にキャッシュ保存・リストアをするだけで良いようだ



```yml
jobs:
  font-cache:
    runs-on: ubuntu-latest
    steps:
      - name: Restore or Save Cache – Font Noto
        id: cache-font-noto
        uses: actions/cache@v4
        with:
          path: /usr/share/fonts/opentype/noto
          key: font-noto-cache-key

      - name: Install fonts-noto
        run: sudo apt install fonts-noto-cjk
        if: ${{ steps.cache-font-noto.outputs.cache-hit != 'true' }}

```

# DockerでUbuntのフォントインストールを確認してみる例

```
$ docker run -it ubuntu
```

```docker
apt update
apt install fonts-noto-cjk

ls /usr/share/fonts/
```




# チャットメンバー募集


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

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


# プロフィール・経歴

https://github.com/YumaInaura/YumaInaura
未経験でもAWS SAAを2ヶ月で何とかパスした話

おはこんばんは! なおぽんです！
4月末にAWS SAAの試験に793点で合格しました！！
インフラ未経験で職業経験もないですが、せっかく合格できたので私の行った勉強方法をシェアします🐹

## ステータス
- インフラ完全未経験
- 現在無職
- AWS自体はS3を少しいじったことある程度

## 学習期間と時間
- 2ヶ月と少し
- 試験の2週間前は1日平均3~4時間
- 試験の2週間前からは1日6~7時間程度

## 学習に使用したもの
- 辞書として使用した参考書
    - [(模擬問題付き)徹底攻略 AWS認定 ソリューションアーキテクト − アソシエイト教科書 第3版［SAA-C03］対応（いわゆる黒本）](https://amzn.asia/d/eBRAMAv)
- 問題集 
    - [Ping-t](https://mondai.ping-t.com/g)
    - [【公式出題比率同じ】AWS SAA-C03実践模擬問題集(ソリューションアーキテクトアソシエイト)](https://www.udemy.com/share/109BP83@LpDoVZm9UWwTyREEglltVjEG0HDo27vT1rLhYQz0rYIiZxPoQrJ6u8ecJB1jfQlopw==/)
    - [【SAA-C03版】AWS 認定ソリューションアーキテクト アソシエイト模擬試験問題集（6回分390問）](https://www.udemy.com/share/101rfM3@lWc1qpPJLM0tU1gDnkxW3flgIcp_ZVe1qq_mLZogubHPdixBZ9uoV4Ls5MwMII2ohw==/)
- 実際にAWSで構築しながら学習するための本
    - [AWSではじめるインフラ構築入門 第2版 安全で堅牢な本番環境のつくり方](https://amzn.asia/d/5J1Fnl2)
    - [(コード入手可能)AWSインフラサービス活用大全［第2版］ 構築・運用、自動化、データストア、高信頼化](https://amzn.asia/d/hiMOWTg)

## 2ヶ月程度学習しておすすめだと思った勉強方法
試験問題を解けるようするために、最初は参考書（私の場合は黒本）を読みながら、[Ping-t](https://mondai.ping-t.com/g)各分野の基本問題を解いていく方法がおすすめだと思いました。

### どうしてそう思ったのか
私自身、試験の2週間前までUdemyの問題を解きながら参考書を読み進めていました。しかし、未経験で基礎力が欠落していたため、Udemyの解答の説明では細かい部分まで届かなかったからです。実際の試験を受けてみて、「**選択肢のどこがなぜ間違っているのか**」を考えながら選択肢を絞っていかないと、当たる確率が下がってしまう印象を持ちました。そのため、少しでも正しい選択肢を選ぶために、1つ1つ分野分けされた問題集であるPing-tを最初は基礎力を養うために行なっていく方がいいと思いました。

### 基礎が身についているならUdemyで鍛えるのもあり！
大体の知識を持ち合わせていて、基礎力がある方はUdemyの問題集を繰り返し解くのもいい方法だと思います。UdemyにはPing-tでカバーしていない難しい問題が詰まっていたからです。そのため、基本的な問題は確実にものにできるけど、難しい問題も解けるようにしておきたいという方にはおすすめでした。

## 暗記が苦手だという方に
なんとか合格しましたが、私自身、暗記が壊滅的な人間です。なので、問題を解くのと並行してAWSを実際にいじっていました。その際に、以下の技術書に従ってコマンドを叩いたり、コンソールをいじったりしました。
[AWSではじめるインフラ構築入門 第2版 安全で堅牢な本番環境のつくり方](https://amzn.asia/d/5J1Fnl2)
大学では外国語学部に所属していましたが、英単語帳を見て頭痛を起こすほど丸暗記といったことが苦手だったので、実際にいじってしまうのは策略としてありだと思います！🐹
また、以下の技術書もおすすめでした。
[(コード入手可能)AWSインフラサービス活用大全［第2版］ 構築・運用、自動化、データストア、高信頼化](https://amzn.asia/d/hiMOWTg)
AWSの試験は暗記だっていう思考を上記の本でぶち壊しましょう笑

## でもやっぱり難しいよね、暗記だよねってなる方へ
絵や図といった視覚からの記憶が得意な方に特におすすめの方法です。（例えばですが、言葉にして発するのは難しいけどイメージはパッと浮かんでくるよというタイプの方です。）
Ping-tの問題を解きながら、構築された図を下記のようにノートにひたすら描く方法です。
![JPEG画像-4058-9871-0F-0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3558621/0c49d064-615c-1aa0-ad21-8a4df66a6d32.jpeg)
図を描き起こしていくと、文字だけでは理解できなかった部分まで見えてきたりします。そして、描き写していくにつれ、問題文を読んだ際に「私ならこう構築するかな」と、選択肢を見る前から考えるようになっていたりします。このように考えるようになっていたら、もうSAA合格への兆しだと思っています笑

## 最後に
ここまでお読みいただき、ありがとうございました！
Ruby Silver合格後にLPIC level1を学習する予定でしたが、突如変更してAWS SAAに挑戦してみてよかったです。モダンなアーキテクチャってこんなふうに簡単に構築できるのかとなります笑
合格しても、してなかったとしても、成長を感じられる盛りだくさんの試験でした。なんか挑戦したいなというかたはぜひ挑戦してみてください。🐹
CallCenterId のバグ？



+ [Salesforce Flow で空の検索フィールドを参照する方法はありますか? また、コールセンターのフィールドを空にすることはできますか?](https://trailhead.salesforce.com/trailblazer-community/feed/0D54V00007aiaQnSAI)

現在、Salesforce フローを通じてコールセンターを割り当てる作業を行っています。コールセンターの割り当て方法がわかりました。ただし、エントリー基準に問題があります。私は理論をテストしていて、コールセンター ID が空白の場合にエントリ条件式でそれを参照できるかどうかを確認したいと考えていました。 ISNULLとISBLANKを試してみましたが、コールセンターIDが存在しないと表示されます。

また、ユーザーが非アクティブに変更された場合、コールセンター ID を空白にしたいと考えています。テキスト式と空の代入要素を試しましたが、機能しませんでした。 Service Cloud を使用して Salesforce Flow でコールセンター ID を操作できた人はいますか?

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/ccc8cfcf-19bf-681c-a285-09fa4201cb0d.png)


:::note
これはバグではないかと思っています。フローのエントリ条件で CallCenterId を使用すると問題を再現できましたが、それはエントリ条件が式を使用して定義されている場合に限られます (標準のエントリ条件を使用する場合は正常に動作します)。もう一度確認してください。担当している組織にコールセンターが設定されていますか? 

[このブログ投稿](https://jenwlee.com/2017/01/03/automatically-assignremove-user-tofrom-a-call-center-sales-console-permission-set-license-sales-console-perm-set/)に基づくと、Flow でコールセンターを操作できるはずですが、当面は数式入力基準に関するこの潜在的なバグを回避する必要があるかもしれません。 Salesforce サポートにケースを開いて、既知の問題として記録してもらえるかどうかを確認するか、すでに問題がある場合は知らせてもらうことをお勧めします (この問題に関する既存の問題は見つかりませんでした)。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/c51ad88e-7e80-c452-df8c-790f1bce9fda.png)

CallCenterIdが空白の値に設定されている更新要素を使用すると、私のテストでは機能するようです。 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/328136/6b7aab5f-a3a2-0508-e888-6889429b7f58.png)
:::


# 関連資料

+ [コールセンターと API](https://developer.salesforce.com/docs/atlas.ja-jp.api.meta/api/sforce_api_guidelines_callcenter.htm)
+ [CallCenter](https://developer.salesforce.com/docs/atlas.en-us.object_reference.meta/object_reference/sforce_api_objects_callcenter.htm)
Laravelの現場に出てみて

2024.03から始まり1ヶ月半経つ現場作業で経験したことを時系列順にまとめます。

求人サイトを一から作成する短納期案件です。
使用FWはLaravelで、チーム体制は私とPMの２人から始まり徐々に増え、現在は合計５人で取り組んでおります。

**目次**
1. チームに参加
    - 環境構築
    - プロジェクト要件調査
1. プロジェクト始動
    - 先方からの依頼把握
    - Blade変換
1. 他PGがチームに参加
    - 情報共有
    - コントローラー化
    - 機能実装
    - 納期間近
1. 学んだこと
1. まとめ

# チームに参加
チームのSlackに参加し一番驚いたのは、私とPMの二人しかいないことでした。「後ほどメンバーを増やす予定だが如何せん短納期なので動けるメンバーからどんどん進めてほしい」とのPMからのお達しだったのでできることから進めていこうと心に決めました。


**<環境構築>**
最初に取り組んだのはお馴染みの環境構築です。
これはどの現場でも最初に行います。私はいつもここで一番苦戦するので、あらかじめPMに伝えて丁寧に教えていただくようにしています。今後のプロジェクト全体に関わってくる部分なので、この辺りは特に正直にわからない部分はわからないと伝えて進めるのがおすすめです。


**<プロジェクト要件調査>**
続いて、PMが先方から順にもらってくるざっくりとしたプロジェクト要件のスプレッドシートを読み込み、調査しました。先方がどういうものを作りたいのかイメージしながら確認することが大切です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3760862/7a905b13-488c-6fab-bbd9-7f1d8fd1d6e8.png)
https://docs.google.com/spreadsheets/create?hl=ja


# プロジェクト始動
先方からの依頼資料が一通り出揃ったところでプロジェクトが本格的に始動しました。

**<先方からの依頼把握>**
次に、先方とのイメージすり合わせを行いました。
これはあるあるなのですが、先方にエンジニア経験者がおらず素人目線でのご依頼内容だったので、技術的に見ると曖昧な部分が多かったです。わからない部分はPMを通してどんどん先方に質問しながら今後の流れをまとめていました。今思えば、ここにもっと重きを置けばこのあとより楽に進めたのではと思います。

**<デザインをBlade変換>**
次に、別部署のデザイナーさんが作ってくださったHTMLをBladeファイルに変換する作業を行いました。
ほぼコピペの中、一部Blade形式に変える必要があったので、楽そうでそれなりに精神をすり減らされる作業でした。

# 他PGがチームに参加
プロジェクト開始から１〜２週間ほど経つと、毎週1人づつほどメンバーが徐々に増えていきました。それと同時にPMがご多忙になり、最初のメンバーである私が実質リーダーのような役割を務めることになりました。エンジニアとしてリーダーを務めるのは初めてでした。

**<情報共有>**
メンバーが増えたので、当然ここまでの情報やチームのルールを共有する必要があります。時間は限られているので、的確かつ迅速に伝える必要があります。Power Pointなどで資料を作っておくと良いでしょう。

**<コントローラ化>**
これまではBladeファイルをブラウザ表示させる最低限のルーティングで作業をしていました。
```php:web.php
Route::get('/', function () {
    return view('index');
});
```
が、このあとの機能実装に向けてコントローラを噛ませるようにルーティングを変更しました。
```php:web.php
Route::get('/', [App\Http\Controllers\IndexController::class, 'index'])->name('index');
```
**<機能実装>**
ここまでBladeファイルで見た目だけ作ってきましたが、ここからはいよいよ機能の実装です。先方からのご依頼内容の通りに機能を作成していきましたが、想定以上に時間を要しました。というのも、作成しているうちに見つかった矛盾点や不明点のせいで作業が滞り、そこを乗り越えたらまた問題が見つかり……の繰り返しでなかなか前に進むことができませんでした。

**<納期間近>**
元々短納期であったことも相まって、想定より悪い進捗で納期間近に差し掛かってしまいました。PMもお忙しくプロジェクトの進捗を100%把握することができていなかったため、とてもバタバタした現場になってしまいました。

# 学んだこと
今回の案件を通して、技術的なことももちろんたくさん学びましたが、何より学んだことは**俯瞰した視野**・**わかりやすい報・連・相**の２点です。

**<俯瞰した視野>**
割り振られたタスクに限らずプロジェクト全体を見渡すことで、巡り巡って自分担当箇所に追加しなければならないことや逆に不要な部分が見えてきて円滑な作業を行うことができる。

**<わかりやすい報・連・相>**
今何を行なっているかや次に何を行う予定かという概要だけではなく、具体的な時間や進捗率（％）をざっくりでもいいので視覚的に伝えることで他のチームメンバーやリーダーがスケジュールを立てやすくなる。

例：【進捗報告】 
”作業内容1” 50% 9:00-10:00
"作業内容2"  0% 10:00-12:00
現在"作業内容１"に取り組んでいます。10:00から"作業内容2"に取り組む予定です。


# まとめ
今回はLaravelの現場に出てみて体験したことをまとめてみました。社外秘の内容が多く技術的な部分はあまり書けませんでしたが、現場ならではのことをたくさん伝えられたかと思います。当たり前のようで実践は難しい、常識レベルの社会人力を身につけることがプロジェクトに貢献するにあたって一番大切なことです。
Gitコマンド一覧

ユーザーネーム・ユーザーメール 設定
```
git config --global user.name "Test"
git config --global user.email "test@gmail.com"
```
<br>
ユーザーネーム・ユーザーメール 確認

```
git config --global user.name
git config --global user.email
```
<br>
リポジトリを新規に作成

```
git init
```
<br>
現在のディレクトリとサブディレクトリ内の新規ファイルと変更をステージング

```
git add .
```
<br>
リポジトリの現在の状態を表示

```
git status
```
<br>
変更をコメント付きでコミットする

```
git commit -m "test"
```
<br>
GitHubとGitを関連付ける

```
git remote add origin <GitHubリポジトリのURL>
```
<br>
変更をGitHubリポジトリにプッシュ

```
git push -u origin master
```
<br>
コミット履歴を表示

```
git log
```
<br>
リモートリポジトリからクローンする

```
git clone <GitHubリポジトリのURL>
```
<br>
ブランチ一覧表示

```
git branch
```
<br>
ブランチ作成

```
git branch <新しいブランチ名>
```
<br>
ブランチ削除

```
git branch -d <削除するブランチ名>
```
<br>
ブランチ切り替え

```
git checkout <ブランチ名>
```
<br>
ブランチAをブランチBにマージ(git checkout B でブランチBに切り替えておく)

```
git merge <ブランチA>
```
<br>
リモートリポジトリから変更をフェッチしてマージ

```
git pull
```
誘導機の諸性質（コンター図）

# はじめに
誘導機のトルクや二次電流は滑りsと2次抵抗$r_2$に依存する。また、$r_2/s$を一定にすれば滑りを変えたとしても、トルクや二次電流は不変になる。したがって、滑りと二次抵抗のがトルクや二次電流といった出力に与える影響を調べることで誘導機の特徴を詳しく解析することができると考えられる。そこで、今回は、以下の記事を参考にして、滑りと二次抵抗を独立的に変化させていったとき、トルクや二次電流がどのように変化するのかを調査することを目的とする。

https://qiita.com/arairuca/items/0d81c5b96ac5154b2544

# プログラム
それでは、上記事の等価回路やプログラムを参考にして以下のようなプログラムを組んでみよう。

## 二次電流
```python induction_machine_I.py
import numpy as np
import matplotlib.pyplot as plt
import math

p=4
f=50
E_1=100.0

r_1=1.0
x_1=1.0
#r_2=1.0
x_2=10.0


n=1000
r_2= np.linspace(0.1,20,n)

#滑りの範囲の指定
#s = np.arange(-1.0, 2.0, 0.02)

s=np.linspace(-1,2,n)

r_2,s= np.meshgrid(r_2,s)

N_s=120*f/p
N=(1-s)*N_s

omega_s=2*math.pi*N_s
omega=2*math.pi*N

I2_dot=E_1/((r_1+r_2/s)+1j*(x_1+x_2))
I_2=abs(I2_dot)

P_2= (r_2/s)*I_2**2

T=P_2/omega_s


fig, ax = plt.subplots()



# x 軸のラベルを設定する。
ax.set_xlabel("滑りs", fontname="MS Gothic")

# y 軸のラベルを設定する。
ax.set_ylabel("2次電流", fontname="MS Gothic")

# タイトルを設定する。
ax.set_title("2次電流と滑りの関連式", fontname="MS Gothic")

#x軸の反転
ax.invert_xaxis()
ax.contour(s, I_2,r_2)
#カラーバーの表示
PCM=ax.get_children()[2] 
plt.colorbar(PCM, ax=ax,label="r_2")
ax.grid()
plt.savefig("誘導機_二次電流コンター図.png")
plt.show()

```
これを実行すると以下のような画像が出力される。

![誘導機_二次電流コンター図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/c33799df-430c-bcf0-7761-07edd0d3075b.png)

この図を見て明らかな通り、滑りsが0となる場合において、二次電流が0となる。これは、電気角速度と機械角速度が等しいため、磁束が交差しないため、二次電流が生じないことを意味している。

また、滑りsが0以外のところでは、二次抵抗が増えるほど二次電流が流れにくくなっている。

## トルク
一方で、トルクについては以下のようなプログラムを書く。
```python induction_machine_T.py
import numpy as np
import matplotlib.pyplot as plt
import math

p=4
f=50
E_1=100.0

r_1=1.0
x_1=1.0
#r_2=1.0
x_2=10.0


n=1000
r_2= np.linspace(2,10,n)

#滑りの範囲の指定
#s = np.arange(-1.0, 2.0, 0.02)

s=np.linspace(-1,2,n)

r_2,s= np.meshgrid(r_2,s)

N_s=120*f/p
N=(1-s)*N_s

omega_s=2*math.pi*N_s
omega=2*math.pi*N

I2_dot=E_1/((r_1+r_2/s)+1j*(x_1+x_2))
I_2=abs(I2_dot)

P_2= (r_2/s)*I_2**2

T=P_2/omega_s


fig, ax = plt.subplots()



# x 軸のラベルを設定する。
ax.set_xlabel("滑りs", fontname="MS Gothic")

# y 軸のラベルを設定する。
ax.set_ylabel("2次電流", fontname="MS Gothic")

# タイトルを設定する。
ax.set_title("トルクと滑りの関連式", fontname="MS Gothic")

#x軸の反転

ax.set_xlim(-1,2)
ax.invert_xaxis()
ax.contour(s, T,r_2)
#カラーバーの表示
PCM=ax.get_children()[2] 
plt.colorbar(PCM, ax=ax,label="r_2")

ax.grid()
plt.savefig("誘導機_トルク_コンター図.png")
plt.show()


```

これを実行すると、以下のような画像を得ることができる。

![誘導機_トルク_コンター図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686019/c6055751-d74b-5786-3959-d140020da9f1.png)

滑りsが0付近では、電気回転速度と機械回転速度が等しいので、トルクTは生じていない。一方で、トルクT一定条件の下で、二次抵抗$r_2$を変化させることができれば、滑り$s$も変化することがわかる。

# まとめ
今回は、誘導機の滑り$s$と二次抵抗$r_2$を独立的に変化させることで、どのように出力であるトルクと二次電流が変化するのかを調査した。結果、滑り$s$と二次抵抗$r_2$の比率を変化させる比例推移を行えば、トルクと二次電流を一定に保つことができることが分かった。


# 参考文献

コンター図カラーバーの追加方法

https://stackoverflow.com/questions/23090791/matplotlib-colorbar-not-working-due-to-garbage-collection
X(旧Twitter)において使われている背景がボケるcssを設定してみた

# はじめに
みなさん、こんにちは **torihazi**です。
現在、Xクローンを作成しているのですが、
今日はタイトルのことをやっていいきたいと思います。

追記: 2024/04/30
筆者は初心者です
そのため指摘あればどしどしお願いします🙇

# そもそも何のこと？
![スクリーンショット 2024-04-30 9.32.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/8ef7c62f-5366-4f6b-adbf-8064f20178d2.png)

ここ、スクロールしていると下に流れるツイートがボケていますよね。
今日やりたいのはこの部分です。
他にもいろいろやり方があるのかと思いますが、あれば教えてください。

# コード
```css
クラス名でもなんでも {
  backdrop-filter: saturate(120%) blur(10px);
}
```

追記:2024/04/30
safariでは以下の記載が必要であるとのことです。
ご指摘ありがとうございます。
> css property の backdrop-filter は まだ safari は -webkit-backdrop-filter の指定が必要

設定後
完全再現とまではいきませんが、ぽくはなりました。
![スクリーンショット 2024-04-30 12.39.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2567812/32c4f521-d8d8-c34f-5d30-985623f10a9b.png)


# 終わりに
以上です！
他のやり方あったら教えてください！
【備忘録】spring.jpa.hibernate.ddl-autoで大失敗した話

現在アサインしているプロジェクトでは、Springbootを使用しているのですが、設定の中身を理解せずにいじったことで大失敗を犯してしまいました。
大失敗とは何かというと、プロジェクトのDB上のテーブルをほぼ削除してしまうという、とんでもなく恐ろしい事でした。（まぁ、言われた通りにいじっただけなので自分が完全に悪かったというわけではないと思いたい…）

<h2>spring.jpa.hibernateとは</h2>
application.propertiesファイルに書いて、DBの設定を行うことが出来るものです。
詳しくはまた別記事で纏めようと思います。

ここでは一旦、<strong>「DBを色々いじれるもの」</strong>という理解で良いかと思います。

<h2>spring.jpa.hibernate.ddl-auto に設定可能な値</h2>
この値では、データベーススキーマ(テーブル）を設定することが出来ます。

・none
➙何もしない
・validate
➙検証をする。 しかしデータベースには変更を加えない。
・update
➙アプリケーション起動時に、Entityに対応するテーブルがなければ作成する。
・create
➙アプリケーション作成時に、Entityに対応するテーブルがなければ作成する。 もしあれば、 データを削除する。
・create-drop
➙アプリケーション作成時に、Entityに対応するテーブルがなければ作成する。 セッション終了時にスキーマを削除する。


私は“create-drop”を設定してしまったことで、セッション終了時にテーブルがほとんど消えてしまいました。
一時的にテーブルを作成する場合以外は基本的に"none"を設定するといいかと思います。

<h2>まとめ</h2>
application.propertiesのDBに関係してそうな記述は、調べてから触るのが吉。
Realm-SwiftでschemaVersionを変えるだけでクラッシュする

## エラー内容
`
Fatal error: 'try!' expression unexpectedly raised an error: Error Domain=io.realm Code=16 "Database has an unsupported version (24) and cannot be upgraded" UserInfo={Error Name=UnsupportedFileFormatVersion, NSLocalizedDescription=Database has an unsupported version (24) and cannot be upgraded, Error Code=16}
`

## 解決方法
[Realm](https://github.com/real)のバージョンを最新版に更新したら解決した。
変更前：v10.43.1
変更後：v10.49.2

### SPMを使っている場合の更新方法
最新化の手順は File > Packages > Update to Latest Package Versionsを実行する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/245300/55521141-d485-c5c4-f3fa-6cf3782ed28f.png)

## 詰まったこと
migration周りの失敗だと思いこんでおり、データ構造やmigrationの見直しを行っていたが解決しなかった。
試しに`schemaVersion`のみ差分を出してみると今回のエラーとなったので、Realm側の更新を疑ったら解決した。
（いつからかは不明だが、migrationはリリース以降触れていなかったので顕著化していなかったのかなと思われる）
【Unity】RaycastをDrawRayで視覚化する際の方向と距離について

Unityでゲームを制作している際にRaycastを使って当たり判定を取得する際にRaycastが望んだ方向と距離で正しく飛ばせているかを確認する事ってありますよね？

UEだとエンジン側がRaycastの関数に光線を表示するかどうかを指定できるので楽なのですがUnityだとDrawRay等を使って自分で用意する必要があります。

今回はその時にハマってしまった事を少し書いておこうと思います。(筆者がその辺りの計算が苦手なせいですがきっと同じような人がいると信じてます。)

```
float distance = Vector3.Distance(target.position, player.position);
Vector3 direction = target.position - player.position;
Physics.Raycast(pos, direction, distance)
{
Debug.Log("ヒットした");
}
```
こんな感じで対象までの向きと距離を計算してレイを飛ばしたとします。
これだけだとレイがちゃんと飛んでいるのかわからないのでDrawRayを使って視覚化する事にしました。

```
float distance = Vector3.Distance(target.position, player.position);
Vector3 direction = target.position - player.position;
Debug.DrawRay(pos, direction * distance, Color.red, 5, false); // -> 追加
Physics.Raycast(pos, direction, distance)
{
Debug.Log("ヒットした");
}
```
これで確認するとDrawRayの光線がtargetを突き抜けてしまいます。

理由は
```
Vector3 direction = target.position - player.position;
```
この計算だと
ターゲットオブジェクトの方向を指すとともに、このベクトルの大きさは二つの位置の間の距離に等しくなるので正規化したベクトルに変えて上げないといけないようです。
Raycastの処理を見に行くと
```
    public bool Raycast(Vector3 origin, Vector3 direction, [DefaultValue("Mathf.Infinity")] float maxDistance = float.PositiveInfinity, [DefaultValue("Physics.DefaultRaycastLayers")] int layerMask = -5, [DefaultValue("QueryTriggerInteraction.UseGlobal")] QueryTriggerInteraction queryTriggerInteraction = QueryTriggerInteraction.UseGlobal)
    {
        float magnitude = direction.magnitude;
        if (magnitude > float.Epsilon)
        {
            Vector3 direction2 = direction / magnitude;
            return Internal_RaycastTest(ray: new Ray(origin, direction2), physicsScene: this, maxDistance: maxDistance, layerMask: layerMask, queryTriggerInteraction: queryTriggerInteraction);
        }

        return false;
    }
```

正規化しているのがわかります。
なので
```
float distance = Vector3.Distance(target.position, player.position);
Vector3 direction = target.position - player.position;
Vector3 normalization_dir = direction / direction.magnitude;
Debug.DrawRay(pos, normalization_dir * distance, Color.red, 5, false); // -> 正規化したベクトルで計算
Physics.Raycast(pos, direction, distance)
{
Debug.Log("ヒットした");
}
```
としてあげるとDrawRayの表示がRaycastと同じになります。
TweetDeck（X Pro）の「ポストをクリア」ボタンを消す

PC版Chrome（およびEdge）向け。

# お前を消す方法

1. 「[Stylebot](https://chromewebstore.google.com/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha)」などのCSSをカスタマイズできるブラウザ拡張機能をインストールします
1. TweetDeck（X Pro）のドメイン/URLに対して以下のスタイルを適用するように設定します
   ```css
   div[aria-label="ポストをクリア"][role="button"] {
     visibility: hidden;
   }
   ```
DevSecOpsThon2024 参加記



# Table of Contents
- DevSecOpsThon？
- 私はだれ
- 面白かったことポイント

# [DevSecOpsThon at GMOkitaQ](https://developers.gmo.jp/kitaq/devsecopsthon2024/)

> 「DevSecOpsThon」とは、【開発（development）】【セキュリティ（security）】【運用（operation）】の
3つの要素を融合したDevSecOpsを学びながら、チームで協力して特定の課題に挑戦するコンテストです。
今年は、ConoHa VPSにて提供している超高速GPU 「NVIDIA H100」搭載サーバーを活用した、
AIチャットボット開発を中心に開催いたします。

# 私はだぁれ
- 8年ぐらい色んな技術をつまみ食いしていただけの一般人
    - ctf
    - 競プロ
    - web
    - GUI遊び
    - ゲーム作り その他諸々
- 自鯖・開発・インターネットのトラフィック監視が趣味

# 注意書き
GMO kitaQの方のご意向で，開催内容には言及が禁じられていますので，それに沿う感じで面白かったことを書いていきます．

# ｵﾓﾛポインツ
## 思想が強い学生がいた
「今すぐPythonを止めましょう」「PythonをLLM以外から完全に切り離すことで私たちのプロジェクトは成功した」などなど，Pythonアンチがかなり多くいました．Go信者が各チームに1人はいたように見えるのも非常に面白かったです．各技術を深く取り組んでいるからこそ見える知識があると思うので，そのような方と3日間泊まり込みでおしゃべりできて面白かったです．

## 愉快な面白い学生がいた
[Tanga table](https://tangatable.jp)という宿泊施設で全員2泊3日すごしました．2日目の夜には，ウミガメのスープ早解きで遊んだり，けん玉をしている人もいました．突発競技プログラミング部が発生しているところもありました．学生同士だからこそ，趣味が近い人とはっちゃけて遊べるのはおもしろかったです

## 様々な分野で技術力が強い学生が集結していた
- ネットワーク最強！研究もしています
- ChatGPTとか，あの辺が流行りだすより前からAI関わってたので．
- 大学でA100，8枚使って遊んでます
- Go is GOD
- Nuxt, Vueこそ至高，みんなSPAでやろうぜ
- みなさんもっとフロントエンド頑張りませんか
学生エンジニアが集まるとWeb界隈だけで終了しがちです．しかしDevSecOpsthon，その名の通りそんなこともなく色んな技術スタックを持つ人が集結しました．1日目の午前には，インフラ全く知らん人に向けて学生間で教えあっていたり，2日目の夜(3日目の朝)には，LLMを使った開発に関する突発勉強・講習会が開かれていたり，お互い教えあう雰囲気が面白かったです．

## 仲良くなれたね
普段，このような場ではTwitterを交換して終わりになることが多いと思います．実際に，Twitter交換会もありました．
しかし今回，LINEの交換にまで発展しているペアもありました．技術スタックが近いのもあったようですが，仲良くなれていてうらやましいです笑

## 小倉，いいところだった
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196553/3c1b4bcd-de31-4802-774f-0252908057a9.png)
イベント終了後，参加者の一人(DevSecOpsThonで知り合いました)と一緒に小倉城を見に行きました．なんで初見の人と旅行に行ってるの?っていうツッコミはナシでお願いします．仲良くしていただいてありがとうございました．

## Conohaちゃんがかわいかった．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196553/d674d477-b2a6-7cbc-6bf9-f16463d62f4b.png)
深入りはしませんが，よかったです．
横になかの人のサインがありました．



# 感想
わたしが好きな分野も，初めて触る分野もあってめちゃくちゃ満足のいくイベントでした．Nvidia-smiのprometheus exporterをGoで作ったので，いつか公開しようかな?と思ってます．
GMO kitaQの皆様も，このような機会を提供していただきありがとうございました！
Adminer の使い方

Ubuntu 24.04 にインストールしました。

## インストール

```bash
sudo apt install adminer
```

インストールされたファイルの確認

```bash
dpkg -L adminer
```

## adminer.php に Web サーバーでアクセスするようにする。

前提: Web サーバーで、PHP が使えるようにしておく。

Nginx の場合

```text:/etc/nginx/sites-available/default
（省略）
       location ~ \.php$ {
                include snippets/fastcgi-php.conf;
                fastcgi_pass unix:/run/php/php8.3-fpm.sock;
        }
（省略）
```

```bash
sudo systemctl restart php8.3-fpm
sudo systemctl restart nginx
```

Nginx で使う方法
/usr/share/adminer/adminer.php にアクセスできるようにする。

```bash
cd /var/www/html
sudo ln -s /usr/share/adminer .
sudo systemctl restart nginx
```

## ブラウザーでアクセス

http://localhost/adminer/adminer.php

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/400ea2e3-347e-63ca-53fe-0268c96445f8.png)

PostgreSQL に切り替える
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/53063967-6b7b-8995-2b8b-79631a11dfb7.png)

テーブル構造の表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/8382c5b0-2003-0447-3f83-e18d4bd41853.png)

データの表示
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/0070d9c8-2018-359c-13ac-0fbdef620c84.png)
自社で開発したWEBサーバー(AWS等)を他社に移管する手順

# はじめに
自社で開発したWEBサーバー(AWS等)を他社に移管する機会がありましたので、必要な作業をまとめました。
読んでいただいた方が少しでも参考になれば幸いです。

# 移管するもの
以下の移管手順について記載します。
| No. | 項目 |
|:-:|---|
|  1 | AWSアカウント  |
|  2 | Google Analytics |
|  3 | Google Tag Manager |
|  4 | Google Search Console |
|  5 | ドメイン |
|  6 | GitHubリポジトリ |

# AWSアカウント
移管元：代理店経由で契約している場合、直接契約に変更します。
移管先：AWSへ譲渡同意書の発行依頼を行います。
　　　　譲渡同意書の発行までには1~2週間程度の時間がかかります。
移管元/AWS/移管先：譲渡同意書に署名します。

以下のサイトが参考になります。
https://qiita.com/knt-okada/items/823305b2930a1b315e99

# Google Analytics/Google Tag Manager/Google Search Console
移管先：管理者のメールアドレスを移管元に連絡します。
移管元：移管先のメールアドレスを招待し、移管元のアカウントを削除します。

以下のサイトが参考になります。
https://support.google.com/google-ads/answer/44500?hl=ja
https://support.google.com/tagmanager/answer/6107011?hl=JA
https://saitoma.com/customer/15597.html 

# ドメイン
ドメイン管理会社により手続きが異なります。
ムームードメインの場合は下記となります。

・ムームードメイン内の移管
https://www.wisesips.com/service/staff_column/217.html

・ムームードメイン以外の移管
https://support.muumuu-domain.com/hc/ja/articles/360046369393-%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E4%BB%96%E7%A4%BE%E3%81%B8%E7%A7%BB%E7%AE%A1%E3%81%97%E3%81%9F%E3%81%84-jp-%E4%BB%A5%E5%A4%96 

# GitHubリポジトリ
移管先：GitHubアカウント名を移管元に連絡します。
移管元：移管先アカウントに転送します。
以下のサイトが参考になります。
https://qiita.com/do7be/items/fa845240bc58b2153a44 

なお、リポジトリが組織に属している場合は、いったん個人に転送し、その後移管先に転送する必要があります。

:::note warn
注意点：README.md等に自社情報が含まれていないかチェックが必要です！
:::

# その他
移管先からの問い合わせに備えて、以下の情報を準備しておきましょう。
・サーバー構成図
・セキュリティ監視(WAF、GuardDuty、IP制限等)
・ビルド～サーバーアップロードまでの手順
・検証環境(BASIC認証含む)
・開発言語／フレームワーク

# 最後に
以上が移管に必要な手続きや準備についての情報です。
移管作業を円滑に進めるために、適切な準備と手順の確認をお勧めします。
WSLでのUbuntu環境

#### 授業でWSLをインストールして使っていく上で起こりがちな問題点と解決法を備忘的に書き連ねます

wslをインストールする際に入力するパスワードは `sudo`するときには使えるが、`su`するときには使えない。rootになるためには Powershell を開いて `wsl -u root`するとノーパスワードでrootになれる。
しばしばsudoするためのパスワードを忘れる場合があり、上記の様にしてPowershell上でrootになって、`passwd username`とすれば再設定することができる。（ubuntuを開き直せば設定したパスワードで`sudo`できるはず）

また、ubuntuを開くとrootになっている、という状態になることがあり、解決法としては一般ユーザとしてのusernameをfooとすると、`adduser foo`としてユーザーを作成し、同時に２回sudoのパスワードを聞かれるので設定する。ついで `sudo gpasswd -a foo sudo` としてfooにsudo権限を与え、パワーシェルを開いて `ubuntu config --default-user foo`としてデフォルトのユーザー名を指定すれば、次にubuntuを開く際にfooで入ることができる。

`sudo apt update`としてアップデートが進まない場合（茶色い文字の%の数字が0から全く増えない場合）にはネームサーバーの設定が適切ではない場合が多い。/etc/resolv.confを編集してGoogleのネームサーバーを指定すると解決することが多いのでエディタで編集するか、`sudo cp /etc/resolv.conf /etc/resolv.conf.org`として現状のファイルのバックアップを取ってから、`sudo echo 'nameserver 8.8.8.8' > /etc/resolv.conf`とすれば、`sudo apt update`ができるようになる。`sudo echo 'nameserver 8.8.8.8' > /etc/resolv.conf`で、Permission deniedなど許可がないとのメッセージが出る場合は、`sudo chmod o+w /etc/resolv.conf`としてから、もう一度試す。
気になったGPTsまとめ

GPTsの自分用メモ

### 自動ブログ記事生成
- ユーザーが与えたテーマの記事を作成してくれる

### Write for me
- テーマを与えるとブログを自動生成してくれる

### Japanese Proofreader
- 日本語のテキストを校正してくれる

### WebPilot
- 情報収集の効率化ツール

### Consensus
- 論文検索ツール

### Paper Interpreter(Japanese)
- 学術論文を日本語で解説してくれる

### Grimoire
- Webサイト制作に特化したプログラミングアシスタント

### Prompt Professor
- プロンプト作成を補助してくれる

### 孫子 - saysay.ai
- 質問を孫子の教えで解答してくれる