開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

VRの次に注目が集まりつつある「テレイマージョン」

VRが一般化しつつある中、「テレイマージョン」が次の技術候補として触れられることもあるようです。
これは、離れた相手と“同じ空間を共有しているように感じる”体験を目指す技術で、
従来のビデオ通話よりも一歩進んだコミュニケーションを実現しようとするものです。
特に最近では、テレイマージョンを支える3Dポイントクラウド技術や触覚デバイスの研究が活発になっているようで、
立体映像や振動を用いた新しい遠隔体験の実験も行われています（参考：研究論文）。

Tweet

前回に引き続きJavaScriptフレームワークのVue.jsの基本について説明します。
Vue.jsは、HTMLに動きをつけたり、ユーザー操作に応じてリアルタイムに画面を更新したりするためのフレームワークです。
この記事では、Vue.jsの中でも特によく使われる テンプレート構文（HTML側） と ロジック（JavaScript側）を紹介します。

JavaScript側の基本構造

Vue 3 では Composition API（setup関数） と Options API（data, methods, computedなど） の2通りがあります。
ここでは両方を簡単に紹介します。

setup()：Composition APIのエントリーポイント

import { reactive  } from 'vue';

export default {
  setup() {
    // reactiveを使ってオブジェクト全体をリアクティブにする
    const state = reactive({
      count: 0,
      message: 'こんにちは！'
    });

    const increment = () => {
      state.count++;
    };

    return { state, increment };
  }
};

テンプレート側の使い方

<template>
  <div>
    <p>{{ state.message }}</p>
    <p>クリック回数：{{ state.count }}</p>
    <button @click="increment">カウントアップ</button>
  </div>
</template>

reactive() は オブジェクト全体をリアクティブ（反応的）に変換 します。
⇒ state.count のように直接プロパティを参照できます（ref のように .value は不要）。

ref() は単一の値をリアクティブにするのに便利ですが、
複数の状態をまとめて管理するなら reactive() のほうがスッキリします。

return { state, increment } により、HTML（テンプレート）側で state と increment を使えるようになります。

次回はOptions APIのdataとcomputedについて説明します。

木曜日担当：nishida

Tweet

アメリカのAI企業OpenAIが、日本政府や産業界との協力を深めるための「日本向けAI政策枠組み（Japan Economic Blueprint）」を発表しました。
ChatGPTなどの生成AIが生活やビジネスに浸透する中で、国や企業、教育機関と連携し、「安全で信頼できるAI社会」を築くことを目的としています。
（参考：OpenAI公式発表）

Tweet

今回はJavaScriptフレームワークのVue.jsの基本について説明します。
Vue.jsは、HTMLに動きをつけたり、ユーザー操作に応じてリアルタイムに画面を更新したりするためのフレームワークです。
この記事では、Vue.jsの中でも特によく使われる テンプレート構文（HTML側） と ロジック（JavaScript側）を紹介します。

HTML側の基本構文

Vueでは、HTML内に「ディレクティブ」と呼ばれる特別な属性を使って、動的な動作を実現します。

v-if：条件によって要素を表示・非表示にする

<p v-if="isShow">このメッセージは表示フラグがtrueのときだけ見えます。</p>

v-if は 条件式 が true のときだけ、その要素をDOMに描画します。
v-else や v-else-if も組み合わせて使えます。

v-for：リストを繰り返し表示する

<ul>
  <li v-for="(item, index) in items" :key="index">
    {{ index + 1 }}: {{ item }}
  </li>
</ul>

v-for は配列やオブジェクトをループ表示します。

v-model：双方向データバインディング

<input v-model="message" placeholder="メッセージを入力">
<p>入力中の内容：{{ message }}</p>

v-model は 入力フォームの値とデータをリアルタイムで同期 します。
テキストボックス、チェックボックス、セレクトボックスなどに使えます。

@input：入力イベントを検知する

<input @input="onInputChange" placeholder="文字を入力">

@input はフォーム入力のたびにイベントを実行します。

@click：クリックイベントを実行する

<button @click="count++">クリック回数：{{ count }}</button>

@click はクリック時の処理を定義します。
上の例では、ボタンを押すたびに count の値が1ずつ増えます。

次回はJavaScriptの基本構造について説明します。

木曜日担当：nishida

Tweet

AMDの最新GPU「Radeon AI PRO R9700」が、日本国内でも一部の販売店やBTOメーカーを通じて入手可能になりつつあります。
一部ショップではおよそ26万円前後（税込）の価格帯で案内されており、AI開発や生成AI処理を“ローカル”環境で行いたいクリエイター・エンジニアにとって、ついに手が届く本格的な選択肢が見えてきました。
（参考：AMD公式サイト）

Tweet