OmniAICreator/Qiita-1.07M huggingface dataset:
アクモンWebページ作成

HTML CSS練習！！

今日は練習として僕の好きなアーティストのWebページを作ることにしました！！

![D7AF9363-076F-44F9-B859-1D43B938F9A0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636099/9458c012-2563-1e5f-1935-ea3752f2bd65.jpeg)

![AB225C85-39E4-498A-853E-2101C0073805.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636099/4257294c-95c3-23be-ec5a-380ecf96a4da.jpeg)


今回はヘッダーのロゴを押すと公式サイトへ遷移するようにしたのとaboutを押すと下のAboutに飛ぶようにしました！！

実際にコードを書いていくとどのように作られて行くのか分かりますしより記憶に定着しますね！！

明日も完成に向けて頑張ります！

           学んだ事
脆弱性を解消するためにすること
rel="noopener noreferrer"

横並びにするめには
display: flex;

交差軸に対して中央に寄せるには
align-items:center;
中央に寄せる
justify-content:center;

端と端に寄せるには
justify-content:space-between;
Okta - サインイン時にMFAを求める

# はじめに

前回(↓)はサインインを自社拠点IPからのみにする設定を実施しました。
しかし、認証要素はパスワードのみとなっているため、今回はMFAを追加していきたいと思います。
また、あわせてちょっとした調整をしていきます。

https://qiita.com/mtbRck/private/301e6d9b4badc02ba905

# Global Session Policy の設定変更

自社用デフォルトポリシーのルールを変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/384586fd-f2b1-0461-ae7b-f512be0d8846.png)


以下の3か所を設定します。

- Multifactor authentication (MFA) is
    - Required を選択することでMFAを求められるようになります。
- Users will be prompted for MFA
    - After MFA lifetime expires for the device cookie がおすすめです。
    - 新しいデバイスやCookieからの接続だけでなく、既存のCookieであってもMFA lifetime 経過した後、再度サインインする際にMFAを求められるようになります。
- MFA lifetime
    - 18時間くらいにしておけば大体の人は1日1回、朝出社したときにMFAが求められるくらいになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/a9227489-4c18-9bc4-3678-dac1d82d06e1.png)



# Authentication Policy の設定変更

デフォルトポリシーの自社拠点IPを許可するルールで、User must authenticate with を Password + Another factor に変更します。

これによってPassword での認証後にMFAが求めれるようになります。

MFAは Additional factor types に記載のもののうち、ユーザーが設定しているもののいずれかを使用可能です。
※このテナントでは Okta Verify と FIDO2 のみ許可しているため2つしか表示されていません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/1af5d554-a611-3f2a-885e-e9fed16edc43.png)

これでサインイン時にMFAを求められるようになりました。

# ちょっとした調整

## Global Session Policy

セッション時間の最大値が初期状態だと無制限になっているため、 Set time limit を選択します。
MFA lifetime にあわせて18時間（1日1回）くらい認証してもらったほうが良いと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/784be5ef-14c1-f8f7-11b1-b26a31857395.png)

## Authentication Policy

Re-authentication frequency（再認証の頻度）を設定します。
初期値は2時間になっているので、Global Session Policy にあわせて18時間（1日1回求められるくらい）が妥当かなと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/ddbefa60-dd30-6d0c-6d79-d2919d216d38.png)


# [補足]認証要素の種類

テナント内で利用を許可する認証要素の追加・削除は、Security > Authenticators から可能です。
2023/12時点で利用可能なものは以下の通りです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/fa7d7fdc-2426-7bd7-dc86-c8879d7eadeb.png)

個人的には、OIEになったことで Security Question（秘密の質問）を削除できるようになったのがうれしかったです。


# おわりに

今回はここまで。ありがとうございました。
次回は、アクセス時のリスクに応じた認証設定について記載していきたいと思います。
重たいログファイルを部分的に読み込むツールを作ってみた

# はじめに
タイトルの通り重たいログファイルを読み込むためのツールを作ってみたのでその紹介です。

### 経緯
* ログローテーションを甘く見たままの開発着手により、とても重たいログファイルを量産
* ログファイルをVScodeの別タブで開いたままソース修正、テスト起動を繰り返し、フリーズもしばしば
* 筆者がcliでのログ解析に苦手意識があり、できればGUIベースで解析したい

そんな悩みを解消したいと思い、ログファイル内の1部分だけ読み込んで表示させるツールを作成しました。

# 実際の画面
今回はtkinterを使って作成しました

画面はこんな感じになりました。
![2023-12-09_23h33_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/5ccf2030-8152-1f5e-5edc-ad56f9aba141.png)


# 使い方
1.「対象ファイルの選択」ボタンで読み込みたいファイルを選択
2.「表示させる行数（数字を入力）:」のテキストボックスに表示させるログの行数を入力
3.「開始位置(表示させたいログの開始行を入力)：」のテキストボックスに表示させたいスタート行が何行目かを入力
4.「内容を表示する」ボタンを押すと対象の行が表示される

上記の手順で以下のように表示が変わります。
※スクショの例だと選択したログファイル内の30行目から15行分を表示させています

![2023-12-09_23h16_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1700794/3db7b72d-9612-4314-aecf-8e20a3921b87.png)

今回は大体15MBのファイルを表示させましたが、理論的には数十GBのログファイルでも表示可能です


# おわりに
ここまで見てくださりありがとうございました。
本番リリース後はともかくとして、開発中にログファイルが思いのほか大きくなるというのは割とあるあるじゃないかなと個人的には思っています。
そんな方の悩みの一助になれば幸いです。

また、今回本当に必要な最低限の機能作成だけに絞ったことで思いのほか早く、少しのコードで完成しました。
スモールスタートって大事だなあ．．．

作ったソースはGithubにあげておきます
中身はいいから使わせろという方向けにexeも入れておきます

# 作成済みのソースコードとexeはこちら
https://github.com/higurashi88/LogFileReader
「逆翻訳」をGoogleスプレッドシートでやってみた。

