OmniAICreator/Qiita-1.07M huggingface dataset:
access2000の作法 その31

# 概要
access2000の作法、調べてみた。
開発者モードをコントロールする方法、やってみた。

# 開発者モードをコントロールする手順
- menuフォームをデザインビューで開く
- ボタンを設置
- ウィザードが開く	キャンセル
- プロパティシートを開く
- イベントを開く
- クリック時、コードビルダーを開く
```
Private Sub コマンド0_Click()
    ap_DisableShift
    MsgBox "SHIFT編集モードがロックされました。再起動するとロックされています。"
End Sub

Function ap_DisableShift()
    On Error GoTo errDisableShift
    Dim db As DAO.Database
    Dim prop As DAO.Property
    Const conPropNotFound = 3270
    Set db = CurrentDb()
    db.Properties("AllowByPassKey") = False
    Exit Function
errDisableShift:
    If Err = conPropNotFound Then
        Set prop = db.CreateProperty("AllowByPassKey", dbBoolean, False)
        db.Properties.Append prop
        Resume Next
    Else
        MsgBox "Function 'ap_DisableShift' did not complete successfully."
        Exit Function
    End If
End Function
```
- ボタンを設置
- ウィザードが開く	キャンセル
- プロパティシートを開く
- イベントを開く
- クリック時、コードビルダーを開く
```
Private Sub コマンド1_Click()
    ap_EnableShift
    MsgBox "SHIFT編集モードがロック解除されました。"
End Sub

Function ap_EnableShift()
    On Error GoTo errEnableShift
    Dim db As DAO.Database
    Dim prop As DAO.Property
    Const conPropNotFound = 3270
    Set db = CurrentDb()
    db.Properties("AllowByPassKey") = True
    Exit Function
errEnableShift:
    If Err = conPropNotFound Then
        Set prop = db.CreateProperty("AllowByPassKey", dbBoolean, True)
        db.Properties.Append prop
        Resume Next
    Else
        MsgBox "Function 'ap_DisableShift' did not complete successfully."
        Exit Function
    End If
End Function

```
- フォームを閉じる
- 保存する


以上。
access2000の作法 その30

# 概要
access2000の作法、調べてみた。
フォームで複数のコントロールの配置を整える方法、やってみた。

# フォームで複数のコントロールの配置を整える手順。
- フォームをデザインビューで開きます。
- shiftキー + クリックで複数のコントロールを選択します。
- ［フォームデザインツール］の［配置］タブにある［配置］ボタンをクリックし、表示されるメニューから配置を選択します。

以上。
laravelのクエリでMySQLの関数を使うとundefinedになる場合の解決方法

## 動作環境
Laravel 6.20
php 8.0
MySQL 8.0.29

## 具体的な症状
- laravelでMySQLのクエリを使ってデータを取得したい。
- このとき、クエリ文の中でMySQLの関数(CONCATやIFNULLなどの関数)を利用したいが、これらの関数を利用すると、undefinedになってしまう。
- 具体的には、nullの場合に0に変えたいのだが、ifnull関数をクエリに追加するとundefinedになってしまう。なんとかしたい。(MySQLクライアントのworkbenchから同じクエリ文を実行すると、nullが0になって期待通りの表示がされるので、クエリ文自体は問題ない。そのため、laravelのコードの書き方に関して、何か別のルールがあると考えられる。)

## 参考ページ
- 以下のページがヒットして参考にしましたが、結局解決しませんでした。
  - https://qiita.com/AAA0125/items/f17d12cc02c407b11bb9
  - https://www.prj-alpha.biz/entry/2018/09/02/155721
- 試行錯誤の結果、正解を導き出せました。別の原因でした。

## クエリビルダを利用した場合の例
### undefinedになるコード
- 他の解説サイトでは、以下のようなコードでうまくいくように書かれていましたが、自分はundefinedになって、うまくいきませんでした。
  - ifnullなどのMySQLの関数を追加すると、undefinedになってしまいます。 

```php
$query = DB::table('users');
$query->select('id');
$query->selectRaw('ifnull(users.name, 'no name')');
$users = $query->get();
```

### 正しく表示されるコード

```php
$query = DB::table('users');
$query->select('id');
$query->selectRaw('ifnull(users.name, 'no name') as name');
$users = $query->get();
```
- `as name`を付けるだけで解決しました。
  - 他のサイトで書いているような、バック・クォーテーションで囲む必要はありませんでした。

## SQL文を直書きする場合
### undefinedになるコード
```php
$sql = <<< SQL
  select id, ifnull(name, 'no name') from users;
SQL;
$users = DB::select($sql);
```

### 正しく表示されるコード

```php
$sql = <<< SQL
  select id, ifnull(name, 'no name') as name from users;
SQL;
$users = DB::select($sql);
```
- やはり、`as name`を付けると正しく表示されました。

## まとめ
- undefinedと表示されている時点で、カラム名が未定義になってしまっていると気づけば、もっと早く解決したと思いました。
2022/6/7主にITとかセキュリティの記事

フィッシング攻撃、地域密着の信販会社を立て続けに標的に
https://www.security-next.com/137103

フィッシングURLが約1.7倍、過去最多更新 - 同一IPアドレス上に大量の偽サイト
https://www.security-next.com/137082

複数の文化施設が改ざん被害 - 不正サイトに誘導
https://www.security-next.com/137085

メール通知サービスで個人情報が閲覧できる脆弱性 - 第一生命
https://www.security-next.com/137076

認証飲食店PRで店舗ではなく申請者住所を誤掲載 - 香川県
https://www.security-next.com/137079

国内のランサムウェア遭遇リスクが4割近く上昇
https://www.security-next.com/136467

大企業のサイバー対策、4割に危険性　車や機械目立つ(6/5)
https://www.nikkei.com/article/DGXZQOUC15C8V0V10C22A4000000/

「ホワイトハッカーの教科書」を読んでみた(6/3)
https://qiita.com/sutuzoshimizu/items/926188b73bb0524fa34a

スマホやPCのOSのアップデート、怠ると大変なことになるかも(6/3)
https://ascii.jp/elem/000/004/092/4092928/?rss

心当たりのない後払い請求書が自宅に→商品購入者に意外な名前→個人情報の悪用が判明！(6/4)
https://maidonanews.jp/article/14634143

【総務省】マイナンバーカード　ほど遠い「全国民取得」に焦り(6/5)
https://news.mynavi.jp/techplus/article/20220605-2359871/

特殊詐欺に悪用される転売口座　ベトナム人名義なぜ多い(6/5)
https://news.infoseek.co.jp/article/sankein__value_affairs_5R7BAVNPCJKHRND2ONFFBMSCNY/?tpgnr=poli-soci

特許庁に批判の矛先　「茶番劇」が映す知財制度の難しさ 西野杏菜(6/5)
https://www.nikkei.com/article/DGXZQOUA19AOR0Z10C22A5000000/

グーグルのクラウドを支えるテクノロジー　＞　第127回　モニタリングシステムを支える分散グローバルデータストア「Monarch」（パート1）(6/3)
https://japan.cnet.com/release/30698498/?ref=rss

危うし、デジタル庁　1年たたずに課題山積(6/6)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600014/053000118/

使い回わさずに覚えるのは大変、大量のパスワードの管理方法を教えて(6/6)
https://xtech.nikkei.com/atcl/nxt/column/18/02092/060300001/

シャオミの本気さが感じられる「Redmi Note 11 Pro 5G」、死角はあるか(6/6)
https://xtech.nikkei.com/atcl/nxt/column/18/00093/00120/

古いパソコンでも軽快動作、「Chrome OS Flex」とは(6/6)
https://xtech.nikkei.com/atcl/nxt/column/18/01679/042700058/

日本を覆うクラウドロックイン　政府目指す「マルチクラウド」が危ない(6/6)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/092400133/060100079/

非地上系ネットワーク（Non-Terrestrial Network、NTN）(6/6)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600009/060100116/

個人向けクラウドストレージ市場　23年度920億円、5620万人利用へ(6/6)
https://xtech.nikkei.com/atcl/nxt/mag/nc/18/020600010/053000115/
NatCoderを利用して撮影しようとするとDllNotFoundExceptionが出る場合の対応方法

UnityのAssetのNatCoderを利用して撮影しようとするとDllNotFoundExceptionが出る場合の対応方法です。


# 前提
* M1 Mac 12.3.1
* Unity2021.2.11
* NatCoder 1.8.2

# エラー内容
```
DllNotFoundException: NatCorder assembly:<unknown assembly> type:<unknown type> member:(null)
```

# 原因
NatCoder.bundleがMacのApple Silicon用の設定になっていないためです。
（NatCoder自体はApple Silicon対応となっています）

# 対応方法
NatCoder.bundleのPlatform settingsのCPUの設定を `Intel` から `Any CPU` に変更します。
Applyを押し忘れないようにご注意ください。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/506075/e628f1ec-2a67-37aa-5c82-44cffc12755a.png" width=520 />
嘘みたいなセキュリティインシデント

# はじめに
筆者が退職した企業の職場で直属の上長から聞いた話です。(体験記でなく申し訳ないです)
※色々考慮してぼかしている部分が多々あります

## 概要
東京のとある企業に務めていました、体系はSESでした。
こんな感じです。(本当はもっと下でしたが)
![スクリーンショット 2022-06-07 005424.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1010426/92592de5-930b-9743-a5c6-ecd1e1512288.png)

元請けはもちろんA社、筆者はB社所属、インシデント発生がC社です。

## ざっくり結論と背景
■ざっくり結論
何が起きたか結論から言うと
「ヒューマンエラー」による「セキュリティインシデント」です。

