HAMADAの語り草

私のTwitter

私のgithub

2023-12-18

鬼の2時間ハッカソン？でAndroidアプリの録音再生機能を実装した話

はじめに

会津大学学部3年のHAMADAです。この記事は「Aizu Advent Calendar 2023」18日目の記事です。今回は、鬼の2時間ハッカソンで試したことについて書いていきたいと思います。

経緯

つい最近、私が所属しているA-PxLで ”2時間ハッカソン” と題して、普段の定例会の2時間を使って、テーマが”クリスマス”のプロダクトを一本作り切るという鬼企画が開催されました。

A-PxLはXRのサークルなので、私もAndroidのARアプリを作成しようとしたのですが、ARCore周りの設定で1時間15分も溶かしてしまいました。流石にちょっと厳しそうだったので、方向転換をし、音声録音アプリケーションを作成することにしました。

一応テーマがクリスマスなので、プレゼントを届けに来たサンタさんに”メリークリスマス”と一言伝えられたら素敵やな、とか後付け的に思いついたので、テーマには沿ってると思います…

使用したもの・技術

Google Pixel 6 (ハッカソン中、友人に貸してもらいました)
Kotlin
- Jetpack Compose

実装

まず、録音をするためにAndroidManifest.xmlに以下を追記する。

<uses-permission android:name="android.permission.RECORD_AUDIO" />

MediaRecorderとMediaPlayerを使用して、

以下のように実装しました。

import android.media.MediaRecorder
import android.media.MediaPlayer

class AudioRecorder(private val filePath: String) {

    private var mediaRecorder: MediaRecorder? = null
    private var mediaPlayer: MediaPlayer? = null
    private var isRecording = false

    fun startRecording() {
        if (isRecording) return

        mediaRecorder = MediaRecorder().apply {
            setAudioSource(MediaRecorder.AudioSource.MIC)
            setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP)
            setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB)
            setOutputFile(filePath)
            prepare()
            start()
        }
        isRecording = true
    }

    fun stopRecording() {
        if (!isRecording) return

        mediaRecorder?.apply {
            stop()
            release()
        }
        mediaRecorder = null
        isRecording = false
    }

    fun playRecording() {
        mediaPlayer = MediaPlayer().apply {
            setDataSource(filePath)
            prepare()
            start()
        }
    }
}

MediaRecorder

setAudioSource(MediaRecorder.AudioSource.MIC) は音をマイクから取ってくるように設定しています。他にも電話から音をとったり、リンクから音を取ったりと色々設定できます。

setOutputFormat(MediaRecorder.OutputFormat.THREE_GPP) はアウトプットのフォーマットを設定しています。

setAudioEncoder(MediaRecorder.AudioEncoder.AMR_NB) はエンコードの形式を設定しています。

setOutputFile(filePath) は設定したファイルパスにファイルをアウトプットします。

prepare() で初期化を完了します。

start() でレコーダーを開始。

stop() でレコーダーを停止。

release() でリソースを解放。

MediaPlayer

setDataSource(filePath) は再生するソースをセットします。

prepare() で初期化を完了します。

start() で再生を開始。

上記のような処理を呼び出す際に、使っているハードでパーミッションがあるかどうかを確認するために、以下のような実装をしました。

    private fun handleRecording() {
        if (ContextCompat.checkSelfPermission(this, Manifest.permission.RECORD_AUDIO) != PackageManager.PERMISSION_GRANTED) {
            ActivityCompat.requestPermissions(this, arrayOf(Manifest.permission.RECORD_AUDIO), 200)
        } else {
            audioRecorder?.startRecording()
        }
    }

    override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<out String>, grantResults: IntArray) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
        if (requestCode == 200 && grantResults.isNotEmpty() && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            audioRecorder?.startRecording()
        }
    }

アプリがRECORD_AUDIOのパーミッションを持っているかどうか確認して、持っていれば、そのままレコーディングを開始し、持っていなければ以下のようなリクエストを表示します。

リクエストに対してのユーザの応答を確認し、許可が得られていれば録音を開始します。

Andoidの実機が手元になく、デモが撮れませんでした。ごめんなさい...

おまけ

UIとしては、本当にシンプルで雑なUIなのですが、ChatGPT君にいい感じの画像を作ってもらい背景にしたところそれっぽい見た目になりました。

Before

After

感想と展望

45分で雑な実装にはなってしまいましたが、パーミッション周りは触ったことがなかったので、良い学びになりました。二時間でのハッカソンはかなり鬼畜の所業と言わざるを得ませんが、実装したい機能、やったことない機能を勉強するにはちょうど良いので、ぜひ次もやってみたいと思います。ここまで読んでいただきありがとうございます。良いクリスマス、良い年末をお迎えください。

所属サークル

私のTwitter

私のgithub

hahahamada.hatenablog.com

参考リンク

developer.android.com

2023-12-08

学祭ハッカソンの技術まとめ (Apollo Kotlin編)

はじめに

会津大学学部三年のHAMADAです。この記事は「学生iOS&Androidエンジニア Advent Calendar 2023」8日目の記事です。何回かに分けて、学祭ハッカソンで学んだ技術を振り返りたいと思います。今回は、Apollo Kotlinについて綴っていきたいと思います。

アプリの概略

アプリの概略や、ハッカソン自体の記録は以下の記事をご一読いただけると幸いです。