# 最初に
皆様いらっしゃませ、S高等学校三期生のぎゅいーん [@s3_07gyuiiiiin](https://twitter.com/s3_07gyuiiiiin)と申します。
普段は主に校内プロジェクトにてスライド資料の作成やウェブ作成などをしております。
~~決してクリエイターではなく一般人なので(言い訳)~~ クオリティが低いものにはなってしまいますが、是非覗いて行って頂けたらと思います。

# 今日は何〜！！
今回は、某Youtuberさんの企画でよく見ていた「逆翻訳」をGoogleスプレッドシートで行う、題して「逆翻訳機」を作っていこうと思います。

あ、逆翻訳ってなんだって思う人いっぱいいると思うから、[参考のリンク載せておきますね](https://youtu.be/b3W_AqUTqjg?si=C0SPAupXg0R8s_SU)。

ん...？なんか天から声が聞こえるな...(棒読み)

**Q1.そもそもスプシだけで翻訳なんかできるの？**
A.できます。(多分みんな知ってる)

**Q2.なんで逆翻訳なの？しかもスプシでやる必要ないやんw**
~~そんなのは知らん！！なんか面白そうだろ！！()~~

ということで、さっそく作っていきましょう。

# 制作開始
とりあえずこのコードを書かなければ始まりませんね。
`=GOOGLETRANSLATE(翻訳したいセルの場所,"翻訳前の言語","翻訳したい言語")`
これで翻訳をすることができます。
![スクリーンショット 2023-12-09 23.07.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626046/eb72e051-2106-d606-4478-5e663ccf263f.png)

今回は日本語の文章を逆翻訳したいので、"ja"と入力します。とりあえず今回は、ある程度崩すために三回翻訳を通しましょう。

:::note warn
注意点
最後には、必ず =GOOGLETRANSLATE(セルの場所,"最後に翻訳を通した言語","ja") を
入力しましょう。
:::

![スクリーンショット 2023-12-09 23.08.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626046/e1bbb1a8-1964-4572-c7c0-d4a52cf73958.png)


完成像がこちら。
試しに`英語(en)→スペイン語(es)→ヒンディー語(hi)→日本語(ja)`で作ってみました。
![スクリーンショット 2023-12-09 23.11.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626046/d969064d-c90f-221a-97d2-0a18417412ac.png)


さっそく使ってみると...ちょっと崩れてますね、いい感じです。
![スクリーンショット 2023-12-09 23.11.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626046/ff7abe2b-52e4-1d72-3cc4-4f9c01076c08.png)


今度は`中国語(zh)→ロシア語(ru)→韓国語(ko)→日本語(ja)`にしてみました。
![スクリーンショット 2023-12-09 23.18.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626046/2ba591f7-bb56-9f42-3578-509c0e94c01e.png)

明らかに文が崩壊してきていますね、これで完成です。

おまけ
![スクリーンショット 2023-12-09 23.35.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3626046/b3418cc0-68d0-5aa5-65d7-238b1ee4823d.png)
(ぎゅいーんという名前がえぐいほどに悪さをしてしまいましたねw)

# さいごに
最後まで記事をご閲覧いただきありがとうございました！
またこのような機会があれば記事を出典させて頂きたいと思いますのでその時は何卒よろしくお願い致します。
以上、ぎゅいーんでした。
お土産を配るアプリを開発したけど、あんまり相性が良くなかった話

# はじめに
はじめまして、北サブと申します。
この記事はARISE analytics Advent Calendar 2023の10日目の記事になります。

私事ですが、個人でアプリ開発をさせていただいております。
今年は2.5アプリ（12/9現在）リリースしたのですが、その中の「おみやクイズ」というアプリについてお話させていただきます。

# おみやクイズについて
https://play.google.com/store/apps/details?id=com.kitasubmarine.omiyage

iOS：https://apps.apple.com/us/app/%E3%81%8A%E3%81%BF%E3%82%84%E3%82%AF%E3%82%A4%E3%82%BA/id6455377221

おみやクイズとは、職場等でお土産を配るといったシチュエーションの時に、クイズを作成し、クイズの正解画面を見せてくれた人にお土産を配るためのアプリです。
クイズに答えてもらうことで、ただお土産を渡すだけではなく配る人が行った場所や経験したことについて調べてもらい、その経験をいろんな人に共有して楽しんでもらうのが目的なアプリになっています。
例：地元について知ってもらう、その場所が舞台になったアニメについて知ってもらう

# 思いついたときはめっちゃいいアプリだなと思ったけど…
自分が旅好き・クイズ好きなのもあり、このアプリを思いついた時には「いや～いいアイディアだな～」と思っていました。

また、ちょうど世間的に出社率が上がってきた時期でもあり、それに加えて某ウイルスが第5類に移行し、夏休みも控えていたため、夏休みで旅行をした人たちが職場でお土産を配る際に使ってもらい、コミュニケーションの火種にしてもらえるのでは？と、いうような完璧なストーリーを描いていました。

しかし、実際リリースしてみたらそんなに上手くいきませんでした。
その理由をここで綴っていきたいと思います。

## ① お土産を配るスピードが落ちてしまい、机の上で邪魔になる
基本的にお土産を配る時って、近くにいる人へさっさと配ってしまい、お土産を入れていたダンボールを片付けるかなと思います。
それが、クイズに答えてくれた人に配る、という形にしてしまうと、配り終わるまで机の上等で保管する必要があり、その期間邪魔になってしまいます。

## ② 配るスピードが落ちるため、賞味期限が短いものは向かない
買うお土産が制限されてしまうという課題です。
お土産屋さんで、「これはちょっと日持ちしないからやめておくか…」みたいな思考になります。なので、買ってくるお土産がお煎餅になりがち。
一番向かないのは赤福です。多分。

## ③ クイズに答えるために、アプリをインストールしてお土産IDを打ち込むという手間がある
一回インストールしたらそこまででもないかもですが、一番最初にお土産をもらう際に、アプリインストールという一手間がかかるため、どうしてもめんどくさいな～という感じになってしまい、じゃあいいか…みたいな感じになってしまいがちです。
ただ、お土産の単価を上げることで、その手間に見合うようになるのかな、とは思っています。

できれば、答える側はQRコードを読み込んだら、web上でクイズが表示される…みたいな感じにしたいなぁとは考えています。

## ④ そこまで普通の人はクイズが好きじゃない
自分が知識欲旺盛、クイズが程々に好きだったので、こういうアプリがあったら面白いだろうなーと思ったのですが、普通の人はそこまでクイズが好きじゃなかったようです。

自分をペルソナとしてモノを作ると、あまり流行らないので気をつけましょう。

# 終わりに
半分ぐらい宣伝のつもりの記事です。
誰かこの記事を見てくれて、アプリを使ってくれて、その会社内で流行ってくれたらいいな…と思っています。
また、いいアイディアがあれば是非コメントお願いします。
皆さんもモノを作る時に気をつけてください！

おしまい
インフラエンジニアに求められるスキルの個人的まとめ


インフラエンジニアを目指すにあたり、
まずは知るところからと考え、
どのようなスキルが有ればいよいか目次的にをまとめました。

将来的には、
ここに書いた目次的な内容について一歩踏み込んだ知識があり、
実務経験があり、
見識を有したエキスパートになっていると考えると、
到達するには長い遠い道のりと感じました。

まとめたものの、
より良い分類や粒度感、認識できていない点の記載漏れなどがあれば、
気付き次第修正します。

# ドキュメント作成
## システム構成図やネットワーク図の作成
  - 技術的知識、視覚化ツール（例：Visio、Lucidchart）の使用スキル
  - 技術的知識と観点の理解
  - トップダウンとボトムアップの観点からのネットワーク設計能力

## 運用計画や設計書などの作成
  - 技術的設計と要件分析能力
  - システムの要件や設計方針、運用方法などを文書にまとめる
  - システムの知識（OS、データベース、アプリケーション、ネットワークなど）
  - 手順書作成
  - プロジェクト管理スキル、技術的記述能力、システム設計の知識

## 提案書や報告書の作成
  - 技術的解析と手法の理解
  - 詳細な技術設計とコスト分析の能力
  - コミュニケーション能力、クリアな文書作成能力、技術的な洞察

# 知識
## サーバの知識
  - サーバの種類（物理サーバ、仮想サーバ、クラウドサーバなど）
  - サーバのOS（Linux、Windows Server、UNIXなど）
  - サーバのハードウェア（CPU、メモリ、ストレージなど）
  - サーバのネットワーク接続（LAN、WAN、VPNなど）
  - サーバのセキュリティ対策（ファイアウォール、IDS/IPS、暗号化など）

## ネットワークの知識
  - OSI 参照モデル (TCP/IP プロトコル、NAT、ファイアウォールなど）
  - ネットワークの種類（LAN、WAN、VPN、VLAN、SD-WANなど）
  - ネットワークの設計（トポロジー、冗長化、セキュリティなど）
  - ネットワークの運用（トラフィック監視、パフォーマンスチューニング、障害対応など）
  - ネットワークのセキュリティ（ファイアウォール、IDS/IPS、VPN、暗号化など）

## セキュリティの知識
  - セキュリティの脅威（サイバー攻撃、情報漏えいなど）
  - セキュリティ対策の種類（物理セキュリティ、ネットワークセキュリティ、アプリケーションセキュリティなど）
  - セキュリティ対策の製品やサービス

## データベースの知識
  - データベースの種類（リレーショナルデータベース、NoSQLデータベースなど）
  - データベースの設計（データモデル、データ構造、データ品質など）
  - データベースの運用（バックアップ、リカバリ、パフォーマンスチューニングなど）
  - データベースのセキュリティ（アクセス制御、データ暗号化など）


# 実対応
## ハードウェアの設置や設定
  - サーバーやネットワーク機器を設置し、OSやアプリケーションをインストールして設定する
  - ハードウェアの知識（サーバーやネットワーク機器の種類や機能、接続方法など）

## ソフトウェアのインストールや設定
  - OSやアプリケーションをインストールして設定する
  - ソフトウェアの知識（OSやアプリケーションの種類や機能、インストール・設定の方法など）

## 運用や保守に関する業務
  - 定型業務
  - システムの監視やトラブルシューティング、バックアップや災害復旧などの業務を行う
  - システムの知識（OS、データベース、アプリケーション、ネットワークなど）
  - セキュリティインシデントへの対応
  - 性能チューニングや最適化
  - バックアップと災害復旧計画の策定・実行

# 技術
## クラウドインフラの構築や運用
  - AWS、Azure、GCPなどのクラウドプラットフォームの使用スキル
  - クラウドインフラの設計・構築・運用スキル

## 仮想化技術
  - VMware、Hyper-V、KVMなどの仮想化技術スキル
  - 仮想化基盤の設計・構築・運用スキル

## サーバ
  - Linux、Windows ServerなどのOSのスキル
  - サーバの設計・構築・運用スキル

## ネットワーク
  - LAN、WAN、VPN、DNS、DHCP、TCP/IPなどのネットワークプロトコルなど
    ネットワークの設計・構築・運用スキル

## セキュリティ対策
  - ファイアウォール、IDS/IPS、暗号化技術など
    セキュリティ対策の設計・構築・運用スキル

## データベース
  - SQL、NoSQLなど、データベースの設計・構築・運用スキル


# 運用
## 運用自動化ツールの使用
  - Ansible、Terraform、Puppetなどの運用自動化ツールスキル
  - 運用自動化の設計・構築・運用スキル

## プロジェクトマネジメント
  - プロジェクト計画、リスク管理、チームコーディネーションスキル
  - プロジェクトの推進・管理スキル

# その他
## コミュニケーション能力
  - 社内外のステークホルダーと円滑にコミュニケーションを図るスキル
  - 相手の立場や状況を理解しわかりやすく伝える

## プレゼンテーション能力
  - 技術やシステムに関する情報をわかりやすく伝えるスキル

## 問題解決能力
  - システムの運用や保守において発生する問題を解決するスキル
    問題の本質を理解し、解決策を立案し、実行する。
ThinkerCADで作ったモデルにMixamoで動きをつけてみた

## はじめに
こんにちは！3年の松田です。
今日はMYJLab Advent Calendar 2023の10日目になります。
昨日は関根くんのC++競プロ入門についてでした。カナダにいながらも競プロに夢中なのが、流石だな！！と思いました。

ここで、自分の話になりますが、私は夏休み明けくらいから3Dモデリングを学び始めました。
コードを書いてプログラミングするのとはまた違った楽しさがあり、こだわりたいところまでこだわれるのが魅力だと感じています！
そこで、今回は3Ｄモデリングを行って簡単にアニメーションをつけてみようと思います！
少しでも3Dモデリングやアニメーション制作の楽しさが伝われば嬉しいです！

## やること
ThinkerCADを使って自作のモデルを制作し、Mixamoでアニメーションをつける！！！

## ThinkerCADとは
まず、ThinkerCADとは。
誰でも3Dモデリングができる無料の3Dアプリになります。
ブラウザ上で使用できるので、何もインストールせずに利用することができます。
3Dモデリングは立体的に見えるデザインのことで、3Dプリンターがあれば実際に作ったものを出力することもできます。
今回のように、ゲームやアニメーションの制作に活用することも可能です！

## Mixamoとは
次に、Mixamoとは。
多数のテンプレートが用意されている、3Dキャラクターに特化したツールです。
自作の3Dモデルに、簡単にアニメーションをつけることができます。
Abobeのアカウント登録が必要ですが、無料で使えます。
モデルに合うアニメーションを選んだら、パラメータでアニメーションの調整をすることもできます。

## 実際に作ってみた
まずはThinkerCADでの作成です。
今回はThinkerCADで作成したモデルをMixamoにインポートして動かすため、動きが分かりやすい、人のモデルを作成しました。
こんな感じです～

![pic1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617888/85d38cb6-7c1b-8263-f89d-4c9f740f8adc.png)
Mixamoにインポートするために両手を広げたポーズにしています！
ThinkerCADでは、画面右側にある図形を組み合わせたり、切ったりして3Dモデルを作成します。
モデルの作成が終了したら、このモデルを「OBJ」で書き出します。

次からMixamo上での作成になります。
Mixamoを開き、「UPLOAD CHARACTER」をクリックして保存したファイルを開きます。
すると、Mixamo上で先ほど作成したモデルが表示されます！
ここで関節の設定を行います。
あご、手首、ひじ、股関節、ひざの5箇所を設定します。
![pic2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617888/e7adef27-eeb3-3480-1987-176aafd76f07.png)
関節の設定が終了したら、完成です！
画面の左側に動きが出てくるので、好きな動きを選択できます！
今回は良い感じにダンスさせてみました～
![mov1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617888/1c69f5f8-ec68-d853-a435-98392aabe3d0.gif)



## さいごに
今回はThinkerCADからMixamoにインポートしてみました。
Mixamoから、BlenderやUnityにインポートすることも可能です。
たくさんのアニメーションが用意されているMixamoはとても使いやすいと感じています。
そして、こちらはYoutubeを見ながら作ったAmongusのキャラです。10分くらいで完成しました。
![pic3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3617888/53ebc3d6-e8d9-06f7-f3de-855d4c327fc8.png)

関節が足りなくてMixamoでうまく動きませんでしたが、動かしたらかわいいと思うので動かしたいです。
アニメーション初心者ですが、楽しみつつ頑張ってみようと思います。

## 参考文献
https://www.youtube.com/watch?v=t384z0qCszc
仕事において大切だと思う、基本動作や心構え

# はじめに
私はシステム研究開発センター内のサービスデザイン研究部に所属するUXデザイナーです。
2021年度に入社し、3年目となる今年まで主にデザイン・アジャイルの領域を中心に活動させて頂きました。
本記事の内容は、私が入社してから参画したPJや部内の仕事で得た学びのまとめになります。ソフトスキルにフォーカスしているので、これから入社される学生の方やPJに参画される新入社員の方々の一助となれば幸いです。

# 目次
[1.同期/非同期コミュニケーションの使い分け](#同期/非同期コミュニケーションの使い分け)
[2.書き言葉を身につける](#2-書き言葉を身につける)
[3.質問やコメントのレベルは、業務の理解度や思考の量の表れ](#3-質問やコメントのレベルは、業務の理解度や思考の量の表れ)
[4.仕事の進め方も大事](#4-仕事の進め方も大事)
[5.信頼は実績の積み重ね](#5-信頼は実績の積み重ね)
[6.仕事とは「価値を届ける」こと](#6-仕事とは「価値を届ける」こと)
[7.おわりに](#7-おわりに)

# 同期/非同期コミュニケーションの使い分け
今や当たり前となったリモートワークにおいて、TeamsやSlack上でのテキストによる非同期コミュニケーションは不可欠です。もし仮に、会議などの同期的コミュニケーションのみで物事を進めようとすると、以下のような問題が発生します。
- その会議まで会話が始まらないので、問題が発生してから解決するまでのリードタイムが長くなる
- 会議に参加したメンバーしかその内容を知ることができず、情報のサイロ化に繋がる

チャットを用いた非同期コミュニケーションを活用することで、会議を待たずに早期の問題解決やログが残ることによる情報の透明性向上に繋がります。ただし、非同期コミュニケーションにも以下のようなデメリットがあります。

- 口頭でのコミュニケーションと比較して、テキストを入力することのコストが高い
- どうしてもテキストのみでは認識齟齬が解消できないケースがある

こうしたデメリットがあるので、ある程度ラリー回数が必要な質問や、イメージの認識合わせなどは直接会話することが必要なように思います。口頭であれば「そういえば別件で〜」のような偶発的な会話も発生しやすく、そうした会話をきっかけに潜在的な問題やアイデアの発見に繋がることもありました。また、仕事とは関係のない雑談はログが残ることにある種の気持ち悪さを感じるので、揮発性の同期的コミュニケーションの方が合っているとも思います。

# 書き言葉を身につける
これは地味に大切なスキルだと思っています。自分しか見ないドキュメントであればどう書こうが自由ですが、他人に共有するメモや会話のベースとなる資料に関しては、書き言葉を用いた方が端的に正確な情報を伝えられるからです(ドキュメントで全てを伝えきれる、という意味ではありません)。
前述のチャットを用いた非同期コミュニケーションに関しても、書き言葉を用いることで端的に要件を伝えられます。
また、書き言葉を使うと文章が大人っぽく感じられるので、印象が良くなるとも感じます。

# 質問やコメントのレベルは、業務の理解度や思考の量の表れ
PJや部内の仕事で諸先輩方とお話していると「たしかに！」と思わされるような質問や、そもそもそのフィーチャは必要なのか？というクリティカルな指摘を頂くことがあります。経験の差もありますが、様々なユースケースを考慮し解像度を高めた結果として、こうした発言にたどり着けるのだと思います。お客様の中にはIT技術者ではない方もいらっしゃいますが、「この人は考えているな」と思って頂けるような良い質問やコメントができると評価して頂けると思います。

# 仕事の進め方も大事
プログラミングやUIデザインといったハードスキルももちろん大切ですが、メンバーと協働する以上、同じぐらい大事だと思うのが仕事の進め方です。例えば下記のようなものです。
- タスクの洗い出しと見積もり
- 前さばきが必要なタスクの見極め(申請フローを通す/設計など検討に時間を要す/ステークホルダー間の調整が必要など)
- アウトプットイメージの早期共有による手戻り低減

仕事である以上〆切は必ずあるので、このようなマネジメントスキルは誰しも身につけておく必要があると思います。逆にこうしたマネジメントスキルが皆無となると、他のメンバーに自分のことを管理させてしまうことになりかねません。

# 信頼は実績の積み重ね
たとえチーム内での裁量権が大きかろうとも、初めて協業する別部署のメンバーや、初めて依頼するお客様は自分のことが分からないという不安があります。特に新人となると過去の実績もないので、はじめは議事録の作成や事務系の手続き、細かい部分のバグ修正などしか任せてもらえないケースもあるかもしれません。ここで大事なのは、その時任された仕事をきっちりやり切ること、ないしは相手の期待値以上のクオリティのアウトプットを出すなど任された仕事の中で成果を上げることです。こうした小さな成果の積み重ねができてくると、「次はもう少し重要な仕事もお願いしてみよう」と思って頂けます。

# 仕事とは「価値を届ける」こと
自分のチームがどれだけバックログを消化できたのか、コードを何万行書いたのかはさほど重要ではありません。大事なのは「__プロダクトのユーザ価値をどれだけ高められたか__」です。開発のサイクルをきれいに回そうとしたり、自分のスキル向上を図るうちに本質から逸れてしまっていないか、常に考えておきたい所です。個人の技術力向上やチームの成長と、プロダクトのユーザ価値向上は別で評価すべきかと思います。

# おわりに
ここに記した内容は至極当たり前のことであり、新しい発見はなかったかもしれません。ですが、こうした当たり前のことを実行するのは実はすごく難しい、と感じています。忙しい時にタスク管理をついおろそかにしてしまったり、タスクを完了させることに囚われてユーザ価値をおろそかにしてしまった、などは誰しも経験があるのではないでしょうか。
「__当たり前のことを当たり前に実行できることこそ最強__」のマインドでこれからも仕事に励んで行きたいと思います。
ここまで読んで頂き、ありがとうございました。

本記事は、NSSOL Advent Calendar 2023の9日目の投稿になります。
【React】行数を指定できるテキストのスケルトン

以下のように記述することで指定した行数分表示されるテキストのスケルトンのコンポーネントを作成できます。

```tsx
export function TextSkeleton({ lines }: {lines: number}) {
  const widthClasses = ['w-3/5', 'w-full', 'w-5/12', 'w-4/5', 'w-4/6']

  return (
    <div className="mx-2 my-2 space-y-2">
      {Array.from({ length: lines }, (_, i) => (
        <div
          key={i}
          className={`skeleton h-4 rounded-full ${
            widthClasses[i % widthClasses.length]
          }`}
        />
      ))}
    </div>
  )
}

```
Jamf Nowに登録されているAPNsを更新する

# Jamf Nowに登録されているAPNsを更新する

## はじめに
- Jamfの作業の中でも1年に一回の作業なので、備忘録をとっておくために記載します
- 本記事の内容は2023年12月初旬に実施したものなので画面遷移等変更されている可能性がある旨ご留意ください


## そもそもAPNsってなんなのさ
https://support.apple.com/ja-jp/guide/deployment/dep2de55389a/web
> モバイルデバイス管理（MDM）ソリューションは、Appleプッシュ通知サービス（APNs）により、公共ネットワークとプライベートネットワークの両方でAppleデバイスとの継続的な通信を維持します。Appleデバイスでは、APNsを使用してアップデート、MDMポリシー、受信メッセージを確認します。MDMソリューションには、デバイスと通信するためのAPNS証明書、安全に通信するためのSSL証明書、および構成プロファイルに署名するための証明書などの複数の証明書が必要です。

とりあえず、デバイスとMDMの通信を維持するための仕組みと覚えておきましょう
## 更新を忘れるとどうなるの？
- Jamf側で設定変更の設定を入れても更新されないという事象が起こります
    - 管理しているはずが実は管理できていなかったという危険な事態になりますので更新の数日前にリマインドを入れるなど忘れないための何かを用意するとよいと思います
        - 例
            - 予定管理ツールで1年後に更新がある旨を書いておく
            - Slackなどメッセージツールで更新についてリマインドを入れる
## 更新の手順
※ Jamf Nowでは、更新期限が近くなったらログイン後の画面上部に更新期限が表示されますね
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266246/2242b1c1-7c6b-fd3c-c1a9-788f58c31d23.png)

1. Jamf Nowにログイン後AppleサービスのAPNに遷移
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266246/4ce343b0-3ba1-17ce-f7ce-a5ebca6950fb.png)
2. 更新をクリックして更新に進む
    ※Apple IDは更新に必要です。パスワードの管理に気を付けましょう
    ![スクリーンショット 2023-12-09 232254.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266246/f4830c80-3fae-4ae0-dad8-d986e2320f84.png)
3. 証明書署名要求をダウンロードする
    - ダウンロードをクリックするとplistがダウンロードできます
    - 次の手順で使うのでわかりやすい場所に保存しましょう
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266246/2863417f-e7ed-1c05-0c13-efa9a3a32d66.png)
    ダウンロード出来たら右下の「次」をクリックする
4. AppleのAPNs更新サイトに遷移して更新作業をする
    - https://identity.apple.com/
    - ログインすると、Apple Push Certificates Portalに入れます
    ![APCP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266246/c7bb717f-d2bc-ac13-c63e-6cf7d62e470f.png)
    - 対象のサービスのActionsで「Renew」をクリックします
    - ファイル選択で、Jamf Nowで発行したplistをアップロードする
    - アップロードしたファイルが正しいことを確認して「Upload」をクリック
    - 証明書が発行出来たら「Download」を押して証明書「.pemファイル」をダウンロードします
5. Jamf Nowの更新ページに戻って更新の続き
    - 「次」をクリックして手順２証明書を更新に遷移します
    - 証明書をアップロードします（閲覧からファイルを選択する。またはファイルをドラッグ＆ドロップ）
        - ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266246/6e8dbfb2-0355-c3ec-58bb-7daf713b007e.png)
    - アップロードが完了すると次のステップに自動移行します
6. Apple IDを保存します
    - 次回更新の際にApple IDが不明にならないように今回使ったAppleIDを保存しておきましょう
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266246/ec843292-f8f7-d6e4-889a-24e6817fcb74.png)
    - 保存を押したら完了です
    お疲れさまでした

## 最後に
- 次の更新日は、<font color='red'>更新した日から1年です！</font>
    - 前回の期限から1年ではないのでご注意ください
    - 最後に次回の更新日を把握しておきましょう

1年に1回のみ実施なので、どんな画面遷移したっけな？という時に見てもらえると嬉しいです。
今後もJamfなどMDMについての記事を上げていきます～！
Pug / SCSSでスイカゲームをオマージュしたHTMLゲームを作ったよ！

こんにちはうえむーです！
今回はPug / SCSSでスイカゲームをオマージュしたHTMLゲーム作成したことについてお話しします。
Meguro.cssでCSSに関するLTを行いました。

## HTMLゲームを作ろうとしたきっかけ

HTMLゲームを作ろうとしたきっかけは、ConnpassでMeguro.cssのイベントを見つけて、
CSS好きなので面白いCSSアニメーションに関するLTをやりたいのがきっかけです。

https://megurocss.connpass.com/event/300400/

でも、最初は何を作ろうか決められず、もくもく会の交流会で主催者と何を作ればいいのかを相談して
「今年流行っているものでいいのでは？」とアドバイスをいただき、スイカゲームをオマージュしたHTMLゲームを作ろうと決めました。

## 制作の流れ

HTMLゲームを作るのはいいがLT大会まであと2週間しかない！
と思い色々と準備して実装しました。

### 絵コンテを作る

まずが、アニメーションの動きをイメージしやすくするために絵コンテを作成しました。
絵コンテは映像作品の撮影前に用意されるイラストによる表で、動画のイメージを具現化するための設計図のようなものです。
(手書きでごめんなさい！)

![20231113_001428.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517490/07dae846-22f3-661a-cc3e-a8e84a4364c0.jpeg)

### 素材集め・SVG化する

次は素材集めです。最初はHTML・CSSなどのロゴをPug / SCSSで作成しようかと思いましたが、
時間がなさすぎてSVG化することにしました。

「Vectorizer.AI」というツールを使ってSVG化しました。

https://ja.vectorizer.ai/

上記のツールはPng・jpg画像などのビットマップ画像をドラッグあんどドロップするだけで、ベクター変換できる優れたツールです。

以下がビットマップ画像からベクター変換した様子です。
ご覧になる通り、精度が高く無料で使えるみたいなのでお勧めします。

![SVG.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517490/94e736e2-d862-eadb-7d22-a406da3b42a3.png)

### デザイン作成・実装

素材が揃い終わったらFigmaで以下のように作成してWebPack・Pug・SCSSで実装しました。

![デザイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517490/b104673a-8e70-6925-ea54-32bfe0531688.png)

完成したのがこちらになリます。

![名称未設定2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517490/c63d139e-535a-f491-60db-a5d2601405d8.gif)

スイカゲームのように、CSS・HTMLを回転させたり、オシャレ感を出すようにニューモーフィズムで実装したりしました。

https://codepen.io/uemuragame5683/pen/RwvYMBB

GitHubのコードも展開しますのでもしよろしければ見てください。

https://github.com/uemura5683/htmlgame-animation

## 作って思ったこと

久々にCSSでアニメーションを作成しましたが、完成したときの達成感も大きいし
絵を描くような楽しさが実感します。
時間があったらまた何か作ろうかと思います。
WSL2上でRust開発環境を整える（3日目）

[1日目](https://qiita.com/doshiyo/items/1b3baceb831268714495)
[2日目](https://qiita.com/doshiyo/items/9f6c2f8fb6f1a06393f3)

全然Rustの開発環境を整えていないのでタイトル詐欺状態。
今日中に終わらせたい。

## Neovimの設定

引き続きNeovimの設定。
気付いてしまったが、VSCode-Neovimの場合は読み込まれないプラグインがあるので、keymap.lua にまとめるとVSCode判定が二重に入るからミスりそう。
キーマップは設定ファイルを見るのではなく `:nmap` とかで確認するようにしよう。

### Telescope

これを使うために今までの設定をしてきた感ある。

```lua:~/.config/nvim/lua/plugin.lua
require("lazy").setup({
  ...
  -- setupの最後に追加
  {
    'nvim-telescope/telescope.nvim', tag = '0.1.5',
    dependencies = {
      'nvim-lua/plenary.nvim',
    },
    config = function ()
      require('telescope').setup({
        extensions = {
          coc = {
            prefer_locations = true,
          }
        }
      })

      -- keysに設定するとこの辺の関数使えなかったので。
      local builtin = require('telescope.builtin')
      local find_all_files = function ()
        builtin.find_files({no_ignore = false, hidden = true})
      end

      -- VSCodeっぽい感じを残しておく
      vim.keymap.set('n', '<C-p>', find_all_files)

      vim.keymap.set('n', '<Leader>ff', builtin.find_files);
      vim.keymap.set('n', '<Leader>fa', find_all_files);
      vim.keymap.set('n', '<Leader>fg', builtin.live_grep);
      vim.keymap.set('n', '<Leader>fb', builtin.buffers);
      vim.keymap.set('n', '<Leader>fh', builtin.help_tags);
    end,
    cond = not vim.g.vscode,
  },
  {
    'nvim-telescope/telescope-frecency.nvim',
    config = function ()
      require('telescope').load_extension("frecency")
    end,
    cond = not vim.g.vscode,
  },
  {
    'fannheyward/telescope-coc.nvim',
    config = function ()
      require('telescope').load_extension("coc")
    end,
    cond = not vim.g.vscode,
  },
})
```

### テーマ

これは好み。
[この辺](https://github.com/topics/neovim-colorscheme)から好きなのを選んでインストールすればOK。
とりあえず [gruvbox-material](https://github.com/sainnhe/gruvbox-material) にしてみる。
ついでに [lualine](https://github.com/nvim-lualine/lualine.nvim) も入れる。

```lua:~/.config/nvim/lua/plugin.lua
require("lazy").setup({
  ...
  -- setupの最後に追加
  { 'sainnhe/gruvbox-material' },
  {
    'nvim-lualine/lualine.nvim',
    dependencies = { 'nvim-tree/nvim-web-devicons' },
    config = function ()
      require('lualine').setup({
        options = {
          theme = 'gruvbox-material',
        }
      })
    end,
    cond = not vim.g.vscode
  },
})
```

## Rust開発環境を整える

ようやくタイトル回収。

### COCを設定する

Neovimを起動して `:CocInstall coc-rust-analyzer` を実行する。
`rustup` でコンポーネントも追加しておく。

```zsh
rustup component add rust-analyzer
```
COCはプラグインをインストールしただけなので、キーマップ等を入れる必要があるが、項目が多いので、[Example Lua configuration](https://github.com/neoclide/coc.nvim) をすべて突っ込んだ。不便なキーはあとで修正予定。
rustのプラグインも追加。

```lua:~/.config/nvim/lua/plugin.lua
require("lazy").setup({
  ...
  -- setupの最後に追加
  {
    'rust-lang/rust.vim',
    config = function ()
      -- 保存時にフォーマッターを実行する
      vim.g.rustfmt_autosave = 1
    end,
  },
})
```

とりあえず表示できたのでOK。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90538/53c9da4e-6656-6c6a-623e-a74ed95f06bc.png)

---
デバッガーの導入をしようとしているがうまくいってないのでまた明日...
[k8s] fluxでhelmとkustomizeが自動適用されるようにしてみた

## はじめに
前回はfluxを使って自動デプロイ基盤を整えました。

https://qiita.com/piny940/items/536123b1c4b1884180fe

今回は、前回導入したfluxを用いてhelmやkustomizeを自動で適用できるようにしていこうと思います。

完成品はこちらのリポジトリで公開しています。
https://github.com/piny940/infra

## 環境
lemonおよびlimeはマシン名です。VPS2台のクラスタで動かしています。
- lemon: Kagoya Cloud VPS 2コア 2GB
- lime: Kagoya Cloud VPS 2コア 2GB

- デプロイツール: kubeadm
- CRI: cri-dockerd
- CNI: Weave Net

## 前提条件
- kubernetesクラスタが動作している
- fluxがインストールされている

## kustomizationの設定
`flux/kustomizations/hello-node`に次のように記述します。
```flux/kustomizations/hello-node
apiVersion: kustomize.toolkit.fluxcd.io/v1
kind: Kustomization
metadata:
  name: hello-node
  namespace: flux-system
spec:
  interval: 10m0s
  path: "./kubernetes/hello-node"
  prune: true
  sourceRef:
    kind: GitRepository
    name: flux-system
    namespace: flux-system
```
`spec.path`はアプリの`kustomization.yaml`が置かれているディレクトリを指しています。

この変更をmainにpushするとアプリの`kustomization.yaml`が自動で適用されます。

## Helm Releaseの設定
今回は[ingress-nginx](https://github.com/kubernetes/ingress-nginx)をインストールするための設定を例に示します。

`ingress-nginx/helm.yaml`:
```yaml
apiVersion: source.toolkit.fluxcd.io/v1beta2
kind: HelmRepository
metadata:
  name: ingress-nginx
spec:
  interval: 1h
  url: https://kubernetes.github.io/ingress-nginx
---
apiVersion: helm.toolkit.fluxcd.io/v2beta1
kind: HelmRelease
metadata:
  name: ingress-nginx
spec:
  interval: 1h
  chart:
    spec:
      chart: ingress-nginx
      sourceRef:
        kind: HelmRepository
        name: ingress-nginx
```

HelmRepositoryではingress-nginxのchartレポジトリを指定し、HelmReleaseではリリースを定義しています。

`ingress-nginx/kustomization.yaml`:
```yaml
apiVersion: kustomize.config.k8s.io/v1beta1
kind: Kustomization
namespace: ingress-nginx
resources:
  - helm.yaml
```

`flux/kustomizations/ingress-nginx.yaml`:
```yaml
apiVersion: kustomize.toolkit.fluxcd.io/v1
kind: Kustomization
metadata:
  name: ingress-nginx
  namespace: flux-system
spec:
  interval: 10m0s
  path: "./kubernetes/ingress-nginx"
  prune: true
  sourceRef:
    kind: GitRepository
    name: flux-system
    namespace: flux-system
```

これらの変更をmainにpushすると、ingress-nginxがインストールされます。

## 最後に
今回はfluxを用いてhelmやkustomizeを自動で適用できるようにしました。次回はDockerイメージのpushも自動でできるよう基盤を整えていきたいと思います。

## 参考資料

https://fluxcd.io/

https://qiita.com/ipppppei/items/2c79c9016c7b848762c9
pomera OTG 調査

pomera debian で OTG したい。

(随時更新します)

## 現段階の予想
- USB 2.0 Powered ハブしかダメっぽい
  - DM200 は USB Micro B
  - DM250 は USB Type-C
  なので、 USB Micro B (USB 2.0) ハブに DM250 なら Type-C に変換するのと良いと思う

## 試して OK

### RouteR 充電可能4ポート スリム OTG ハブ + USB-C 変換 
- https://route-r.co.jp/?p=2376
- https://ja.aliexpress.com/item/4001276591525.html
- Brainux でも認識したやつ
- Micro B を C に変換する必要がある
  - 今回試したのは AliExpress で買った USB-A を Micro B/C に変換するやつの先っぽを利用
  ![otg.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2821068/c5344094-3011-ff77-428b-45de0deaa64d.jpeg)


## 試して NG

### USB C 直刺し
- マウスやオーディオなど
- USB に電源が供給されていないので NG

### UGREEN USB-C Multifunction Adapter
- https://www.amazon.co.jp/gp/product/B0BR3M8XHK/
- 電源供給は可能であるが、USB は認識しない
- USB 3.0 のコンボ タイプはだめっぽい
Okta - サインインを自社拠点IPからのみに制限する

# はじめに

ポリシー関連の設定について、以下の全5回で記載していきたいと思います。

- サインインを自社拠点IPからのみに制限する
- サインイン時にMFAを求める
- サインイン時にMFAを求めないパターンを残す
- サインイン時にリスク判定を追加する
- 特定のアプリのみ自社拠点外からのサインインを許可する

今回は、自社拠点のグローバルIPアドレスで接続制限をしたい場合の設定について記載していきます。

実施する内容は以下の通りです。
- Network Zoneを設定する
- Global Session Policyを設定する
- Authentication Policyを設定する

# 設定の方針

接続制限については、Global Session PolicyではなくAuthentication Policyで制御していきたいと思います。
今後アプリ単位でアクセスを制御することを考慮すると、アプリ単位で設定できる Authentication Policy で設定した方が設定が分かりやすいためです。


# Network Zoneを設定する

自社拠点のグローバルIPをOktaに登録します。
Security > Networks > Add Zone から、グローバルIPは Gateway IPs に記載してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/6b213bcc-e533-1930-fcc5-c75e480b3ef1.png)

Save すると Networks の一覧に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/8409ceed-9ff0-0775-ce45-3c0aae115d24.png)


# Global Session Policyを設定する
## 自社用デフォルトポリシーを作成

OktaのGlobal Session Policyのデフォルトルールは、細かな設定変更ができないため自社用のデフォルトポリシーを作成します。

ポリシーの名前と対象とするグループを指定します。
今回は全ユーザーを対象として Everyone を指定しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/719d6d52-5183-8311-c863-348bed090e74.png)

Create policy and add rule を選択すると、ポリシーのルールを追加する画面に遷移します。

## ルールの作成

名前だけ指定してその他は初期値のままにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/e7eba693-2805-8304-1877-08cea71ef86c.png)


Create Rule を選択すると、既存のポリシーの一番下かつDefault Policyの上に追加されます。
黒塗りは無視してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/f1046339-ea07-a1b5-6616-ca59ae10d847.png)



# Authentication Policy を設定する

Default と記載のあるAuthentication Policyの設定を変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/b632f8bd-1a24-11d5-9598-96b1760a0450.png)

## 自社拠点IPを許可するルールを追加

User's IP is で In any of the following zonesを指定し、自社拠点IPを指定したNetwork Zoneを設定します。

今回は簡略化のためパスワード認証のみを想定して、User must authenticaticate with は Password に変更しています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/97ff7328-094d-028a-65ab-085a86552523.png)


Save すると Rule に追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/d2066077-0064-2d1f-d21f-5349818919a2.png)

## Catch-all Rule の設定変更

Access is を Denied に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/caa0e6ef-70ca-8e30-4568-2450f87ed464.png)

最終的なルールとしてはこんな感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/350435/5f62e9f9-6a01-e641-fb59-8618f482ef38.png)


# おわりに

Authentication Policy の デフォルトポリシー は アプリを作成した際にデフォルトで割り当てられるポリシーです。

デフォルトポリシーの設定を自社拠点IPからに制限しておけば、作成されたアプリへのアクセスはすべて自社拠点IPからのみに制限されることになります。

今回はここまで。ありがとうございました。
次回は今回の設定にプラスし、MFAの設定を入れていきたいと思います。
JetBrain Goland で、 export GOPROXY=direct を有効にする方法



```
go env -w GOPROXY=direct
go mod tidy
```


をTerminalで実行すれば、Moduleは直接取れるので、基本的にはそれでOK。

`go mod tidy`では、`$GOPATH/pkg/mod` にパッケージが保存されるようになっている。


ただし、Goland側には、Vendoringという仕組みがある。
これは、プロジェクト内の vendor ディレクトリに格納されている依存関係パッケージのみを使用してアプリケーションを構築するというものだ。侵食耐性のある構成にするためだろう。


まず、
Settings > Go > Go Modules
に行く。


そこで、以下のように、
Environmentに、`GOPROXY=direct`を設定しておく。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/309507/d6c57ecb-aaf0-b788-fae2-3095b518ee3b.png)