■背景
B社もC社も元請けであるA社に出向する必要がありました。
開発諸々は良いとして、当然「検証環境、本番環境」など、
顧客のデータが入っているサーバルームがあるわけですね。

A社出入り用ICカードでの出退勤管理、
サーバルーム入室用ICカードの申請・貸出などのチェックがありました。

## 問題と原因
端的に言うと、A社に登録されていないC社の第三者が
サーバルームで作業した、という問題が発生しました。
(更に言うと、単純に侵入に値する行為ですね)

原因はC社から出向しているメンバーでした。
(補足：A社出入り許可が出ているのは、もちろんC社特定のメンバー数人のみです)
「サーバ側で困ったことがあった」のか、「上長や他のメンバーに質問できない状況」
だったのかはわかりませんが、「不明点を解決」してもらうために
__許可がないC社の第三者を独断で呼び込んで__
__A社出入り用のICカードを又貸しして__
許可があるメンバーがサーバルーム入室用ICカードの
貸与申請・持出しをして入室させてしまったらしいです。

## 結果
作業ログもとられているわけですし、申請もチェックされるわけです。

結果は明白ですが、すぐに問題になりました。
「特定の時間、特定の場所にいたはずの○○さんが分身」してる訳ですから。
(「貸与申請」とは別に必要な「事前の作業申請」もありませんでした)

どのような処分が下ったかは伝聞なので不明ですが、
C社はすぐさま撤退勧告を受け、撤退した後
然るべき処置が実施されたそうです。

## 教訓
「少しくらいなら」、「周りがBPさんだらけで質問できない」など
どんな悩みや考えがあれど、セキュリティインシデントを発生させて
会社や自身の将来を潰してしまうような行いは絶対にダメです。

何かで悩んだら、そういった行動に出る前に
「怒られても良い」から関係者に問い合わせましょう。

## まとめ
「自身の家の鍵」と同じく「業務委託された際に貸与された某」は
「何にも変えることができない大切な鍵」です。
「それをバラ撒くような行為は __厳禁__ である」ということを再度認識しましょう。

筆者はそんな危険な行為を考えたことすらありませんでしたが、
その話を聞いた時に「そんなことを考える人もいるのか…」と心の奥底が
「ﾋﾔｯ」とした感触があったので記録として残します。

# さいごに
この記事が役に立つかは難しいところですが、
自動車の教習所で見る「こういう事故がありました」という映像のように
改めて気を引き締める礎になってもらえれば、と思います。

本記事は、以下のイベントでの1題材を基に投稿しております。
興味がある方は、是非投稿してイベントを盛り上げてみましょう。

https://qiita.com/official-campaigns/engineer-festa/2022
ITエンジニアは転職した方が収入が増えるバグのバグ

## 命題
ITエンジニアは転職した方が収入が増える
https://www.itmedia.co.jp/news/articles/2205/11/news170.html
![dy_gtg_01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2443317/31ce12e5-4043-5e66-56a0-5f55e5f06358.jpeg)

これはある意味正しいが、ある意味間違っている。
なぜなら、「ITエンジニアの転職市場」の親クラスにあたる
「日本の転職市場」にはもっと重大なバグが潜在しているから。

## 重大なバグとは
人間を**前職給与の多寡でしか評価しない**というバグ。
多くの日本企業において、人事は人間の能力を評価できない。

彼らが拠り所とするのは
「その人が前の会社でいくらの給料をもらっていたか」
または
「その人が他社からいくらのオファーをもらっているか」
のみ。

最近見かけた中で、飛び抜けてバカだと思った求人がこれ。
![Sansan.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2443317/afd12b34-3915-1657-c6da-e2e14e7ca81f.jpeg)

スキル面
・**現年収800万円以上**の方
　↑
それって、もはやスキルでも何でもないじゃん。

どこかの金持ちの2代目ボンボンが、能力もないのに役員で
年収800万円以上もらっていたらスキル面クリアってこと？

## 前職給与のパラドックス
例えば、現在の会社で年収400万円の正社員がいたとする。
そこからどれだけ経験やスキルを積もうと、転職市場ではこうなる。

「前職給与は？」
『400万円です』
「じゃあ、ウチは401万円で」

さらに新しい経験やスキルを積もうと、次の面接ではこう。

「前職給与は？」
『401万円です』
「じゃあ、ウチは402万円で」

だから、ITエンジニアは転職した方が収入が増えるには増えるが
**微増しかしない**というのが正しい表現となる。

なお、アメリカでは前職給与を尋ねることが禁止されているらしい。
https://wonderfullifeusa.com/salary/
>過去の給与履歴を質問して新しいポジションの給与を決めていたら、永遠に性別による給与格差が埋まらないため、過去の給与履歴を禁止するトレンドが全米に広がっているのです。

本当に素晴らしい考え方だと思った。

## 呪縛を打破するには
年収400万円の正社員が、年収500万円を目指して転職する。
しかし、日本企業には**前職給与を参照する慣習**があるため、
正規の転職ルートに、そんなキャリアパスは存在しない。

現状で、解決方法は3つあると思う。（他に意見があれば求む）

**1. 外資系に行く**
純粋に能力だけで判断してくれる会社を探すこと。
または、前職給与を伝える必要がない転職ドラフトを使うのも良い。

**2. フリーランスを経由する**
不思議なことに、フリーランスだと「**スキル見合い**」という
前職給与に依らない、正当な評価によって報酬が決定されるため
年収400万円の正社員が、月収50万円のフリーランスになるのは簡単。

そして、バカ人事どもは個人事業主のリスクなんて分かってないから
フリーランスを経由した後の面接で
「前職給与は？」
『（フリーランスで）600万円ですが、貴社では500万円を希望します』
こう言えば、年収500万円の正社員になることは難しくない。

**3. 黙秘権を使う**
「前職給与は？」
『お答えしたくありません』
『貴社の年収テーブルに沿って
　同等レベルの技術者と、同等の給料に設定していただきたく』

もっとも平等で公平なアメリカ流スタイル。
ただし、これをやると不採用になる確率は急上昇する。

私もある転職エージェントに、前職給与の非公開を宣言したところ
そこから音信不通になった経験がある。
scipy.stats: アンサリ・ブラッドレイ検定 ansari

# scipy.stats: アンサリ・ブラッドレイ検定 `ansari`

`ansari(x, y, alternative='two-sided')`

独立二標本の等分散のノンパラメトリック検定である。

戻り値は，検定統計量と $p$ 値である。

同順位がある場合は，Warning が発せられる。


```python
from scipy.stats import ansari
import numpy as np

x = np.array([111, 107, 100, 99, 102, 106, 109, 108, 104, 99,
            101, 96, 97, 102, 107, 113, 116, 113, 110, 98])
y = np.array([107, 108, 106, 98, 105, 103, 110, 105, 104,
            100, 96, 108, 103, 104, 114, 114, 113, 108, 106, 99])
ansari(x, y)
```

    /Library/Frameworks/Python.framework/Versions/3.10/lib/python3.10/site-packages/scipy/stats/_morestats.py:2339: UserWarning: Ties preclude use of exact statistic.
      warnings.warn("Ties preclude use of exact statistic.")

    AnsariResult(statistic=185.5, pvalue=0.1814581997286706)



同順位がない場合には何の問題も起こらない。


```python
a = np.array([39.144, 59.973, 52.830, 34.937, 44.214,
              66.514, 25.733, 45.711, 62.659, 41.333,
              43.211, 49.053, 64.914, 43.611, 45.560,
              45.656, 72.059, 71.868, 60.041, 53.862])
b = np.array([61.061, 72.361, 35.962, 67.637, 31.192,
              40.434, 63.607, 28.570, 47.899, 37.074,
              46.166,  8.021, 23.427, 39.502, 63.912,
              47.395, 50.043, 60.323, 36.807, 54.254])
```


```python
ansari(a, b)
```




    AnsariResult(statistic=230.0, pvalue=0.2944561134102789)
【yocto】ビルドを早くする方法

# はじめに
- bitbakeを高速化したい人向け
- yoctoのcache機能でbitbakeを高速化する

# 方法
- local.confに以下の文を追記する
    - =以降は任意のディレクトリでOK
    - 以下の例では、buildディレクトリの下にsstate-cacheというcache領域を作成する
~~~
SSTATE_DIR = "${TOPDIR}/sstate-cache"
~~~

# 動作例
- 工事中
[Slack] Bolt.js 強引なリトライ対策

# ※2022/06/13 追記
強引ではない方法が分かったので、別に記事を書きました！

https://qiita.com/punkshiraishi/items/35ee3f3b4904fec6611a

