alpha Lounge

20%の技術記事とオタクネタ

昨年(2021)の総括と今年(2022)について

雑談

新年になったということで、去年の総括と今年やりたいことを備忘録的にまとめました。

昨年(2021)について

  • 仕事
    • 春先まで社員としてやっていた
    • 以降はフリーランス化
      • 主に技術知識に関する強い危機感を感じたため、ぼちぼち働きながら自学習できる時間を増やした
      • 音楽活動や新しいことを始める時間を担保するためにも
    • Androidメインにやりつつ、Flutterの仕事もやったりした
  • アウトプット
    • QiitaにJetpack Composeの記事やTips系を上げた
    • 春先にブログを立ち上げ、以降は技術ネタ、雑談ネタ含めブログに移行し始めた
    • ちょっとだけZennも試し始めた
  • 私生活

今年(2022)について

  • メインのAndroid/Flutterの学習を引き続きやっていく
    • ComposeとかCoroutine Flowの使い方とか
    • Kotlin DSLあたりの設定周りももっと詳しくなる
    • FlutterのFlameで何かゲーム作るのもありかも？
  • アウトプットの記事を書く以外に、LTや登壇の機会も狙ってみる
  • 本業だけでなく、音楽やゲームにも時間を使っていきたい
    • レトロゲーをやり直したり、RTAする時間が欲しい

【Android】FirebaseのText Recognition v2(Beta)を使用して、ウマ娘のステータスを解析する

Android

Firebaseが提供するMLKitのテキスト認識が日本語にも対応していたようです。この記事を執筆している時点ではBeta版ですが、v2という形で提供されています。
また、このSDKはオンデバイスで使用できるので、サーバー側の設定や通信処理を考慮することなくお手軽に実装できます😊

developers.google.com

今回はこのライブラリを使用してウマ娘のステータス画面のスクショを解析してみます。

Sample

今回お試しでJetpack Composeのmaterial3やストレージライブラリのModernStorageを使用しているので、Android12で動かすとよいかもしれません。

github.com

ちょっとだけ解説

日本語用のライブラリであるcom.google.mlkit:text-recognition-japaneseを使用します。

まずはTextRecognizerに各言語のオプションを入れます。

private val textRecognizer = TextRecognition.getClient(JapaneseTextRecognizerOptions.Builder().build())

用意した画像をURIやBitmapで読み込んで、TextRecognizerに通すだけです。

val image = InputImage.fromBitmap(bitmap, 0)

textRecognizer.process(image)
  .addOnSuccessListener { visionText ->
    // ここに処理を書く
  }

認識結果には座標位置の情報もあるので、ある程度画像の構成がわかっている場合は後処理で修正を入れることなどもできると思います。

テキスト認識テスト

今回使用するのは、サジタリウス杯のオープンリーグ用に育成したマンハッタンカフェのステータス画面になります。皇帝スキルなど認識しにくそうなスキルも積んでいます。

以下が認識を通した結果です。

汝を波と認識したり、パス→バスになったりとやや正確ではないものの、ざっくりした情報は取れることが確認できました。名前や数字は綺麗に取れています。

おわりに

オンデバイスのライブラリでここまでの精度があるので、手軽に使えるSDKとしては十分役に立つと思いました。今後の認識精度の上昇にも期待したいです👀

Jetpack Compose + マルチモジュール (+ Atomic Design)で作るAndroidプロジェクト

Android

先日投稿したQiitaでJetpack Composeのサンプルを作りました。

Jetpack Composeといえば宣言的UIですが、宣言的UIであれば、Atomic Designのようにコンポーネントを綺麗に分けて書きたくなると思います。
できればアプリ内で共通で使うUIは別のモジュールとして切り出しておきたくなりますよね。

というわけで上記のサンプルをマルチモジュール構成に変更しました。

できたもの

github.com

masterにマージしてあります。

構成説明

ディレクトリ構成は以下の通り。

root
 |
 |-- di-runner   (DIの実装兼entrypoint)
 |-- data   (dataモジュール)
 |-- domain   (domainモジュール)
 |-- common   (entityやutilを格納するモジュール)
 |-- ui-component   (UIの共通コンポーネントを格納するところ)
 |-- feature   (各種Featureモジュール)
      |- feature-main

ui-componentモジュールはAtomic Designでいうところのorganisms、molecules、atomsのコンポーネントを格納します。 今回はmoleculesとatomsをpartsというパッケージにまとめました1。
また、共通のThema設定、Color設定などもここに置きます。

featureモジュールでJetpack ComposeのScreen(Atomic Designではpages、templatesの部分)を作っていきます。 ViewModelとUseCaseのinterfaceもここで作ります。
今回はFeatureが1つなのでNavHostが簡素ですが、featureモジュールが増えてきた場合を考えて、各FeatureがcomposableとActionsを返す仕組みを整えておくとよさそうです。

所感

モジュール分けによって依存関係がわかりやすく、実装しやすくなりました。今後はJetpack Compose + マルチモジュールの構成が主流になっていきそうな予感がしますね。

  1. Atomic Designの原理である5階層で運用する場合、各メンバーが共通認識をしっかり持たなければ階層がぐちゃぐちゃになりかねないです。軽く運用したい場合は、あえて下側をまとめるだけでもやりやすくなるかと思います。↩