これで、Apply→OKとすると、re-download が始まった。

ちなみに、写真にあるように、

- [x]  Enable vendoring support automatically

としていると、Vendoringが自動で有効になる。


## 余談

こちら側で、手動でVendoringしておきたい場合は、

```
go mod vendor
```

で、./vendor に `$GOPATH/pkg/mod`の内容のコピーをとり、こちらを参照するようにできる。

Golandだけでなく、Go自体のランタイムもこちらのモジュールを参照して、buildおよびtestを実行するようになる。
【SCSS】@useと@importの違い

# はじめに
見るわりに説明できなかったので、調べてまとめることにしました。

# 結論
どちらも分割されたファイルを読み込むときに使いますが、@useは@importの使いづらい部分を補完したもの。現在@importは公式非推奨となっています。

# 具体例
style.scssというファイルに_variables.scssと_common.scssを読み込むと想定します。

### ① どこに何を定義したかの分かりやすさ

#### @importで書いたもの
```scss:style.scss
@import 'variables';
@import 'common';

.content {
  background: $color;
}
// $colorってどこで定義しとったっけ
```

#### @useで書いたもの
```scss:style.scss
@use 'variables';
@use 'common';

.content {
  background: variables.$color;
}
// variablesに$colorの記述がある
```

### ② グローバル汚染の防ぎやすさ
もし参照先がこの様に書かれていた場合……。
```scss:_variables.scss
$color: #fff;
```
```scss:_common.scss
$color: #000;
```
@importだと読み込み順が後のcommonに上書きされ、backgroundは#000が反映されます。@useは変数や関数等をカプセル化してくれるため、variablesにある#fffを持ってくることができます。

