自己紹介

米原宏郎(あつお)
岩井研OB
2020年: 東京電機大学大学院のFMI学科卒業
2020年: 株式会社サイバーエージェントのTappleのバックエンドで入社
2022年: 株式会社GinTrick代表
twitter

はじめに

こんにちは。岩井研OBのあつおです！

TDU CPSLab Advent Calendar 2023の枠が余っていたので貰いました！この記事は10日目の記事です！

今回は、弊社CTO牧野駿二が作ってくれたアプリを多忙な彼に代わって僕が紹介したいと思います〜！

ipponグランプリを作った

photos.app.goo.gl

弊社の創立2周年パーティの出し物で、ipponグランプリを開催した時の様子です！ B4のまっすーやツッキーも参加してくれて、大盛り上がりの良い会でした💪

How to make ippon

実は、このアプリは90分で作られていて、比較的簡単なコードです。 Reactの画面描画と音声ファイルの再生をタイミングよく流すことで、「写真に一言」が再現できるわけです。

下記にコードを書きましたが、pointは一つです。 goNext の関数を再起的にループさせることで、連続して画像をスライドさせることが出来ています。

ここまで書けば岩井研の優秀な学生なら分かるはず...?（笑）ぜひ忘年会とかで使ってみてください！

ちなみにリポジトリはコチラ

import { useCallback, useState } from 'react'

import hitokoto1Png from '@/assets/imgs/demo/hitokoto_1.jpeg'
// 省略 画像を10個importする
import hitokoto10Png from '@/assets/imgs/demo/hitokoto_10.jpeg'

import hitokotoTemplatePng from '@/assets/imgs/hitokoto_template.jpeg'
import { generateRandomList } from '@/utils'

import styles from './App.module.css'
import ImageArea from './ImageArea/ImageArea'

const hitokotoList = [
  hitokoto1Png,
  // 省略。本当は10個画像を並べる
  hitokoto10Png,
]

const endAudio = new Audio('/end.mp3')

const intervalNumbers = [
  200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 200, 600, 800, 1100, 1300,
]

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const App = () => {
  // つぎの画像に進む。それを再起的に行なっている
  const goNext = useCallback((randomIndices: number[], index: number) => {
    if (index >= intervalNumbers.length) return
    setTimeout(() => {
      setImageIndex(randomIndices[index])
      if (index === intervalNumbers.length - 1) {
        endAudio.play()
        setIsButtonActive(true)
      } else {
        const piAudio = new Audio('/pi.mp3')
        piAudio.play()
      }
      goNext(randomIndices, index + 1)
    }, intervalNumbers[index])
  }, [])

  // ボタンを押したら起動
  const onStartClick = useCallback(() => {
    setIsButtonActive(false)
    // [8, 7, 0, 2] のようなバラバラの数字の配列を生成
    const randomIndices = generateRandomList(hitokotoList.length, intervalNumbers.length)
    goNext(randomIndices, 0)
  }, [goNext])

  const [imageIndex, setImageIndex] = useState<number | null>(null)
  const [isButtonActive, setIsButtonActive] = useState(true)

  return (
    <div className={styles.root}>
      {imageIndex === null ? (
        // ボタンを押す前の最初の画面
        <ImageArea src={hitokotoTemplatePng} />
      ) : (
        // ボタンを押した後のお題の画面
        <ImageArea src={hitokotoList[imageIndex]} />
      )}
      <button className={styles.startButton} onClick={onStartClick} disabled={!isButtonActive}>
        Start!
      </button>
    </div>
  )
}

export default App

会社紹介

ちょっと宣伝します！

僕と牧野が二人でやっているGinTrickですが、 ChatGPTを使ったペットの気持ちAIというサービスをリリースしました！🐕

無料で使えるので是非遊んでみてください（笑）

後輩に向けて

就活するにしても院進学するにしても、どこかの会社で開発のアルバイトをすると就活で実務経験の話が出来るのでオススメです。 GinTrickも募集していますが、まずは自分が行きたい会社のインターンを受けてみましょう！有能さを示せれば、選考が有利になったりします。

また、B3,B4のメンバーはM1,M2の先輩と仲良くなって開発を教えてもらうのが良いんじゃないかな、と思います（笑）岩井研を利用して、人生を豊かにしましょう！💪

開発経験が乏しい人も安心してください。 B3の頃に僕が書いたブログです。読み返すと恥ずかしくなってきます（笑）こんな僕でも卒業する頃には人並みにエンジニアリングできていたので、今からやれば間に合います！

そして、彼女がいない人はクリスマスまでにアプローチ頑張りましょう！！！開発よりも積極的に行こう！！！

あっつぉの日記

好きなハーゲンダッツはラムレーズン

創立2周年パーティでipponグランプリ！