ハッカソンでの主な担当部分

GraphQLとDynamoDBを用いたバックエンド部分の実装
Jetpack ComposeにおけるUI実装
クラウドサービスまわり

等々

まとめたいこと

Apollo Kotlin を用いた、GraphQL Serverとの繋ぎこみと主な実装
GoogleMapAPIを用いた実装
Jetpack Composeを用いたUI実装

//かなり汚くて荒い実装をしたので、設計の勉強のネタとして使いたいですね。

今回説明すること

Apollo Kotlin を用いた、GraphQL Serverとの繋ぎこみと主な実装

Apollo Kotlinを用いた、GraphQL Serverとの繋ぎこみと主な実装

Apollo Kotlinは、GraphQLクエリからKotlin、Javaのモデルを生成するGraphQLクライアントです。今回は、Apollo Kotlinを用いて、Goで立てたGraphQLサーバーに対し、ミューテーションやクエリを実行するというものになっています。(DynamoDBを今回使用しているので、GoでGraphQLサーバーを立てずとも、AppSyncを使用した方が筋が良かった気もしています。)

Goで立てた、GraphQLサーバーの実装については以下のリポジトリをご覧ください

https://github.com/ahmos0/ATUMARE_GraphQLServer

github.com

まず、Apollo Kotlinを使用するためにbuild.gradle(:app)に以下を記述します。

plugins{
    //以下を追加
    id 'com.apollographql.apollo3'
}

apollo {
  service("service") {
    packageName.set("com.example.exampleserver")
  }
}

dependecies {
    //以下を追加
    implementation 'com.apollographql.apollo3:apollo-runtime:3.8.2'
}

次に、schema.graphqlsを取得します。

プラグインが自動的に作成するapolloDownloadSchema Gradleを使用して、スキーマを取得します。

以下を実行します。

endpointは任意のものに変更してください。

./gradlew :app:downloadApolloSchema --endpoint='https://hogehoge.com/graphql' --schema=app/src/main/graphql/schema.graphqls

すると以下のような、schema.graphqlsが取得できます。

長いので、折りたたんでおきます。

schema.graphqls

"""
The `Boolean` scalar type represents `true` or `false`.
"""
scalar Boolean

"""
One possible value for a given Enum. Enum values are unique values, not a placeholder for a string or numeric value. However an Enum value is returned in a JSON response as a string.
"""
type __EnumValue {
  deprecationReason: String

  description: String

  isDeprecated: Boolean!

  name: String!
}

"""
Arguments provided to Fields or Directives and the input fields of an InputObject are represented as Input Values which describe their type and optionally a default value.
"""
type __InputValue {
  """
  A GraphQL-formatted string representing the default value for this input value.
  """
  defaultValue: String

  description: String

  name: String!

  type: __Type!
}

"""
Object and Interface types are described by a list of Fields, each of which has a name, potentially a list of arguments, and a return type.
"""
type __Field {
  args: [__InputValue!]!

  deprecationReason: String

  description: String

  isDeprecated: Boolean!

  name: String!

  type: __Type!
}

type Mutation {
  putItem(time: String!, capacity: Int!, uuid: String!, name: String!, departure: String!, destination: String!, passenger: Int!,passengers: [PassengerInput]): Item
  incrementPassenger(uuid: String!, name: String!,  passengers: [PassengerInput]): Item
}

input PassengerInput{
  namelist: String!,
  comment: String!
}

"""
The fundamental unit of any GraphQL Schema is the type. There are many kinds of types in GraphQL as represented by the `__TypeKind` enum.

Depending on the kind of a type, certain fields describe information about that type. Scalar types provide no information beyond a name and description, while Enum types provide their values. Object and Interface types provide the fields they describe. Abstract types, Union and Interface, provide the Object types possible at runtime. List and NonNull types compose other types.
"""
type __Type {
  description: String

  enumValues("" includeDeprecated: Boolean = false): [__EnumValue!]

  fields("" includeDeprecated: Boolean = false): [__Field!]

  inputFields: [__InputValue!]

  interfaces: [__Type!]

  kind: __TypeKind!

  name: String

  ofType: __Type

  possibleTypes: [__Type!]
}

type Query {
  allItems: [Item]
}

type Item {
  capacity: Int

  departure: String

  destination: String

  name: String

  time: String

  uuid: String

  passenger: Int

  passengers: [PassengerModel]
}

type PassengerModel {
  namelist: String!,
  comment: String!
}

"""
An enum describing what kind of type a given `__Type` is
"""
enum __TypeKind {
  """
  Indicates this type is a list. `ofType` is a valid field.
  """
  LIST

  """
  Indicates this type is a non-null. `ofType` is a valid field.
  """
  NON_NULL

  """
  Indicates this type is a scalar.
  """
  SCALAR

  """
  Indicates this type is an object. `fields` and `interfaces` are valid fields.
  """P
  OBJECT

  """
  Indicates this type is an interface. `fields` and `possibleTypes` are valid fields.
  """
  INTERFACE

  """
  Indicates this type is a union. `possibleTypes` is a valid field.
  """
  UNION

  """
  Indicates this type is an enum. `enumValues` is a valid field.
  """
  ENUM

  """
  Indicates this type is an input object. `inputFields` is a valid field.
  """
  INPUT_OBJECT
}