### ③ その他
他にもコンパイルにかかる時間が@importの方が長くなりやすい、CSSやスタイルシート名の重複リスク等で違いがあるようです。詳細については参考サイトをご覧ください。

# おわりに
今更感なのですが、特に理由がなければ@useを使おう。


# 参考
- 「【Sass】@importは廃止！@use の基本的な書き方とベストプラクティス」
https://weseek.co.jp/tech/3898/
- 「Sassの@importの問題点を理解する。」
https://note.com/minamitakao_web/n/ne1ae75772e0a
- 「@use と@forwardの違い、使い分けについて(Sass)」
https://zenn.dev/taketooon/articles/fa77fcbd3ba4b9
Gitでレポジトリを作った直後にブランチを切ろうとしてエラーになる場合

レポジトリ作成直後にブランチを切ろうとして次のようなエラーが出る場合があります。
```bash
> git checkout -q -b new-branch --no-track HEAD
fatal: 'HEAD' is not a commit and a branch 'new-branch' cannot be created from it
```

## 原因
このエラーメッセージは、Gitが現在のHEAD（最新のコミットを指すポインター）を特定のコミットとして認識していないことを示しています。つまりまだコミットがないためにエラーがになっています。

## 解決方法

適当な変更を行って最初のコミットを作ってやれば良いです。