# 概要
- [Bolt.js](https://github.com/slackapi/bolt-js) と GAE とスプレッドシートを組み合わせてアプリを作ろうとした。
- slack からイベントが発行されて 3 秒以内に返さないとリトライされてしまうという所謂 3 秒ルールにぶち当たった。
- つまり、3 秒以内に応答しない場合に、同じ返信を複数回実行してしまう状態になった。
- 試行錯誤を繰り返したが上手く行かず、結局自前で用意した Express でリクエストを捌いて解決した。
- あんまりきれいなやり方では無いです。
- **追記: twitter で Slack の開発者からよりきれいな解決方法を教えてもらいました。** https://twitter.com/seratch_ja/status/1533922381550731264?s=20

# 結論
```ts
import { App, ExpressReceiver } from "@slack/bolt";
import express from "express";

// アプリの設定など
const expressReceiver = new ExpressReceiver({
  signingSecret: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  endpoints: "/events",
  processBeforeResponse: true,
});

const app = new App({ 
  receiver: expressReceiver,
  token: "xoxb-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  processBeforeResponse: true,
});

// 処理
app.event("message", async ({ say }) => {  
  say("Hello world!");
});

// bolt.js とは別にインストールしておいた Express でエンドポイントを定義
const expressApp = express();

expressApp.post("/events", (req, res)=> {

  // リクエストヘッダーでリトライかどうかを判断してリトライの場合は握りつぶす。
  if (req.headers["x-slack-retry-num"] || req.headers["X-Slack-Retry-Num"]) {
    res.send(JSON.stringify({ message: "No need to resend" }));
    return;
  }

  expressReceiver.app(req, res);
})

// express を起動しておく
expressApp.listen(8080, () => {
  console.log("⚡Slack Bolt is running!");
})
```
# こうせざるを得なかった理由
- スプレッドシートとの通信が遅く、かなりの確率でリトライが発生し、無駄にアプリが返信してしまう。
- Bolt.js は Express をラップしているが、リクエストヘッダーをみてフィルターする、のような処理を注入できない。
    - これができれば理想だった。
    - カスタムの Receiver を作るという方法もあったが、実装コストがかかりすぎると感じたため断念。
- socket モードも検討したが、GAE のインスタンスは常駐できないので不可能だった。



# 参考
https://qiita.com/saken649/items/b70e462ae41614b72f77


# ※2022/06/7 追記
Bolt.js の開発者が親切にも解決方法を教えてくれました！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">比較的最近追加された機能でドキュメントにちゃんと書いてないのが申し訳ないのですが customPropertiesExtractor というのを使えば request header も context に渡せます。 <a href="https://t.co/YVJW8vnvAp">https://t.co/YVJW8vnvAp</a> <a href="https://twitter.com/hashtag/SlackDevJP?src=hash&amp;ref_src=twsrc%5Etfw">#SlackDevJP</a></p>&mdash; Kazuhiro Sera (瀬良) (@seratch_ja) <a href="https://twitter.com/seratch_ja/status/1533922381550731264?ref_src=twsrc%5Etfw">June 6, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
scipy.stats: フリードマン検定 friedmanchisquare

# scipy.stats: フリードマン検定 `friedmanchisquare`

`friedmanchisquare(*args)`

関連のある $k$ 標本の代表値の差のノンパラメトリック検定である。
引数の指定法は若干不自由である。
多くの統計パッケージでは以下のようなデータ行列を与える仕様になっていることが多いが，`friedmanchisquare` では，列ベクトルを複数与える）。

もともと，$k$ 個の配列（ベクトル）で用意されているなら別であるが。


```python
from scipy.stats import friedmanchisquare
import numpy as np
data = np.array([
       [5.4 , 5.5 , 5.55],
       [5.85, 5.7 , 5.75],
       [5.2 , 5.6 , 5.5 ],
       [5.55, 5.5 , 5.4 ],
       [5.9 , 5.85, 5.7 ],
       [5.45, 5.55, 5.6 ],
       [5.4 , 5.4 , 5.35],
       [5.45, 5.5 , 5.35],
       [5.25, 5.15, 5.  ],
       [5.85, 5.8 , 5.7 ],
       [5.25, 5.2 , 5.1 ],
       [5.65, 5.55, 5.45],
       [5.6 , 5.35, 5.45],
       [5.05, 5.  , 4.95],
       [5.5 , 5.5 , 5.4 ],
       [5.45, 5.55, 5.5 ],
       [5.55, 5.55, 5.35],
       [5.45, 5.5 , 5.55],
       [5.5 , 5.45, 5.25],
       [5.65, 5.6 , 5.4 ],
       [5.7 , 5.65, 5.55],
       [6.3 , 6.3 , 6.25]])
```

戻り値は $\chi^2$ 値と $p$ 値である。
```python
friedmanchisquare(data[:,0], data[:,1], data[:, 2])
```




    FriedmanchisquareResult(statistic=11.142857142857132, pvalue=0.003805040775511383)
【NuxtJS】errorMiddlewareとsentryを共存させる

SSR時にの例外をフックするためのミドルウェア`errorMiddleware`を使うとsentryで例外をキャッチできない（[@nuxtjs/sentry](https://github.com/nuxt-community/sentry-module)を使っている場合に限る）

`errorMiddleware`についてはこちら↓

https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/api/internals-renderer/

sentry-moduleで`errorMiddleware`を使っているため、アプリケーション側で定義するとsentry-moduleのエラーハンドリングを上書きしてしまうため、sentryでハンドリング出来ない。
上記のリンクに何故かSentryを[参照しろ](https://github.com/nuxt-community/sentry-module/blob/v4.0.3/lib/module.js#L151)と書いてある。

### errorMiddlewareの使いどころ

例外前に処理を入れたい場合に使う。よく見るのがSSR時にエラーページを切り替える方法。NuxtJsでSSR時のエラーは`app/views/error.html`が表示されるが404、500などの画面を切り替えられないので、ステータス毎のページを表示する場合はこんな感じにしたりする。

```javascript:nuxt.config.js
hooks: {
  render: {
    errorMiddleware(app) {
      app.use((error, _req, res, _next) => {
        res.setHeader('Content-Type', 'text/html; charset=utf-8')
        const html = fs.readFileSync(`app/views/${error.response.status}.html`)
        res.end(html)
      })
    },
  },
},
```

### errorMiddlewareとsentryを共存

errorMiddleware上でSentryイベントをキャプチャすればよい。超単純で上書きされるならまたSentryで補足すればよいだけ。

```javascript:nuxt.config.js
import * as Sentry from '@sentry/node'

...

hooks: {
  render: {
    errorMiddleware(app) {
      app.use((error, _req, res, _next) => {
        res.setHeader('Content-Type', 'text/html; charset=utf-8')
        const html = fs.readFileSync(`app/views/${error.response.status}.html`)
        Sentry.captureException(error) //　これ
        res.end(html)
      })
    },
  },
},
```

`errorMiddleware`と共存する方法は探した限りなかったので書いてみた。`Vue.config.errorHandler`でハンドリング出来るらしいがCSRで補足するので共存できるのであればerrorMiddlewareを使うのはありかも
n+1番煎じのShader入門

# 挨拶
初めまして、めめどやです。
お仕事ではゲームグラフィックス関連のプログラミングをすることが多いです。
今は特にUnity環境で仕事しています。
今までろくに情報発信をしたことがなく、自分の幅を広げるために筆をとりました。
方向性は特に決まってませんが ~~途中で飽きなければ~~ グラフィックスの記事を投稿していくかもしれません。
僕と一緒に勉強していきましょう。

# Shaderとは
もはや色々なところで説明されていますが、ここでは大雑把に説明します。
Shaderとは __ポリゴンの情報を受け取って画面に出す色を決める関数のようなもの__ です。
![スクリーンショット 2022-06-05 180143.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2639462/ecb5feb2-2552-6ef4-6418-d88d71f19c8d.jpeg)
プログラマーの皆さんは関数知っていますね。
処理のひとかたまりで引数を受け取ったり、値を返すこともあります。

Shaderも同じでポリゴンの情報を引数に受け取り、1ピクセルの色という値を返します。 [^1]
これはPCだろうがスマホだろうがSwitchだろうがPS5だろうが同じです。
ゲームの画面は全てこのShaderを使って描かれています。

# Shaderを理解するメリット
Shaderが書けるようになると
* 個人製作のゲームは見た目がキレイになって売れやすくなる！
* 学生は就職に有利になる！
* 現場のゲームプログラマーは仕事の幅が広がり年収が上がる！

等々...まぁそんな世の中うまくはいきませんが、グラフィックスの技術があるプログラマーは常に需要が高いほうかと思います。

しかし今はゲームエンジンの進化もすさまじく、さほど知識がなくてもキレイな画面が作れますし、Shader自体も世の中にコードがたくさん転がっていて、有料で売られているものもあります。
ですので、世の中に求められるレベルに達するには相当な努力が必要になります。

僕もそのレベルに達していないので一緒に頑張りましょう。ようはShader楽しいってことです。

# 最適化
もう１つメリットとして、グラフィックスの知識があるとゲーム負荷の最適化ができるようになります。
というより、グラフィックスの負荷がゲームのボトルネックになることが __絶対__ あります。
そのときにグラフィックスの知識があればボトルネックを改善もしくは回避することができるようになります。

ただ困ったことにこの最適化、一朝一夕ではできるようにはならず、経験のようなものがかなり求められます。
もちろんネット上に情報はたくさんあるのですが、ゲームのジャンル、デザインの方向性、プラットフォーム、開発環境及びゲームエンジンなどによってボトルネックが発生する原因が多岐にわたります。

ですので、プロファイラーを駆使し、あらゆる最適化のパターンを覚え、原因を嗅ぎ分ける嗅覚や第六感のようなものがあって初めて最適化ができるようになるかと思います。

もちろん僕もそのレベルに達していないので一緒に頑張りましょう。Shader楽しいです。

# Shader言語
先ほど __Shaderは関数！__ などと申した通り、Shaderはプログラミング言語です。[^2]
HLSLやGLSLが有名ですがおススメの言語とかは特にないです。
言語を勉強、というよりかはShaderを書くことによってどんなことができるのかを知ることが大事です。

ちなみにUnityなどのゲームエンジンは独自のShader言語を用意していますが、これは中間的なもので最終的にはHLSLやGLSLなどに変換されています。
勉強目的ならば理想を言えばDirectXやOpenGLでグラフィックスAPIと共に使いこなせるようになるのがいいのですが、ハードルを上げて挫折してしまったら元も子もありません。

~~気が向いたら~~ 僕もUnityでShaderの記事を書くので一緒に頑張りましょう。Shader最高！

# まとめ
実はUnityでShader入門の記事を書こうと思っていたのですが、概念的なものを書いていたら量が膨らんできたのでやめました。
画像も1枚しか使っておらず伝わりにくい記事になってしまいましたが、誰かの知識の糧になれたら幸いです。

伝えたかった事としてはShaderはただの関数にすぎないので、恐れることはないということです。
PS5のゲームの超キレイなグラフィックだろうがShaderがやっていることはピクセル1個の色を決めているだけです。[^3]
これから勉強しようとしているあなたも、ほにゃららファンタジーのような画面がきっと描けるようになるので一緒に頑張りましょう。
今回はここまで、お疲れさまでした。

[^1]:昔はこの関数は自分で処理を書くことができなかったのですが、グラフィックスの進化の過程でできるようになりました。
なので区別する際に今のShaderを __プログラマブルシェーダー__ と呼ぶこともあります。
[^2]:実は最近はコードを書かずに組めるノードベースのShaderEditorなるものもちょこちょこ出てきています。
ですがまぁShaderが書けるようになれば使えるものなのでShader書きましょう。
[^3]:超嘘ですが、嘘だと分かるまではそう思うことにしましょう。
自分用VSCode拡張備忘録

arbファイル追加編集用Editor拡張
```
名前: i18n arb editor
ID: innwin.i18n-arb-editor
説明: Easily edit your i18n arb files
バージョン: 1.2.0
パブリッシャー: innwin
VS Marketplace リンク: https://marketplace.visualstudio.com/items?itemName=innwin.i18n-arb-editor
```
※先にarbファイルを作って各arbファイルのKeyを合わせておくこと（そうしないと表示されなかった、現時点のバージョン）
※数が増えたら拡張より自動生成の方が良さげ
**これ結局あまり使わなかった**
InARP とは

## 勉強前イメージ

inってことはARPの改良版？逆？

## 調査

### InARP とは

Inverse Address Resolution Protoco の略で Inverse ARPとも呼ばれています。
物理層やデータリンク層にATMやフレームリレーを構築したネットワークにおいて
`物理アドレスからIPアドレス` を求めるのに使われるプロトコルになります。

ARPはIPアドレスからMACアドレスを取得するプロトコルで、InARPはその逆になります。
また、InARPはARPプロトコルの拡張として実装されています。

## 勉強後イメージ

まぁまぁ合ってたんじゃない？
あまり立ち会ったことないからあれだけど、MACアドレスからIPってあるのね？

## 参考

- [Inverse ARP](https://www.weblio.jp/wkpja/content/Address+Resolution+Protocol_Inverse+ARP)
- [RARP 【Reverse Address Resolution Protocol】 Reverse ARP](https://e-words.jp/w/RARP.html)
【A Tour of Go】メソッド編

公式の [A Tour of Go](https://go-tour-jp.appspot.com/list) ではじめて Go 言語を触ってみました。

前回の記事（基本編）はこちら

https://qiita.com/BitterBamboo/items/58d80a1a1a85e18188ce

https://qiita.com/BitterBamboo/items/f72ce6f7ce20e6b5f6c7

https://qiita.com/BitterBamboo/items/6732a7a9fb2c904641b1

以下、メソッドについて学んだことのメモ。

## メソッド

### 基本

* Go にはクラスの仕組みはないが、型にメソッドを定義できる
* メソッドは、レシーバを引数にとる
	* レシーバはメソッドを定義する対象となる型
		* 構造体だけでなく任意の型にメソッドを定義できる
			* `type MyFloat float64`
	* レシーバを伴うメソッドを宣言するには、レシーバの型が同じパッケージ内に存在しなければならない

``` go
package main

import (
	"fmt"
	"math"
)

type Vertex struct {
	X, Y float64
}

// Vertex 型のメソッドを定義
// レシーバ: v Vertex
func (v Vertex) Abs() float64 {
	return math.Sqrt(v.X*v.X + v.Y*v.Y)
}

func main() {
	v := Vertex{3, 4}
	fmt.Println(v.Abs()) // メソッドを使用
}
```

* 同様の処理を、通常の関数として記述することも可能

``` go
func Abs(v Vertex) float64 {
	return math.Sqrt(v.X*v.X + v.Y*v.Y)
}

func main() {
	v := Vertex{3, 4}
	fmt.Println(Abs(v))
}
```


### ポインタレシーバ

* ポインタレシーバを持つメソッドは、レシーバが指す変数を更新できる
* レシーバ自身を更新する機会が多いため、変数レシーバよりもポインタレシーバのほうが一般的
	* 変数レシーバを持つメソッド: 変数のコピーを操作（関数の引数と同じ）
	* ポインタレシーバを持つメソッド:  変数そのものを操作
* ポインタレシーバを用いることにより、メソッドの呼び出し毎に発生してしまう変数のコピーを避けることができる
	* レシーバが大きな構造体である場合に有効

``` go
package main

import (
	"fmt"
	"math"
)

type Vertex struct {
	X, Y float64
}

// 変数レシーバを持つメソッド
func (v Vertex) Abs() float64 {
	return math.Sqrt(v.X*v.X + v.Y*v.Y)
}

// ポインタレシーバを持つメソッド
func (v *Vertex) Scale(f float64) {
	v.X = v.X * f
	v.Y = v.Y * f
}

func main() {
	v := Vertex{3, 4}
	v.Scale(10) // ポインタレシーバを持つメソッドの実行 => 変数 v 自身に対する操作
				// Go では利便性のために v.Scale(10) を (&v).Scale(10) として解釈する
	fmt.Println(v.Abs()) // 変数レシーバを持つメソッドの実行 => 変数 v のコピーに対する操作
}
```

* ポインタレシーバを持つメソッドも、関数として書き換えられる

``` go
func Abs(v Vertex) float64 {
	return math.Sqrt(v.X*v.X + v.Y*v.Y)
}

func Scale(v *Vertex, f float64) {
	v.X = v.X * f
	v.Y = v.Y * f
}

func main() {
	v := Vertex{3, 4}
	Scale(&v, 10) // &v: 変数 v へのポインタ
	fmt.Println(Abs(v)) // 50
}
```




# 次回

https://qiita.com/BitterBamboo/items/7f3e29b324bcc84c93ed
IntelliJでspringbootを自動再起動させるように設定したい

2021.2からちょっと設定の方法が変わったみたいです

まずは、devtoolsを読み込むように`build.gradle`や`pom.xml`に追記する。

```build.gradle
dependencies {
    developmentOnly 'org.springframework.boot:spring-boot-devtools'
}
```

```pom.xml
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-devtools</artifactId>
</dependency>
```

あとはIntelliJにて以下を設定。

 - Preferences > Build, Execution, Deployment > Compiler > Build project automaticallyにチェック
 - Preferences > Advanced Settings > Allow auto-make to start even if developed application is currently runningにチェック

以上で、変更を検知してSpringBootが自動で再起動してくれるようになります！
カスタムROMってなに？

## 勉強前イメージ

自分でカスタムしたROM？

## 調査

### カスタムROM とは

そもそもAndroidはGoogleが開発したモバイルデバイス向けのOSになります。
オープンソースなので誰でも入手可能です。
誰でも入手できるソースコードを利用して世界中の人が開発したOSが `カスタムROM` と呼ばれるものになります。

ちなみにiphoneのOS、iOSはAppleによって開発されていますがオープンソースではないので
誰でも入手できる状況ではありません。

### カスタムROM はどこから取ってくる？

色んなサイトはありますが、有名なのは [LineageOS](https://download.lineageos.org/shamu) です。

### メリデメ

- メリット
	- OSの変更ができる
	- 古いスマホでも最新のOSを試すことが可能
- デメリット
	- 保証がなくなる
	- 失敗すると起動しなくなる可能性がある

それぞれありますがリスクは大きく、最初は中古のスマホなどを買ってきて行うのが良いかと思います。

## 勉強後イメージ

ROM？って思ったけどOSのことか。
前にXperiaのz1compactをj1compactに入れ替えしたことがあったけど
あれもカスタムROMか・・・

## 参考

- [じゃない方の Android: 気になるおすすめカスタム ROM 6選。](https://pc-freedom.net/google/android/android-other-than-google/#i-2)
- [【Android】カスタムROMの焼き方・メリットとおすすめを紹介！](https://appli-world.jp/posts/17078)
社内で行っているAWS勉強会の知見を共有したく

# 5月末から社内で勉強会を始めました
■概要
時間：毎週月曜日の業務終了の30分後(19:30~)から約1時間
場所：オンライン
参加人数：3~6名ほど
形式：講義+もくもく会

# なぜ始めたか
2022年から社会人2年目を迎え、チームに新人が入ってきたので自分も教える側の立場になってしまった。

自分が去年AWS学習にかなり苦労し、業務で色々鬱になったりしたので、後輩には同じ思いをして欲しくなく自分が考えうる最短でAWSに強くなれるノウハウを伝えたかった(  ~~後輩がAWSに得意になればより多くの仕事を引き継がせて、自分が別の案件に注力できるようになるし笑~~ )。

もちろん業務で必要な知識は業務内で教えることにしているが、後輩の学習意欲が高くそれに応えるためより難しい課題にプライベートでも取り組んでもらうことにした。

また、せっかく後輩にプライベートの時間を使って教育するので他の方にも同時に教えた方が効率的なので、興味ある方を集めて勉強会を開催することにした。

## 目的
チームメンバー向け
・直属の後輩のAWSスキル向上
・部署単位でのクラウド力向上
・詳細設計から納品までの本格的な業務体験
・勉強会にてチームメンバー外との相互交流

自分向け
・社内における自分の存在アピール
・AWS有識者としてのポジショニング
・勉強会主催から運営、また登壇など発信者としての総合力の向上

# 具体的に何しているの？
以下の構成図の作成を目標に、AWS公式ハンズオン動画を実施して学習し、詳細設計→構築→疎通確認→納品までの流れを実践してもらうことにした。
![構成図-上期目標構成図_発展版.drawio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2320311/c55428cf-f354-1daf-f9ef-97a6ae877652.png)

基本的には各々時間のある時に自学自習してもらい、毎週月曜日に勉強会を開催して受講者の質問の回答や、躓きやすいポイントを解説する形式をとっている。

# 勉強会を行った感想
まだ勉強会を始めて2回目を終えたばかりだが、いろんな気付きがあったので共有させていただく。

## 良かったこと
■純粋に自分で勉強会を主催して、受講者が参加してくれるのは嬉しい
■勉強会に対していろんなコメントや反応を貰えるのも嬉しい
■また後輩や上司と勉強会について意見を聞き、議論をする過程は何とも言えない楽しい気持ちになれる
→やはり自ら積極的に動いて周りからの反応を頂けるとめちゃくちゃ楽しい。
最近やることが多く忙しかったので、勉強会の開催が上手くいくか不安だったがやってよかった。

## 悪かったこと(考慮できていなかったこと)
■メインターゲットとしている後輩のAWSスキルがこの一か月(案件参画後)でかなり向上しており、他の完全初学者にとっては講義が難しいものになっている。
→この講義についていくにはプライベートで勉強時間を割く必要があり、1回目の講義で受講をやめてしまった方も多かった。しかし当初の目的は直属の後輩の追加授業みたいな感じだったのでしょうがないかなと思う。改善点として詳細設計書の作成フェイズの省略を検討している。

■勉強会において単発系以外は参加ハードルがかなり高い
→これも大誤算。自分は1回限りの勉強会に何度か参加したことがあるがどうしても講義レベルが概論程度のものになってしまうことが多く、物足りなさを感じたことが多かった。そのため3か月にも及ぶボリューミーな勉強会を開催することにしたが、参加者目線では毎週参加しなくてはいけなく、参加ハードルをあげてしまった。ここは正直トレードオフな部分ではあるが当初の目的達成のために3か月間の勉強会にする必要があったのでしょうがない様に思う。

■主催者側と参加者側のモチベーションの差
→これは勉強会を開催する人はモチベーションが高いこと多いが、参加者は"もしかしたらタメになるかもだから一応参加しよう"という層が大半なため、主催者(自分)はそこにギャップをどうしても感じてしまい萎えてしまったところもある。自分が頑張って用意した資料や準備が全くの無駄になることも多々ある(反応がもらえないなど)。そこのモチベーションの差をどう対処していくかが主催者のやる気に大きくかかわってくるだろう。

## 驚いたこと
直属の後輩のモチベーションが非常に高く、どんどん自分で進めていき分からないところはガンガン質問してくれるので、8月中に完了する予定だったカリキュラムが6月末に完了しそうなハイペースである。

また理解力も早く「是非7月以降は勉強会の教える側として一緒にやっていこう」と勧誘したところ快くOKをもらえ、「自分なりのノウハウを資料にまとめてみます！」とまで言って頂けた。

人の成長を見るのは大変気持ちが良く、育成は楽しい。その他にも自分の勉強会の進め方や開催日時の変更など色々意見を言ってもらえ、後輩のやる気の高さに救われている。

# まとめ
勉強会を始めるまで気付かなかった良い発見や悪い発見があった。エンジニアとしてもビジネスパーソンとしても将来成功するためには発信力というのは絶対に必要なので、まだ始めたばっかりではあるが開催して本当に良かった。

また自分の勉強会を良くするための議論を後輩や先輩とするのは、将来かけがえのない思い出になるだろう。

以上です、新しい発見や勉強会に動きがあれば都度更新していきます。
Jasmine基本のキ

## この記事の目的
Jasmineのテストコードを書くことになりましたが、コードの構造が理解できないため勉強中です。英語のドキュメントを翻訳しながら読んだので、自分なりにまとめておくことにしました。

## Jasmineとは？
* 同期および非同期のJavaScriptコードをテストできる、人気のJavaScriptユニットテストフレームワークの1つ
* ビジネス価値に焦点を当てたBDD（行動駆動開発）プログラミングで使用されている

## Suite
* JavaScriptの動作をテストするために使用できるテストケースのグループ
* 2つのパラメータを持つJasmineのグローバル関数describeへの呼び出しから始まる
* 最初のパラメータはテストタイトルを表し、2番目のパラメータはテストスイートを実装する関数を表す

```js
//This is test suite
describe("Test Suite", function() {
    //.....
});
```

## Spec
* Suite内のテストケースを表す
* 2つのパラメータを持つJasmineのグローバル関数itの呼び出しから始まる
* 最初のパラメータはスペックのタイトルを表し、2番目のパラメータは、テストケースを実装する関数を表す
* specは1つ以上の期待値を含む
* spec に合格するためには、spec 内の期待値がすべて真でなければならない。spec 内の 1 つ以上の期待値が false の場合、spec は失敗する

```js
//This is test suite
describe("Test Suite", function() {
    it("test spec", function() {
      expect( expression ).toEqual(true);
    }); 
});
```

## Describe Blocks
* describe関数は関連するspecをグループ化するためのもの
* stringパラメータはspecの集合に名前を付けるためのもの

## Matchers
* jasmineのテストの実際の出力と期待される出力を比較するために使用
* toBe()：実際の値が期待値と同じ型、同じ値であった場合にパス
* toBeDefined()：プロパティや値が定義されているか
* toBeTruthy()：プロパティや値が真であるか
* toContain()：文字列や配列に部分文字列や項目が含まれているかどうか
* notを使うと、結果を反転させることができる

```js
expect(actual).not.toBe(expected);
expect(actual).not.toBeDefined(expected);
```

## Suites と Specsの無効化
* describe の先頭に文字列 x を追加して xdescribe とする
* 実行時にスキップされるため、その結果は表示されなくなる

```js
xdescribe("MathUtils", function() {
  //code
});

describe("MathUtils", function() {
  //Spec for sum operation
  xit("should be able to calculate the sum of two numbers", function() {
    expect(10).toBeSumOf(7, 3);
  });
});
```

## 出典・引用

https://howtodoinjava.com/javascript/jasmine-unit-testing-tutorial/
SaaSでビジネスはどう変わる？

# はじめに
IT×ビジネスという視点で週1本記事を投稿しています。
もし興味のある方は下のリンクから他の記事も見ていただければ幸いです。
 [@7_inai_](https://qiita.com/7_inai_)

# Saasとは
SaaS(サース)とは、Software as a Serviceの略で直訳すると、`サービスとしてのソフトウェア`となります。SaaSは、製造元が提供するクラウドサーバーにあるソフトウェアを、インターネットを利用してユーザーが利用できるサービスのことを指します。

また、SaaSに対して、サーバーやソフトウェアなどの情報システムをユーザーが管理する施設の構内に直接機器を設置して運用する形態のことを、__オンプレミス__ と言います。

以前クラウドについてまとめた記事がありますので、こちらもご参考ください。↓
 [クラウドでビジネスがどう変わる？](https://qiita.com/7_inai_/items/befadfdc51e33d240ede)

# SaaSでビジネスがどう変わる？
SaaSでビジネスがどう変わるのかをSaaSのメリットから見ていきましょう

### ■導入障壁が低い
導入障壁が低いというのは、 __コスト/時間/人員(スキル)__　など色々な面で言えます。先ほども少し記載しましたが、SaaSでシステムを構築する場合、「サーバーの搬入・設置」「ソフトウェアやミドルウェアのインストール」等の手間がかかりません。これにより、コストと時間を削減できるだけでなく、専門的な知識を持ったエンジニアが社内にいなくても、比較的導入しやすいのが特徴です。

### ■ユーザーとベンダーがWin-Winの関係を築ける
SaaSの特徴の1つに、ユーザーとベンダー共に __利用開始してからが大切__ ということが挙げられます。どういうことかと言うと、オンプレミスによる開発では、ベンダー側としては、リリース時に利益が発生するため、「契約→リリース」の期間に力を入れる傾向にありました。それに対してSaaSによる開発では、サブスクリプション型のビジネスモデルが一般的であるため、導入したシステムを継続して使用してもらう必要があります。そのために、ベンダー側としては、ユーザーの声に耳を傾けて社会や業務、法律などの変化に対して柔軟に対応できる環境を整えておく必要があります。このことから`ベンダーも「リリース後」に力を入れる`ようになります。
よって、ユーザーとベンダーの利害関係が一致するWin-Winの関係になることができます。

# 終わりに
多くのメリットがあり魅力的なSaaSですが、海外では「オンプレミス回帰」という言葉も聞くようになってきています。その理由の1つとしてコストが上げられます。中小企業にとってはあまり関係ない話かもしれませんが、SaaSに移行したことで逆にコストが掛かるようになることもあるからです。SaaSは導入時のコストこそ比較的安いですが、導入後は使用した量に応じて課金されるため、 __大量のデータを要するようなシステムでは逆にSaaSの方がランニングコストが高くなる__ こともあり得ます。オンプレミスからSaaSに移行する際にはよく検討するようにしましょう。

最後までお付き合いくださりありがとうございました。
【Android】composeでdp, pxを変換する

# はじめに
jetpack composeで `dp to px` および `px to dp`の変換処理の例があまりなかったのでメモに書いておきます。
本記事はcomposeの``version: 1.2.0-beta03``の情報です。
APIは変更される可能性があるので適宜最新versionに置き換えてください。

# px to dp
```kotlin
val widthPx = 16f
val density = LocalDensity.current
with(density) {
    val dp = widthPx.toDp()
}
```
# dp to px
```kotlin
val widthDp = 16.dp
val density = LocalDensity.current
with(density) {
    val px = widthDp.toPx()
}
```

`Density`を取得することで、Densityに生えている`toDp()`, `toPx()`の関数が利用できるようになります。
**CompositionLocal**経由で`Density`をcomposableから取得で出来ます。
なお、CompositionLocalはcomposeにおいて大事な機能なのでよくわからない方は[公式ドキュメント](https://developer.android.com/jetpack/compose/compositionlocal)を読んでください。

# 具体的なユースケース
おまけとして具体的にpx, dpの変換が必要となる例を紹介します。

```kotlin
var width by remember { mutableStateOf(0.dp) }
var height by remember { mutableStateOf(0.dp) }
with(LocalDensity.current) {
    // coilで画像を表示
    AsyncImage(
        model = imageUrl,
        contentDescription = null,
        onState = {
            // 画像のロードが完了したら端末上の画像サイズを取得しdpに変換する
            width = it.painter!!.intrinsicSize.width.toDp()
            height = it.painter!!.intrinsicSize.height.toDp()
        }
    )
}
Box(
    modifier = Modifier
        .width(width)
        .height(height)
        .background(Color.Green)
)
```

coilで画像を表示し、端末上の画像サイズを取得し利用する場合はpx to dpの変換をする必要があります。
このサンプルでは、画像サイズと同じサイズの`Box`を表示しています。
coilで取得できるが端末上の画像サイズ`intrinsicSize`は単位がpxのためdpに変換して利用しています。
【React, TypeScript】「cannot be used as a JSX component...」エラー

## 環境
* Mac OSX: v11.2.1
* node: v16.15.1
* yarn: v1.22.18

## エラー詳細
* `yarn start` でコンパイルを試みたところ、以下のエラーにより失敗
(`'Menu'` は `semantic-ui-react` からインポートしたコンポーネント)
```
TypeScript error in /xxxx/App.tsx(28,8):
'Menu' cannot be used as a JSX component.
  Its instance type 'Component<MenuProps, any, any>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("/Users/ayakahidaka/Documents/random-training-timer-front/node_modules/@types/react-dom/node_modules/@types/react/index").ReactNode'.  TS2786

    26 |   return (
    27 |     <div>
  > 28 |       <Menu 
       |        ^
    29 |         as={Menu}
    30 |       >
```

* エラー発生時の `package.json`（一部抜粋）
```json
{
  "dependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.1.2",
    ...
  }
  ...
}
```

## 解決方法
* 参考にしたサイト: [NPM package cannot be used as a JSX Component - Type errors](https://stackoverflow.com/questions/71791347/npm-package-cannot-be-used-as-a-jsx-component-type-errors)
* `package.json` に以下の記述を追加
  * バージョンは `@types/react-dom` と同じものを設定
```json
"resolutions": {
  "@types/react": "^17.0.0"
}
```

## 解説
### 解決前後の変化
* 参考にしたサイト内の解説によると、`@types/react-dom` は `@types/react` のメジャーリリースバージョンに依存するとのこと
  * `package.json` で指定した `@types/react` のバージョンには依存しない模様
* 修正前後の `yarn.lock` を比較すると確かに解説通り（左: 修正前、右: 修正後）
![スクリーンショット 2022-06-06 21.55.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/230946/cc30ccc6-e29d-2423-0e8e-84d5e1b0a35e.png)

### resolutionsとは？
* yarnのドキュメント （[Selective dependency resolutions | Yarn](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/)）から引用
> Yarn supports selective version resolutions, which lets you define custom package versions or ranges inside your dependencies through the resolutions field in your package.json file. Normally, this would require manual edits in the yarn.lock file.
* yarnで依存関係に用いるカスタムパッケージのバージョンを指定できる
* `yarn.lock`を直接編集せず、`package.json` 内に記述することで実現可能


## 参考サイト
* [NPM package cannot be used as a JSX Component - Type errors](https://stackoverflow.com/questions/71791347/npm-package-cannot-be-used-as-a-jsx-component-type-errors)
* [Selective dependency resolutions | Yarn](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/)
【Docker】Reactでホットリロードができない

結構な時間詰まってしまったので、備忘録として残しておきます・・・

## 【環境】
React(17.0.2)
Docker for windows
TypeScript(4.6.2)
Windows

## 【状況】
localhostを起動して、tsxファイルを上書きしても
ターミナルが動かない。
ホットリロードが起動しないので、毎回npm startをしなければならない・・・

## 【試したこと】

記事で多かったのは下記の記載。しかし効果無
```java:.env
CHOKIDAR_USEPOLLING=true
```

```yml:docker-conpose.yml
    environment:
      - ....
      - CHOKIDAR_USEPOLLING=true
```

## 【実際の解決策】

色々調査した結果、Windowsを使用していて、react-scripts 5.xx以降を使用している場合、CHOKIDAR_USEPOLLINGは機能しないとのこと。
下記の記載で、ホットリロードが動きました。感動した。。

```java:package.json
"scripts": {
    "start": "WATCHPACK_POLLING=true react-scripts start",
    "build": ...
  },
```

## 【参考記事】

[React hot reload doesn't work in docker container](https://stackoverflow.com/questions/71297042/react-hot-reload-doesnt-work-in-docker-container)
【TypeScript】React.FC, VFC ('React' has no exported member 'VFC'.ts)

## はじめに

コンポーネントの型として`React.VFC`を書こうとすると下記のエラーがでた。
`Namespace 'React' has no exported member 'VFC'.ts(2694)`
`React.FC`など種類があることは知っていたが、使い分けなど詳細を把握していなかったので、ここに記録します。

## 結論

今後、`React.FC`が主流となっていくようなので、基本これを使っていれば良い。
React v18 からは`React.VFC`の方は非推奨になったので使わないようにする。
### 詳細

元々、`React.FC`では`children`が最初から暗黙的に定義されており、`props`の定義に`children`を渡していない状態で、`children`を使用してもエラーになりませんでした。
↓

これは良くない、ということで`children`が含まれない`React.VFC`が一時的に用意された。

これで、`children`が必要な場合は

```tsx
interface Props {
  name: string;
  children: React.ReactNode;
}
```

とchildrenを明示的に定義することが必須となった。
↓

React v18 からは`React.FunctionComponent` (FC), `React.Component` に暗黙的に含まれていた `children` が除かれ、`React.VFC`の方は非推奨になった。

## おわりに

曖昧だった理解を深めるいい機会となった。
`React.VFC`との関係以外に、React.FC と JSX.Element どちらを使うのか、というお話もあるようだが、自分の主観ではコンポーネントの型にはReact.FCが使われていることが多いように思う。
LPICレベル１　１０１試験合格・学習体験記


## はじめに
初投稿です。
先日LPIC101試験合格した為その学習内容を記事にします。
良かったら参考にしてください
学習時間　2週間程度　（1日1～3時間）

## 前提
- 未経験者向け
- Linux理解度より資格取得優先した学習方法

## 使用した学習教材
2冊ともメルカリで仕入れました。
102試験合格したら売りますw

- あずき本

https://www.amazon.co.jp/dp/B07P5S98SK/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

- スピマス（白本）

https://www.amazon.co.jp/-/en/%E5%B1%B1%E6%9C%AC-%E9%81%93%E5%AD%90-ebook/dp/B07TVTKW2C/ref=sr_1_1?crid=11XS72A4ACUVB&keywords=%E3%82%B9%E3%83%94%E3%83%9E%E3%82%B9&qid=1654520845&s=digital-text&sprefix=%E3%82%B9%E3%83%94%E3%83%9E%E3%82%B9%2Cdigital-text%2C314&sr=1-1

## 学習方法
- あずき本1週さらっと読む（3日程度）
- スピマスの各章の問題を暗記する（僕はノートに答えを書いて採点を繰り返しました）（7日間）
- 全章暗記したらスピマスの模試問題を解く（1日）
- あずき本を再度読み、理解度が足りていない箇所を読む（2日）
- 試験まで各章問題、模試問題を解く（僕は9割正解するまで繰り返した。）（1日）
## 試験当日
スピマスの問題がかなり出題されたので30分程度で終わりました。
580点なのでまあ…ちょっとギリだったので不安な方はPing-tでさらに学習をおすすめします。
ただ…Ping-tの問題程マニアックなサブコマンドの問題は出なかったので何とも言えないです。
## 終わりに
冒頭に書きましたがあくまで資格優先の勉強法なので実際の仕事でのLinuxのスキルを上げるなら
AWSでサーバー作った方がいいと思います。あくまで資格は会社の上司の評価や履歴書に書くための
ものなのでそこは割り切った方がいいと思います。
検索システムの仕様が読めない。

https://www.autosar.org/nc/document-search/

で

Demonstrator 

検索

0件。

https://www.autosar.org/nc/document-search/?tx_sysgsearch_pi1%5Bquery%5D=Demonstrator

だと２件。

https://www.autosar.org/nc/document-search/

で

Demonstrator Design of Functional Cluster Execution Management

検索

https://www.autosar.org/nc/document-search/?tx_sysgsearch_pi1%5Bquery%5D=Demonstrator+Design+of+Functional+Cluster+Execution+Management&tx_sysgsearch_pi1%5Bcategory%5D%5B150%5D=150

0件

https://www.autosar.org/nc/document-search/?tx_sysgsearch_pi1%5Bquery%5D=Demonstrator+Design+of+Functional+Cluster+Execution+Management

では２件。

https://www.autosar.org/fileadmin/user_upload/standards/adaptive/21-11/AUTOSAR_TR_APDemonstratorReleaseNotes.pdf

クリックすると。

>Not Found  The requested URL was not found on this server.

なにしてくれちゃうんねん。


# https://google.com

で、

Demonstrator Design of Functional Cluster Execution Management

検索。

>https://www.autosar.org/fileadmin/user_upload/standards/adaptive/20-11/AUTOSAR_EXP_FCDesignExecutionManagement.pdf

20-11のが検索できた。フォルダ名を21-11に変更してみた。

https://www.autosar.org/fileadmin/user_upload/standards/adaptive/21-11/AUTOSAR_EXP_FCDesignExecutionManagement.pdf

> Not Found  The requested URL was not found on this server.

なにしれくれちゃうんねん。


Demonstrator Design of  Functional Cluster Update And  Configuration Management

で検索してもだめ。googleでは１年前のは出てくる。

https://www.autosar.org/fileadmin/user_upload/standards/adaptive/20-11/AUTOSAR_EXP_FCDesignExecutionManagement.pdf

https://qiita.com/kaizen_nagoya/items/3c78bf86a6af2035434b
でURLの文字列を確かめる。

>https://www.autosar.org/fileadmin/user_upload/standards/adaptive/21-11/AUTOSAR_RS_OperatingSystemInterface.pdf

20-11が21-11に変わっているだけ。

なにしてくれちゃうんねん。
おうちkubernetes構築記②　Kubernetesのインストール

### おうちkubernetesの構築した記録全3回のうちの2回目となります。
### ※この内容は、masterノード / workerノード双方とも同じ処理を行います。

## 環境
 #### S/W
  -  OS　　　　　： Ubuntu22.04
  -  docker　　　　: 20.10.12
  -  kubernetes　　: 1.24.1
  -  terterm　　　 ：4.106

#### H/W
  - 本体　　　　　：rasberry Pi4 8GB × 2
  - ルータ　　　　：LINKSYS 5PORT
  - SDカード　　　：64GB


## 1. kubernetesのインストール
本項目は、masterノード / workerノード共通の処理となります。
- kubernetesをubuntuにイストールする。

1）以下のコマンドを実行し、super userに切り替える。　
```
$ sudo -s
```
2）super userに切り替わったら、以下のコマンドを実行し、googleのGPGキーを取得する。
```
$ curl -s https://packages.cloud.google.com/apt/doc/apt-key.gpg | apt-key add
```
3）OKが表示されたことを確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/196226/790a8fce-5342-40e6-fedb-440ed8e9f2e3.png)

4) 以下のコマンドを実行し、swapを削除する。
```
$ swapoff -a
```
4）以下のコマンドを実行し、Kubernetesのリポジトリを追加します。
```
$ apt-add-repository "deb http://apt.kubernetes.io/ kubernetes-xenial main"
```

5) 以下のコマンドを実行し、パッケージリストを更新する。
```
$ sudo apt-get update
```

6）以下のコマンドを実行し、kubelet、kubeadm、kubectlをインストールする。
```
$ sudo apt install -y kubelet kubeadm kubectl
```

7) 以下のような内容が表示されたら、正常にインストールされたことになります。
```
conntrack (1:1.4.6-2build2) を設定しています ...
kubectl (1.24.1-00) を設定しています ...
ebtables (2.0.11-4build2) を設定しています ...
socat (1.7.4.1-3ubuntu4) を設定しています ...
cri-tools (1.24.0-00) を設定しています ...
kubernetes-cni (0.8.7-00) を設定しています ...
ethtool (1:5.16-1) を設定しています ...
kubelet (1.24.1-00) を設定しています ...
Created symlink /etc/systemd/system/multi-user.target.wants/kubelet.service → /lib/systemd/system/kubelet.service.
kubeadm (1.24.1-00) を設定しています ...
man-db (2.10.2-1) のトリガを処理しています ...
$
```

以上で、Kubernetesのインストール作業は完了となります。
次回は、masterノード　／　workerノードそれぞれの設定と動作確認を記載します。
大量データをpost送信したらエラーが発生した話

# はじめに
画面にデータを一覧表示をさせた後に送信ボタンを押した際、下記エラーが発生しました。
今回はその原因と対php.iniの設定変更についてまとめました。

# エラー内容
下記のエラーが画面に表示されました。
簡単に言うと、php.iniのmax_input_varsで設定された件数よりデータが多いのでエラーでっせということです。
```
Warning: Unknown: Input variables exceeded 1000. To increase the limit change max_input_vars in php.ini. in Unknown on line 0

Fatal error: Uncaught ErrorException: Cannot modify header information - headers already sent by (output started at 以下発生箇所のパス...)
Fatal error: Uncaught ErrorException: Cannot modify header information - headers already sent by (output started at 以下発生箇所のパス...)
```

# エラーが発生した原因
リスト表示をさせた際、各リスト情報をforeachにてhidden属性で情報を持たせていました。
この状態でsubmitボタンを押したとき、hidden属性で持たせていた情報が大量にpost送信されました。
大量のpost送信によって、php.iniの設定値(max_input_vars)よりも多いデータを送ったため、エラーが発生しました。
なので、大量のinputタグやhidden属性等を設定している画面でpost送信する際は気を付ける必要があります。

# そもそもmax_input_varsて何？
max_input_varsとはPHP5.3.9以降のバージョンで設けられたもので、1度にPOSTできる数を制限する設定です。
この制限は、php.iniの「max_input_vars」の設定値を変更することで対応できます。また、初期設定は1000となっています。
ちなみに、max_input_varsの設定が存在する理由は、セキュリティの観点から大量のデータをphp側で受け取れないようにするためのようです。

加えて、post送信だけでなくget送信、sessionもmax_input_varsによるデータ送信制限の対象のようです。
(以下php公式参照)
https://www.php.net/manual/ja/info.configuration.php#ini.max-input-vars

# max_input_varsの設定変更方法
下記に従って、php.iniの設定を変更すればOKです。

1, 変更項目は、`max_input_vars`の値を変更する。
2, 変更する際は先頭についている `; (コメントアウト)`を外す。
3, 変更後は、XAMMP or MANPを一度stopにして起動し直す。

# 最後に
ここで紹介したphp.iniの上限値を変えることでエラーに対処することが出来ますが
本当にpostしているデータは必要なのか？もっと送信データを減らすことが出来るのではないか？
などなどそう言った視点で一度考え直す必要があると思います。(自分に言い聞かす!)
その方がサーバーも圧迫せず応答性の高いシステム開発が実現できると思います。
これを機会に一度送信データを見直していただけると幸いです。


# 参考サイト
https://insource-mkd.co.jp/staff-blog/16076.html

https://www.php-factory.net/trivia/14.php

https://masyus.work/articles/notice-max-input-vars-limit-on-php/
【PHP】【素数判定】PHPで素数問題を解く

# 素数とは

１・2以上の数※0と１は素数ではない
２・1とその数だけでしか割りきれない数

# コード1
```PHP
<?php
 
$num = intval(fgets(STDIN));
$point = 0;
if ($num === 0) goto output;
foreach (range(1,$num) as $j) {    
    if ($num % $j === 0) $point++;    
}
output:
echo $num,":",$point === 2 ? "素数だよ。":"素数じゃない。";
```

# 結果1
```
3:素数だよ。
```

# コード2
```PHP
<?php
foreach (range(0,100) as $i) {
    $point = 0;
    foreach (range(1,$i) as $j) {   
        if ($i === 0) break;
        if ($i % $j === 0) $point++;    
    }
    if ($point === 2) {
        echo $i,PHP_EOL;
    }
}
```

# 結果2
```
2
3
5
7
11
13
17
19
23
29
31
37
41
43
47
53
59
61
67
71
73
79
83
89
97
```
DockerでPostgreSQLを起動して、sqlファイルを読み込ませ、実行する

Windows10、Docker Desktopで動作確認をしました。
まずは任意のSQLファイルを作成します。
ここではa.sqlとして保存しました。

```sql:a.sql
create database shop;
create table items (item_id integer, item_name varchar(100), price integer);
insert into items values (1000, 'desk', 54000), (1001, 'clock', 22800);
```

作成したらそのSQLファイルがあるフォルダ内で、以下を実行します。

```
docker run --name some-postgres -e POSTGRES_PASSWORD=mysecretpassword -v ${pwd}:/tmp -dit postgres
docker exec some-postgres psql -U postgres -f /tmp/a.sql
```

ちゃんとa.sqlが実行されたか確認します。

```
> docker exec -it some-postgres psql -U postgres
psql (14.3 (Debian 14.3-1.pgdg110+1))
Type "help" for help.

postgres=# select * from items;
 item_id | item_name | price
---------+-----------+-------
    1000 | desk      | 54000
    1001 | clock     | 22800
(2 rows)
```

ちゃんと実行されていました。

ちなみに、psqlコマンド実行後にパスワード聞かれないなと思ったら、同じことを思っている方がいらっしゃいました。
同じコンテナ内からの接続の時はパスワードを聞かれないようです。

https://zenn.dev/dowanna6/articles/6cc31869346a06
ssh鍵を作った後でBitbucketやGithubにssh接続する

# はじめに
私がいつもBitbucketにssh接続する時の儀式を記します。ターミナルを閉じたら毎度`git@bitbucket.org: Permission denied (publickey).`になってしまうので儀式をやらないといけない。。。良い解決方法とかあるんでしょうか。
→解決方法見つかったので追記しました!
```
% ssh -T git@bitbucket.org
git@bitbucket.org: Permission denied (publickey). # 儀式をやらないといつもこうなる
```


# 儀式 (Bitbucketにssh接続する)
Macのターミナルでやっています。

## 手順1
```
% eval "$(ssh-agent)"
Agent pid 63819  
```

## 手順2
`ssh-add`のあとは`ssh-keygen`で作成した秘密鍵のパスを渡してください。
```
% ssh-add /Users/(ユーザ名)/.ssh/id_rsa   # ここは秘密鍵のパスを記述します
Identity added: /Users/(ユーザ名)/.ssh/id_rsa (hogehoge@hugahuganoMacBook-puro.local)
```

## 手順3
Githubの場合は`ssh -T git@github.com`とします。
```
% ssh -T git@bitbucket.org  # Githubなら@のあとはgithub.comです
authenticated via ssh key.

You can use git to connect to Bitbucket. Shell access is disabled
```
これでリモートリポジトリにpushやpullができるようになると思います！ 誰かのお役に立てれば幸いです。

# 追記: 儀式がいらなくなった！
`.ssh/config`に以下のように記述します。
```config
Host github.com
  HostName github.com
  IdentityFile /Users/(ユーザ名)/.ssh/id_rsa  # 秘密鍵のパス
  User git  

Host bitbucket.org
    HostName bitbucket.org
    IdentityFile /Users/(ユーザ名)/.ssh/id_rsa  # 秘密鍵のパス
    User git 
```
そうすると儀式を行わずに```ssh -T git@bitbucket.org```もしくは```ssh -T git@github.com```ができるようになります！


# 参考文献
1年以上前に調べておいた備忘録なのでいくつか参考文献漏れしていると思います。
- [GitHubにssh接続する初心者さん](https://qiita.com/aki4000/items/4c81bc2747bbd5e96d85)
- [ssh-addでエラー（Could not open a connection to your authentication agent.）](https://webree.jp/article/ssh-add-error/)
- [多段sshでGitを使う](https://rcmdnk.com/blog/2018/11/16/computer-network-git/) ← 2022/06/08追記分
ビジョンの役割を説明する


## これは何
この記事は、僕のプロダクトマネジメントに関する考え方のうち、ビジョンの役割、必要性について書いたものです
記事の内容で、それは違うよ、みたいなものがあればぜひコメントや編集リクエストをいただければ嬉しいです。

## ビジョンとは何か
企業によっては、「ビジョン」「ミッション」「バリュー」の三つを設定していると思います。この三つに加えて「ストラテジー」を設定している企業もあるかもしれません。しかしこれらの定義はふんわりしていることが多いです。
まずはじめに、「ビジョン」「ミッション」「バリュー」「ストラテジー」とはなんなのかを改め説明させてください。

結論から言うと、以下の二つの軸によって分けられる4象限の各象限の名称です。

- 社会（外部）と組織（内部）
- 目的（アウトカム）と行動（アウトプット）

図にするとこのような形になります。

![4象限](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/158501/79fdc9b8-c514-c4bf-8eba-0636fc07c3a8.png)

この図を元にして「ビジョン」「ミッション」「バリュー」「ストラテジー」を説明すると以下の通りです。

- ビジョン（組織、目的）
    - 組織が存在する目的
- ミッション（社会、目的）
    - 社会に対してもたらすもの
- バリュー（組織、行動）
    - ビジョンを実現するために、組織として行う行動
- ストラテジー（社会、行動）
    - ミッションを実現するために、社会に対して行うこと

このように、ビジョンとは「組織が存在する目的」となります。
組織によってはビジョン起点でミッションを定義するパターン、ミッションを起点にビジョンを定義するパターンがあります。
ただ、企業として何かを行なっている以上、ビジョンというのはどのような形であれ存在しているはずです。
今回の記事では具体的なビジョンの設定方法などについては省略します。

## プロダクトを作っていく上でなぜビジョンが必要なのか
前項までで、ビジョンがなんなのかについて説明を行いました。
ここからは、なぜプロダクトを作るときにビジョンが重要なのかについて説明を行っていきたいと思います。

### プロダクトは何にでもなれてしまう
現代のプロダクト、特にソフトウェアは本当に様々なものが作れるようになっています。
どんな機能でも、どんなUIでも、自由自在に実現することができます。
しかし、この自由度の高さが、逆にプロダクトの可能性をつぶしてしまう可能性があります。
目的のないプロダクトには目的のない機能が増えていきます。
「目的のない機能が増えるとなんでダメなの？機能が増えてるんだから良いじゃん！」
みたいに思う方もいるかもしれません。これは確かに機能が存在するだけならば正しそうです。
しかし、プロダクトは作って終わりではなく、存在し続ける限り改善とメンテナンスを行い続ける必要があります。
つまり、価値を注ぐべき箇所に注げる力が分散していくことにつながり、プロダクトは価値を曇らせて行ってしまうのです。

### ビジョンは「やること」と「やらないこと」を定義する
前項の通り、プロダクトは何にでもなれてしまうという魅力と危険性を備えています。
改めてビジョンの役割を整理すると、ビジョンとは「やること」に加えて「やらないことも」判断できるようになるのです。
僕は「やらないこと」を判断できるようになる、というのがとても重要だと思っています。
プロダクトは開発をし続ける限り、いやでも機能は変化し続けます。それはまるで一度走り始めた機関車のようなものです。
この変化の中で「やらないこと」を避けることがすなわちプロダクトの価値の最大化につながるのです。

## まとめ
どの企業でもプロダクトを作っている限り、プロダクトは変化し続けるものです。
変化を上手く乗りこなしていくことで、プロダクトは常に最大の価値を提供し続けるものになる、そしてビジョンはその変化を乗りこなすための舵であるというお話でした。

次回はプロダクトの価値にフォーカスし続けるための考え方について解説したいと思います。

## バックナンバー

https://qiita.com/getty104/items/4668e2a20b39ffd859c4

https://qiita.com/getty104/items/d791258324ac6df8e629
Salesforceフローを作成しよう～活動作成時に特定の関連レコードに紐づく場合活動の項目の値を更新する方法

こんにちは。
Salesforceフローを作成して、活動作成時に特定の関連レコードに紐づく場合活動の項目の値を更新する方法をまとめます

今回は活動作成時に活動に紐づくリードを確認し、リードのカスタム日付項目を確認し、日付項目が空欄か空欄で無いかで活動の項目を変更するか否かを判断します

フローの全貌はこのような形です。

![作成時.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/4ca1dc88-2133-e99a-dc2b-d1a6a19943c2.png)

一つずつ見ていきましょう

レコード作成時
![レコード作成１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/74a763bd-c840-d59c-9e04-59af3a7382b9.png)


レコード取得
![レコード取得.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/c5f98312-4e88-574f-9ba5-296255613bef.png)

決定
![決定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/bd0492f6-cc14-e44d-9529-e7f2752ecf18.png)

更新
![レコード更新.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531631/c4dc93bc-56b2-ea57-9c33-880ec30f71d5.png)
【Xcode】Swift Package Managerの使い方

# 追加

①: リポジトリのURLをコピーする
![スクリーンショット 2022-06-06 21.39.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/da86f855-485b-30e5-0973-35783ecca643.png)
![スクリーンショット 2022-05-07 15.06.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/ebdf2dc3-754b-6382-ce48-3287a423abe7.png)

②: Xcodeのメニューバーの「File」を選択
![スクリーンショット 2022-05-07 15.07.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/7a84e170-12a7-b2f6-ef2f-0291670921ad.png)
③: 「Add Packages...」を選択
<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1d6f4a3c-e8f1-5af2-7086-98b44b96471d.png">
④: ①でコピーしたURLを貼り付ける
⑤: 「Add Package」を選択
![スクリーンショット 2022-05-07 15.12.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/13fe9b6f-4f10-ab64-054a-7570a441b683.png)
⑥: 「Add Package」を選択
![スクリーンショット 2022-05-07 15.15.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/b2c955ac-b356-7998-2e58-836d08758687.png)

このようにプロジェクトの下に「Package Dependencies」が追加されていれば成功です
![スクリーンショット 2022-06-06 21.44.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/bb3a00ba-3ac0-b112-cbe2-21ce22b365cc.png)

# 削除
![スクリーンショット 2022-06-06 21.47.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/76b33489-87a6-7177-d8d8-7d5e17163c0b.png)
Asciidoctorで図キャプションを図に合わせる

# 1. はじめに


図を左寄せ、中央、右寄せにしたときに、図キャプションが左寄せになってしまうのを解消してみた。

処理系は、 asciidoctor.js。Rubyのasciidoctorでも同じだと思う。

https://discuss.asciidoctor.org/How-to-center-image-caption-when-the-image-is-centered-td901.html
https://github.com/asciidoctor/asciidoctor/issues/857
この辺をそのまま利用させてもらった。

# 2. デフォルト

```adoc:main.adoc
= イメージの整列
:imagesdir: ./image

== right

.右寄せ
image::right.png[align="right"]

== center

.中央
image::center.png[align="center"]

== left

.左寄せ
image::left.png[align="left"]
```

キャプションは左寄せ

![pic1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165394/9f61d071-d537-c0c3-e428-6cab6074863f.png)

# 3. キャプションを図に合わせる


docinfoを設定する

```adoc:main.adoc
= イメージの整列
:docinfo: shared
:imagesdir: ./image

== right

.右寄せ
image::right.png[align="right"]

== center

.中央
image::center.png[align="center"]

== left

.左寄せ
image::left.png[align="left"]
```

docinfo.html を次のように設定

```html:docinfo.html
<style type="text/css"> .imageblock > .title { text-align: inherit; } </style>
```

docinfoはこのあたり
https://docs.asciidoctor.org/asciidoctor/latest/docinfo/
htmlのhead部分にそのまま出力されるみたい。

キャプションが図に合わせて移動

![pic2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165394/7f291ebf-ede2-abcb-484b-295ed7329236.png)


ん、右寄せは、ちょっとおかしいか。