OmniAICreator/Qiita-1.07M huggingface dataset:
NuxtJSのSSRからCloud Runに設定したカスタムドメインにリクエストするとまれにERROR getaddrinfo ENOTFOUND xxxが発生する件

:::note warn
Nuxt2系で発生した事象です
:::


表題通りの事象が発生した

もう少し具体的に説明するとCloud Run上のNuxtJSから別のCloud RunのWEBAPIにアクセスするとまれに「ERROR getaddrinfo ENOTFOUND ドメイン名」が発生する。WEBAPI側はカスタムドメインのみリクエストを行い、Cloud Runによる割り当て済みのドメインにはリクエストをしない。

めちゃくちゃ雑だけど以下みたいな構成。

![スクリーンショット 2022-12-03 23.19.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496802/5caf245d-06dd-ab29-9bba-a969a327d4ce.png)

Cloud Runによる割り当て済みのドメインとカスタムドメインはCloud RunのURLで確認できる
![スクリーンショット 2022-12-03 23.38.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496802/1fb929d2-de4a-ed4c-12de-308441f9345b.png)

## ERROR getaddrinfo ENOTFOUND xxx

DNSの名前解決に失敗したときに発生するエラー。ただ、今回のケースはNuxtJSのSSRでリクエストするとまれに発生する。SPAでリクエストする場合は発生しない。さらにこのエラーが発生している際に他で直接WEBAPIを叩いたりSPAでリクエストしても発生しない。Cloud Runによる割り当て済みのドメインにリクエストするとこのエラーが発生しない。この事象が発生する自分の環境では[Sentry](https://github.com/nuxt-community/sentry-module)を用いてエラーハンドリングしているが、Sentryでは補足されない（もちろんWEBAPI側のエラーハンドリングも補足されない）。Cloud Runのログで判明したのでアプリケーション側で判断できないのもめちゃくちゃしんどい😭

## ググるとよく出てくる解決策

いくつか解決策が出てくる

- ドメインのタイポが多い
- hostsファイルに記述する
- プロキシを無効にする

3つ目のプロキシを無効にするでは[こちらの記事](https://qiita.com/ksh-fthr/items/2daaaf3a15c4c11956e9#%E3%83%97%E3%83%AD%E3%82%AD%E3%82%B7%E9%96%A2%E9%80%A3%E3%81%AE%E8%A8%AD%E5%AE%9A-error-getaddrinfo-enotfound-%E3%81%AE%E5%AF%BE%E5%87%A6-)にaxiosで`proxy:false`にすると解決すると書かれていたが、NuxtJSではデフォルトがfalseなので今回とは関係がなさそう。issueに同じ現象の人がいるが解決出来てないみたい。

https://github.com/nuxt-community/axios-module/issues/499

## baseURLとbrowserBaseURLを使い分ける

baseURLはSSRからリクエストするURL、browserBaseURLはSPAでリクエストするURL。おそらくSSRの際に何かしらの理由でDNSの名前解決出来ないのだろうと思ったので、baseURLにCloud Runによる割り当て済みのドメイン、browserBaseURLにカスタムドメインを設定し前述した事象を回避した。これらのオプションは環境変数で上書きされるため環境変数に書いておけばnuxt.config.jsに書く必要がない。自分は以下のように.envに記載した。

```ruby:.env
# baseURL
API_URL={Cloud Runによる割り当て済みのドメイン}
# browserBaseURL
API_URL_BROWSER={カスタムドメイン}
```

nuxt.config.jsに書く場合
※API_URL、API_URL_BROWSERの環境変数を利用している場合は以下のように記述しても上書きされてしまうので注意
```json:nuxt.config.js
axios: {
  baseURL: 'cloud run url',
  browserBaseURL: 'custom url',
}
```

- Options - nuxtjs/axios
https://axios.nuxtjs.org/options/#baseurl

## (解決策)proxyを利用する

proxyを利用してCloud Runによる割り当て済みのドメインにアクセスする方法です。問題となったカスタムドメインは利用しないのでこの方法が一番良いはず

```json:nuxt.config.js
axios: {
  proxy: true,
},

proxy: {
  '/api/': {
    target: 'cloud run url',
    pathRewrite: { '^/api/': '' },
  },
},
```

- Options - nuxtjs/axios
https://axios.nuxtjs.org/options/#proxy

## 最後に

とりあえず「ERROR getaddrinfo ENOTFOUND xxx」は起きなくなったのでよかったが、回避策なのでいまいち腑に落ちない。結構調べたが明確な解決策が出てこないのでもし知ってる方がいましたら教えてください🙇‍♂️なんとなくだがCloud RunのコールドスタートかDockerが関係しているような気もするが...

...



タイミング的にアドベントカレンダーの時期なので便乗させてもらいました、特に面白い内容じゃなくでごめんなさい🙇‍♂️
iPhone12ProでもDynamic Island使いたい！！

[クソアプリ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kuso-app) 3日目の記事です

環境
Xcode 14.1
SwiftUI

# Dynamic Islandを体験したい
iPhone14Proシリーズから搭載されたDynamic Islandですが、みなさん使用されていますでしょうか？
残念ながらぼくはiPhone12Proを使っているため、Dynamic Islandを実機で体験したことがありません。
そんな時に今回のイベントの存在を教えてもらい、反射的に今回のような愚行に及びました。


### Dynamic Islandとは
> これはハードウェアであり、ソフトウェアであり、その中間でもある存在。
> まさに、Appleだからこそ起こせるイノベーションです。
https://www.apple.com/jp/iphone-14-pro/




# 完成(未完成)品
![DynamicIsland_gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/420303/a99a9b4d-703f-027b-3640-f9d860b7891e.gif)

完全に行き当たりばったりで作ったので、UIだけですがそれっぽく作りました。
もう１パターン（Dynamic Island自体をタップした時の動作）も作りたかったのですが時間ありませんでした。
勉強がてら、他パターンも作っていこうと思います。

未熟ながらも今回参加させていただいてとても楽しかったです！
今度はクオリティの高いクソアプリが作れるように精進しますm(_ _)m
LovyanGFX for Windowsを使ってみた

# はじめに
LovyanGFXに最近Windowsで動くバージョンが公開されています。
これを使用することにより、従来Arduino上で動作を確認していたGUIまわりの開発を効率的に進めることが可能になります。
この記事では、LovyanGFX for Windowsのインストール方法の補足と簡単な使用方法について説明します。

# LovyanGFX for Windowsのインストール
以下のドキュメントを参考に、VisualStudio Community 2022 とWindows用 C++ Clang ツールをインストールします。
https://github.com/lovyan03/LovyanGFX/tree/master/examples_for_PC
OpenCVのSDLのダウンロード元は以下のGitHubに移動しているので注意が必要です。
https://github.com/libsdl-org/SDL/releases/tag/release-2.26.1
この中から以下のファイルをダウンロードします。
https://github.com/libsdl-org/SDL/releases/download/release-2.26.1/SDL2-devel-2.26.1-VC.zip
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337553/9a21e9dd-debd-9df8-afee-b1565fd593ae.png)

ダウンロード後、c:\sdl2に展開しておきます。インストール先は変更しないほうが、のちの修正が不要になります。

# 使用方法
公式のドキュメントに従い、Visual Studio 2022を起動しフォルダを開きます。
右側のペインのフォルダビューから、user_code.cppを開きます。
このソースファイルにlovyanGFXの描画関数を記述することによりWindows上でLovyanGFXを使用したGUI画面の確認をWindows上で実施することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337553/7627a24b-961f-f533-2aa7-b8b32964052d.png)

# サンプルコード例
LovyanGFXのAPIを使用した簡単な例を以下に示します。
ArduinoのAPIは使用できませんので、ソースコードはそのまま共通化はできません。
例えば、delay()関数はSleep()関数に置き換えるなどの修正が必要になります。
```
// If you write this, you can use drawBmpFile / drawJpgFile / drawPngFile
// #include <stdio.h>

// If you write this, you can use drawBmpUrl / drawJpgUrl / drawPngUrl ( for Windows )
#include <windows.h>    // Sleep()を使うために追加
// #include <winhttp.h>
// #pragma comment (lib, "winhttp.lib")

#define LGFX_USE_V1
#include <LovyanGFX.hpp>
#include <LGFX_AUTODETECT.hpp>

LGFX gfx ( 128, 64, 4);    // 128x64の表示機を使用した場合、

void setup()
{
  gfx.init();
}

void loop()
{
    int w = gfx.width();
    int h = gfx.height() >> 3;
    for (int x = 0; x < w; ++x) {
        int c1 = (x << 8) / w;
        int c2 = 255 - c1;
        gfx.drawFastVLine(x, 0 * h, h, gfx.color565(c1, 0, 0));
        gfx.drawFastVLine(x, 1 * h, h, gfx.color565(c2, 0, 0));
        gfx.drawFastVLine(x, 2 * h, h, gfx.color565(0, c1, 0));
        gfx.drawFastVLine(x, 3 * h, h, gfx.color565(0, c2, 0));
        gfx.drawFastVLine(x, 4 * h, h, gfx.color565(0, 0, c1));
        gfx.drawFastVLine(x, 5 * h, h, gfx.color565(0, 0, c2));
        gfx.drawFastVLine(x, 6 * h, h, gfx.color565(c1, c1, c1));
        gfx.drawFastVLine(x, 7 * h, h, gfx.color565(c2, c2, c2));
    }
    Sleep(2000);    //  delay()を置き換え
    gfx.fillScreen(TFT_BLACK);
    for (int i = 1; i < 1000; i++) {
        gfx.fillCircle(rand() % gfx.width(), rand() % gfx.height(), (rand() & 7) + 3, rand());
        Sleep(10);    // delay()を置き換え    
    }
}
```
## 実行結果
実ウインドウの4倍のサイズで描画結果を確認することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/337553/6fe5e5b2-e438-b5b8-88d1-c7dc92332cb3.png)

# まとめ
- LovyanGFX for Windowsをインストールし、動作の確認を行った。
- Visual Studio上でLovyanGFXのAPIを）記述したソースコードが動作することを確認した。
- Arduino固有のAPI（delay()関数等）はWindowsの関数に置き換えが必要となる。
- Visual Studioのデバッグ機能等を用いて、ArduinoのGUI開発を効率的に行うことが可能であることを確認した。
Livecodelabで,手軽に3Dアートを始めよう