"""
The `String` scalar type represents textual data, represented as UTF-8 character sequences. The String type is most often used by GraphQL to represent free-form human-readable text.
"""
scalar String

"""
The `Int` scalar type represents non-fractional signed whole numeric values. Int can represent values between -(2^31) and 2^31 - 1. 
"""
scalar Int

"""
A GraphQL Schema defines the capabilities of a GraphQL server. It exposes all available types and directives on the server, as well as the entry points for query, mutation, and subscription operations.
"""
type __Schema {
  """
  A list of all directives supported by this server.
  """
  directives: [__Directive!]!

  """
  If this server supports mutation, the type that mutation operations will be rooted at.
  """
  mutationType: __Type

  """
  The type that query operations will be rooted at.
  """
  queryType: __Type!

  """
  If this server supports subscription, the type that subscription operations will be rooted at.
  """
  subscriptionType: __Type

  """
  A list of all types supported by this server.
  """
  types: [__Type!]!
}

"""
A Directive provides a way to describe alternate runtime execution and type validation behavior in a GraphQL document. 

In some cases, you need to provide options to alter GraphQL's execution behavior in ways field arguments will not suffice, such as conditionally including or skipping a field. Directives provide this by describing additional information to the executor.
"""
type __Directive {
  args: [__InputValue!]!

  description: String

  locations: [__DirectiveLocation!]!

  name: String!

  onField: Boolean! @deprecated(reason: "Use `locations`.")

  onFragment: Boolean! @deprecated(reason: "Use `locations`.")

  onOperation: Boolean! @deprecated(reason: "Use `locations`.")
}

"""
A Directive can be adjacent to many parts of the GraphQL language, a __DirectiveLocation describes one such possible adjacencies.
"""
enum __DirectiveLocation {
  """
  Location adjacent to an input object field definition.
  """
  INPUT_FIELD_DEFINITION

  """
  Location adjacent to a fragment definition.
  """
  FRAGMENT_DEFINITION

  """
  Location adjacent to a field definition.
  """
  FIELD_DEFINITION

  """
  Location adjacent to an input object type definition.
  """
  INPUT_OBJECT

  """
  Location adjacent to an interface definition.
  """
  INTERFACE

  """
  Location adjacent to a mutation operation.
  """
  MUTATION

  """
  Location adjacent to a schema definition.
  """
  SCHEMA

  """
  Location adjacent to a scalar definition.
  """
  SCALAR

  """
  Location adjacent to an enum value definition.
  """
  ENUM_VALUE

  """
  Location adjacent to a query operation.
  """
  QUERY

  """
  Location adjacent to a fragment spread.
  """
  FRAGMENT_SPREAD

  """
  Location adjacent to an argument definition.
  """
  ARGUMENT_DEFINITION

  """
  Location adjacent to a object definition.
  """
  OBJECT

  """
  Location adjacent to a union definition.
  """
  UNION

  """
  Location adjacent to an enum definition.
  """
  ENUM

  """
  Location adjacent to a subscription operation.
  """
  SUBSCRIPTION

  """
  Location adjacent to a field.
  """
  FIELD

  """
  Location adjacent to an inline fragment.
  """
  INLINE_FRAGMENT
}

"""
Directs the executor to include this field or fragment only when the `if` argument is true.
"""
directive @include ("Included when true." if: Boolean!) on FIELD|FRAGMENT_SPREAD|INLINE_FRAGMENT

"""
Directs the executor to skip this field or fragment when the `if` argument is true.
"""
directive @skip ("Skipped when true." if: Boolean!) on FIELD|FRAGMENT_SPREAD|INLINE_FRAGMENT

"""
Marks an element of a GraphQL schema as no longer supported.
"""
directive @deprecated ("Explains why this element was deprecated, usually also including a suggestion for how to access supported similar data. Formattedin [Markdown](https:\/\/daringfireball.net\/projects\/markdown\/)." reason: String = "No longer supported") on FIELD_DEFINITION|ENUM_VALUE

schema {
  query: Query
  mutation: Mutation
}

これを元に、このスキーマ定義を元に必要なミューテーション、クエリを書きます。

今回、必要な処理は

募集登録画面で情報を登録するミューテーション(PutItem)

募集一覧を取得するクエリ(AllItems)

乗車登録画面から登録した際に、乗員の人数を増やすミューテーション(IncrementPassenger)

運転手待機画面での情報取得(こちらは実装が間に合っていないのでmock画面のみです)

実装はそれぞれ以下

//itemquery.graphql
query AllItems {
    allItems {
        uuid
        name
        departure
        destination
        time
        capacity
        passenger
        passengers {
             namelist,
             comment
        }
    }
}

//mutations.graphql
mutation PutItem($uuid: String!, $name: String!, $departure: String!, $destination: String!, $time: String!, $capacity: Int!, $passenger: Int!, $passengers: [PassengerInput]) {
    putItem(uuid: $uuid, name: $name, departure: $departure, destination: $destination, time: $time, capacity: $capacity, passenger: $passenger, passengers: $passengers) {
        uuid
        name
        departure
        destination
        time
        capacity
        passenger
    }
}

mutation IncrementPassenger($uuid: String!, $name: String!, $passengers:[PassengerInput]) {
    incrementPassenger(uuid: $uuid, name: $name,  passengers: $passengers) {
        uuid
        name
        passengers {
            namelist
            comment
        }
    }
}