```bash
git add .
git commit -m "Initial commit"
```

あるいはGithubで先にレポジトリを作成する場合は、作成時にREADMEなどを含めるよう選択すれば、Githubが自動でInitial commitを作成してくれます。
LaravelでのMVCを理解する

## はじめに
Laravel は何ですか？？
Laravel は、MVC Web アプリケーションを開発するために PHP で書かれた無料のオープンソース Web アプリケーション フレームワークです。Laravel は、拡張可能な PHP ベースの Web サイトや Web アプリケーションを大規模に作成するのに役立つ使いやすい Web フレームワークです。
## MVC ARCHITECTURE
Laravel フレームワークは、Web アプリを作成するための MVC アーキテクチャ パターンを促進します。 このパターンは、スケーラブルで保守可能な Web アプリを構築する方法を指定する一連のルールを指定します。
Laravel MVC パターンは、開発者が非構造化コードに秩序と一貫性をもたらすのに役立ちます。 MVC アプローチにより、小規模および大規模な Web アプリケーションの開発も容易になります。
## MVCの理解
M = 「Model(モデル)」
V = 「View(ビュー)」
C = 「Controller(コントローラ)」 　をそれぞれ意味しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624875/84acd2fc-6a62-659c-2074-0014962dcd54.png)
## Model(モデル)
「モデル」は、コード ベース内の現実世界のインスタンスまたはオブジェクトを表現したものです。 データベースへのアクセス(登録/更新/削除/検索の実行)や、データの加工等々、データにまつわる処理全般を請け負うのがModelです。
**Modelのファイル名は必ず最初の一文字は大文字で作るのがルールとなります。**
Laravel では、モデルは通常、データベース内の列と一致するプロパティを持つクラスです。
たとえば、データベースでは、イベントには次のプロパティがあります。
- 名前(name): イベントの名前
- 日付(date): イベントの日付
- 開始時間 (time): イベントの開始時間
- リンク(link): イベントリンク