# 初めに
こんにちは。
元メンターで、今はスクールのクラスマネージャーとして関わっている者です。
昨日は、こにーが[ノーコードで作るアプリ開発の記事](https://qiita.com/kony7/items/7b9919b45c02e92fcfbb)を書いてくれていました。ぜひ読んでみてくださいね。

# 今回やること
今回は、Livecodelabというサイトを使用して、3Dアートを作ってみましょう！
Livecodelabで、どんなことが出来るのか是非知ってもらえたらと思います。
チュートリアルで基本文法を身につけて、サンプルの値を変更して遊んでみましょう。

# Livecodelabについて
Livecodelabは、WebGLを利用した3Dグラフィックスを簡単に表示できるWebサイトです。
ソフトをインストールしなくても、LivecodelabのWeb上でプログラムを書き実行する環境が整っています。
[Livecodelab](https://livecodelab.net/)は、ここからアクセスできます。

# 基本的な文法を身に付けよう
基本的な文法は、チュートリアルを行えば十分です。
画面左上からチュートリアルをやってみましょう。所要時間は15-30分ほどです。
下記のように、立方体を表示し回転させたり,背景の色を変更します。
```
rotate time, time * 2, 20 
background darkgray 
scale 1.5 
box
```

![スクリーンショット 2022-12-03 21.52.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986490/87f1321e-0faf-3b52-01f9-045d45302007.png)

# 作品を作ってみよう
ここからは、Demoにあるサンプル例を見ながら、Livecodelabで作品を作ってみましょう。
Demoの値を変えるだけでも、かなり変化があって楽しめます。
私も2つ作成しましたので、コードと簡単に解説します。


### ①グラデーションとモーションブラー
simpleGradientを使用すると、背景にグラデーションがかかります。
animationStyleをmotionBlurにすると、画像のようにブラーがかかった状態が作れます。
```javascript:demo01
simpleGradient (color 217, 175, 217), (color 151, 217, 225), (color white) 
animationStyle motionBlur
6 times
	rotate time, 0, time
	box 1
```
![スクリーンショット 2022-12-03 23.13.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986490/7321a46d-4f12-0920-279e-7e420c6ca534.png)

### ②for文とペイントオーバー
チュートリアルに無い内容ですが、for文も使えますのでカウント変数も使用できます。
animationStyleをpaintOverにすると、前フレームの描画が残ります。
変数,if文も使用出来ます。
```javascript:demo02
background 155, 255, 255
animationStyle paintOver
rotate time, time * 2, time
noStroke
move -2 ,0 ,0
for i in [0...3]
	move 1, 0, 0
	if i == 1
		ball random(0.2,0.5)
	else 
		peg 0.1, 30, 0.1
```
![スクリーンショット 2022-12-03 23.40.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986490/cb208cfb-1536-aeef-a4c5-9339f6fc316d.png)



# autoCode機能について
Livecodelabには、コードを勝手に書き換えてくれるautoCode機能があります。
画面上部のボタンを押すと書いたプログラムが、自動的にどんどん変化していきます。
自分では思い付かないものが出来るので、３Dアートのアイデア出しにも使えそうです。
先程の②の作品にautoCode機能を使用すると、下記のような作品が出来ました。
![スクリーンショット 2022-12-03 23.42.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986490/83252eab-e6bd-b8fe-9eed-1ad92b3b76ac.png)


# 終わりに
Livecodelabを、本格的に使用するには少し不十分な点もあります。リファレンスが不十分,情報が少ないなどの理由です。
ですが、簡単にVJ的なことも出来ますし、autoCode機能を使用して3Dアートのアイデア出しなどにも役立ちそうです。
いつもスクールで、メンターの皆さんに刺激をもらっています。明日以降のメンターさんの記事もお楽しみに！
Datadog ぽすちゃ管理（CSPM）ってなんだ？

# すごく進化した Datadog の CSPM で俺のクラウド管理ポータルの設定不備を全部検出してみる

ひらがなで『ぽすちゃ管理』と書くと柔らかい印象なので、面倒くさそうな CSPM を親しみやすくできるかな。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/244a770b-0050-089c-56f7-1706162b44b4.png)

自分が学習用に使っている多分セキュリティのあまいであろう AWS と Azure のクラウド管理ポータルを Datadog の CSPM でセルフ監査してみる

- Datadog の CSPM ってどんな機能なの？
- CSPM の設定方法は？
- 検出可能なルール数ってどれくらい？
- ルール違反を検出したときにメール通知されるの？

以下すべて、2022年11月26日時点の情報です。クラウドの進化は早いので、きっと情報はすぐに更新されます。３回に渡って確認していきます。

目次
1. 背景（CSPMは大切だよ）
2. ぽすちゃ管理って何？
3. 初期設定（CSPM）
4. 検出したルールを読む（サマリー）
5. 検出したルールのサンプルを読む（そして幾つか是正してみる）
6. ルール違反を検出したときにメール通知する設定

## １．背景（CSPMは大切だよ）
クラウドのセキュリティはしっかり設定した。初期設定はしっかりと。だがしかし、詳しくは記載できないが大変な経験をした話を聞くことがある。例えば…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/189936/a1326fa8-98c3-8608-36ac-4caaf39fb2ed.png)

- OSの脆弱性検査をするために一時的に全てのポートのセキュリティグループを許可して脆弱性検査を実施。検査後、セキュリティグループを再設定することを失念して、そのまま総合テストを開始。しばらくしてマルウェア感染騒ぎに。
- クラウド管理ポータルに臨時でユーザを追加。パスワードはよくあるシンプルな文字列。後日、操作した覚えのないクラウドサービスが有効になっており短期間で数万円の課金が発生。涙と冷や汗で仕事が手につかないとか。

クラウドのセキュリティ対策は初期設定だけでなく、利用している期間はずうっと対策を維持しなければならない。自分はしっかり対策維持しているつもりでも間違いは防げない。と記載している自分も、後述するCSPMで検出されたルールの多さにびっくりした。その CSPM は特に、サーバーインフラには詳しくないけれどクラウドサービスでアプリケーションを開発したり、構築したりする人にぜひ導入して欲しいセキュリティ機能です。

