LoginSignup
2
0
KDDI Engineer & DesignerAdvent Calendar 2023Day 25kddi
@youtoy(Yosuke Toyota)inKDDI株式会社

アドベントカレンダー用の記事を書くのをきっかけに新しい技術・デバイスなどに触れていった話（扱った技術についての振り返りも）【KDDI Engineer&Designer-2】

Last updated at Posted at 2023-12-25

はじめに

この記事は KDDI Engineer & Designer Advent Calendar 2023 で、25日目の記事です。

会社での仕事は、カレンダータイトルにある Engineer / Designer のどちらでもないのですが、「社内の担務によらず、アドベントカレンダーの記事を書いていきましょう！（＋ 仕事絡みの話でなくても OK）」という話がありました。
それで今年の初日に、以下の記事を書いていました。

●「AI・機械学習を活用した体験型コンテンツ（Webアプリ）」を展示イベントで楽しんでもらった話と使った技術の補足【KDDI Engineer&Designer 2023】 - Qiita
　https://qiita.com/youtoy/items/1744fdf721b10b9600d4

そしてもう 1記事、「アドベントカレンダーというイベントが、新しい技術やデバイスを試したりする良い機会になっている」といった方向の話を書いてみようと思います。

アドベントカレンダーに関連したアウトプット

まずは簡単に「アドベントカレンダーのイベントとの関わり」みたいな話に軽く触れてみようと思います。

【余談】アドベントカレンダーの時期に書く記事数がインフレしている話

少し余談になりますが、ここ5年くらいは特に、自分にとってアドベントカレンダーの時期は普段より密度濃くたくさんの記事を書く機会になっています。

「たくさん」という話について、具体的には以下のように、この時期に書いている記事数が 2019年からなぜかインフレ中です（それ以前は、こんなにもたくさんは書いていなかったのですが...）。

そして今年は、本記事を含めて全部で 53記事を書いて公開しました。

「出たばかりの新しい技術・デバイスや気になっていたけど触れてなかった技術・デバイス」をネタにする

これだけの数を書こうとする中で、ネタにできそうな候補として「出たばかりの新しい技術・デバイス」や「気になっていたけど触れてなかった技術・デバイス」を扱えないか、と思う機会が多く出てきていました。
（記事にするネタが何かないか、気にしながらいろいろな情報を見たり、過去のメモした情報などを見返したりして）

これだけの数の記事を書いた事例は、さすがに極端すぎると自覚してますが、そのような極端な数の話でなくても、アドベントカレンダーのために記事を書こうとすると、何か記事に書くネタを考えるという話は出てくるかと思います。
そのような中で、「出たばかりの新しい技術・デバイスに触ってみて、その話を記事にする」とか、「気になっていたけど、触れないままでいた技術を試してみる機会にする」というのは、記事を書くネタもできてちょうど良い内容の 1つになるかなと感じています。

今年の記事を書く中で初めてふれたものなどをピックアップ

そのように、アドベントカレンダーを上記のような内容の後押し・きっかけにした事例を、以下で具体的に書いてみようと思います。

その振り返りを進めるために、見返す材料になるリストを作ってみました。
そのリストは、上で書いていた「出たばかりの新しい技術・デバイスに触ってみて、その話を記事にする」「気になっていたけど、触れないままでいた技術を試してみる機会にする」というのに該当しない内容のものも含め、今年どんな記事を書いたかという内容で、この記事の締めの後に雑ですが列挙しました。

その列挙したリストを見ながら、今回の記事のトピックである「今年の記事を書く中で、新しいものを扱った話・初めてふれたものの話」とか「気になっていたけど触れないままでいた技術試してみた話」を、ピックアップしていくことにします。

扱った技術などの列挙