以下のようにModelファイル内でEventクラスを宣言します。
イベント モデルに、以下に示すように $fillable プロパティを追加します。
```ruby:Event.php

class Event extends Model 
{
	protected $fillable = [
		'name',
		'date',
		'time',
		'link',
	];

```

## View（ビュー）

「ビュー」は、ユーザーがアプリケーションと対話するためのインターフェイスを表します。 Webアプリケーション開発には動的なWebサイトを表示することが必須となります。Modelが処理したデータを、どのような形で表示するかをViewで指定します。**Laravelでは、すべてのビューはresources/viewsディレクトリに保存されます。**
「イベント」ビューを作成しましょう。 プロジェクトの resource/views ディレクトリに viewevent.blade.php ファイルを作成します。 そこに以下を追加します。
```ruby:viewevent.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
    <title>View Products | Product Store</title>
    <!-- Styles etc. -->
</head>
<body>
    <div class="flex-center position-ref full-height">
        <div class="content">
            <h1>Here's a list of available products</h1>
            <table>
                <thead>
                    <td>Name</td>
                    <td>Date</td>
                    <td>Time</td>
                    <td>Link</td>
                </thead>
                <tbody>
                    @foreach ($allProducts as $product)
                        <tr>
                            <td>{{ $event->name }}</td>
                            <td class="inner-table">{{ $event->date }}</td>
                            <td class="inner-table">{{ $event->time }}</td>
                            <td class="inner-table">{{ $event->link }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

```
上記の{{ *** }}には、Modelで処理され、Controllerから渡された値が入ります。
## Controller（コントローラー）
ユーザーがアクションを実行すると、「コントローラー」はそのアクションを処理し、必要に応じてモデルを更新します。Viewを通して受け取ったユーザーからの入力を、Modelに渡して処理を依頼します。また、Modelが処理したデータを、Viewに渡して表示を依頼します。
app/Http/Controllers ディレクトリに EventController.php という新しいファイルを作成します。
The `index` method:
```ruby:EventController.php

public function index()
{
	$event = \App\Event::all();

	return view('viewevent', ['allEvents' => $event]);
}

```
## 最後に
- e-commerce Web サイトにアクセスすると、表示されるさまざまなページがビュー レイヤーによって提供されます。
- 特定の製品をクリックして詳細を表示すると、コントローラー層がユーザーのアクションを処理します。
- これには、モデル レイヤーを使用してデータ ソースからデータを取得することが含まれる場合があります。
- その後、データはまとめられてビュー レイヤーに配置され、ユーザーに表示されます。 洗い流して繰り返します。
ChatGPTにカントリーマァムが0枚になるのは何年か聞いてみた