## ２．ぽすちゃ管理って何？
ぽすちゃ管理（CSPM, Cloud Security Posture Management）は、クラウド環境の脆弱性となるセキュリティポリシー違反や設定ミスを検知してくれるサービスです。
* **英単語のPostureってどういう意味？**　(体の)姿勢、(ある特定の)姿勢、ポーズ、姿勢、態度、状態、形勢　by weblio英和辞典
* **監視する対象は何？**　IAMユーザー、セキュリティグループ、オブジェクトストレージのバケット、データベースなどリソースのコンフィグレーションなど多岐に渡って勝手に監査してくれます。
* **監査できるルールは何？**　Datadogが設定済みのOOTB（out-of-the-box）開封してすぐに使えるOOTBクラウドルールとOOTBインフラルールであり、 検出できるルールの最新情報はこちらのURL→ [OOTBルール集](https://docs.datadoghq.com/ja/security_platform/default_rules/#all) に掲載。
* **ルール数はどれくらい？**　2022/11/26時点で500以上のルールがあるようです。
* **何を根拠にしたルールなの？**　CISベンチマークなど下記のベストプラクティスです。
    * PCI - v3.2.1
    * SOC2 - v2
    * CIS AWS, Azure, GCP - v1.3.0
    * CIS Kubernetes - v1.5.1, CIS Docker - v1.2.0
    * HIPAA - v1
    * GDPR - v1
    * ISO/IEC 27001 - v2
* **CISベンチマークって何？**　[Center for Internet Security](https://www.cisecurity.org/cis-benchmarks/) はインターネット・セキュリティ標準化に取り組む米国団体。CISベンチマークは、政府・企業・研究機関によって世界的に認められたセキュリティのベストプラクティスです。
* **AWSやAzureのクラウドサービスに標準で使えるCIS機能ないの？**　あります。例えば[AWSでのCISベンチマーク](https://aws.amazon.com/jp/what-is/cis-benchmarks/)は、AWS Security Hubです。
* **なぜ Datadog CSPM を使うの？**　AWSとAzureで設定方法や画面の読み方が異なるし、ルール違反などの通知を自動化するには CloudWatch や amazon SNS などを、AWSやAzureなどそれぞれのアカウントに設定するのが手間だったりします。Datadogならどのクラウドにも同じひとつの手順・手法で済みます。

## 一旦、まとめ
AWSやAzureなどのクラウドサービスを使って情報システムを構築する。初期設定でしっかりとセキュリティ対策をしている。しかし、クラウド管理ポータルでのファイアウォール設定などのセキュリティ対策はいつでも手動で変更することができてしまう。万が一、誤って設定を変更してしまうなど、人的リソースによるミスを自動検知してくれるツールがあるならば採用すべきだろう。Datadog の CSPM は7つ以上の規格や500以上のルールでベストプラクティスに沿わない設定を検出してくれる。

[第２回は Datadog の CSPM を初期設定する](https://qiita.com/1Kano/items/81f7dbcfbd568fc52929)。
Lenovo G500 (20286 / 59373974) に最新Linuxカーネルをいれたら内蔵マイクが使えない、の話

# はじめに

長く、Lenovo G500 (Model Name 20286, P/N 59373974)を愛用しています。まぁ、愛用というより、家族共用PCとしてはすでにお役御免になっており、私がたまに在宅勤務用に使ってます。雑に扱っても全然壊れないのが気に入ってます。

# Specification

Celeron 1005M(Ivy Bridge) 1.9GHz/2コア
memory: デフォルトは2GByte

# これまでの増強

10年前のPCなので、流石にCPU周りは非力です。
ローカルで作業することは稀で、リモート会議参加用、会社へのVPNの踏み台用途です。

Windowsでの運用は流石に厳しいので、HDDはSSDへ換装、Memoryはまずは4GBへ増強、Lubuntuを使ってました。

んで、ちょっと厳しくなってきたので8GBへメモリ増強。いまは古いPCのメモリも安くなってきて、2300円で完了。

ところが、メモリーを増強したタイミングで内蔵マイクが使えなくなりました。せっかくメモリーに投資したのに・・・在宅勤務Teams用としてぼちぼちつかえてたのに・・・


# 原因

詳細の原因はまだわかってませんが、とりあえずカーネルを戻したら、内蔵マイク復旧しました。

Linux ayamada-Lenovo-G500 5.15.0-43-generic #46-Ubuntu SMP Tue Jul 12 10:30:17 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux  

↑これがちゃんと内蔵マイクが動いていたときのカーネル


Linux ayamada-Lenovo-G500 5.15.0-56-generic #62-Ubuntu SMP Tue Nov 22 19:54:14 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux

↑これがシステム更新後にインストールされたカーネル。

Shift押しながら電源ONでGrubのメニュー表示して一つ前のカーネルなら正常動作することを確認。

あとは、Grubのデフォルトカーネルを

https://tech.buty4649.net/entry/2022/07/08/142507

この辺を見ながら修正してどうにか問題解決。
Chocolatey を使って任意のインストール先にインストールした Hugo をアップデートする


### Chocolatey を使って任意のインストール先に Hugo をインストールする方法

Hugo のインストールに Chocolatey を使って、任意のインストール先にインストールする方法は、過去に投稿した以下の記事で解説しました。

- [Chocolatey を使って任意のインストール先に Hugo をインストールする](https://qiita.com/juggernautjp/items/6119619a3056d148c51c)


### Chocolatey を使って任意のインストール先にインストールした Hugo をアップデートする方法

Windows の場合、管理者権限で PowerShell を起動し、以下のコマンドを入力します。

```ps1
> choco find hugo
> $Env:ChocolateyInstall = "G:\Hugo"
> choco upgrade hugo
> choco upgrade hugo-extended
```

上記の例は、`G:\Hugo` にインストールされた Hugo を Chocolatey でアップデートする方法です。

**注意**: アップデートには、管理者権限が必要です。
【Bundler】Gemのバージョンを指定する方法

## Gemのバージョン指定方法

`Gemfile`に以下のように記述することでGemのバージョンを指定できます。  

```Gemfile
gem "Gem名", "バージョン"
```

バージョン指定は以下のような指定ができます。  

| 指定方法               | 説明                                       |
| ---------------------- | ------------------------------------------ |
| '1.0.0'                | v1.0.0固定                                 |
| '>= 1.0.0'             | v1.0.0以上                                 |
| '>= 1.0.0' , '< 2.0.0' | v1.0.0以上v2.0.0未満                       |
| '~> 1.0.0'             | v1.0.0以上でマイナーバージョンが変わらない |
| '~> 1.0'               | v1.0.0以上でメジャーバージョンが変わらない |


```Gemfile:Gemfile
source "https://rubygems.org"

gem "rails", "~> 7.0.4"

gem "mysql2", ">= 0.5"

```
Hugo ドキュメント (日本語訳) を公開しました


## Hugo ドキュメント (日本語訳) のテーマを変更し、公開し直しました

**2023年4月5日追記**

本、Qiita の記事にて告知したサイトは、新しいサイトに引っ越ししました。

Qiita の記事「[Hugo ドキュメント (日本語訳) のテーマを変更し、公開し直しました](https://qiita.com/juggernautjp/items/37d3b7e7ae29973a6f74)」を参照してください。



## Hugo ドキュメント (v0.105) の非公式日本語訳を GitHub Pages で公開しました

Hugo の公式ドキュメントは、下記のサイトで公開されていますが、これまで日本語訳がされていませんでした。

- [Hugo Documentation](https://gohugo.io/documentation/)

**注**: 正確に言うと、[Hugo Documentation の和訳・日本語翻訳プロジェクト](https://hugojapan.github.io/) が3年前に立ち上がりましたが、「Hugo V1 リリースまで活動停止」とのことで事実上、日本語の翻訳サイトは存在していません。

自分でサイト公開する上で、Hugo を使うことにしたので、Hugo ドキュメントの日本語訳がないのは不便であるため、非公式に (つまり、個人的に) 日本語訳を行うことにしました。

現状、Google 検索では十分な検索結果が出てこないため、以下の URL をブックマークしてください。

- [Hugo ドキュメント (日本語訳)](https://juggernautjp.github.io/hugo-docs-ja/documentation/)

参考までに、上記サイトの GitHub リポジトリは以下の URL になります。

- [Hugo ドキュメント (日本語訳) の GitHub リポジトリ](https://github.com/juggernautjp/hugo-docs-ja)

上記のサイトは、公式サイトと同様に Hugo を用いてビルドされています。


### Hugo ドキュメント (v0.108) に対応する日本語訳を公開しました

**2022年12月20日追記**

上記の日本語版サイトに、2022年12月20日現在の最新版である v0.108 の変更を反映させました。

変更履歴は、[ドキュメントの変更履歴](https://juggernautjp.github.io/hugo-docs-ja/hugo-ja/changes/) ページを参照してください。


### 日本語版サイトで、誤字脱字など問題を見つけた場合

今回公開したサイトの翻訳に関する管理は、私個人が自分の責任で行っているものです。

なるべく、本家の変更を反映していきたいと思っていますが、一人でメンテしているため、すぐに更新できないかもしれません。

上記で公開した「[Hugo ドキュメント (日本語訳)](https://juggernautjp.github.io/hugo-docs-ja/documentation/)」で誤字脱字、誤訳などを見つけた場合は、
~~この記事のコメント欄を利用するか、直接、私にメールで連絡してください。~~
[GitHub リポジトリの Issue ページ](https://github.com/juggernautjp/hugo-docs-ja/issues) にイシューを投稿してください。

日本語版なので、記入言語は日本語で構いません。



**注意**: 日本語訳に関する問題を本家サイトに Issue 報告しないようにお願いします。
ビル間接続に困った話 (3)

謎のアドベントカレンダー、第 3 話です。

ようやく実際の日付に追いつきました（？）。

これは 2 日目の **[ビル間接続に困った話 (2)](https://qiita.com/hmatsu47/items/c65ecd701b5a3a574119)** の続きです。

https://qiita.com/hmatsu47/items/c65ecd701b5a3a574119

ビル間接続を光ファイバーに移行してめでたしめでたし…と言いたいところですが、[1 日目の記事](https://qiita.com/hmatsu47/items/f9aaa4ab25b080bf2b26)で触れた低層のビルだけ取り残されていました。

かなり古い建物であり **配管の関係で光ファイバーの引き込みができなかった** のです。

自社ビルなのでもちろん地下を掘って管路を新設すれば良いのですが、それにはお金も手間も掛かります。

そのビルに勤める社員の数が少なく、費用対効果の問題もあり、管路の新設にはなかなか踏み切れませんでした。

ただ、その頃には IEEE 802.11g（2.4GHz 帯）の無線通信（公称 54Mbps）がありました。

同じ 54Mbps なら IEEE 802.11a（5 GHz 帯）のほうが実効速度も高速で干渉する電波も少ないので良かったのですが、当時は免許不要で屋外通信に使える周波数帯が存在しなかったので、2.4 GHz 帯の IEEE 802.11g を使うことにしました。

外部アンテナには指向性アンテナを使い、また自前（DIY）設置ではなくプロにサイトサーベイしてもらった上で施工してもらいました。

## やはり通信断が

これを書いているいま、2.4GHz 帯の無線 LAN を（集合住宅の中のような）利用者が密集する場所で使おうとすると、割と頻繁に通信が途切れたり、実質的に通信可能な距離が著しく短くなったりします。

主な原因は（2.4GHz 帯の）IEEE 802.11n 機器同士でのチャネル争奪戦でしょうが（2.4GHz 帯は電波が意外と遠くまで飛びますし）、Bluetooth 機器や電子レンジ作動中の干渉もあります。

当時はそこまで酷くはなかったのですが、やはり度々通信断が発生しました。

そしてそれは最後まで解消できませんでした。

そのビルは老朽化のため一部で雨漏りも発生し、また耐震性にも不安があリました。

近隣の土地が取得できそこに新たなビルを建てたので、その後オフィスとしての使用をやめました。

## 最終的には

さらにその後、最終的に一部のグループ会社の社員を残して全てのビルに勤める社員が、別の地にごっそり移動しました。

経営陣を中心に **「同じ場所で顔を合わせて仕事がしたい」** という声が大きかったことが理由ですが、別の面として **「オフィス物件として通信事情が良いことは必須の時代になった」** とも言えるでしょうね。

（無線やモバイルの電波環境も含めて）

---

そしてさらにオフィスを引っ越して利便性の高い場所に移ったのですが、2020 年には周知の通りコロナ禍が始まりました。

コロナ禍を契機にリモート勤務が始まりオフィスへの出勤も減ったとはいえ、筆者が勤める会社のグループでは未だ紙の書類およびそのやりとりが必須で、オフィスの環境を良好に保つことは重要です。

その上、リモート勤務者とのコミュニケーションのために、オフィスの通信環境をより快適に保つ必要があります。

すでに情シス業務から抜けた筆者としては、現情シスメンバーは本当に大変だな＆よくやってくれているな、と思います。

えらい。

---

4 日目からは拠点間通信の話になります。

- **[拠点間接続に困った話 (1)](https://qiita.com/hmatsu47/items/80a9b66b1078dc2f2f07)**

https://qiita.com/hmatsu47/items/80a9b66b1078dc2f2f07
急遽Androidエンジニアになった時にインプットすべき内容について

[ディップ Advent Calendar 2022](https://qiita.com/advent-calendar/2022/dip-dev) 4日目の記事です。

# はじめに
筆者は現在Androidエンジニアです。
なった経緯は前職でiOSエンジニアとして採用されたが、入社４日目に
「Androidエンジニアとして働いてくれないか」
と言われ、言語含め全く未経験の状態から転向したというものになります。
当時はキャッチアップの時間やフォローの体制がない中プロダクトのソースコードと作業指示を与えられ、どう進めて行けば良いのかわからず困り果てていた記憶があります。

「今の自分なら喰らいついて生き残るには、何をどうキャッチアップするだろうか」を記事にします。

# ターゲット
- 実務独学問わず別分野の開発経験はあるが、Androidは全くの未経験の人。
会社により環境が異なりますが、ここでは
「キャッチアップの時間をほとんど与えられておらず、自分でなんとかしないといけない」
状況を想定。

- （サブターゲット）モバイルエンジニア未経験者として実務で何をインプットすれば良いかいまいちわからない方。
考え方は似ているのでうまく置き換えてください。

# 具体的に何をするか
優先度が高いと考えている順番で書きます。
基本的に「習得していない」「できるだけ会社の環境に依存しない」ものをピックアップし、細かい説明は他記事に譲ります。
また（一旦）ざっくりインプットできれば良しで目安を書いています。

## Androidアプリに必要な要素の確認
情報はできるだけ公式の

https://developer.android.com/

から拾うように心がけてください。

スタート地点。

https://developer.android.com/guide?hl=ja

のアプリの基本「はじめに」の項目がうまくまとまっていると思います。

公式は情報量が多い！読みづらい！と感じるのであれば
初学者向けの参考書をこなし、その後に公式をぱらっとみるでも良いです。
本は定番書であればなんでも良いと思います。

目安：
どのファイルががどう対応しているかざっくり把握できていること。



## 言語の学習
コード読めないのでは始まらないので。
執筆時点で、新規開発されるものはほぼKotlin。
また、既存プロダクトもKotlin or JavaからKotlinへ置き換え中のものがほとんどの印象です。

そのため、特別な事情がない限りインプットはKotlinで良いかと思われます。

プログラムの動作確認をさっとやりたいなら

https://kotlinlang.org/

のTry Kotlin(Playground)が便利です。

目安：
何でも良いので、言語について書かれてる本1冊か記事を複数読んでざっくり理解できていること。

競技プログラミング的要素は通常のAndroid開発ではほぼ使われていないはずですので、そこまでする必要はない。

## ライフサイクルについて
それぞれライフサイクルが異なるので、違いを把握しておく必要があります。
これがわからないと、画面に描画されると思ったものがされなかったりクラッシュします。

Activity

https://developer.android.com/guide/components/activities/activity-lifecycle?hl=ja

Fragment

https://developer.android.com/guide/components/fragments?hl=ja

ViewModel

https://developer.android.com/topic/libraries/architecture/viewmodel?hl=ja

Composable

https://developer.android.com/jetpack/compose/lifecycle?hl=ja

それぞれサンプルアプリを作ってライフサイクルメソッドにブレークを貼り、
どういう時に通るかを実際に動かして確認してみるのがわかりやすい。


目安：
それぞれどういう順番で呼ばれ、どういう性質を持っているかざっくり
頭に入っていること。
知っていること前提で話が進むことが多いので、わかっていないと
話されていることの意味がわからない状態になる。


ここまでざっくり理解できれば（レビューで指摘してもらえること前提ですが）
困り果てて何もできないという状況は回避できるのではないでしょうか？
レビューの文化がない、そもそもモバイルエンジニアが他にいないという環境では
「高品質なものを作ることは困難」です。
作業依頼者に理解してもらう必要があります。


---------------------------------------- 重要度高の壁 -----------------------------------------
## ライブラリについて
目安：
どのライブラリがどういう役割で使われているか把握できていること。

## クラッシュログの追い方
自分で組んだコードでクラッシュが発生したり、クラッシュ調査をすることがあるためスタックトレースの読み方を理解しておく必要があります。

https://developer.android.com/topic/performance/vitals/crash?hl=ja

他ユーザーが起こしたクラッシュ対応であればCrashlytics等に挙がっているスタックトレースを読んで対応する必要があります。

目安：
スタックトレースの読み方を理解し、クラッシュしている原因について仮説が立てられること。

## Android Studioのショートカット
特に検索周りのショートカットは覚えておいた方が良いです。

https://developer.android.com/studio/intro/keyboard-shortcuts?hl=ja

目安：
便利だと思ったショートカットが使えるようになっていること。






# さいごに
当時はフォロー体制がない中、入社4日目にクラッシュの修正を依頼され
クラッシュログの見方、調べ方がわからないため普段使わないAndroid端末両手に
アテもなく不具合の再現を試みていました（一部端末の設定次第で不具合が起きるもので、たまたまその端末が検証端末としてあったので運良く再現できたのですが・・・）

~~そもそもこのような環境は好ましくありませんが~~　
各社やり方が異なりますので、似たようなシチュエーションに遭遇することは誰にでもあると思います。
この記事を見た人が似たような状況で折れてしまう可能性が1%でも減ってくれますように。
RDS サブネットグループとは

# サブネットグループとは
RDS（Amazon Relational Database Service）サブネットグループとは、Amazon Web Services（AWS）上で動作するRDSデータベースインスタンスが利用するサブネットの組み合わせを表すものです。
サブネットグループは、データベースインスタンスが利用するVPC（Virtual Private Cloud）内のサブネットを定義することで、データベースインスタンスが利用するサブネットやIPアドレスの範囲を指定することができます。

## サブネットグループとメリット
RDSデータベースインスタンスが利用するネットワーク環境をより細かく制御することができます。

## サブネットグループを作成する際の注意点
AZが異なるサブネットを事前に作成しておく必要があります。
【ABC280】A～C問題のPython解答と実装の整理

Qiitaで記事を書くのが初めてのさざんかです
今年こそは書いてみようと思いもう１２月です...

ABC280の復習もかねて説いた内容と文法を整理しようと思います
公式の解説が理解できたらもう一度コードを書いてみようかなと思います

## AtCoderとは


>AtCoderは、オンラインで参加できるプログラミングコンテスト(競技プログラミング)のサイトです。リアルタイムのコンテストで競い合ったり、約5000問のコンテストの過去問にいつでも挑戦することが出来ます
 https://atcoder.jp/home

ABCは毎週開催なので参加しやすいですよね！

## A - Pawn on a Grid 

> 上下左右に広がる H 行 W 列のマス目があり、各マスにはコマが置かれているか、何も置かれていないかのどちらかです。マス目上のマスのうち、コマが置かれているようなものの個数を求めてください。
https://atcoder.jp/contests/abc280/tasks/abc280_a


### 入力例

```
3 5
#....
.....
.##..
```

### 出力例

```
3
```

ここで、３が行数、５が列数でそのあとの記号が「コマがおかれているかどうか」になります
そこでコマがいくつかるか、すなわち#がいくつあるかを考えればいいですね

なので入力で得た２次元配列を１次元配列に直して考えてあげると

### 実装例
```python
H , W = map(int,input().split())
block = []
a_block = []
for i in range(H):
    block.append(list(input()))

for i in block:
    for j in i:
        a_block.append(j)
answer = a_block.count('#')
print(answer)
```
こんな感じで実装できるかなと思います
特につっかえたところはなかったです



## B - Inverse Prefix Sum

> 整数 N と長さ N の数列 S=(S1,…,SN) が与えられます。長さ N の数列 A=(A 1,…,AN) であって、k=1,…,N の全てについて以下の条件を満たすものを求めてください。
A1+A2+…+Ak = Sk
​https://atcoder.jp/contests/abc280/tasks/abc280_b


### 入力例

```
3
3 4 8
```

### 出力例

```
3 1 4
```

問題文をすんなり理解することはできませんでしたが少し読み解くと、つまりS[k]がA[k]までの和になるようにしてください、ということなのでS[0]=A[0]でありS[1] = SUM[A] + S[1] - S[0] のように差分を足していけばよいので

### 実装例
```python
N = input()
S = list(map(int,input().split()))
A = []

count = 0
for i in S:
    A.append(int(S[count]) - sum(A))
    count += 1

print(*A)
```
こんな感じで実装できました

## C - Extra Character
> 文字列 S,T が与えられます。S は英小文字からなり、T は S に英小文字を 1 つ挿入して作られたことがわかっています。
挿入された文字は T の先頭から何番目の文字であるか求めてください。
複数の候補が考えられる場合はいずれか 1 つを求めてください。
​https://atcoder.jp/contests/abc280/tasks/abc280_c


### 入力例

```
atcoder
atcorder
```

### 出力例

```
5
```

この問題は制約が最大でも10⁵までの文字数の文字列までしか与えられないので何も考えずに１文字ずつ比較していくのでいいのかなと思いました。

### 実装例
```python
S = list(input())
T = list(input())
S.append('')
for s,t,c in zip(list(S),list(T),range(len(T))):
    if s == t:
        continue
    else:
        print(c+1)
        break

```
気を付けないといけないのが付け足された文字が最後にある場合に３行目がないと答えが出ないことです
そこで１０分くらいACにならなくて悩みました...
最後の文字までfor文で計算してもらうためにSの文字列に空白を末尾に入れています


## 感想

D問題の素因数分解までは思いつきましたがそこから条件を満たす最小の数字を導けませんでした...
ここまで読んでくださりありがとうございます！
競プロの勉強とともにより分かりやすい・読みやすい文章を書けるようにしたいです...
それではまた来週！
Ubuntuで"/"配下のファイルを消してしまった場合の対処法

### 状況
/etc配下のファイルをほとんど削除してしまった

### 経緯
研究室のサーバーを構築しLinuxについての理解が深くなった中で、色々とLinuxで遊んでいたところ、**rootユーザーってめっちゃ便利やん**と思いrootユーザーで色々システム作ったりして遊んでいたところ...

```shell
# /etc配下にて
rm -rf *
```
というコマンドを打ってしまった...
慌てて ctrl + C で中断したがほとんどが消えていた。
SambaやVNCサーバーはもちろん、rootユーザーでさえもログインできなくなっていた。

### 戻したいデータ
・/home 内の研究室メンバーが行ってきたシミュレーションデータ
・/var/lib/docker 内のWEBアプリのデータ

### まずめっちゃ調べた
・打った瞬間は焦ってrootからログアウトし、一般ユーザーになっていた
・sshが再接続できるかどうか確認したかったので一度解除していた。(←もちろん出来ない)

調べると
> プロセスIDが残っている場合戻せる可能性がある

という記事を見つけたが、その人は/etcや/usrを移動しただけっぽい？
rootなどもログアウトしているので可能性は低そうということでUbuntuの再インストール時の**Ubuntuを試す**を利用する記事を見つけた。

これなら確かに自分も行けそう...
/etcしか削除してないわけだし、残っててほしいのは研究室の人のデータがある/home配下のデータ。

なので、USBに入れてあったUbuntuをBootの最上位に設定し再起動。

### 「Ubuntuを試す」を利用する
すると、USB内のUbuntuからHDD内の/etcが削除されたUbuntuのファイルシステムにアクセスできる。
そこから/homeや/var内の必要最低限のデータをUSB(自分はファイルサーバ)に入れればいい。
自分の場合は研究で使用しているシミュレーションデータが非常に大きいためzipで圧縮してから保存した。

### Ubuntuのクリーンインストール
保存が完了したので、HDDのデータをすべて削除しUbuntuのインストールを実行。
Ubuntuインストール後にシミュレーションソフトとDockerをインストールし、zipファイルを解凍しあるべき場所に返した。
Dockerは心配だったが難しいのは権限の部分くらいだったかな。
あとは驚くぐらい元通り


### 振り返り
- なにか他の手段があったのか気になる

- 研究室にPCが２台あり、リスクを分散させていたことやマジで消えたら困るファイルはGoogle DriveやUSBというように3重に保存していたので大丈夫だった。

- あとは、自分が大学卒業したあとのことを考えて将来研究室に入ってくる人向けに作っておいた資料がとても役に立った。

- 本当にほしいデータは/home や /var に存在していたのでその点/etc　で良かった。

- **rootで常に作業するのは危険!!!**
UI/UXの個人的メモ

# はじめに
仕事でスマホアプリに携わった際、UI/UXを学んですごいよかった！
なので、個人的なメモを残しておきたい。

# UI/UX
UIは __ユーザーが視界で認識できるもの__、__ユーザーが直接操作できるもの__ のイメージ。
UXは __ユーザー体験__ のイメージ。
良いユーザー体験を考えると、__どきどきやワクワクするもの__、__付加価値__、__よかった__ __得した__ なのだと思う。 
他にもたくさんあると思うが、、、

ググってみるとこんな感じのが出てくる。
* UIはユーザーとの間に現れるサービスやプロダクトの外観
* UXは製品やシステム、サービスなどの利用を通じてユーザーが得る体験
[ここから抜粋](https://monstar-lab.com/dx/solution/ux-ui/)
* UIはユーザーが目にするすべての情報
* UXは顧客体験
[ここから抜粋](https://www.profuture.co.jp/mk/column/40976)

* UIはユーザー（利用者）と製品やサービスとのインターフェース（接点）すべてのこと
* UXはユーザーが製品やサービスを通じて得られる体験
[ここから抜粋](https://www.m-hand.co.jp/design/7161/)

# UXとUIの関係
UXはユーザー体験なので、それを伝える手段なのがUIなのかなと思う。
なので、優れたUIを提供できれば、ある程度UXは向上すると思う。

例
UX : 検索がしやすい
↓
UI : 検索ボタンがわかりやすい、検索のテキストフォームに入力例が書いてある、詳細検索ができる etc

ただ、優れたUIが必ずしもUXが向上するとは限らない。
UXはユーザー体験なので、ユーザー求めているものや期待しているものを提供できなければ"使えない"と思われてしまうし、そもそもデザインが悪ければ、"ださい"、"見づらい"と思われてしまう。

# 個人的に思うUXを向上させる方法
まずは提供するサービスの理解が必要だと思う。
全ての人に満足のいくサービスはできないと思うので、自分たちは何を提供したいのか、提供したいものはどのユーザーをターゲットに置くのか、そのユーザーを満足させるにはどういう機能が必要なのか、逆にそのユーザーのITリテラシーによっては必要ない機能なのではないか を考えていくことで、スマートなサービスが提供できるのだと思う。

あとは、提供してみてユーザーからのフィードバック得て、分析し、改善を繰り返していくしかないのかなと思う。

# 所感
まだまだUI/UXはわからない。
考えたことをメモに残そうとすると、頭の中がふわふわしてて書くのが難しかった。
もっと勉強が必要。
DelphiのFMX/VCLにおけるTBitmapのサイズの最大値

本投稿は[Delphi Advent Calendar 2022 #10](https://qiita.com/advent-calendar/2022/delphi) の記事です。

# はじめに
Delphiでかなり大きなBitmapを扱うプログラムを書く機会をいただきました。
最新の機能で書きたいと思い，FMXを利用しようとしたら，TBitmapをSetSizeしただけでエラーで落ちてしまいました。
書いたコードは以下のようなものです。

```Unit1.pas

function hoge;
var
  Bitmap:TBitmap;
begin
  Bitmap:=TBitmap.Create;
  Bitmap.SetSize(10000,10000);

  ・・・・・
  Bitmap.Free;
end;
```
この関数を実行すると，以下のようなエラーが出ます。
![Snap0002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33902/78088bff-2221-613b-1f05-5a6292c70a43.png)
そこで，FMXとVCLの32bitおよび64bitのアプリケーションでTBitmapを使用した際のTBitmapのサイズの制限を調べてみることにしました。

# VCLのTBitmap
VCLの **TBitmap** には **PixelFormat** というプロパティがあります。
**TPixelFormat.pf24bit** と **TPixelFormat.pf32bit** について調査しました。
TPixelFormat.pf24bitは1ピクセル当たり3byte，TPixelFormat.pf32bitは4byteで，アルファ情報を持つことができます。
1つのBitmapが利用する画素数(縦の画素 X 横の画素)にこのバイト数をかけたものにBitmapのヘッダサイズを足したものがBitmapが利用するメモリ量になります。
## 32bit VCLアプリケーション
32bitアプリケーションの最大メモリサイズは2GBですので。一度に使えるメモリはこれ以下になります。Bitmap以外のメモリの使用量が十分小さければ，1GBを超えるBitmapを利用できました。ただし，同時に多くのBitmapを利用する際には，その合計のメモリ量がアプリケーションの使えるメモリ量を超えないようにすることが必要です。
## 64bit VCLアプリケーション
64bitアプリケーションでは，1つのBitmapが利用できる最大メモリ量は2GBでした。複数のBitmapを同時に使ってもその制限は変わりませんでした。
しかし，今度はパソコンの空きメモリにより制限されます。空きメモリがメモリ全体の20%くらいまでBitmapを作成することができました。

# FMXのTBitmap
FMXでDirect2Dはデフォルトでは利用するモードになっています。Direct2Dを使わない場合はGDI+を使います。
これを切り替えるのに，**GlobalUseDirect2D** を使います。デフォルトでは**True**です。**FMX.Types** で定義されています。
切り替えるときには，プロジェクトソースに以下のように書きます。
```Project1.dpr
program Project1;

uses
  System.StartUpCopy,
  FMX.Forms,
  FMX.Types, // GlobalUseDirect2D が定義されているUnitを追加
  Unit1 in 'Unit1.pas' {Form1};

{$R *.res}

begin
  GlobalUseDirect2D:=False; // Direct2Dを使わない

  Application.Initialize;
  Application.CreateForm(TForm1, Form1);
  Application.Run;
end.
```

## Direct2Dを使う場合
Direct2Dを使う場合のBitmapの最大サイズは，ビデオカードにより決まります。
私のビデオカードではBitmapの縦・横の最大は8192pxでした。1つのBitmapの最大サイズは256MBになります。
32Bitアプリケーションだと8個が理論上の最大数になりますが，それ以上のBitmapを生成することができました。
Direct2Dを使うとGPUがその処理をするためかもしれません。64bitも同様です。

## Direct2Dを使わない場合(GDI+の場合)
GDI+の場合，Bitmapの縦・横の最大は65535px($FFFF)でした。1つのBitmapの最大サイズは16GBになります。
32Bitアプリケーションの制限を超えていますが，複数のBitmapを生成できました。64Bitも同様です。

# まとめ
**VCLの場合メモリサイズの制限がある。**
- 32bitアプリでは1つ1GBが目安，複数利用の場合には合計で他のプログラムの使うメモリと合わせて2GBを超えないこと。
- 64bitアプリでは1つ2GB。複数同時利用の場合は空きメモリにより変化する。

**FMXの場合縦横サイズの制限がある。**
- Direct2Dを使う場合，8192px。ただしビデオカードによりこのサイズは変動する。複数同時利用しても変化なし。
- GDI+を使う場合，65535px。複数同時利用しても変化なし。

# 謝辞(引用元および参考文献)
以下のリンクが参考になりました。
- [DocWiki - Vcl.Graphics.TBitmap](https://docwiki.embarcadero.com/Libraries/Alexandria/ja/Vcl.Graphics.TBitmap)
- [DocWiki - FMX.Graphics.TBitmap](https://docwiki.embarcadero.com/Libraries/Alexandria/en/FMX.Graphics.TBitmap.Map)
- [DocWiki - FMX.Types.GlobalUseDirect2D](https://docwiki.embarcadero.com/Libraries/Alexandria/ja/FMX.Types.GlobalUseDirect2D)

貴重な情報を提供してくださった皆様，ありがとうございます。感謝します。
駆け出しエンジニア1日目が読むQiita

# はじめに
「何がわからんのかわからん」「質問すればするほど、わからないことが増えていく」
「駆け出しエンジニアの研修担当になったけど、どうやって教えたらいいものか」

この記事は、そんな世の悩める駆け出しエンジニアと、そのサポーターの方々に向けたものです。
駆け出しエンジニア周囲のコミュニケーションを円滑化する一助となれたら幸いです。

この記事は、[NE Advent Calendar 2022][NEAdventCalendar2022] 3日目の記事です。

[NEAdventCalendar2022]:https://qiita.com/advent-calendar/2022/ne


# 自己紹介
まさか自分がエンジニアを名乗る日がくるとは微塵も思わずに生きてきた、新卒２年目です。
１年目はカスタマーサクセス部署でユーザー対応に奮闘する日々を送っていたところ、
色々あって未経験で開発部に異動しました。エンジニア歴はやっと半年になったところです。
普段は、弊社のサービス [ネクストエンジン][nextengine] の開発・改修を業務としています。

[nextengine]: https://next-engine.net/

未経験と言ってもそのレベルは様々で、趣味でコード書いてました！という未経験もよくいますが、
私は初日に「コードってどこから読むんですか？」と質問したレベルの完全未経験でした。
今となっては、上から以外にどこがある！？と叫びたくなる上司の気持ちがよくわかります。



# 駆け出しとベテランの溝
研修を受ける側を「駆け出し」、研修・サポートする側を「ベテラン」と表記します。
駆け出しとベテラン間において、ティーチングコミュニケーションが上手くいかない原因は、
様々あれど大方これに集約されると思います。

　　駆け出し：わからないことがわからない
　　ベテラン：なにがわからないのかわからない

エンジニアと昨日まで非エンジニアだった者の間には大きな溝があり、
相手の思考回路を想像しながら教えることが難しくなります。
研修にしろOJTにしろ、教える側が「この駆け出しは一体なにがわからんのか」と
溝に橋をかけに来てくれることがどうしても多くなるでしょう。
ただ駆け出し側でも工夫できること、駆け出し側の意識で変わってくることも
多少なりともあると、半年やってみてわかりました。



# 全ては質問のしかた

駆け出し側でできる唯一かつ最大の工夫は質問のしかた、これに尽きます。
とりあえず何もわかりません！！！と全てを投げ出したくなる気持ちは誰よりもわかりますが
（最初の1,2週間くらいはそうなっちゃうのは許してあげてと、正直思うところもありますが）
少し余裕ができたらまずは質問のしかた、ベテランからすると質問のさせかたを変えてみましょう。

ご参考までに、私が意識しているのは以下の３つです。

- __質問の目的を最初に伝える__
全てを説明し終わってから、そういえばこれ聞いて何がしたかったんだろう？と聞いてみると、
なるほどそうなるとまた話は別でね…、とスタートに戻った経験はありませんか？
もしくは、聞きたい答えが全然返ってこない！と失礼ながら思ってしまったことはありませんか？

    ほとんどの場合、それはこちらの質問のしかたが悪いです。
相手から如何に必要十分な回答を引き出せるかは、質問する側の手腕だと私は思っています。
「〇〇を実装したくての質問なんですけど」「シンプルな興味で業務とは関係ないんですけど」
など質問の先にあるゴールを予め共有すると、ベテランを迷わせてしまうことが減るでしょう。



- __前提の認識を共有する__
「いくら説明しても全然通じんなあ」「いっぱい説明してもらったけど全然わからんなあ」
こういう場合、駆け出しの前提知識のズレに気付けていないことが多いです。
SQL＝データベースそのもの、という大きな勘違いをしたままクエリの質問をしに行き、
説明を重ねてもらうほど、さらに混乱していった初期の私が良い例です。

    質問者は現在の知識を使って考えを組み立て、その先端で質問が生じているはずなので、
途中で「ん？」と思ったら、〇〇はこれで認識あってますか？と一旦擦り合せをしましょう。


- __質問に行き着くまでの思考を伝える__
よく駆け出しの質問を受けてくださる方は経験があるかもしれません。
多分ここだろうなと思って説明し始めたら、途中で「いや、そこはわかるんですけど」と遮られる、
もしくは説明し終わってからそこじゃないと言われる。いやじゃあ先に言わんか−い！！と。

    その通りです、先に伝えましょう。
どこまでは理解できていて、どこからが分からないのか。
エラーが解消できないのなら、そもそもなぜその方法を今回取ろうとしているのか。
Googleがそう言ってるからなのか、以前類似の問題をそう解決したからなのか。

    質問単体だけを発するのではなく、質問が生まれるまでの思考を言語化して伝えることで、
ベテランが回答のスタート地点を定められたり、どこで躓いているかを発見できたりします。
また駆け出しにとっても、思ってもいなかった間違いを指摘してもらえる機会になります。



# 投げ出さない

重複する部分や、もちろん場合によっては不要な時もあると思いますが、大体この３つです。
以上を踏まえて、ベテラン側の気持ちになって以下の質問例を見てみてください。

　▼ __ベテランが答えにくいであろう質問__

　　これってどうしたら良いですか？（質問）

　▼ __ベテランが多少は答えやすいであろう質問__

　　これってどうしたら良いですか？（質問）
　　条件によってクエリを分岐させたいんですけど（質問の目的）
　　PHPの中にSQLを書きたい時は、fetch系関数の第一引数にクエリ、第二引数にparamを入れると
　　それを材料にしてDB側でクエリが実行されると記憶していて（前提の共有）
　　ただ今回は入れたいparamが複数あって、安易に引数を増やしていいものか（なぜ悩んだかの思考）

前者と後者では、回答のしやすさや精度が変わってくるのが想像できるのではないでしょうか。
場合によっては、前者と後者で回答内容がまるっと変わることもあり得るかもしれません。
コミュニケーションの基本だったり、質問者が与える情報量の問題のようにも見えますが、
「何がわからんのかわからん」状態に陥っている駆け出しほど、これができていないはずです。

わからないなりに投げ出さず、ベテランが迷わないような質問のしかたを意識する、
もしあなたが迷えるベテランなら「こう質問してくれると助かる」と駆け出しに伝えてみると
コミュニケーションがちぐはぐする時間が減るかもしれません。



# まとめ

今回は教わる側の視点から、駆け出しエンジニアでもできる工夫をまとめました。
話しかける前にお時間の都合を聞くとか、先輩のリソースを消費している意識を持つとか、
有り難い環境に感謝をする、感謝を伝えるとか、当たり前のことは当たり前にしながら、
余裕が出てきたら少しずつでも意識していくと、上手く教われるようになれるかもしれません。

まだまだ駆け出しの身ですが、いつかベテラン側になる日が来たら1日目に伝えたいことでした。
ありがとうございました。
VimmerがRubyMineに移行した時の話

## はじめに
この記事は[エムスリーキャリア FY22 AdventCalendar](https://qiita.com/advent-calendar/2022/m3c)4日目の記事です。

エンジニアとして働きはじめてからほぼVimmerとして過ごしてきた自分が初めてIDEとちゃんと向き合った時の事を書きました。
VimmerがJetBrains系のIDEを使いたい時の参考になれば幸いです。

### 自分のエディタ変遷
1. 2019年にエンジニアになる。最初の研修（Java）で言われるがままにEclipseをインストール。
2. 最初の現場で隣に座っていたスーパーエンジニアにVimを布教される。その人が時折高速で入力する`:w`に憧れてその日からVimAdventures※1でVimの練習を始める。
3. そこから一年後。Neovimの存在を知る。Vimがリファクタされた版らしいという理由だけで乗り換える。
4. さらに2年後。『Neovimめっちゃ好きだけど、IDEと一回ちゃんと向き合わなきゃなあ』と謎の使命感にかられる。そして転職。
5. 現在。RubyMineをストレスなく使える様にしてみた。

## なぜRubyMine（JetBrains）にしたの？
自身の尊敬している人たちがみんなJetBrainserだったからです。
1. クリーン〇〇シリーズで有名なアンクルボブことロバート・C・マーティン※2
2. 以前の職場の上司（相当なJetBrainsオタク）
3. 現在の職場の上司

## 設定・プラグイン
Vimのキーバインドじゃないとコーディングのスピードが50分の1くらいまで下がるので、エミュレータのプラグインは必須でした。
その上、インサートモードではEmacsのキーバインドを使用したいのでそこが設定出来る事を目指します。

### 1. IdeaVim
何はなくともこれが必要です。
![スクリーンショット 2022-12-03 21.44.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546472/0ee27eac-2c3d-63d2-70eb-b46c2fb8f213.png)
JetBrains内でVimをエミュレートするプラグインです。

### 2. .ideavimrcの設定
ここがメインです。
IdeaVimはVimにおける.vimrcと同様に.ideavimrcというファイルが使用できます。
これをホームディレクトリに配置すると、RubyMineを立ち上げた時に自動で読み込んでくれます。![スクリーンショット 2022-12-03 21.51.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/546472/f9125c95-785b-d218-c0aa-e6e5066df323.png)
ちなみにRubyMineからも編集することができます。
ステータスバー内のIdeaVimのアイコンをクリックすることでホームディレクトリに配置された.ideavimrcにアクセスできます。
RubyMine上で`:source ~/.ideavimrc`を入力すればRubyMineを再起動しなくても更新が可能です。

👇👇👇自分が設定した内容です。
```.ideavirc
" plugin
set textobj-entire
set ReplaceWithRegister "grオペレーターで置換
set surround
set easymotion
set commentary "gcオペレーターでコメント追加
set multiple-cursors
set highlightedyank

" easymotion
nmap s <Plug>(easymotion-s2)

" multiple-cursors
map <C-N>  <A-N>
map <C-P>  <A-P>
map <C-X>  <A-X>
map g<C-N> g<A-N>

" insert mode
inoremap <c-a> <c-o>^
inoremap <c-e> <c-o>$
inoremap <c-b> <left>
inoremap <c-f> <right>
inoremap <c-n> <down>
inoremap <c-p> <up>
inoremap <c-h> <bs>
inoremap <c-d> <del>
inoremap <c-k> <c-o>d$<right>
inoremap <c-y> <c-o>p
inoremap <c-u> <c-o>d^
inoremap <c-w> <c-o>db

" 現在のモードをステータスバーに表示
set showmode

" 検索で大文字小文字を区別しない
set ignorecase
set smartcase

" インクリメンタル検索
set incsearch

" 最後まで検索したら最初に戻る
set wrapscan

" 検索結果をハイライト
set hlsearch

" yankをクリップボードにコピーする
set clipboard+=unnamedplus

```
注意点としてはプラグインとコマンドはIdeaVimがサポートしているものしか使用することができません。

IdeaVimがサポートしているコマンドは下記に記載されています。
https://github.com/JetBrains/ideavim/blob/master/doc/set-commands.md



## 使ってみてどうだった？
さすがにNeovimのように軽快ではないのですが、検索やコードジャンプがめちゃめちゃ便利でした。
NeovimやVimでもできなくはないのですが、導入や設定が手間だったりするので、
それだけでもライセンスを買った価値があったなあと思います。

一つだけ不満があるとすれば、使えるカラースキームがあまり多くないなと感じました。
NeovimではTreeSitterを使えばかなり細かくシンタックスハイライトを当てることができるので、それが少し恋しくなりました。

まだまだRubyMineの機能を全部使いこなせているわけではないので、効率よく開発できるようにいろいろな機能を試していきたいと思います！💪

## 参考・出典・補足
https://github.com/JetBrains/ideavim

※1 [VimAdventures](https://vim-adventures.com/)
Vimの操作をゲームで学べる神サイト。途中から課金が必要。

※2 アンクルボブは彼の著書『CleanCoder』内で「私はIntelliJユーザーである。愛しているのだ。」と語っています。 
ちなみに彼は以前「viの神」と呼ばれていたそうです。
ここが辛いよスクラムマスター

ざくっと当時のチームの状況を
- フルリモート
- 開発メンバーはスクラムマスター兼任の私含めて4人
- よくあるアプリ開発ではなく、社内アプリの運用をスクラムのフレームワークにそって推進



辛かったことを列挙する

## メンバー
- 学びたがらない
    - マニュアル作業を淡々とやりたい人がスクラムチームに来てしまった
    - 

## プロダクトオーナー
- 何を実現したいか語らない
- 長期的な目標がなく、チームが外部（POの上司や関連部署）に振り回される
- 開発チームの実現方法に干渉する
    - 議論すべきことが議論されず、技術的欲求を満たすために時間が使われてしまう
- スプリントの最中によくタスクが差し込まれる
    - 計画がないため思いつきで、優先度が分からなくなる
- 自身が思い付いたアイデアを気に入っていてチームの意見を取り入れない
- PBIが明確になる前に着手せざるを得ない
    - ネタが不足
    - 情報も不足
- 忙しすぎてスクラムイベント以外でコミュニケーションが取れない

## その他
- スプリントレビューにチーム外のメンバーを呼びたいが呼べない
    - 社内アプリの利用者を呼びたいが、そもそも利用者が少ない。またスプリントレビューに対する理解がないので「スプリントレビューってのはスクラムのイベントで、スクラムってのは...」っていうところまで説明する気にはなれなかった

# スクラムマスターとして頑張ったこと

- 自分の開発タスクを後回し、他のメンバーにやってもらう
    - 慣れたスクラムマスターでも稼働時間の50%ぐらいはスクラムマスターの作業に費やすらしい。
    - 特にチームを立ち上げたばかりの頃はやることが多い
        - メンバーにスクラムの説明をする
        - PBIのストックを用意する

- デイリースクラムはあえて時間いっぱい行う
    - やる気が低いメンバーは「特に困ってません」って言いがち。余った時間で特定メンバーのタスクをピックアップして進捗を詳しく聞いてみる。詳しく話をさせるとなんやかんや困ってて白状してくれる。何度か白状させるとデイリーで相談してくれるようになった。
- メンバーがPOと話せる時間を作る
    - 進行中のタスクに関する相談から、次スプリントの実施内容まで、何を話すかはその場で決めるけど、とにかくPOの空き時間を抑えて開発メンバーを集める

# もし次スクラムマスターやるなら？
- チーム全員が（PO含めて)単一のプロジェクトに所属している
- スクラムマスターは開発メンバーと兼務しない
- 開発メンバーの選定を慎重に行う。もしもに備えて3ヶ月程度でリリースできるようにしておく
- スプリント0としてドキュメントの作り込みを入念に行う。ドキュメントやPBIが作れるまでスプリントを開始しない
- チーム外の関係者をうまく巻き込む
Salesforce Lightning Web コンポーネントの基礎の基礎

# これは何？
この記事は「[24日後に立派なSalesforceエンジニアになるWEBエンジニア Advent Calendar 2022](https://qiita.com/advent-calendar/2022/kakakaori)」の8日目の記事です。１7日後に立派なSalesforceエンジニアになるために今日はLightning Web Component (LWC)の基礎について学んでいきます！

# ファイル構成
新規でコンポーネントを作成すると以下のようなファイルが生成される。独自のCSSを当てたい時はここに`test.css`を追加してやればいい。基本は以下のファイルを使ってコンポーネントを作っていくことになるのだけど、ファイル構成を見てもWEBエンジニアが触りやすそうな気がとてもする！
```
lwc
 └ test
    ├ __tests__
    |    └ test.test.js
    ├ test.html
    ├ test.js
    └ test.js-meta.xml
```

とりあえずやっぱ最初はHello Worldやってみる？

# Hello Worldを表示する
jsからメッセージを変数に入れて、htmlに渡す。

``` html:test.html
<template>
  {testText}
</template>
```

``` javascript:test.js
import { LightningElement } from 'lwc';

export default class Test extends LightningElement {
  testText = 'Hello World';
}
```

コンポーネントに関する定義をする。今回は最低限ということで、作成したtestコンポーネントをどこに表示するかだけを記載。
``` xml:test.js-meta.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
</LightningComponentBundle>
```

これで昨日書いた手順に従って組織にデプロイを行うと、レコードページの編集を行うとカスタムコンポーネントとして`test`が選択できるようになる。
![スクリーンショット 2022-12-07 12.01.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/ee6d31c3-e6d3-ad0b-f6db-382c53a9722d.png)

なのでLWCの開発手順としてはコードを書いてデプロイして動作確認して〜なんだけど、それが結構めんどくさい。
コードを書いて保存 > 右クリック > 組織へデプロイをクリック > ブラウザで確認
と言う流れを踏まなくてはいけない。が、そこで役に立つのがローカルでのプレビュー機能！こんなのも用意してくれてるのね。

# コンポーネントをローカルでプレビューする

`Ctrl+Shift+P`または`Cmd+Shift+P`でコマンドパレットを開き`SFDX : コンポーネントをローカルでプレビュー`を選択。
![スクリーンショット 2022-12-03 22.59.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/cad7093b-531a-f2cd-9b77-faeea5a4e126.png)
今回はデスクトップを選択。
![スクリーンショット 2022-12-03 23.04.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/8f7707f3-5786-5f97-3509-698398938cab.png)
するとブラウザが起動してこんな画面が出てくる。ここに作っているコンポーネントが一覧で表示されるので、動作確認をしたいコンポーネント名をクリックする。
![スクリーンショット 2022-12-03 23.06.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/ab5baeef-4b18-cf34-423c-649be262dd68.png)
するとこんな感じでプレビューが表示される。この画面はローカルでコードを編集して保存するたび自動で更新されるので、めちゃくちゃ便利！
![スクリーンショット 2022-12-03 23.07.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/200812/56bf1ad1-0741-ac71-81f8-3fbf205eb70b.png)

# 最後に
今日はLWCの基礎の基礎と、開発に便利なプレビュー機能を見ていきました。
WEBエンジニアとしてはLWCはとても触りやすそうだし、効率的に開発していけそうでなんか良さげ！
明日はLWCからデータベースへの接続について見ていこうと思います。
melでアレコレやる際に気を付けてる事

mel面白いですよね。

mel色々できますよね。

ただ、場合によっては重大な事故を引き起こしてしまうこともあるので、
自分が後輩さんらに1度は言ったことを幾つか



{ } で囲め
-
とにかくスクリプトエディタなんですよ。
みなさんスクリプトエディタで書いて、実行すると思うんですよ。
割と危険なんですよ。

例えばこんな感じのスクリプトを書いて実行したとしますわ

```mel
    string $qbozHoge[] = `ls -sl`;

    for($i in $qbozHoge)
    {
        print($i + "\n");        
    }
```

この時、$qbozHoge　はglobal変数としてmayaさんに登録されてしまうんですね。
（global変数の確認は　env; でできます。）

これの何が問題かというと、

- global変数さんは1回登録されると型を変えられない
- global変数さんはglobalなので、他でも使える

という事ですね。

つまり、
万が一　会社で使っているツールのglobal変数と名前が被ってしまった場合

- そもそもツール自体が動かなくなる
- 変数にツールが予期せぬ値が入り、深刻なエラーを発生させる。

という考えたくないレベルの面倒が発生します。

スクリプトエディタでmel単発の処理を書く際は **{}で囲む** 事で変数のglobal化を防げます。

```mel
{
    string $qbozHoge[] = `ls -sl`;

    for($i in $qbozHoge)
    {
        print($i + "\n");        
    }
}
```

自分で書く場合も、他人から貰った場合も
スクリプトエディターでmelを実行する際は気を付けてくださいね。


global procは気軽に作るな
-

これも理由としては前項と一緒ですね。
global proc は後から上書き定義できてしまうので、作るのはまぁ良いのですが
被りそうな名前(誰でも気軽に思いつきそうな名前)で作ると

万が一　会社で使っているツールのglobal proc と名前が被ってしまった場合
- そもそもツール自体が動かなくなる
- ツールが予期せぬ挙動をし、深刻なエラーを発生させる

という面倒が待ってます。

なので、melでprocをバリバリ作ってくときは
global procの量は必要最低限にし、
命名時はなるべく固有になるようにした方が安全ですよ。

UIのパーツ名は被らせるな
-

これも一緒。
万が一　会社で使っているツールのUI と名前が被ってしまった場合
- そもそもツール自体が動かなくなる
- ツールが予期せぬ挙動をし、深刻なエラーを発生させる

です。

最終的にUIパーツ名をつけるのが面倒になったので、　
UIパーツ名は定義せずにそのまま変数に放り込むようにしました。



まとめ
-
なぜこうも細かいところまで一々指示していたのかというと、

**過去に自分が全てやってしまったらなんですね。**

ほんとうに面倒でした。
Deno Freshでローカルの.envとDeno Deployの環境変数のどちらもうまく扱う

# やりたいこと

ローカルでは `.env` から変数を読み込みたい。Deno Deploy では、普通にプロジェクトの環境変数から読み込みたい。

# コードの準備（ローカル用）

ローカルでは、開発用の `dev.ts` で `x/dotenv` をインポートすることにする。
`x/dotenv` の `config({ export: true })` を使うと、`.env` ファイルにあるすべての `<key>=<value>` をロードできて便利。

```dev.ts
#!/usr/bin/env -S deno run -A --watch=static/,routes/

import dev from "$fresh/dev.ts";
import { config } from "https://deno.land/x/dotenv@v3.2.0/mod.ts";

config({ export: true }); // Export all env key=value to Deno.env

await dev(import.meta.url, "/main.ts");
```

これで、`.env` のすべての `<key>=<value>` が `Deno.env.get(<key>)` で使えるようになる。
`index.tsx` で実際に読み取ってみる。

```index.tsx
const HELLO = Deno.env.get("HELLO");
console.log(HELLO);

export default function Page() {
  return (
    <>
      <p>Welcome to `fresh`.</p>
      <div>env HELLO: {HELLO}</div>
    </>
  );
}
```

スプリット構文を使いたければ、`.toObject()` で env の中身をすべてオブジェクトにするサンプルが [examples.deno.land にあった](https://examples.deno.land/environment-variables) ので、それを利用してみる。

```index.tsx
const { HELLO } = Deno.env.toObject();
console.log(HELLO);

export default function Page() {
  return (
    <>
      <p>Welcome to `fresh`.</p>
      <div>env HELLO: {HELLO}</div>
    </>
  );
}
```

# コードの準備（Deno Deploy 用）

一方の Deno Deploy では、メインのエントリポイントが `dev.ts` ではなく、`main.ts` のはず。
`main.ts` で `x/dotenv` を使わないことにしておけば、Deno Deploy で `main.ts` がそのまま実行されたときに、Deno Deploy のプロジェクトで指定した環境変数が自動的に `Deno.env` で使えるようになる。よって、Deno Deploy 用に手を加えるコードは、ない。ミニマル。

# 環境変数の準備（ローカル）

肝心の `.env` ファイルをローカルに置く。
```.env
HELLO=Local Hello
```

`.env` を gitignore するのを忘れずに。
```.gitignore
.env
```

# 環境変数の準備（Deno Deploy）
Deno Deploy では、`.env` ではなく環境変数を設定する。
Settings > Environment Variables > Add Variable を開いて、

> Key: "HELLO"
> Value: "Deno Deploy Hello"

を設定して保存。

# ローカルでテストしてみる

```bash
% deno task start
Task start deno run --allow-env -A --watch=static/,routes/ dev.ts
Watcher Process started.
The manifest has been generated for 4 routes and 1 islands.
Listening on http://localhost:3000/
Local Hello
```

というログと、

```html
<p>Welcome to `fresh`.</p>
<div>env HELLO: Local Hello</div>
```

のようなレンダリングが得られれば成功。
ローカルの `.env` から読み取られている!!

# Deno Deploy でテストしてみる

ローカルのコードを Deno Deploy にプッシュ。Previewブランチでも、Mainブランチでも。

Main ブランチなら、Logs タブで Production のログに

```log
Deno Deploy Hello        2022-12-03 23:09:14
```

のように出る。Preview ブランチなら、Deployments タブのアクションメニューから Logs を選ぶと、特定のデプロイのログを見られる。

そしてレンダリング結果として

```html
<p>Welcome to `fresh`.</p>
<div>env HELLO: Deno Deploy Hello</div>
```

が得られれば成功。`Local Hello` ではなく、Deno Deploy のプロジェクトで指定した `Deno Deploy Hello` になっている!!!

環境変数は、プッシュ前に設定してあったものが有効になる。プッシュ後に環境変数を設定しても、生きない。プッシュ後に環境変数を変え忘れていたのを思い出したら、無意味な更新をプッシュしなければならない。つらい。

# 宣伝

宣伝: Fresh のドキュメントを https://fresh-ja.deno.dev/ で勝手に日本語化しています。協力者を募集中。
【WordPress】Wordpressの管理画面の構成

# 前回の記事

前回の記事では、インストールしたサイトを確認して、すでにサイトの形がとられていることを確認しました。

https://qiita.com/raptony110/items/9288c2d2710bc5acd5fa

今回は、WordPress管理画面のメニューを確認して、どんな設定をすることができるのかを確認していきましょう。

僕のAdvent Calendarを読み終わった人が、
「へぇ簡単なんだなぁ〜　自分もWordPress使ってサイト作ってみようかな〜」って思うあなたがそこにいたのなら、、、、
読むだけで、頭の中WordPress化しちゃったんだよッ！！！！

https://qiita.com/advent-calendar/2022/wordpress-output

# WordPress管理画面のメニュー一覧
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1499675/9bf91364-9944-c616-ca71-55437a88f65a.png)
こちらが、WordPress ver6.1.1の管理メニュー一覧です。

- ダッシュボード
    - ホーム
        - WordPress管理画面にログインした際に表示される画面です。投稿記事数や、投稿した記事にコメントが付けば、この画面で通知されます。
    - 更新
        - WordPressやテーマ、プラグインの更新情報が通知され、更新することができます。
- 投稿
    - 投稿一覧
        - 記事の一覧が確認できます。すでに公開済みのもの、下書き状態のもの、非公開状態のものなど一覧で確認したり、検索したりできます。
    - 新規追加
        - 新しい記事を作成することができます。
    - カテゴリー
        - カテゴリーとは、記事を分類するために利用する箱のようなもので、記事を整理することができます。
    - タグ
        - タグも記事を分類するためのものですが、カテゴリーよりも細かい分類に利用します。一つのカテゴリー内で、詳細に分類したい場合などですね。
- メディア
    - ライブラリ
        - アップロード済みの画像や動画などを確認したり、削除したりすることができます。
    - 新規追加
        - 画像や動画をアップロードすることができます。
- リンク
    - このメニューは、WordPressテーマとしてCocoonを設定している際に表示されます。
- 固定ページ
    - 固定ページ一覧
        - 固定ページとは、投稿記事とは違い、サイト説明や、問い合わせページなど、メニューにいつも表示させておきたいページのことです。この固定ページの一覧を確認することができます。
    - 新規追加
        - 固定ページを作成する機能です。
- コメント
    - 記事に投稿されたコメントを一覧で確認することができます。
- Cocoon設定
    - このメニューは、WordPressテーマとしてCocoonを設定している際に表示されます。
- 外観
    - テーマ
        - WordPressテーマを設定します。テーマを管理したり、新しいテーマを検索したりすることができます。
    - カスタマイズ
    - ウィジェット
        - ウィジェットを管理することができます。ウィジェットを利用することで、カレンダーやカテゴリーなどをサイト上へ簡単に表示させることができます。
    - メニュー
        - サイトの上部や下部に表示するメニューを作成したり、管理することができます。
    - ヘッダー
        - ヘッダー画像を変更することができます。
    - 背景
        - サイト全体の背景画像を設定することができます。
- プラグイン
    - インストール済みプラグイン
        - すでにインストールしているプラグインを管理することができます。
    - 新規追加
        - 新しいプラグインを検索してインストールすることができます。
- ユーザー
    - ユーザー一覧
        - WordPressに登録しているユーザーの一覧を確認することができます。
    - 新規追加
        - 新たなユーザーを追加することができます。
    - プロフィール
        - ログインしているユーザーの情報を設定することができます。
- ツール
    - 利用可能なツール
        - カテゴリーとタグの変換ツールを利用することができます。
    - インポート
        - WordPress以外のシステムからデータをインポートすることができます。
    - エクスポート
        - WordPressからデータをエクスポートすることができます。
    - サイトヘルス
        - サイトの健康状態をチェックすることができます。時々状態を確認してより良いサイトにしていくと良いでしょう。
    - 個人データのエクスポート
        - 個人データをエクスポートすることができます。提出を求められた際はこちらの機能を使用します。サイト運営者は、利用者から個人情報の提出を求められた場合に、提出する義務があります。
    - 個人データの消去
        - 個人データを削除することができます。
- 設定
    - 一般
        - サイトのタイトルなど、基本的なサイト設定を施すことができます。
    - 投稿設定
        - 記事を投稿する際に、設定するデフォルトのカテゴリーや、メールから投稿する設定などができます。
    - 表示設定
        - サイトの全体的な表示設定をすることができます。
    - ディスカッション
        - 記事へのコメント設定や、コメントがあった際のメール通知設定などを行うことができます。
    - メディア
        - サムネイルのサイズを設定することができます。
    - パーマリンク
        - 投稿した記事のフォーマットを設定することができます。
    - プライバシー
        - プライバシーポリシーページを自動生成したり、編集したりすることができます。
    - SSL
        - プラグイン「Really Simple SSL」をインストールした際に利用できるメニューです。

# おわりに
今回の記事で、WordPress管理メニューにどのようなものがあるかがわかったと思います。
デフォルトでもかなり多くのメニューがありますが、プラグインやテーマによってはさらにオリジナルのメニューが追加されますので、全て使いこなすのは結構大変です。
逆を返せば、ポイントを押さえておけば、全てに精通する必要はありません。利用しない機能も多いでしょう。

それでは、次回から、それぞれの設定を具体的に設定して、設定方法を確認していきましょう。
cloud vison apiとRubyで簡単にOCRしてみる

## はじめに
OCRを使って画像から文字を抽出したいことがありましたが、自前で作るのはしんどいので既存のサービスで良いものがないか探していました
Cloud Vision APIを使えばかなり簡単に実現できそうだったので紹介します

## 事前準備
googleのドキュメントを参考にCloud Vision APIを有効にしてください
https://cloud.google.com/vision/docs/detect-labels-image-client-libraries?hl=ja

jsonでcredential情報がダウンロードできるので、任意の場所において
環境変数`GOOGLE_APPLICATION_CREDENTIALS`で指定してください

cloud vision APiのgemをインストール
```sh
gem install google-cloud-vision
```

## 使い方
今回はこちらの自分のQiitaのマイページの一部分に対してOCRを使ってみます
![2990f756141a0c40fe1b356a4fc6c92d.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/362594/bbdc653d-1023-3612-f659-3b8ed3fb0fe9.png)


```ruby
require "google/cloud/vision" 

def image_annotator
  @image_annotator ||= Google::Cloud::Vision.image_annotator
end

image = 'mypage.png'

response = image_annotator.text_detection(
  image:       image,
  max_results: 1
)

response.responses.each do |res|
  res.text_annotations.each do |text|
    puts text.description
  end
end

```

たったこれだけのコードでとりあえずは画像内の文字を取り出すことができます
実行した結果がこちらです

```
"9\n|投稿\nYoshiki Horikawa\n@yhorikawa\n45 Contributions\n1\nフォロー\nえんじにあさんねんめ\n1\nフォロワー\nプロフィールを編集する"
"9"
"|"
"投稿"
"Yoshiki"
"Horikawa"
"@yhorikawa"
"45"
"Contributions"
"1"
"フォロー"
"えんじにあ"
"さん"
"ねんめ"
"1"
"フォロワー"
"プロフィール"
"を"
"編集"
"する"
```

画像内の文字が認識されていますね！

## まとめ
自分で実装するのは大変なOCRですが、Cloud Vision APIを使うことで簡単に実現することができました
今回は単純に画像内の文字を読み取るだけでしたが、文字の位置情報なども取れるので、できることが色々ありそうです
azure terraform


# terraform planでいつも出てくるワーニング


3系からprimary_master_keyが使えなくなるよっていう。warningについて

なんでや！いつからや！となりませんかね。

これっぽい
https://github.com/hashicorp/terraform-provider-azurerm/pull/8638

20年頃にmasterやめようぜムーブメントがありまして、
あれは何だったのでしょう。突然発生して忘れ去られたムーブメント。
もうみんな忘れているのでは。

ただ、この情報によれば、azurermもムーブメントに加わっていたらしく、tag:2.30.0あたりで対応したみたい
https://discuss.hashicorp.com/t/inclusive-language-changes/12797

短くなってわかりやすくなったのだけれど、
おかげでちょっとだけ掘り下げて調べるきっかけをもらったわけだけれど
ESP32でYDLiDAR GS2を使う

この記事は、[Calendar for 東京電機大学 | Advent Calendar 2022 - Qiita](https://qiita.com/advent-calendar/2022/tdu)の3日目です。
昨日は、Cateiru君の[ロバートのおじさんが推しているクリーンテスト](https://blog.cateiru.com/entry/2022/12/02/002107)でした。
今までほとんど触れてこなかった分野の話でなるほどなという感じで面白かったです。


https://twitter.com/hibiki_cube/status/1599000453567885313?s=20&t=YvfSS_3ZXyQwRTkVylf91Q