まずは、今回のトピックに該当する記事に関して、内容に関するキーワード・簡易な説明を箇条書きで書いてみます。
書き出してみたら割と数があったので、少しカテゴリ分けをしつつ記載してみました。

  • ハードウェア・デバイス系
    • Pixel端末を USB接続の Webカメラ（UVCカメラ）にできる機能
    • ダイソーのケーブル
      • USB接続の人感センサーケーブル
      • スイッチ付Type-Aケーブル
    • Protokolアプリを使った Gamepad の入力をモニタリング
  • AI・機械学習関連
    • Azure OpenAI Service関連
      • DALL-E 3 を使った画像生成
      • GPT-4 Turbo（gpt-4-1106-preview）関連
      • Azure AI Studio のモデルカタログ
    • 入力したキーワードに合わせた SVG画像を生成してくれるサービス「SVG.io」
  • ブラウザ関連： リアルタイム通信・ビデオ処理系
    • Vonage Video API を使ったビデオチャット実装
    • 「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という実装に関する話
    • ブラウザのタブ間でのリアルタイム通信
      • Broadcast Channel API
      • Web Storage API の localStorage（通信用に使う話）
  • ブラウザ関連： 描画・アート・アニメーション処理系
    • p5.js 用のライブラリ「p5.brush」
    • Babylon.js Playground の Particle Editor やパーティクル関連の処理
    • アニメーション・イージング用のライブラリ「Tween24.js」
  • ブラウザ関連： その他
    • ブラウザでスポイトツールを呼び出せる「EyeDropper API」
    • アルペジエーターを JavaScript で扱う話
    • 人の知覚特性を考慮した色の指標「CIE DE2000」と JavaScriptライブラリ「DeltaE」
  • その他
    • enebular の新機能のデータストア
    • toio Do の v1.5 の新機能（外部拡張機能の読み込み）

書き出してみると、ブラウザ関連というか JavaScript関連のカテゴリの内容が多かった感じでした。
これらについてもう少し言及してくのですが、上でリストアップしたもの全てではなく一部をピックアップする形で、内容に触れていこうと思います。

扱った技術などの話に軽く触れていく

上で書いたリストの中からピックアップしたものについて、ざっくりと技術的な話に触れていきます。（個々の詳細は、アドベントカレンダー用に書いた記事で触れているため、ここでは短くざっくりとした内容で書きます）

ダイソーの USB給電を制御するアイテム 2つ

以下の 2つは X のポストで見かけて知った、ダイソーで今月発売されたばかりのアイテムでした。

image.png

どちらのケーブルも、USB給電で動くデバイスをつないで使う形で、手動のスイッチ/人感センサーにより、その USB給電を制御できるものです。

  • ハードウェア・デバイス系
    • ダイソーのケーブル
      • USB接続の人感センサーケーブル
      • スイッチ付Type-Aケーブル

スイッチのほうは 100円、人感センサーのほうは 300円と、低価格なアイテムです。そして、これらを使うと、手持ちの USB給電のデバイスに簡単に（USB Type-A のケーブルをつなぐだけで）機能追加できる点が魅力的でした。

Pixel のアップデートで使えるようになった機能

以下は 技術系ニュースを見て知った、12月のアップデートで提供された Pixel（※ 6以降と Fold が対象）の標準機能に関するものです。

  • ハードウェア・デバイス系
    • Pixel端末を USB接続の Webカメラ（UVCカメラ）にできる機能

image.png

自分は Pixel 6a を持っていて試したのですが、スマホを PC につなぐだけで Windows でも Mac でも特別な準備なしに使えて、とても便利な機能でした。

Azure OpenAI Service関連

以下は、11月から 12月の期間で Azure OpenAI Service で使えるようになったものを試した話でした。

image.png

  • AI・機械学習関連
    • Azure OpenAI Service関連
      • DALL-E 3 を使った画像生成
      • GPT-4 Turbo（gpt-4-1106-preview）関連
      • Azure AI Studio のモデルカタログ

3つ並んだ中の上2つは OpenAI の API では使えていたものが、Azure OpenAI Service でも（とりあえずは特定の少数のリージョン限定で）利用できるようになったものです。
3つ目は、OpenAI のモデル以外にも、Meta・Stability AI・Runway・compvis などのモデルなど、多くのモデルを扱う仕組みが提供されたものでした。