これらを定義した後に、プロジェクトをbuildするとプラグインはモデルを生成するために、generateApolloSourcesというタスクを実行します。

これによって、GraphQLクエリ、ミューテーションからkotlinのソースコードが自動生成されます。

その時の名称は、PutItemMutation.kt, IncrementPassengerMutation.kt, AllItemsQuery.ktのように”Mutation” “Query”が末尾についたものとなります。

これらのソースコードを用いた実装が以下になります。

まず、ApolloClientのインスタンスを作成し、送信先のエンドポイントを指定します。

private val apolloClient = ApolloClient.Builder()
        .serverUrl(BuildConfig.serverEndPoint)
        .build()

それぞれのquery, mutationごとの実装は以下になります。

putItem

suspend fun putItem(
        uuid: String,
        name: String,
        departure: String,
        destination: String,
        time: String,
        capacity: Int,
        passenger: Int,
        passengers: List<PassengerInput>? = null
    ): Result<PutItemMutation.PutItem?> {

        val convertedPassengers = passengers?.map { PassengerInput(it.namelist, it.comment) }

        val mutation = PutItemMutation(
            uuid = uuid,
            name = name,
            departure = departure,
            destination = destination,
            time = time,
            capacity = capacity,
            passenger = passenger,
            passengers = convertedPassengers?.let { Optional.Present(it) } ?: Optional.Absent
        )

        return try {
            val call: ApolloCall<PutItemMutation.Data> = apolloClient.mutation(mutation)
            val response: ApolloResponse<PutItemMutation.Data> = call.execute()
            val item = response.data?.putItem
            Result.success(item)

        } catch (e: ApolloException) {
            Result.failure(e)
        }
    }

fetchAllItems

suspend fun fetchAllItems(): Result<List<AllItemsQuery.AllItem>> {
        val query = AllItemsQuery()
        return withContext(Dispatchers.IO) {
            try {
                val response: ApolloResponse<AllItemsQuery.Data> = apolloClient.query(query).execute()
                Result.success(response.data?.allItems?.filterNotNull() ?: emptyList())
            } catch (e: ApolloException) {
                Result.failure(e)
            }
        }
    }

incrementPassenger

suspend fun incrementPassenger(uuid: String, name: String, namelist: String,comment: String) {
        val newPassengerInput = PassengerInput(namelist, comment)
        val passengerInputList = listOf(newPassengerInput)
        val mutation = IncrementPassengerMutation(uuid, name, Optional.Present(passengerInputList))

        try {
            val call: ApolloCall<IncrementPassengerMutation.Data> = apolloClient.mutation(mutation)
            call.execute()
            Result.success(Unit)
        } catch (e: ApolloException) {
            Result.failure(e)
        }
    }

これらを対応した画面から呼び出すことで、GraphQLサーバーを通したDBとのやりとりを実現しました。

感想と展望

そもそもGraphQLの実装部分で苦労しましたが、なんとか動くように実装できました。やはり、公式ドキュメントをしっかり読むことは大事だなと再確認できました。バックエンドとクライアント部分の両方に取り組んで実装できたことは、すごく大きな経験になりました。GoogleMapAPI周りでも詰まったところがあったので、近いうちにまとめたいと思います。コードがかなり稚拙ではありますが、何かの参考になれば幸いです。ここまで読んでいただきありがとうございます。

所属サークル

私のTwitter

私のgithub

参考リンク

www.apollographql.com

2023-11-11

学祭ハッカソンに参加した記録

はじめに

会津大学学部三年のHAMADAです。ブログを今年は頑張ると言ってずいぶん経ってしまいました。今回は、会津大学の蒼翔祭でハッカソンに参加したのでその振り返りをしたいと思います。記録としての側面が強いです。もし興味があれば、ご一読いただけると嬉しいです。

参加の経緯とメンバー集め

今まで色々ハッカソンには参加してきましたが、先輩方にお誘いいただいて参加することが多かったので、同級生や後輩を誘って開発をしてみたいということで、それにちなんだメンバーとハッカソンに参加しました。メンバーは、普段一緒にソフトテニスをやっている三年生の@M9oKpと@wai_1002、フレッシュな一年生の@BurariHina524です。

ハッカソンの募集は夏休み前ごろで、当時学び始めていたJetpackComposeを使いたかったので、モバイルのアプリケーションが作りたいなと漠然と思っていました。三年生の二人に声をかけたところ快諾してくれました。@BurariHina524は、新入生向けの学内ハッカソンの際に、学祭ハッカソンの話をしていたことを覚えていてくれて、一緒に開発することとなりました。

開発内容の決定

今回のハッカソンのテーマは『会津をより良く、より便利に』ということで、初回のMTGでアイデア出しをした結果、高齢者や学生の移動の不便さを解決するようなプロダクトを作るという結論に辿り着き、ライドシェアアプリ『ATSUMARE』を作成することになりました。今回は、他のメンバーの技術スタックや興味、アプリケーションのプラットフォーム適正を考えて、モバイルアプリケーションを作ることに決定しました。

このアプリで解決したいこと