Flutterでマルチパッケージ(マルチモジュール)を実装する

Flutter

Flutterでマルチモジュール構成を作る際にどのようにするのか？というのを考えて色々調べてましたが、DeNAさんのTechCon Appで既に実現されていました。
GitHub - DeNA/techcon_app: TechCon App

別パッケージを作るので、マルチモジュールというよりもマルチパッケージと言ったほうが良さそうですね。

ということで、上記を参考に実際にマルチパッケージ構成を作ってみました。

github.com

構成説明

今回は以前実装したGoogle Books APIのサンプルをベースに、data層をパッケージ分割しました。
ディレクトリ構成は以下の通りになります。

root
 |
 |
 |-- app
      |
      |- lib
      |- ios
      |- android
      |- pubspec.yaml
      ...
 |
 |-- data
      |
      |- lib
      |- pubspec.yaml
      ...

既存のFlutterアプリはappディレクトリに移動し、Modelクラスと通信部分をdataパッケージとして切り出します。

具体的な手順

今回dataパッケージはFlutterに依存しない、dartパッケージになるため、dartのモジュールの作成手順に従います。コマンドは以下の通り。

# dartパッケージ
dart create --template=package-simple data
# Flutterパッケージ
flutter create --template=package data

上記でパッケージを作った後に該当のソースコードを移植します。 移植したらapp側でdataパッケージを読み込みます。

# app/pubspec.yamlにて

dependencies:
  data:
    path: ../data

以上でパッケージ分けが完了しました。

おわりに

マルチパッケージ構成にすることで依存関係を整頓できるなどメリットもあるので、今後Flutterで大きなアプリを作っていく場合はこの構成を取っていくのも良さそうですね。

バンドリ！ の今後の展望を不安視する

アニメ・ゲーム・漫画

クソ記事です。

自分はバンドリ！ ガールズバンドパーティ！(ガルパ)を初期から長くやっており、いつかブログなどで紹介記事でも書いたろかなと思ってたのですが、最近は半年以上ログインしてません。

ここ最近バンドリの人気は確かに落ち始めているという印象はありましたが、その理由やデータについて下記のnoteで詳しく解説されています。こちらを読んでちょっと感化されたのもあり、以前から考えていたことを整理するためブログ記事として残しておきます。

note.com

note.com

note.com

元々バンドリはゲーム、アニメ、出演声優によるリアルライブをリンクさせるという"エモさ"が大きな武器でした。自分もPoppin'PartyやRoseliaの楽曲を気に入り、さらにそれを演じている声優が実際に弾いてライブするのすげぇ！と思いプレイし始めました。

しかし、2020年に新型コロナウイルスの流行によって外出制限、イベントの自粛などが始まるにつれ、バンドリは急速に勢いを失ったように感じました。

テーマがガールズバンドものということで、2周年を超えてくるとイベントや本編のストーリーでやること残ってるのか？というぐらいマンネリが続いていましたし、以前からリアル・アニメで活動していたRAISE A SUILENがなかなかゲームに実装されない中、新バンドのMorfonicaが突然発表されアプリに実装されるなど、ユーザーを困惑させるような出来事も続いていました。*1
それでも以前のようにリアルで盛り上がれる場が提供され続けていれば、ある程度勢いが続いていたかなと思いますが、このような状況下でそのような場が少なくなってしまったことは非常に痛手です。

元々バンドリはリアルの影響を受けやすいという問題があります。
例えば、普通のアニメでは声優が変更されることがあってもそこまで大きな痛手にはならないと思います。しかし、バンドリは声優とキャラクターのリンク度も武器となっているため、声優変更は武器の構築を作り直すことになり、大きなハンデとなります。
キャラクター・リアルどちらでもかなり人気のあるRoseliaでは既に初期メンバーから2人も変更しており、実際変更される時にはバンドリ界隈内外で大きな話題になり、しばらくはその話題が尾を引くことになりました。

リアルを軸に置いた展開が逆に自らの首を絞めてしまっている、という感じに見えます。
全盛期からは勢いが落ちたとはいえまだまだアクティブ数を多いですし、コロナが落ち着けばまた活気が戻ってくる可能性もありますが、一度離してしまったユーザーをどのように取り戻していくのか気になります。

また、全体の勢いは落ちたかもしれませんが、いい楽曲はまだまだ作られていると思います。
少し前にカバーされた鳥の詩は自分の好きな重低音と美しいピアノサウンドが交差するアレンジとなっており非常に素晴らしいと思います。皆さんも聞いてください。(宣伝)

www.youtube.com

一方で、上記のnoteでも対になる存在として挙げられているプロジェクトセカイ カラフルステージ！ feat.初音ミク(プロセカ)は、リリースから順調に若年層に広まり、現在もアクティブ数が物凄いことになってます。 こちらは元々VOCALOIDをテーマにしたものだったり3Dモデルを使うなど、仮想世界を軸に構築しているため、このような世の中にも上手く対応できたのかなと思います。VTuberが勢力を伸ばしているのと似たようなものですかね？ やはり時代はバーチャルなのか。