Azure OpenAI Service まわりの話は、新しい話がいろいろ出てきて、今後の動向も気になるところです。

ビデオチャットを実装できる API

今回、Qiita のプレゼントありのカレンダーに 1つだけ登録をしてみていました。以下がそれに関するトピックです。

  • ブラウザ関連： リアルタイム通信・ビデオ処理系
    • Vonage Video API を使ったビデオチャット実装

image.png

チャット・音声コミュニケーション・認証機能などを実装できる API の中の、ビデオチャットを扱える API を初めて利用して、記事を書きました。まずは公式サンプルを元にお試しをした上で、さらに、そこに画像を対象にした AI・機械学習処理を絡めてみました。
Vonage Video API を触ってみた感覚としては、規模がそれほど大きくない JavaScript のプログラムで、サクッとビデオチャットを作れた、という感じでした。

全く使ったことがなかった API でしたが、アドベントカレンダーをきっかけに良い機会ができました。

ブラウザでの描画・アート・アニメーション処理系

以下は、ブラウザで 2D・3D の描画ができる JavaScriptライブラリ関連の話です。

image.png

  • ブラウザ関連： 描画・アート・アニメーション処理系
    • p5.js 用のライブラリ「p5.brush」
    • Babylon.js Playground の Particle Editor やパーティクル関連の処理
    • アニメーション・イージング用のライブラリ「Tween24.js」

そういったものの中で、気になっていたけれど触れてなかった、以下を試してみる良い機会になりました。

  • 最近登場した「いろいろな道具（マーカー、鉛筆、チョーク、スプレーなど）を使って塗ったような見た目の表現ができるライブラリ」
  • 前々から触れるようになりたいと思っていた「3D描画でのパーティクル表現を作るのに、GUI上でパラメータを変更することなどができるエディタ（Babylon.js用で、ブラウザ上で使えるもの）」
  • かなり前から登場していたアニメーション・イージング用のライブラリ（他の似たライブラリは、既に試したことがあったものの、既に試していたライブラリにはない機能がありそうだったため、気になっていたもの）

上に書いた内容の振り返り

上でピックアップした内容を見ていくと、デバイス系やクラウド側・クライアントサイド側の技術と、異なる種類のものをいろいろ触るきっかけができた感じがします（技術の内容的にも、センサー利用、AI・機械学習系、ビデオ通信、2D・3D描画系など、色々と）。

普段だと、「ちょっと試して（記事にできるほどは調べたりなどせず）終わり」となったり、「気になったままで触らずにいる」などとなったかもしれない内容を、この機会に記事化できて良かったです。

まだ触れたことがなかった内容に関しては、とりあえず最初の一歩を体験しておくと、今後の利用のハードルが下がる気がします。
さらに、そこで体験していた内容を忘れてしまっても、記事化した内容を見返すことで、再度試すのが簡単になるという状況も生まれます。

このようにして、日々見かけた・気になった技術で使えるものを増やしていけるのは、役立つシーンが今後出てきそうだと感じます。

（ただ、終わったからこそこう言えるものの、進めている最中はなかなか大変だったりもしました 笑）

おわりに

この記事では、「アドベントカレンダーが、新しい技術やデバイスを扱ってみる・気になっていたけど触れないままでいた技術を試してみるという機会になっている」という話を書いてきました。

アドベントカレンダーのお祭り的な雰囲気が高まった中で、それに後押しされて勢いでアウトプットするというのは、引き続き続けていければと思っています。

2023年のアドベントカレンダー用に書いた記事の一覧 【全53記事】

以下は、2023年のアドベントカレンダー用に書いた記事を列挙したものになります。

12/1

●「AI・機械学習を活用した体験型コンテンツ（Webアプリ）」を展示イベントで楽しんでもらった話と使った技術の補足【KDDI Engineer&Designer】 - Qiita
　https://qiita.com/youtoy/items/1744fdf721b10b9600d4

●OBS Studio の新バージョン（バージョン30）で個人的に気になった部分の情報をまとめる【完走賞ゲット-1】 - Qiita
　https://qiita.com/youtoy/items/0cd508187c4d55ffb8e1