## この記事について
この記事は [SUPER STUDIO Advent Calendar 2023](https://qiita.com/advent-calendar/2023/superstudio) の10日目の記事になります。
そして出オチです。すみません。

## 衝撃のニュース
2023年12月9日、とうとうカントリーマァムが来年の4月から、一袋19枚→18枚になるとのニュースが流れ、カントリーマァム界隈に衝撃が走りました。

https://news.yahoo.co.jp/articles/0a290d3625fe1ea8c7753acc7880f0ea4dcaeb74?utm_source=pocket_saves

少しずつ一袋の枚数が減っているとしばしばネット上で話題になりますが、このまま減り続けたらどうなってしまうのでしょうか。

## 不安に駆られてChatGPTに聞いてみる
このままでは本当に「**カントリーマァム2040年問題**（後述）」が発生してしまうのか、不安で不安でグルグルと考えてしまい、カントリーマァム１枚のカロリー48kcalくらいは消費してしまいました。
私は有事に備えるべきと考え、ChatGPT（GPT4）の叡智を拝借することにしました。

![スクリーンショット 2023-12-09 22.24.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19193/daea11ca-0954-17c8-d310-2819fa15d36c.png)

2016年の「1枚の重さが変更された」とかまで調べてくれるのは、さすがのChatGPTです。

![スクリーンショット 2023-12-09 22.24.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19193/d8ffff01-7bbe-b783-bfec-2c58784d00c2.png)

なんということでしょう。2052年がデッドラインと示されてしまいました。

![スクリーンショット 2023-12-09 22.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19193/6839c919-f2bd-96c9-2f55-2b3b93887315.png)

グラフにすると最後の審判までのカウントダウンが一目瞭然ですね。

![スクリーンショット 2023-12-09 22.26.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19193/5d4ab5f1-c456-c9db-d921-6a50413d187d.png)

あの忌まわしき2040年問題まで認知しているとは、さすが最新のAI。

![スクリーンショット 2023-12-09 22.26.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19193/fecf624f-1d4e-7dc2-d12c-4600e1625f1c.png)

…え、ジョークなの？

## ジョークでは済まされない

もしただのジョークだったとしたら、この投稿自体が無意味になってしまいます。
この問題が起こりえるかもしれない未来だと教えてあげましょう。

![スクリーンショット 2023-12-09 22.31.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19193/44236e05-ac02-0449-774d-a7656a2c918a.png)

「不 likely」とか言い出して、動揺しているようですね。

![スクリーンショット 2023-12-09 23.00.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19193/59f5e533-571c-ee3d-4e7d-4f27c28a22e3.png)

意外としつこい。

![スクリーンショット 2023-12-09 22.32.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19193/d1f0031f-3d92-a3cb-be18-c0c65eeb3269.png)

はい、論破。

## おわりに
ここまで読んでくれた人、正直すまんかった。
こんなことのためにChatGPTに課金してるわけじゃないんだ…。
実はもう少しちゃんとした需給分析をやってもらおうとしたのですが、ChatGPT先生からは正論パンチをもらいました。

![スクリーンショット 2023-12-09 23.10.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19193/6dd1958c-7515-96c3-5f22-82db8cfe691d.png)

ちなみに弊社が提供している統合コマースプラットフォーム「ecforce」では、データドリブンな販売施策を助けるための分析機能も提供されています（唐突な会社組織人ムーブ）。

[ecforceで行えるデータ分析](https://support.ec-force.com/hc/ja/articles/900005809403-ecforce%E3%81%A7%E8%A1%8C%E3%81%88%E3%82%8B%E3%83%87%E3%83%BC%E3%82%BF%E5%88%86%E6%9E%90)
Amazon CodeWhispererがCloudFormationに対応したので試してみた

日頃、CloudFormationにはお世話になっています。

AWS re:Invent 2023にて、
Amazon CodeWhispererがCloudFormationに対応したとありましたので試してみます。

# VSCodeとCodeWhispererの連携
1. VSCodeでCodeWhispererを利用するためには、[AWS Builder ID](https://profile.aws.amazon.com/)が必要です。
1. VSCodeの拡張機能でAWS Tool kitをインストールします。![スクリーンショット 2023-12-08 0.35.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986137/5f52938b-5200-87ee-c5c4-5b5fcd97308d.png)
1. CodeWhispererを使用するために、AWS Builder IDでログインします。
![スクリーンショット 2023-12-08 0.43.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986137/85b7490e-a808-136d-7fca-13adab37a26a.png)

# CloudFormationのコードを書いてみる
1. CloudFormationコードを記載するtemplate.ymlを作成します。
1. コメントアウトを利用して作成したいリソース(今回はVPC)を伝えます。<br>Enterを押して改行をするとコードが提案されました！![スクリーンショット 2023-12-09 23.26.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986137/9b21849a-9712-f2c8-df3b-83b7e074c854.png)



1. Tabキーを押すと、コードが確定します。![スクリーンショット 2023-12-09 23.24.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986137/adc4d1d3-8282-fa0c-83b2-d8b1187eee90.png)



1. この調子でEnter + Tabキーを押していくと、VPCに関するコードが提案されました！![スクリーンショット 2023-12-09 23.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986137/daba12d1-36dc-5551-605f-e13584fda64b.png)


# CloudFormationでVPCを作成してみる
せっかくなので、CloudFormationで実際に提案されたコードを用いてVPCを作成してみます。
1.提案されたCloudFormationコードを用いてCloudFormation Stackを作成します。
![スクリーンショット 2023-12-08 1.03.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986137/6d8709d4-f882-8dd6-8f29-ddd6ff3be128.png)パラメータも準備されているので、VPCのCIDRを入力します。![スクリーンショット 2023-12-08 1.05.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986137/1d65e0ca-f349-99fa-ada9-2df2eb5b3709.png)
スタックの作成が完了しました。
![スクリーンショット 2023-12-09 23.19.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986137/b26c05aa-321b-6d23-e077-a92eb90c9d49.png)


2.VPCのコンソールから作成されたリソースを確認します。<br>指定したCIDRブロックでVPCが作成されています！
![スクリーンショット 2023-12-09 23.18.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2986137/4a395a8d-7342-a35a-e098-27554a635b84.png)


# まとめ
今まで公式ドキュメントを見ながらCloudFormationテンプレートを記述していました。
作りたいリソースをコメントアウトで指定するだけで、コードが生成されました！
しかも、パラメータもバリデーション付きです！！
これはとても便利な機能アップデートだと感じました。
re:Inventではまだまだたくさんのアップデートが発表されたので、どんどん触って試していきたいと思います。
(Python)標準モジュールだけで公開APIからGET

## はじめに
Requestsライブラリ使わないで公開API叩きたい
subprocessでcurlすればいいんじゃないか
## コード
とりあえず画面
```
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テスト</title>
</head>
<body>

<p>ホスト名/パス/クエリでGETリクエスト送ります</p>

<p>
<label><input type="text" id="hpq" placeholder="宛先"></label>
<input type="button" value="GET" onclick="ButtonClick(this)">
</p>

<p id="msg"></p>
<script type="text/javascript">

function ButtonClick(button){
	let xhl = new XMLHttpRequest();
	let formData = new FormData();
	formData.append("hpq", encodeURIComponent(document.getElementById('hpq').value));
	xhl.open('POST', 'request.py', false);
	xhl.setRequestHeader( 'Content-Type', 'Multipart/form-data' );
	xhl.send(formData);
	document.getElementById('msg').innerText = xhl.response;
}
</script>

</body>
</html>
```
フォームに入れた宛先をrequest.pyにPOST→request.pyの中でGET投げるって感じで...
![スクリーンショット 2023-12-09 231420.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3225408/bdb03b7a-03b0-06f9-9234-71e2cda8b55d.png)

Pythonはこれ
pacモジュール（自作パッケージだからpacとかいう命名の安直さ!)の中身は[こないだの記事](https://qiita.com/mary_sue_act_2/items/b89c7efa26f424b336a6)の使い回し
標準入力の解析の命名がmake_propertyってどうなんだろうね
```request.py
#!/usr/local/bin/python3.9

import pac
import subprocess

class Request:
	def __init__(t):

		#プロパティにGETパラメタセット
		pac.make_property(t)
		#コンストラクタ内でgetメソッド叩く
		t.get()

	def get(t):

		try:
			res = subprocess.run('curl -X GET ' + 'https://' + t.hpq, shell=True, encoding='utf-8', check=True, stdout=subprocess.PIPE)
			Request.out(res.stdout)
		except subprocess.CalledProcessError as err:
			Request.out('あ～コケてますね\n' + str(err))

	def out(t):

		print('Status: 200 OK')
		print('Content-Type: application/json\n')
		#json.loadsの方がいいかも、叩くAPIの仕様による感はある
		print(t)
		exit()

#インスタンス化
Request()
```
試しに
zipcloud.ibsnet.co.jp/api/search?zipcode=1000000
で郵便番号から住所取る
![スクリーンショット 2023-12-09 232200.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3225408/96183be4-e009-03c3-50ed-065f221f92f2.png)

POSTの時とかトークン必要な時もこれの拡張でいけるね
~~作るのがめんどくさかっただけ~~
GitHub Actions で multi-platform container image を build して ECR に push する

AWS の EKS や ECS では x86_64 も Graviton の arm64 も選択可能です、どちらでも使うかもしれない Container image は multi-platform 対応の image にしておきたいなということで GitHub Actions で build & push を行えるようにしてみました。

```yaml
jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      # https://github.com/docker/setup-qemu-action
      - name: Setup QEMU
        uses: docker/setup-qemu-action@v3

      # https://github.com/docker/setup-buildx-action
      - name: Setup Docker Buildx
        id: buildx
        uses: docker/setup-buildx-action@v3

      # https://github.com/aws-actions/configure-aws-credentials
      - name: Get AWS Credentials
        id: creds
        uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: ${{ env.AWS_ROLE_ARN }}
          aws-region: ${{ env.AWS_REGION }}

      # https://github.com/docker/metadata-action
      - name: Docker meta
        id: meta
        uses: docker/metadata-action@v5
        with:
          images: ${{ steps.creds.outputs.aws-account-id }}.dkr.ecr.${{ env.AWS_REGION }}.amazonaws.com/${{ env.REPOSITORY }}
          tags: |
            type=ref,event=tag
            type=sha

      # https://github.com/aws-actions/amazon-ecr-login
      - name: Login to Amazon ECR
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v2

      # https://github.com/docker/build-push-action
      - name: Build and push
        uses: docker/build-push-action@v5
        with:
          context: some/where
          platforms: linux/amd64,linux/arm64
          push : true
          tags: ${{ steps.meta.outputs.tags }}
          provenance: false
```

実際には AWS Lambda を container image で実行しようと思って、その際 x86_64 でも arm64 でも実行できるようにしてみようと multi-platform image を試したんだけど AWS Lambda は multi-platform image をサポートしていませんでした... :cry:

てことで `docker/metadata-action` と `docker/build-push-action` を `linux/amd64` と `linux/arm64` それぞれ用に書きましたとさ。めでたしめでたし。

- [docker/setup-qemu-action](https://github.com/docker/setup-qemu-action)
- [docker/setup-buildx-action](https://github.com/docker/setup-buildx-action)
- [aws-actions/configure-aws-credentials](https://github.com/aws-actions/configure-aws-credentials)
- [docker/metadata-action](https://github.com/docker/metadata-action)
- [aws-actions/amazon-ecr-login](https://github.com/aws-actions/amazon-ecr-login)
- [docker/build-push-action](https://github.com/docker/build-push-action)
terraform で選択的文字列生成のイディオム

# tl;dr

- [terraform Advent Calendar 2023](https://qiita.com/advent-calendar/2023/terraform) の9日目の記事です
- 誰も書かないみたいなので手軽な記事でお茶を濁します
- このくらい短い記事でいいと思うんだよねって例ということでひとつｗ
- terraform でよく使うイディオムとして文字列の選択的組み立て

# コード

```hcl
resource "r" "x" {
    query = join(" ", compact([
      "string",
      can(each.value.key) ? "q:${each.value.key}" : "",
      can(each.value.key) ? "" : "h:${each.value.other_key}",
    ]))
}
```

- query というパラメータを文字列代入（joinの結果はstringなので）
- join() で " "（半角スペース）を区切り文字にして文字列を連結。第二引数にはlistが要る
- compact() で list の中の値がない value を詰める（"" や null があると連結時に余計な隙間が出来るので list を詰めるの大事）
- [] はカンマ区切りで list ができる
    - if 文のない HCL で三項演算子を使って then と else を表現（片方は "" になるけど compact() で詰められる）
    - can() の仲間に try() がある。変数の値が存在したらそのまま使うなら try() のほうが簡潔（この例では出力したい値が違うので can() を使っている）
    - 実際のコードは for_each で回しているので each があるけど察して
    - each.value.key は存在したりしなかったりする。other_key は必ずある、みたいな前提で書いてある（仕様によっては other_key はチェックするべき） 
- 長くなりがちなので例のように改行しておくと、追加変更が容易なところにも注目して欲しい
- ちなみに for_each で回さないなら locals に切り出したほうが見やすいよ（たぶん）
【ServiceNow】こんなカタログプロジェクトは失敗する（カタログデザインアンチパターン）


本記事は、Qiita ServiceNow アドベントカレンダーの参加記事11日目です。
ServiceNowのカレンダー | Advent Calendar 2023 - Qiita

http://qiita.com/advent-calendar/2023/servicenow

---
# はじめに
kero4と申します。
IT技術者歴は20年以上、ServiceNow歴はMadridから使用し始めて、現在5年目になります。

ServiceNowの案件では「既存の紙/Excel申請をカタログアイテムにして、ServiceNowのポータルサイトから申請できるようにしたい」と言う話はよく聞きますが、なぜか炎上しがちです。
今回は過去に私が経験したカタログプロジェクトの失敗談を面白可笑しくお伝えしたいと思います。

----
# そもそも、サービスカタログとはなんぞや
生成AIチャット様に、「ITILのサービスカタログについて、わかりやすく教えて」と聞いたら以下のように回答してくださいました。

> サービスカタログとは、IT部門が提供しているITサービスの一覧です。ITサービスとは、コンピューターやインターネットなどのの機器やシステムを使って、仕事や学校などで必要なことをするためのものです。例えば、メールやチャット、写真や動画の保存、ゲームや音楽の聴き放題などがITサービスにあたります。
> - サービスカタログには、以下のような情報が書かれています。
>   - サービスの名前：ITサービスをを簡単に呼べるようにした名前です。例えば、「メール」や「チャット」、「写真」などです。
>   - サービスの内容：ITサービスが何をするかを説明した文章です。例えば、「メールは、電話や手紙で連絡するための便利なな機能です。メールを使うと、自分から相手にメッセージを送ったり、相手から自分にメッセージが届いたりできます。」
>   - サービスの利用条件：ITサービスを使うときに必要なことや注意すべきことを書いた文章です。例えば、「メールは無料で使えますが、一定時間ごとに送受信できる回数に制限があります。また、迷惑メールやウイルスメールに注意してください。」
>   - サービスの提供者：ITサービスを提供している会社や団体の名前です。例えば、「Microsoft」や「Google」、「Yahoo! Japan」などです。
>   - サービスの利用方法：ITサービスを使うときに必要な手順や操作方法を書いた文章です。例えば、「メールを開くには、ブラウザからGMailにアクセスしてください。次に、「新規作成」ボタンをクリックし、「送信先」と「件名」と「本文」を入力してください。最後に、「送信」ボタンをクリックすれば完了です。」
---
あれ？申請の「し」の文字も無いですね。
と言うか、この説明だとナレッジっぽい。
実はServiceNowのサービスカタログは、カタログで定義されたサービスを要求するものです。
だから申請されたチケットはRITM（リクエストアイテム）になります。

---
ITILのサービスカタログ管理で大事な点としては、以下になります。
> 提供中のITサービスに関する正確な情報を含むサービスカタログを**利害関係者と合意して作成し、それを継続的に維持すること** です。サービスカタログ管理を行うことで、サービス消費者は自分に合ったサービスを選択し、利用することができます。

大事なことなのでもう一度言います。

**利害関係者と合意して作成し、それを継続的に維持すること** です。

決して相手の言うこと全てをそのまま実装したり、作った後はメンテせず作りっぱなしの状態ではいけません。
前置きが長くなりましたが、それを踏まえてアンチパターンを紹介します。

---
# 新規登録、変更、削除を一つのカタログアイテムで行う

![スクリーンショット 2023-12-09 211624.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844711/7f09d338-c5e1-7dce-3961-c0d623e83361.png)

作成時は良いかもしれませんが、UIポリシーやワークフローの分岐などのテストが複雑となり、改修時の保守性は落ちます。
共通の入力項目はVariuable Setを使用し、なるべく、1つの申請が1つのアイテムとなるように調整しましょう。

---
# 複雑なワークフローのまま実装する

![スクリーンショット 2023-12-09 213632.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844711/2c9705e2-e594-fffc-3d08-b37cab9223ab.png)

引き戻しはキャンセルして再申請、差し戻しも再申請。
これの何が不満でしょうか？

ServiceNowポータルのOOTB画面では一度入力したリクエストアイテムの再編集画面はありませんし、そもそも、差し戻しが起こるような、入力フォームが問題なので見直すべきです。

それでも不満と言うなら、表示中のリクエストアイテムをコピーして再申請するウィジェットをカスタマイズで作成することを推奨します。
決してワークフローで対応してはいけません。

---
# フォームの入力内容に応じて動的に自動計算(小数点あり)

![bunbougu_dentaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844711/bc2ca308-a8a9-7215-dfde-72d0853b6284.png)

JavaScriptは少数計算が苦手なので、このような要件は見直すべきです。
それでもと言うのでしたら、丸目誤差対策を忘れずに行いましょう。

---
# Customer Service Management (CSM)で使う

![Thumbnail-CL-CRC-BA-054.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2844711/0113e61d-88ca-c956-4322-4e8081935094.png)

CSMではExternal Userとのやり取りはCase上で行うことが原則です。
External UserがCatalog Itemの内容を見るためにはCaseのCommentへの転記などカスタマイズが必要になります。
一筋縄ではいかないため、お勧めできません。

新規の案件で外部顧客からの申請を受け付けしたいという要件だけでしたら、そもそも選定する製品が・・・おや、誰か来たようだ。

---
# ！
> 　∧||∧
（　 ⌒ ヽ
　∪　　ﾉ
　　∪∪ 

---
# 最後に
往年の鉄●さんスタイルでオチを持ってきましたが、いかがでしたでしょうか。

過去、「ServiceNowはワークフローシステム＝申請システム」と勘違いされて、（特にCSM案件で）酷い目にあってきました。

私の経験を踏み台にして、皆様にはより良いServiceNowライフをお過ごしいただきたいものです。
ラズパイの初期設定（リモート接続）

ラズベリーパイのリモート接続での初期設定について記載する。

下記を参照してセットアップを実施した。
※参照して進める上で特に困ったことが出てこなかったので、下記を参照するとよい。
https://sukiburo.jp/setup-raspberry-pi/


追記
ラズパイのファイアーウォール設定についてはこちら。
https://qiita.com/shimakaze_soft/items/c3cce2bfb7d584e1fbce
https://sukiburo.jp/raspberry-pi-firewall/