前述したように、会津若松市では高齢者や学生の移動の不便さが存在します。雪の季節には、車を持っていなければ、徒歩で移動するか公共交通機関を使うほかありません。そこで、目的地を共有する者同士でライドシェアすることでこの不便さを解消したいと考えました。また、地域の住民の方とお話をさせていただく中で、”会津大学の存在はもちろん知っているが、具体的に何をしているのかはよく知らない”というお話を耳にします。私自身も、住民の方のこと会津のことに関して、知らないことがたくさんあります。地域とのつながりを強くしお互いについて知ることで、より良い会津生活が送れるようになるのでは？と考えました。

使用技術の決定

今回はモバイルアプリケーションを作るということが決定したので、@wai_1002がSwiftUIを学んでいることと、私自身がJetpackComposeを学んでいることから、敢えてiOSとAndroidを分けて実装することにしました。(FlutterやKMMも選択肢としてもちろんありましたが、学びたい技術を使用することもハッカソンの醍醐味だということで….)

また、バックエンド部分は私が触りやすいという安直な理由で、GoでGraphQLサーバーを実装しDynamoDBでデータの管理をすることにしました。

細かい技術の実装については、また別に記事にまとめたいと思います。

期間中にできたもの

アーキテクチャ

アプリロゴ

@BurariHina524が実装してくれました。

モバイルの画面

@wai_1002が実装してくれました。

バックエンド

GoでGraphQLサーバーを実装しました。乗客を集める際の要項を登録できるようにしたり、乗客がクリックした募集の内容を持って来ることができるようにしました。また、乗客が入力した名前や要望を、それに対応する募集のDBにリストとして登録できるようにしました。ドライバーが乗客のリストを取得するというところまでは、実装が間に合いませんでした。

デモ

youtu.be

反省点

今回は、チームリーダーとしてハッカソンに参加させていただきました。iOSとAndroidを分けるという方法をとったことで、UIやロジックの共有がうまくいかなかったところが一番の反省です。特に、iOS側のメンバーに対してバックエンドでどのようなことをしているのか、適宜共有できていなかったことが悔やまれます。一方で、チームメンバーの理解がとても早く、チーム開発自体は円滑に進んだと感じています。私自身としましては、月並みではありますが、A-PxLでの活動や今までのチーム開発でのgitを使った経験を活かし、チームメンバーをサポートできたことは一つ嬉しい瞬間でした。また、チーム開発としての旨味を出すために、どのようにタスクを振るのか、どこまで自分が実装するべきかなど、今まであまり意識しなかったことを考えるきっかけにでき、一つ成長できたように思います。

今までのハッカソンでは、先輩方にたくさん助けていただきながらの実装が多く、全体を俯瞰してアプリケーションを実装するという経験がありませんでした。その結果、今回のハッカソンではガバガバな設計をしてしまい、後半かなり苦しむことになりました。皮肉にも去年の学祭ハッカソンでは、クリーンアーキテクチャを用いた開発をしていたので、先輩方の偉大さを痛感しました。今後は、設計について意欲的に学びたいと考えています。

反省は非常に多いですが、チームメンバーと楽しく開発できたことが一番大きな収穫です！一緒に開発してくれてありがとう！

反省を活かして、これからも精進したいと思います！ここまで読んでいただきありがとうございます！

所属サークル

私のTwitter

私のgithub

2023-01-31

UnityとAWS Cognitoでサインアップしてみた話

aws Unity Cognito 技術プログラム

はじめに

こんにちは、会津大学学部二年のHAMADAです。もう今年も残り11ヶ月ということで恐ろしさを感じている今日この頃です。今年は、毎月技術ブログを2本書きたいと思っているので、来月も頑張ります。さて今回はUnityとAWS Cognitoのサインアップの話です。

目的と動機

AWSを触る機会が多いですが、A-PxLの活動には今のところ活かせていないので、何かできないかなと思いながら取り組んでみました。サインイン等はうまく活かせば、オンラインゲームやXRのアプリケーションに使えそうなのでCognitoを使います。

使用技術

Unity 2022.1.0.f1

最近触っていなかったので、ただでさえ出来ないのによりひどくなっていました…
AWS

Azureや GCPも触ってみたい気持ちがあります。今回は以下のものを使いました。
- AWS Cognito
  
  サインアップ、サインイン等ができるもの。つまりユーザごとの管理ができる(他のAWSサービスとの連携) サードパーティのサインインの使用もできる。
- (AWS CDK)
  
  前回のブログの環境を流用しました。一部CognitoをCDKから作成したもののコードのみ記載します。

やったこと

Unityでプロジェクトを作成し、nugetからパッケージをダウンロードしてインポート
ボタン等を作成
コードの作成
実行してみる。

Unityプロジェクトのセッティング

nugetからパッケージをダウンロードしてインポート