12/2

●メガネユーザーの Meta Quest 3 利用が快適に！： Zenni の「Meta Quest 3用 VR度付きレンズ」【ベストバイガジェット2023】 - 技術とエンタメと、その他・・・
　https://yo-to.hatenablog.com/entry/20231202/1701443147

●#p5js でステキな表現がいろいろできそうな p5.brush のメモ【p5.js】 - Qiita
　https://qiita.com/youtoy/items/acb172de834a6dd91784

●人の知覚特性を考慮した色の指標「CIE DE2000」に関するメモ（DeltaE という JavaScriptライブラリの話も）【完走賞ゲット-2】 - Qiita
　https://qiita.com/youtoy/items/fb8ad2d4c95b8252673e

12/3

●p5.js・クリエイティブコーディングで絵文字を活用する【My Creative Coding - 私の作品づくり -】 - Qiita
　https://qiita.com/youtoy/items/f0122d27bda3ce0c9dc7

●ブラウザのタブ間でのリアルタイム通信を p5.js で 1つずつ試す： Broadcast Channel API【完走賞ゲット-3】 - Qiita
　https://qiita.com/youtoy/items/34520f8357cd6fe6aabd

12/4

●#NT東京 2023 の #IoTLT ブース出展で 2つの作品を出した話【IoTLT】 - Qiita
　https://qiita.com/youtoy/items/f8f99f15b048935b82a1

●ブラウザのタブ間でのリアルタイム通信を p5.js で 1つずつ試す： Web Storage API の localStorage【完走賞ゲット-4】 - Qiita
　https://qiita.com/youtoy/items/908b8321c32e43a441b5

12/5

●Microsoft MakeCode for micro:bit の拡張機能についてあらためて情報を少し調べてみる【micro:bit】 - Qiita
　https://qiita.com/youtoy/items/6d42d1e24beb1283be1e

●#p5js のライブラリ「p5.brush」の仕様を少しずつ紐解いていく：ブラシについて【完走賞ゲット-5】 - Qiita
　https://qiita.com/youtoy/items/f22b43df1e3de7f60a86

12/6

●Maker Faire などのモノ作り系展示会に出した／LT発表した作品の技術の話【からあげ帝国】 - Qiita
　https://qiita.com/youtoy/items/f9e7d60e2cd8ed847e63

●#p5js の公式ページに掲載されたライブラリを見て 5つほどピックアップしてみる（2023年12月）【完走賞ゲット-6】 - Qiita
　https://qiita.com/youtoy/items/ae1853f55bb731373c5a

12/7

●「スクリーン上でブラウザのウィンドウを動かしたら描画に影響」「2つのブラウザのウィンドウの一方を動かすと他方に影響」という方向の実装作品の技術メモ【JavaScript】 - Qiita
　https://qiita.com/youtoy/items/945edb13856417c8c901

●アルペジエーターを JavaScript で扱えそうな方法を調べてみる【完走賞ゲット-7】 - Qiita
　https://qiita.com/youtoy/items/7e9acd0bb9016b067a76

12/8

●#p5js を使って 2023年の後半半年で作った作品に関し利用した技術を振り返る【p5.js】 - Qiita
　https://qiita.com/youtoy/items/8687437887f7cd23c970

●#p5js を使って 2023年の前半半年で作った作品に関し利用した技術を振り返る（一部抜粋）【完走賞ゲット-8】 - Qiita
　https://qiita.com/youtoy/items/f69d89a04fd6dd012048

12/9

●Node-RED の OpenAI用のノードで「simple-○○」というシリーズを見てみる【Node-RED】 - Qiita
　https://qiita.com/youtoy/items/f5acbafa4ebfb711ce1d

●Protokolアプリを使って Gamepad の入力をモニタリングしてみる【完走賞ゲット-9】 - Qiita
　https://qiita.com/youtoy/items/bccb2c1062aaf915805e

12/10