*1:Morfonicaは2020年3月1日に発表、その2週間後にゲーム内実装。対してRAISE A SUILENは2018年からリアルで活動しており、2019年1月の2期アニメでもキャラクターが登場している。

久しぶりに爆走兄弟レッツ&ゴー!!の劇場版見たらやはり神だったので宣伝する

アニメ・ゲーム・漫画

タイトル通り。ネタ切れとかではないです。

www.b-ch.com

作品について

「爆走兄弟レッツ&ゴー!!」は1996年から3年間放送された、ミニ四駆を題材としたTVアニメです。
1〜2年目の主人公の星馬豪、烈兄弟と、相棒のマシンであるマグナム、ソニックは見覚えある方も多いと思います。

この劇場版は2年目のWGP編をベースとして、突然現れた謎のミニ四駆であるガンブラスターを止めるために奮闘する物語となっています。

自分は子供の頃にこの劇場版のVHSを持っていたため、何度も見ていました。今週しばらくぶりに見ましたが、全く色褪せない名作です。

推しポイント

  • ストーリーのわかりやすさ
    • ガンブラスターの追跡をする、それ以外の目的がないため、子供でも理解しやすい内容です。
    • 主人公チーム(ビクトリーズ)を妨害する存在との戦いや、ガンブラスターの持ち主であるリオンとの交流も王道展開ですね。
  • 友情
    • 最初はリオンはビクトリーズを突き放していましたが、後に烈の説得により共闘することになります。
    • また、終盤ではガンブラスターとビクトリーズのマシン達に友情が生まれるシーンも出てきます。
  • アクションシーン
    • パイプを登ったり遥か上空のワイヤーを滑り降りたりミサイルに乗ったり(？)、子供がやってるとは思えないスタント技が多数ありますw
    • もちろんミニ四駆の縦横無尽なアクションも迫力があります。
  • 綺麗な風景
    • 中盤のダム？を登りきった先の広い空と高所の表現
      • 自分は高所恐怖症なので今見ると結構震えます...
    • 終盤の海と空のコントラスト

気になった人がいたらぜひぜひ観てみてください。

Google I/O 2021 Android周りのメモ

Android

Google I/O 2021を見て、いくつかAndroidの技術的に気になったことをメモしていたものをブログ内に置いておきます。
今回は自然な会話Bot「LaMDA」のデモだったり、Android12におけるMaterial Youだったり、大きな驚きもかなりありましたが、Android技術としても色々とアップデートがありました。

Jetpack Compose の最新情報

今回はGoogle I/OはなんといってもJetpack Composeですね。
これを描いている時点でもベータ版なのにめちゃくちゃ推しています。今後のUI層のスタンダードにする予定っぽいです。

Compose自体は宣言的UIのAndroid版ということで、FlutterやReactを触ったことがあればそんなに真新しい部分はないと思います。
ViewModelとの連携方法がデフォルトでしっかり用意されているのでFlutterよりもやりやすいかもしれないですね。

下記リポジトリにサンプルが既にたくさんあるので、自分も少しずつ勉強していきたいです。

github.com

Jetpack Compose で洗練されたマテリアル デザイン アプリを構築する

こちらはデザイン周りです。
Composeを本格的に導入する前に一読しておきたいですね。

Android での Kotlin の状況

ここで気になったのは

  • 最新のAndroid Studioで、StateFlowが直接DataBindingで利用(監視)できるようになる
  • 将来的にCoroutines DebuggerをAndroid Studioに導入予定

といった点ですね。
だいぶCoroutinesが使いやすくなってきたなーという感じです😊

Android 12 に対応するための 12 個のヒント

Material You関連以外にもいくつか変更があります。

  • ForegroundServiceをバックグラウンドから起動できないようになった
  • マイクやカメラのアクセスを無効にできるようになった
  • 数ヶ月使用していないアプリの権限やストレージが解放されるようになった
  • Bluetoothの権限追加
  • MACアドレス取得制限
  • カスタム通知がdeprecatedになった
  • App linkの検証ツール強化
  • WebViewのSameSiteが変更された。ログイン処理などが影響を受けるかも

他にもあるみたいですが、ForegroundServiceやカスタム通知は使ってるところも多そうなので、動作確認必須ですね。

Jetpack の最新情報

CameraXやWorkManagerなども色々変更あったみたいですが、多方面に影響ありそうなのはDataStoreという、SharedPreferenceに代わるAPIです。
現状beta版まで来てるのでそろそろ使えるものになりそうですね。Securityライブラリと一緒に使いたいところです。

そんなことより早くRoomのAutoMigrationの実装を急いでクレメンス..

Android テストツールの最新情報

Unified Test Platformという概念が出てきました。
今回説明があったのは、テスト用の仮想デバイス管理の話でした。
具体的にはTestOptionsのdevicesという項目らしいですが、まだexperimentalのようです。

上記は気になる初歩的な部分をさらっと抜粋しましたが、他にも役立つ情報がたくさんあるので、セッション見て勉強していましょう。

events.google.com