この記事は「【マイスター・ギルド】本物のAdvent Calendar 2022」13日目の記事です。
はじめに
社内のSlackで、「アドベントカレンダー、何書こっかな～」とか、つぶやいたら・・・
「『テックブログ2022年度まとめ』で、いかがでしょう。ちょっとギルメンが書いてくれたものを全部引っ張り出してきて、コメントを付けて」
という地獄のような案が出てきたので、やってみました。
テックブログについて
弊社は開発会社ということもあり、常に技術を探求していかなければなりません。
開発や調査（中には趣味）で得た知識は蓄積し、将来再利用できるような状態が望ましいと考えます。
また、他社やフリーランスの方を含む開発者全体に知識を共有することで、フィードバックを期待できますし、知識を出力するには情報をまとめたり、整理される必要があり、理解が深くなります。
幸いQiitaというすばらしいサービスがあるので、全社的な取り組みとしてそこに投稿して、情報共有することにしました。
（一部、別サービスを利用）
各記事と、ひとことコメント
ということで、怒涛の全69記事の紹介ひとことコメントいきます！
PHP フレームワーク「Laravel」についての記事。
.envで環境変数を設定できるのですが、それを、決まったルールで読みこまないと、ハマるよ！？という内容。
Laravelを使うなら、超重要。
JSをあまり書かずに、スライダーを作れるという、マークアップの記事。
便利！ねこちゃんかわいい！
Laravelで、連番ではなく、ULIDを使うための方法を説明。
これも、今どきなら必須！？
JSライブラリ、face-api.jsを使って顔のパーツを検出。
さらに、画像を乗せて「トラニナル」！
Webページの制作においては、メニュー選択時などに各セクションへのスクロールは良くある実装だと思います。
そして、UXのためには滑らかにスクロールさせるのも必須。
その手法を解説します！
CSS初心者が必ずハマるであろう、flexboxの解説の基礎。
LaravelのEloquentのOR条件でハマった話。
どのような単位で、条件が有効になるのか、というのが重要。
こちらも、Laravelですが、SQLのテクニック。
NULLの並び替えについてのテクニックです。
Laravelでは、初期状態でUnitテストを実行すると、DBの内容が更新されてしまいます。
それを別DBを指定することによって、Unitテストのみ別のDBを使用する方法です。
Rustの数値型についての解説。
Rustって、整数型だと、128ビットまで扱えるんですね！
開発中に、Laravelが扱うPHPのバージョンが変ってしまって、ハマった話。
Gitのマージをリベースで運用（変な言葉）していると、よく遭遇する自体だと思います。
図付きで、丁寧に解説。
CSSのお話。
flexboxでタイル状に並べたときに、その「スキマ」をコントロールする方法。
Githubには、非推奨のバージョンのライブラリを使用していると、通知してくれるDependabot Alertsという機能があります。
プロジェクトの制約を加味しつつ、その警告を解消するフロントエンジニアの苦悩。
Nest.jsを分りやすく解説。
ディレクトリ構成が分かると、理解が深まりやすいです。
「トラニナル」では一人分の顔検出にしか対応していませんでしたが、複数の顔検出をするにはどうすれば良いかを、調査した記事。
この調査結果は、「ウサギニナル」や「サンタニナル」に活かされています！
ネイティブアプリの構築は、Flutterを使用することが多くなってきています。
アプリの下にある「タブ」のデザイン微調整の方法。
「ポインタ」はいつの時代にもハマるもの。
丁寧に解説しています。
DockerとJava、Spring Bootを使った環境構築から、シンプルなアプリの実装まで。
Gitへのコミット時に、lintを実行したい等の要望は多いはず。
git hookという方法もありますが、より扱いやすい、huskyの解説。
より良いコーディング体験（つまり、Cooding Experience略して、CX!?）には、対括弧の視認性を向上させることは必須です。
対括弧を色分けする機能が、VS Codeで標準で使えるようになりましたよ。という話。
開発者たるもの、使うツールには拘りを持ちたいもの。
カッコ良くて、多機能なターミナルアプリの紹介。
Goで、CRUDのAPIを実装。
face-api.jsで、個人を特定する方法。
学習用データの用意から説明しています。
なお、記事中に使用している写真は「濃いめ」です。
アニメーションPNGやGIFのアニメーションを再実行する方法。
gitのコマンドで使えそうなやつの一覧。
こういうのをひとつ手元に置いておくと、作業が捗るかも！？
AFrameという、ARでも使用できるJSの3Dライブラリがあります。
それを使用して、マーカー読みとり時に、ビデオや2Dコンテンツを表示する方法を調査した結果です。
マークアップをする際、ejsというテンプレートエンジンを使用することがあります。
大きなデータや、複数のページで同じデータを使用したい場合に、jsonに記載することで共有することができます。
SkyWayを使用して、ビデオ通話を実装してみた話。
gitを使っていると、「あの修正だけ今のブランチに適用したい！」と思うことがあります。
そこで、使うのが、cherry pick。
GitHub Desktopを使えば簡単！？
新しいことをするには、どうしても調査が必要になってきます。
弊社、新規事業部が実施した調査の方法とは！？
マイスター・ギルドでは、推奨ツールを決めていますが、個人の好きなツールを使用しても良いことになっています。
いろいろなツールで、git操作を比較してみた記事。
新規サービスを作る、と言っても何を作るの？となってしまいますよね。
弊社、新規事業部では日々の課題を見付けるところから始めて、新しいことにチャレンジしました。
課題が見つかったから、といって、簡単に解消できるわけではありません。
弊社、新規事業部はいろいろな実験を通じて、本当に解決できる方法を見つけていきます。
3DグラフィックスソフトMayaで遭遇する、エラーの解消方法について。
赤ちゃんの身長を計るだけなのですが、すごい数式が出てきます。
flutter、pushReplacementを使った後にpopで元の画面に戻った際の情報連携のテクニック。
カメラ画像にモザイクをかける方法。
記事では、モザイクですが、応用次第で、いろいろな加工が可能になりそう。
上記記事の後編になります。
モザイクをかけた映像をビデオ会議の映像として送信します。
（受信した画像にモザイクをかけるのではありません。）
Docker使ってますか？使ってますよね？
じゃあ、DockerイメージとDockerコンテナって説明できます？
それに答える記事。
上記記事の完結編。
モザイクをかけた動画を送信することは、できたのですが、音声が送信できていなかった。
じゃあ、音声を送信する方法は？
開発では、ベータ版のOSを使うことも、しばしばあります。
そんな時はバックアップは必須です。
私の記事。
はずかしいので、スキップしてください。
GA=GoogleAnalytics。
GA4の設定は面倒だ。ということがとても伝わってきます。
TypeScriptとSassのビルド環境の構築は、なかなか面倒なものです。
そこで、Laravel-mixという、LaravelとTypescript、sassの環境が提供されている環境を手軽に構築し、あえて、Laravelは使わない、という選択肢を提案します。
Slack使ってますか？使ってますよね？
Slackのデータをバックアップするツールを作ってみました。
APIは必要だけど、サーバは管理が面倒。
そんなときは、Lambdaです。
React.js、Next.jsのレンダリングについてまとめました。（記事タイトルのまま）
どういうときに、どの手法を使えば良いのか、という点についても、言及しています。
新規事業部による、SkyWayを使ったビデオ通話の実装の解説。
機能が充実してきましたね。
ローコードは今後のトレンドになることが予想されます。
弊社でもローコード開発環境である、Spiralについて、調査してみました。
最近はあまり聞かなくなりましたが、プログラミング言語には計算誤差というものがあります。
最近は聞かなくなったからこそ、それを知っていることが優位になります。
「Rumpの例題」を使って、計算誤差を体験します。
20個の言語での実装例付き。
Three.jsでゲームを作ってしまった記事。
200行で、3Dのゲームが作れるとは、驚きです。
Mayaでは良くあるエラーなのでしょうか。
その解消方法。
マウスカーソルをボタンの上にhoverすると、アニメーションします。
その手法の詳細な解説。
弊社では、デザインにFigmaを使用することが多いです。
Figmaでは、プレゼンテーションモードというのがあり、実際の動きをデモすることができ、プログラムの実装が不要なので非常に便利です。
マウスホバーやクリック時の動きを設定する方法を解説します。
Webでカメラを使用する場合に、インカメラとアウトカメラの切り替え方法について。
face-api.jsを使用した顔検出。
利用するモデルは、精度と速度、のバランスが難しいところです。
検出にかかる時間を調査しました。
UnityでFlutterっぽいUI実装ができるライブラリ「UIWidgets」の紹介。
システム構築において、固定IPが必要なサービスへの接続することは良くあると思います。
AWSにおいて、複数インスタンスや、Lambda、IPアドレスが変動するBeanstalkから、そのようなサービスへ接続する場合は、NAT Gatewayを使用します。
今回は、Lambdaを例にNAT Gatewayの使用方法を解説します。
プロジェクトに与えられた期間、と、ゴールに向けて、どのような技術を選択するか、というのは非常に重要な課題です。
カメラの解像度と、表示の解像度が一致しない場合（ほとんどの場合と思われますが）、face-api.jsを使用して、その座標系を補正する方法。
フロントエンドをSPAで実装したり、Next.jsでSSGしたりと、デプロイした環境でフロントエンドとバックエンドを分離して実装するケースが増えています。
フロントエンドをAmazon S3にホスティングして、独自ドメインとSSLを割り当てる方法です。
タイトルのままなのですが、爆速で実装しました。
3DソフトのBlenderも、ここ数年で操作方法も一般的になり、良く使われるようになってきました。
プロの現場では、Mayaが使われることが多いですが、この2つを比較してみました。
FastAPIとMySQLという、今後、重要になってきそうな組みあわせ。
その開発環境を、Dockerで作ってみました。
GTM(GoogleTagManager)とGA4(GoogleAnalytics4)の設定方法を丁寧に解説します。
Unityと自前のモデルを使って、ねこちゃんを検出します。
GTM(GoogleTagManager)とGA4(GoogleAnalytics4)の設定方法を丁寧に解説します。
ボタンのクリックのイベントを取得する方法です。
今回はボタンクリックですが、他のイベントにも応用がききます。
コンポーネントのCSSをどこに記載するべきか、という考察。
さいごに
よく、これだけバラエティに富んだテーマで記事を書いたなぁ、というのが正直な感想です。
社内で、全員で記事を書くことに決めたとき、乗り気じゃないメンバーもいたと思います。
しかし、実際書いてくれた記事はどれも良く、開発者にとっては、重要な知識源になっているんじゃないか、と思っています。
本当によくこれだけ書いたなぁ、とメンバーには感謝すると同時に、今後も続けていきたいと考えています。
対象とした記事について
株式会社マイスター・ギルドのOrganizationに紐づく2022年に投稿された記事（2022年12月19日時点）を対象としています。
一部、テックブログの活動外の記事も含まれます。
アドベントカレンダーの記事は対象外としています。