●LINE Messaging API・LINE Notify とガジェット・マスコットキーホルダーを組み合わせて作ったものの概要【LINE DC】 - Qiita
　https://qiita.com/youtoy/items/b8c6b834436fb5c528b7

●今年の生成AIに関する利用事例で個人的に気になったものを少しピックアップしてみる【完走賞ゲット-10】 - Qiita
　https://qiita.com/youtoy/items/c0faab215ade3f1a9881

12/11

●技術雑誌で Babylon.js 6.0 に関する記事を書くために行ったこと ＋α【Babylon.js】 - Qiita
　https://qiita.com/youtoy/items/7fe5234e8dc44d2356dd

●2023年の CoderDojo の活動で活用したデバイス・技術や作ってみたものの振り返り【CoderDojo】（Adventar） - Qiita
　https://qiita.com/youtoy/items/a38879b322ae8cf76781

●入力したキーワードに合わせた SVG画像を生成してくれるサービス「SVG.io」を試す【完走賞ゲット-11】 - Qiita
　https://qiita.com/youtoy/items/79429d79ef0cbe84527c

12/12

●ES2023 の新機能のいくつかの使いどころ・利用例を見てみる（MDNのサイトより）【JavaScript-2】 - Qiita
　https://qiita.com/youtoy/items/66d33c9a067e8f0ef33c

●p5.js と Tween24.js を組み合わせたアニメーション・イージングのお試し【完走賞ゲット-12】 - Qiita
　https://qiita.com/youtoy/items/ad2ade71d73fa2298723

12/13

●Azure OpenAI Service で DALL-E 3 を使った画像生成を手軽に試す（※ 現状は特定のリージョンでのみ利用可能）【機械学習】 - Qiita
　https://qiita.com/youtoy/items/6ccde7bfd1673b44fcf9

●p5.js と Tween24.js を組み合わせたお試し：イージングのブレンド【完走賞ゲット-13】 - Qiita
　https://qiita.com/youtoy/items/24dae2f6c946b41d9c82

12/14

●Azure OpenAI Service で GPT-4 Turbo（gpt-4-1106-preview）のモデルをデプロイする（※ 現状は特定のリージョンのみ）【Microsoft Azure】 - Qiita
　https://qiita.com/youtoy/items/659d4764799e30f65772

●スポイトツールを呼び出せる「EyeDropper API」を p5.js Web Editor上で試す【完走賞ゲット-14】 - Qiita
　https://qiita.com/youtoy/items/5ed3f76a4c841cbefc5d

12/15

●ヒーローズ・リーグ2023 のビット・トレード・ワン賞の副賞でゲットしたガジェットの仕様・特長（応募作品で使ったものと同系統のもの）【ProtoPedia】 - Qiita
　https://qiita.com/youtoy/items/d6a7926f56dadb96cc97

●p5.js の p5.Color で toString() の出力形式を指定する【完走賞ゲット-15】 - Qiita
　https://qiita.com/youtoy/items/d9223d65ab920f44da6f

12/16

●Tween24.js のイージングと p5.js との組み合わせが楽しくてさらに試す： 振幅や周期などのカスタマイズ【p5.js-2】 - Qiita
　https://qiita.com/youtoy/items/ef3707e7f1fd2c6c8918

●Pixel 6a を USB接続の Webカメラ（ドライバ不要の UVCカメラ）として利用できる標準機能のお試し【完走賞ゲット-16】 - Qiita
　https://qiita.com/youtoy/items/c318283058e88c592fee

12/17

●「Frame Library」に掲載されているパーティクル「Simple Fire」を題材に Babylon.js Playground の Particle Editor を少し学ぶ【Babylon.js】 - Qiita
　https://qiita.com/youtoy/items/6474e6b0ef4929a3efec

●生成AI の活用事例・利用例のニュースなどで気になったものをいくつかピックアップしてみた【完走賞ゲット-17】 - Qiita
　https://qiita.com/youtoy/items/49646a4eee550dc16206

12/18

●enebular のデータストア機能を初めてさわってみる（ひとまず保存を試す）【enebular】 - Qiita
　https://qiita.com/youtoy/items/a40ec9b7ea109eb5f515