ここ(https://www.nuget.org)から以下のパッケージのインポートする

AWSSDK.Core
AWSSDK.CognitoIdentity
AWSSDK.SecurityToken
AWSSDK.CognitoIdentityProvider
AWSSDK.Extension.CognitoAuthentication

拡張子を.nupkgから.zipに置き換えたのち、zipを解凍します。

その中のlib以下にあるnet45をそのままUnityに入れます。

この時、UnityにはAssetの下にPluginsフォルダを作成し、その中に入れます。

導入するパッケージには依存関係があるので、一つずつ入れていくときにerrorが出ますが、全て入れると解決できます。

怖い話ですが、errorが消えない場合でもUnityを再起動したら、errorが消えたのでうまくいかない場合は試してみてください。

ボタン等の作成

こんな感じになるようにButtonとInputFieldを作成します。

今回はTextMeshProを使っています。

コードを作成

CDKでUserPoolを作成

先にCDKでUserPoolを作成するコードを紹介します。

userPool := awscognito.NewUserPool(stack, jsii.String("UserPool"), &awscognito.UserPoolProps{
        UserPoolName:      jsii.String("userpool"),
        SelfSignUpEnabled: jsii.Bool(true),
    })

awscognito.NewUserPoolClient(stack, jsii.String("sample-client"), &awscognito.UserPoolClientProps{
        UserPoolClientName: jsii.String("app-client"),
        UserPool:           userPool,
    })

前回のブログのコードに上記のように追記することで、今回必要な環境が構築できます。

CDK側からするとemail等がなくても登録できるように設定できます。

SelfSignUpEnabledをTrueにすることで今回やりたいことがうまくいきます。

また、アプリケーションクライアントもCDK側から作成しています。

Signupするためのコード

using System;
using System.Collections.Generic;
using UnityEngine;
using Amazon.CognitoIdentityProvider;
using Amazon.CognitoIdentityProvider.Model;
using TMPro;

public class Signup : MonoBehaviour
{
    public TMP_InputField clientidField;
    public TMP_InputField usernameField;
    public TMP_InputField passwordField;

    public void OnClick()
    {
        var client = new AmazonCognitoIdentityProviderClient(null, Amazon.RegionEndpoint.APNortheast1);
        var signup_request = new SignUpRequest 
        {
            ClientId = clientidField.text,
            Username = usernameField.text,
            Password = passwordField.text,
        };

        try
        {
            var result = client.SignUp(signup_request);
            Debug.Log(result);
        }
        catch (Exception ex)
        {
            Debug.LogError(ex);
        }
    }

}

AmazonCognitoIdentityProviderClient で新しくクライアントを作成します。

SignUpRequest でサインアップの登録用の情報を入れます。ここではemailなどの属性を指定することもできます。

client.SignUpで実際に登録します。

このコードをButtonに付けて、それぞれのInputFieldにUIのInputFieldを登録していきます。

Buttonのinspectorにある、On Click()にButtonを登録。Fuctionには、Signup.OnClickを設定します。

実行してみる

Unityで再生ボタンを押して実行します。

clientIDには、アプリケーションクライアントのIDをいれ、usernameには適当な名前を、passwordも自分で設定して入力します。その後SignUpボタンを押すと作成できます！

こんな感じに作られます。

感想と展望

AWS Cognitoの最もシンプルな使い方であろう方法をUnityで試してみました。Cognito自体よりもUnityや.NETのパッケージのセッティングで今回は苦しんだのかなと思います。EmailやSMSの認証を設定していないのでセキュリティの問題は大きくありますが、簡単に実験的にやる分にはシンプルでいいのかなと思います。実運用向きでは絶対ないです。Unityに久しぶりに触れられたので収穫としては満足です！ここまでお付き合いいただきありがとうございます！何かの参考になれば幸いです！

所属サークル

A-PxL (@aizu_PxL) / X

私のTwitter

HAMADA (@AHMOS_HMD) / X

私のgithub

hakase0274.hatenablog.com

参考リンク

2023-01-23

AWS CDK V2をGoで書いてみた ~DynamoDBとAppSyncを添えて~

技術 aws AppSync DynamoDB cdk v2 go

はじめに

こんにちは、会津大学学部二年のHAMADAです。今年も始まってもう少しで1ヶ月ですね。最強寒波も来るらしいですが、体調にきをつけて今年も頑張りたいと思います。さて今回は AWS CDK をGoで書いてみた話です！！

目的と動機

最近は、Alche株式会社でインターンをさせていただいています！その中でAWSを学んだり、使ったりする機会が多いのでそのアウトプットとして記事を書きます。GraphQL自体は興味はあったものの使ったことがなかったので、ある程度慣れてきたAWSを使って勉強できる！という気持ちもあり、掘りさげて取り組もうと思いました。

使用技術

Go

ここのところよく使う言語。最近関数型に興味がありますが、Goに甘えてしまう。
AWS

Amazon Web Service 本当に色々できる（知らないこといっぱい）今回使ったのは以下
- AWS CDK
  
  Cloud Development Kit プログラミング言語を用いてAWSのリソースを定義しあれこれできる代物
- AWS AppSync
  
  GraphQLを用いてAPIのマネジメントができる代物
- AWS DynamoDB
  
  NoSQLのデータベース
- AWS IAM
  
  権限まわりを操作できる代物

やったこと

とりあえず、CDKプロジェクトを構築する
スタックを作成
DynamoDBを作成
AppSyncを作成し、クエリを投げられるようにする。

CDKプロジェクトを構築

CDKのinstall

AWS CDKのコマンドラインツールに cdk というものがあります。これ自体はnpmで提供されています。以下のコマンドを実行します

$ npm install -g aws-cdk
...
$cdk --version
2.60.0 (build 2d40d77)

プロジェクトの作成

以下のコマンドを実行すると、GoのCDKプロジェクトが作成できます。

$ mkdir aws-cdk-go
$ cd aws-cdk-go
$ cdk init --language=go

プロジェクト内には、次のファイルが作成されます。

- README.md            
- .gitignore           
- aws-cdk-go.go       
- aws-cdk-go_test.go  
- cdk.json             
- go.mod

不要な依存関係を削除するためにgo mod tidyを実行しておきます。

スタックを作成

aws-cdk-exp.go には自動でコードが生成されますが、一度消して簡単なコードを書き直します。

package main
import (
    "github.com/aws/aws-cdk-go/awscdk/v2"
    "github.com/aws/jsii-runtime-go"
)

func main(){
    app := awscdk.NewApp(nil)
    //stackの作成
    //stack := としているがこれは後で使うからで、このままではerrorを吐く
    stack := awscdk.NewStack(app, jsii.String("AwsCdkGo"), &awscdk.StackProps{})
    app.Synth(nil)
}

空のスタックをawscdk.NewStack で作成しています。

ここで一度デプロイしてみます。

go mod tidy が必要であれば実行しておきます。

以下のようにコマンドを実行します。

$ cdk bootstrap //最初のデプロイの前だけでOK
$ cdk deploy

bootstrapはAWS特定の環境 (アカウントとリージョン)AWS CloudFormation にテンプレートをデプロイすることです。これをしないとdeployで必要だという旨のエラーが出る。

こんな感じでWebコンソール上に作成することができました。

DynamoDBを作成

DynamoDBのテーブルを作成します。基本的には、先ほどのスタックのコードに追加していきます。

package main
import (
    "github.com/aws/aws-cdk-go/awscdk/v2"
    "github.com/aws/aws-cdk-go/awscdk/v2/awsdynamodb"
    "github.com/aws/aws-cdk-go/awscdk/v2/awsiam"
    "github.com/aws/jsii-runtime-go"
)
func main(){
    app := awscdk.NewApp(nil)
    //stackの作成コード
    //DynamoDBのテーブル作成
        //table := としているが後で使うからで、このままではerrorを吐く
    table := awsdynamodb.NewTable(stack, jsii.String("demo-table"), &awsdynamodb.TableProps{
        TableName: jsii.String("booktable"),
        PartitionKey: &awsdynamodb.Attribute{
            Name: jsii.String("id"),
            Type: awsdynamodb.AttributeType_STRING,
        },
        BillingMode: awsdynamodb.BillingMode_PAY_PER_REQUEST,
        Stream:      awsdynamodb.StreamViewType_NEW_IMAGE,
    })
    //テーブルの権限を作成
    tablerole := awsiam.NewRole(stack, jsii.String("dynamodb-role"), &awsiam.RoleProps{
        AssumedBy: awsiam.NewServicePrincipal(jsii.String("appsync.amazonaws.com"), &awsiam.ServicePrincipalOpts{}),
    })
    tablerole.AddManagedPolicy(awsiam.ManagedPolicy_FromAwsManagedPolicyName(jsii.String("AmazonDynamoDBFullAccess")))
    app.Synth(nil)
}

awsdynamodb.NewTable で新しくテーブルを作成できます。

引数は順にstack、作成するリソース名、プロパティとなっています。

TableNameは、作成するテーブル名。

PartitionKeyは、データがどのパーティションに保存されるか決めるもの。

BillingModeは、DynamoDBの課金方式を決めています。

Streamは、DBに変更があったときに変更情報を保存しておくもの。

ここで一度デプロイすると、

きちんとtableが作成されています。

AppSyncを作成しクエリを投げる

この手順通りにmain関数にコードを追記していきます。

"github.com/aws/aws-cdk-go/awscdk/v2/awsappsync" をimportします。

まず、appsyncを作成します。

//mainの中に追記していく
//api := としているが後で使うからで、このままではerrorを吐く
api := awsappsync.NewCfnGraphQLApi(stack, jsii.String("booksApi"), &awsappsync.CfnGraphQLApiProps{
        Name:               jsii.String("books-api"),
        AuthenticationType: jsii.String("API_KEY"),
})
awsappsync.NewCfnApiKey(stack, jsii.String("BooksApiKey"), &awsappsync.CfnApiKeyProps{
        ApiId: api.AttrApiId(),
})

awsappsync.NewCfnGraphQLApi で新しくGraphQLApiを作成します。

引数はDynamoDBの時と同様です。

Nameは、api名。

AuthenticationTypeは、権限の認証方法。

awsappsync.NewCfnApiKey で API KEYを作成します

引数は他と同様です。

ApiIdは、APIに割り当てられた識別子。

次に、作成したDynamoDBをAppsyncのデータソースに割り当てます。

//mainの中に追記していく
//Ds := としているが後で使うからで、このままではerrorを吐く
Ds := awsappsync.NewCfnDataSource(stack, jsii.String("DataStore"), &awsappsync.CfnDataSourceProps{
        ApiId: api.AttrApiId(),
        Name:  jsii.String("BookDataSource"),
        Type:  jsii.String("AMAZON_DYNAMODB"),
        DynamoDbConfig: awsappsync.CfnDataSource_DynamoDBConfigProperty{
            TableName: table.TableName(),
            AwsRegion: stack.Region(),
        },
        ServiceRoleArn: tablerole.RoleArn(),
    })

awsappsync.NewCfnDataSource で新しくデータソースを作成します。

引数は他と同様です。

Typeは、データソースが何かを指定できます。今回はDynamoDBですが、Lambda等でもOK。

DynamoDbConfigは、DynamoDBへの接続を定義しています。

ServiceRoleArnは、Roleを参照しています。

その次は、スキーマとマッピングテンプレートを別ディレクトリで定義し、それをとってきます。

   //mainの中に追記していく
    //schemaを、ファイルからとってくる
    //def := としているが後で使うからで、このままではerrorを吐く
    def, err := os.ReadFile(filepath.Join(".", "resource", "schema.graphql"))
    if err != nil {
        fmt.Println("failed to load graphql definition " + err.Error())
    }
 
    //schemaを定義
    //schema := としているが後で使うからで、このままではerrorを吐く
    schema := awsappsync.NewCfnGraphQLSchema(stack, jsii.String("GraphSchema"), &awsappsync.CfnGraphQLSchemaProps{
        ApiId:      api.AttrApiId(),
        Definition: jsii.String(string(def)),
    })

    getitem, err := os.ReadFile(filepath.Join(".", "resource", "getitem.vtl"))
    if err != nil {
        fmt.Println("failed to load  getitem.vtl " + err.Error())
    }
    putitem, err := os.ReadFile(filepath.Join(".", "resource", "putitem.vtl"))
    if err != nil {
        fmt.Println("failed to load  putitem.vtl " + err.Error())
    }

./resouce/schema.graphqlに定義しておいた、スキーマをとってきてawsappsyncに渡す。

awsappsync.NewCfnGraphQLSchema で新しくスキーマを作成します。

引数は他と同様です。

Definitionは、スキーマの中身を定義。

schema.graphqlの中身

schema {
    query: Query
    mutation: Mutation
}

type Query {
    getPost(id: ID): Post
}

type Mutation {
    addPost(
        id: ID!
        author: String!
        title: String!
        content: String!
        url: String!
    ): Post!
}

type Post {
    id: ID!
    author: String
    title: String
    content: String
    url: String
    ups: Int!
    downs: Int!
    version: Int!
}

getitem.vtlの中身

{
    "version" : "2017-02-28",
    "operation" : "GetItem",
    "key" : {
        "id" : $util.dynamodb.toDynamoDBJson($ctx.args.id)
    }
}

putitem.vtlの中身

{
    "version" : "2017-02-28",
    "operation" : "PutItem",
    "key" : {
        "id" : $util.dynamodb.toDynamoDBJson($context.arguments.id)
    },
    "attributeValues" : {
        "author" : $util.dynamodb.toDynamoDBJson($context.arguments.author),
        "title" : $util.dynamodb.toDynamoDBJson($context.arguments.title),
        "content" : $util.dynamodb.toDynamoDBJson($context.arguments.content),
        "url" : $util.dynamodb.toDynamoDBJson($context.arguments.url),
        "ups" : { "N" : 1 },
        "downs" : { "N" : 0 },
        "version" : { "N" : 1 }
    }
}

このチュートリアルのスキーマ、マッピングテンプレートを流用しました。

チュートリアル:DynamoDB リゾルバー

最後に、QueryとMutationを投げるリゾルバーを作成。

//mainのなかに追記
//Queryを投げられるようにする
    awsappsync.NewCfnResolver(stack, jsii.String("GetResolver"), &awsappsync.CfnResolverProps{
        ApiId:                   api.AttrApiId(),
        TypeName:                jsii.String("Query"),
        FieldName:               jsii.String("getPost"),
        DataSourceName:          Ds.Name(),
        RequestMappingTemplate:  jsii.String(string(getitem)),
        ResponseMappingTemplate: jsii.String(`$util.toJson($ctx.result)`),
    }).AddDependency(schema)

    //Mutationを投げられるようにする
    awsappsync.NewCfnResolver(stack, jsii.String("AddResolver"), &awsappsync.CfnResolverProps{
        ApiId:                   api.AttrApiId(),
        TypeName:                jsii.String("Mutation"),
        FieldName:               jsii.String("addPost"),
        DataSourceName:          Ds.Name(),
        RequestMappingTemplate:  jsii.String(string(putitem)),
        ResponseMappingTemplate: jsii.String(`$util.toJson($ctx.result)`),
    }).AddDependency(schema)

awsappsync.NewCfnResolver は新しくリゾルバーを作成します。

TypeNameは、Query,Mutationなどを指定できます。

FieldNameは、スキーマに含まれているフィールドを指定します。

DataSourceNameは、今回は先ほど定義したデータソースの名前をとってきます。

RequestMappingTemplateは、putiem、getitemから指定しています。

ResponseMappingTemplateは、context.resultをJson形式にして返しています。

Webコンソールで実行できるようになりました。

まず、mutationで情報を追加。

その後、queryで情報を取得。

無事にDynamoDBとAppSyncを接続し実行するためのCDKを作成できました！！！

感想と展望

AWS CDK V2をGoで書く場合に参考になる公式ドキュメントが少なく、割と苦労しながらの実装になりました。vscodeでエスパーしながら進めていたので、vscodeの補完能力には感謝しかありません。GraphQLに関しては、まだまだ知識が足りていないのでGraphQL単体でも学びたいと思っています。他の人のコードを読んだり、探したりすることが今までよりも多く学びが深まったことは大きな収穫だと思います。何かの参考になれば幸いです。ここまでお付き合い頂きありがとうございました！

所属サークル

A-PxL (@aizu_PxL) / Twitter

私のTwitter

HAMADA (@AHMOS_HMD) / Twitter

私のgithub