Kamada.S
その他

社内勉強会 26/3 〜新しいメガネ編〜

この記事は約6分で読めます。

今年度がラストスパートに入りました。

一方私はというと、メガネを破損しました。

今って45分くらいで新しいメガネが出来上がるんですね。

すっげ〜〜〜〜。

来月は新卒LTスペシャルになるかもしれません。

乞うご期待！

今回の発表内容

今回、前半の録画がありません…

ごめんなさい

今月は元から発表者が少なかったので、文量もさっぱりです。

ReactNative+VoltraでAndroidのWidgetを作ってみたかった

発表者：Kamada.S

個人的に欲しいアプリを作るのにAndroid Widgetを作る必要があるのですが、ReactNativeで作れるライブラリがあったので試しに触ってみます。

Voltraについて

VoltraはReactNativeでNative Moduleを組み込んだアプリを作る際に、React ComponentでNative Moduleの構築を可能にするライブラリです。

Voltra
Build Live Activities with JSX in React Native.
use-voltra.dev

主にiOSのDynamic IslandやLive Activitiesを構築できます。
Androidへの対応は現在実験的なものです。

Examples

公式サイトに載っているサンプルを入れてみます。
以下はサンプルコードです。

import { VoltraAndroid } from 'voltra'

const MyWidget = () => (
  <VoltraAndroid.Column
    style={{
      padding: 16,
      backgroundColor: '#3DDC84',
      width: '100%',
      height: '100%'
    }}
    verticalAlignment="center-vertically"
    horizontalAlignment="center-horizontally"
  >
    <VoltraAndroid.Text
      style={{
        color: 'white',
        fontSize: 18,
        fontWeight: 'bold'
      }}
    >
      Android Widget
    </VoltraAndroid.Text>
    <VoltraAndroid.Text
      style={{
        color: 'white'
      }}
    >
      Powered by Voltra & Glance
    </VoltraAndroid.Text>
  </VoltraAndroid.Column>
)

Expoのデバッグ環境であるExpo GoではWidgetが表示できないので、VoltraWidgetPreviewを使って画面に表示させます。

import { VoltraAndroid } from 'voltra/android'
import { VoltraWidgetPreview } from 'voltra/android/client'

export function MyWidgetPreview() {
  return (
    <VoltraWidgetPreview
      family="mediumWide"
      style={{ backgroundColor: '#f0f0f0', borderRadius: 16 }}
    >
      <VoltraAndroid.Column style={{ padding: 16 }}>
        <VoltraAndroid.Text style={{ fontSize: 20, fontWeight: 'bold' }}>
          My Awesome Widget
        </VoltraAndroid.Text>
        <VoltraAndroid.Text>
          This is how it looks on the home screen!
        </VoltraAndroid.Text>
      </VoltraAndroid.Column>
    </VoltraWidgetPreview>
  )
}

次にapp.jsonでコンポーネントをWidgetとして登録します。

{
  "expo": {
    "plugins": [
      [
        "voltra",
        {
          "android": {
            "widgets": [
              {
                "id": "my_widget",
                "name": "My First Widget",
                "description": "A simple Voltra widget"
              }
            ]
          }
        }
      ]
    ]
  }
}

次にandroid向けにPrebuildを行ってNative Moduleを生成します。

npx expo prebuild --platform android

実行すると画面にWidgetと同じコンポーネントが表示されるはずです。

npx expo run:android

しかし…

試したものの、エラーが出てしまい消しきれませんでした。
ちょっと時間が足りませんでしたね。
取り掛かるのが遅かったのが原因です。

そもそもVoltra自体が新しいライブラリなので、まだエラー解決方法がすぐに出てきてくれません。

来月こそはサンプルを持ってきます。

「Geminiにさよなら」して「Claudeにこんにちは」した話

発表者：iwasaki_tさん

最近AIを使って開発をしている中で、サービスを変えてみて良かった話をします。

「Geminiにさよなら」した理由

最近、開発にGeminiを使うのをやめました。
理由としては以下の通りです。

  • 最近コーディング方面の調子が悪い：AI Proプランに加入してAntigravityを利用していましたが、利用モデルをGeminiからClaudeにしてみたところかなり感触が良かったです。
  • Antigravityの制限がキツくなった：理由はわかりませんが、Antigravity上でClaudeの使用制限が頻繁に発生しました。数日後に解消されたようですが、利用していくうえで不安材料と言わざるを得ません。

「Claudeにこんにちは」した理由

Claudeを使い始めたのは以下の通りです。

  • チャットもコーディングもイケイケ：Claudeは評判がいいですよね。MCPの設計思想と相性が良く、CLAUDE.mdやskillsと相性がよいです。読み込みや書き込みの権限管理もできて便利です。今まで使った中で一番人間フレンドリーだと感じます。
  • 設計から順を追う開発スタイルがいい：予め作った設計書ファイルに従って作ってくれるので、途中で方向修正をしたりする手間やトークンを省けてとても楽です。
  • マスコットキャラクターが可愛い：詳細が不明なのもいいです。

AIモデルをためそう

今のところClaudeがイケイケなので皆さんにもおすすめです。

モデルの契約については個人的に月払いがおすすめです。
年間払いが最も安く済みますが、今は過渡期で来月の情勢がわからないような時期なのでいつでも切り替えられるようにしておくのがよいのかなと思います。
1年くらい使って気に入ったら年間契約してもよいんじゃないでしょうか。