●「イージング関数チートシートの関数」「p5.js の lerp()、frameCount」を組み合わせたイージングの繰り返しの実装【完走賞ゲット-18】 - Qiita
　https://qiita.com/youtoy/items/06d4ef113175463ed4d7

12/19

●UIFlow の toio用ブロック・サンプルの一覧を見てみた（2023/12/17時点）【M5Stack】 - Qiita
　https://qiita.com/youtoy/items/0cabae00373cafcb4765

●ダイソーで買った USB接続の人感センサーケーブルを軽く試してみる【完走賞ゲット-19】 - Qiita
　https://qiita.com/youtoy/items/2daf4ce37a1bfe498286

12/20

●ブラウザのウィンドウをスクリーン上で動かした時の位置の変化が Babylon.js で描画したパーティクルの数・背景の色などに影響する処理【Babylon.js-3】 - Qiita
　https://qiita.com/youtoy/items/1a4bf2fd0eef426dd4a0

●p5.js で弾む系のイージングを試したり複数のイージングを変な混ぜ方で使ったりなど【完走賞ゲット-20】 - Qiita
　https://qiita.com/youtoy/items/0c75bc3e4d9186f41ea0

12/21

●obniz とダイソーの人感センサーケーブルなどを組み合わせて簡易な仕組みを試作（人に反応して Discord に通知をとばす）【obniz】 - Qiita
　https://qiita.com/youtoy/items/62cba812927da1ee67d8

●ダイソーで買ったスイッチ付Type-Aケーブルを手持ちのアイテムと組み合わせて試す【完走賞ゲット-21】 - Qiita
　https://qiita.com/youtoy/items/a9c84b87399cd0cc0345

12/22

●Microsoft Azure AI Studio やそこで提供されているモデルのカタログをざっくり見てみる【Microsoft Azure-2】 - Qiita
　https://qiita.com/youtoy/items/7503036bb1c690dd3742

●Babylon.js Playground上のサンプルで自分が欲しい部分を ChatGPT に取り出してもらう【完走賞ゲット-22】 - Qiita
　https://qiita.com/youtoy/items/051e8e723dbd2bd72dff

12/23

●ヒーローズ・リーグのヒーローズ・ビンゴでゲットした景品の仕様を見てみる（＋ ビンゴに選んだ作品の技術方面の話）【ProtoPedia-2】 - Qiita
　https://qiita.com/youtoy/items/e14755587f61f689cc95

●toio Do の v1.5 の新機能を使って簡易に声に反応して動く toio： Microbit More の拡張機能で micro:bit のマイクを組み合わせる【完走賞ゲット-23】 - Qiita
　https://qiita.com/youtoy/items/34f3917df389783e8b98

12/24

●Vonage Video API を使った基本のビデオチャットをもとに p5.js ＋ ml5.js を使った AI・機械学習の仕組みを追加してみる【Vonage】 - Qiita
　https://qiita.com/youtoy/items/be460a8943313bf733e7

●p5.js の公式サンプルの p5.Vector を使ったモーフィングにイージングを適用するための検討【完走賞ゲット-24】 - Qiita
　https://qiita.com/youtoy/items/0f01f2c2e781a519ce93

12/25

※ この記事
●アドベントカレンダー用の記事をきっかけに新しい技術・デバイスなどに触れていった話（扱った技術についての振り返りも）【KDDI Engineer&Designer-2】 #アドベントカレンダー - Qiita
　https://qiita.com/youtoy/items/262704fda84094b529d6

●電子ペーパーデバイス 2種に p5.js で描画した画像を表示させてみる【Processing】（Adventar） - Qiita
　https://qiita.com/youtoy/items/a21316fcb09096edf9ea

●赤・黒・白の 3色が使える小型の電子ペーパーデバイス「EZ Door Sign」で画像を表示させる【完走賞ゲット-25】 - Qiita
　https://qiita.com/youtoy/items/41ad3f38df7eb020a90e

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0