Tech-Verse 2025 参加レポート

どうも🐷

先日Tech-Verse 2025に参加してきました!面白いセッションがたくさんあったので、ぜひ共有させてください🔥

 

Tech-Verseとは

6月30日(月)~7月1日(火)に開催されたLINEヤフー技術カンファレンスです。

エンジニア・デザイナー・プロダクトマネージャーのためのイベントだったため、取り上げられたテーマの幅はかなり広かったです:

AI / AI Use Cases、セキュリティ、サーバーサイド、プライベートクラウド、データプラットフォーム、インフラ、フロントエンド、アプリ、デザイン、プロダクトマネジメント、エンジニアリングマネジメント

一つのカンファレンスでこんなにたくさんの話題について勉強ができるなんて嬉しいですね!

 

現地はLINEヤフー社員以外なら招待を受けた方のみが参加可能になっていましたが、

自分は今年なんと招待をいただきましたので、Day 2に遊びに行きました🙋‍♀️

 

セッション

あらかじめセッションのリストを見て、スケジュールを立てようとしたら、見たいセッションが多すぎて選ぶの大変でした😱 

頑張って絞った結果がこれです:

(こんな風にリスト化すると、1日で見る量ではないと思われるかもしれないけど、本当はみたいセッションがもっとたくさんあって、ほぼ全ての時間で被ってました 😇)

 

それでは印象的なセッションを紹介しますね!

 

アクセシビリティ

自分も最近アクセシビリティを社内で頑張ろうとしているため、他社の事情がとても気になります🫣

 

アクセシビリティ改善の実践:プロダクトにおける具体的な取り組みと課題

元々バラバラで活動していた人たちが集まって、ガイドラインを書いて、少しずつ広げていく話でしたが、まさに同じことをしておりますので、親近感がありましたw

伝え方の工夫について、相手に自分ごとに思っていただくように、向こうにとって分かりやすい体験に例えるという話、とても分かります。

今回の例(アニメーションを5秒以内に止まるというアクセシビリティ観点を、Slackの動く絵文字に例えると、その鬱陶しさが伝わりやすい)、私も使おうと思いましたw

ただ、社内でwebアクセシビリティ試験があるという点は、まだまだそのレベルに辿り着いてないので、追いつくように今後とも社内活動を頑張ろうと思います✊

 

文字コントラストを改めて考える

新しいアクセシビリティガイドライン(WCAG3)と、今までのガイドラインで、文字コントラストを評価するロジックが変わりましたが、具体的にどう変わったかの説明でした。かなり深掘りができて、個人的に「なるほど〜」となるところが多かったセッションですw

 

テストケース不要! 自動探索テスト、アクセシビリティテストをあなたのアプリに導入しよう(Android)

アプリのアクセシビリティテストを自動化して、共有しやすいように社内ツールまで作られたという話でしたが、とてもインスピレーションになりました🤩 パクりますね

もう社内で内容を共有しましたが、動画が公開されたら改めて見たいと思います。

 

デザイン系

デザインの意思決定を加速するワークショップ設計

このセッションは私のお気に入りで、一番のおすすめです!

まず問題定義のところから吸い込まれましたw

こんな経験がありませんか?

  • 結論がなかなか出ない
  • みんなの意見をまとめたら、結論何も決まらなかった
  • 可愛いペットの話から戻ってこない(話がずれる)

自分はデザイナーではないけど、仕様についての議論に参加しているため、見覚えがありすぎてつらいですww

そして原因の仮説もまとめられていました:

意思決定の複雑さの要因

  • 意思決定に関与する関係者の多さ
  • 異なる役割や文化からの視点の多様さ
  • 意思決定を防げる過剰または不十分なデータ

関係者が多ければ多いほど、話が進まなくなりますねー

とはいえ、さまざまな視点が入るからこそ質の高いプロダクトが作れますし、みんなの意見が大事ですね。どうすればいいでしょうか🥺

 

ネタバレすると、「デザインの意思決定には正解より、大事なのはチームで合意した納得感です。その納得感を得るために合意形成プロセスを築くべきです」という解決方法が紹介されました。

合意形成プロセスの築き方について、組織化できる方法が説明されて、絶対に持ち帰って普及したいと思いました💯

動画が公開されたらぜひ見てみてください!

 

エンジニアリングマネジメント系

新任チームリーダーによるLINE/ヤフー両社混合チームの1からの立ち上げ

別のセッションとかぶっていたため、最後の5分しか見れてないですが、内容が濃かったです👀

印象に残ったポイントは以下の3点でした:

  • 自分でやらず、メンバーにやらせることが大事
    • メンバーの成長に繋がると、チームとの信頼を築けるから
  • パソコンより人と向き合う時間の方を多くすべき
    • AIのおかげで以前と比べてコードが書けるかもしれないけど、Playing Managerを目指さないことがキー
    • 両方をやろうとすると、どちらもうまく行かないため、メンバーが不幸になる
  • リーダー職は色々大変だけど、以前より物事を動かせるようになるため、やりがいを感じるはず

 

その他

チーム横断での継続的なモブプログラミングの実施による、ハイブリッドワーク環境下での相互学習の機会の創出

私の部署でもチーム横断で毎週モブプログラミングを行なっておりますので、ここも隣の芝の話が気になりましたw

"For an idea to go from someone's head into the computer, it must go through someone else's hands."

モブプロはアイデアをしっかり伝える必要があるため、チームのコミュニケーション改善に繋がるそうです。

 

具体的にこういう利点があるという話でした:

  • チームビルディング
    • コミュニケーションが促進される、質問しやすくなる、意思決定の合理化に繋がる
  • 品質向上
    • その場でレビューしてもらえる、多様な視点が入る、ベストプラクティスの共有ができる
  • 知識共有
    • ドメイン知識、個人の経験、コーディングのtips
  • 生産性向上
    • 手戻りが減る、問題を早く発見できる、オンボーディングがやりやすくなる

 

また、モブプロの運営についてのアドバイスも共有されました:

  • ローテーションが多すぎると手間になる
    • 👉 ローテーションを長くした方が良い
  • disengagement発生(集中切れで誰かが喋らなくなった、もしくは差し込みタスクが入った場合などで、参加してない状態)
    • 👉 ローテーションを回して、人を巻き込んで、場を立て直す
  • 簡単なタスクをやると、参加者の時間を無駄にしてしまう
    • 👉 全ての問題でモブプロを使うべきではない(簡単なタスクは向いてない)

 

最後に紹介された「お互いを高め合う」という考え方が特に素敵でした。社内で引き続きモブプロを頑張ってみたいと思いました✨

 

感想

カンファレンスとしては、非常にしっかりしていて、無料参加だと信じられないほど国際的なカンファレンスレベルでした😳

全体的に運営の親切さが印象的でした。例えば、イベント会場(ビルの4階)まで各階にサインを持って外で立っている人がいました。この真夏に外で待機するのは大変そうだけど、おかげさまで迷わずに会場に辿り着きました。ありがとうございました!

 

お弁当(ベジタリアンオプションあり)、バリスタによるコーヒー、そしておやつにケーキまで提供されましたが、各ケーキの前にどんなアレルギー性があるか画像付きで書かれていた点も素晴らしかったです🍰

 

あと、全てのセッションに英語、日本語、韓国語の同時通訳がついてました。あっちこっち違う言語が聞こえて、さすがのグローバル企業だと思いました!

また、交流スペースや作業スペースなどで座ることもできて、全席コンセント付きでとても快適でした。

 

セッションに集中しすぎたせいで、ブースであまりお話を聞けなかった点と、夜に予定が入ってしまって懇親会に参加できなかった点が、今回の後悔です。。。

セッションの内容についてもう少し深掘りをしたかったです😭

 

でも全体的にインスピレーションになるセッションが多くて、おかげさまで一日テンションが高かったですw

機会があれば、来年もぜひまた参加し、社員とたくさんお喋りしてみたいと思います!

 

ノシ

 

 

DroidKaigi 2024 - 感想

どうも、お久しぶりです🐷

 

今年もDroidKaigiに参加してきました!

まだ余韻に浸ってるところ自分の昔の参加レポートを読んでみたら、感想を残すことの大事さを思い出したので、今年も何かを残します。

 

でもDroidKaigiの話をする前に、一点報告があります:実は今年DeNAに転職しましたー

今はPocochaというライブ配信アプリの開発に携わっています。とても優しくて化け物レベルに優秀な仲間に恵まれていて、毎日勉強会やペアプログラミングで一緒に悩んだり、笑ったりしています。

 

控えめに言って最高です。

 

そんな仲間たちと一緒にDroidKaigiに参加できたことが個人的に今年のハイライトです。

登壇台にスピーカーと4人の男性が並んで笑う。昔の集合写真欠席者みたいに左上に笑っている1人の男性の写真が貼り付けられている。

いつも大変お世話になっているメンバー✨

参加者として

初日のワークショップのおかげで、初めてKMPに触りました!前から何度も聞いたことがあったのになぜかまだ試したことがなかったから、こんなきっかけをいただき感謝しています🙏

Fleetも初めてだったけど、フォーカスを複数同時に表示できるcollaboration機能が特に気になります。

 

2日目と3日目は、スタッフのシフトの間に同僚とスポンサーブースを回ったり、プリクラを(非常に下手に)撮ったり、お互いの登壇応援をしに行ったりして、楽しく過ごしました。

弊社ブースのお手伝いはできなかったけど、同僚の頑張って作ったクロスワードが大人気のようで、横から見てて誇らしかったです😊

(ところで自分も試してみたけど、easyレベルの質問に詰まってしまって危なく恥ずかしい結果になりそうでしたw )

 

他社ブースも面白い企画がたくさんありました!ステッカーを貼って投票できる系と付箋に一言を書く系のアクティビティがけっこう好きで、見かけたら必ず遊びに行きます。

グッズは毎年フェンリルさんのセンスに感動しますが、今年の転職ドラフトさんのステッカーもかなりツボりましたw

 

セッションは残念ながらあまり見れなかったので、これから少しずつキャッチアップできればと思います🔥(優先的に見たいセッションwatchlistはもう作成済みです)

 

あと、今年も知り合いとあまりゆっくり話せなかったから、来年こそこの辺を改善します。(宣言)

登壇者として

みんながセッションに応募してくれたこともあって、今年は弊社から自分含めてなんと5名も採択されました!🎉

 

自分は4月のAndroidMakers by droidconで話した内容を改善して、日本語に訳してみました。具体的に言うと、ナビゲーションフォーカス(キーボードナビゲーション)の一般的な問題と、XMLとCompose両方の実装話です。

ちなみに海外カンファレンスの登壇経験についてはこちらで詳しく書いたので良かったらどうぞ 💁‍♀️

engineering.dena.com

 

全く初めてでもないのに、今回の登壇はなぜか過去一緊張しました😰

しかも今までは最初の方だけ緊張して、徐々に慣れる感じだったけど、今回はずっと緊張しっぱなしでした。

セッションを見に来てくれた人たちや応援に来てくれた現&元同僚たちに本当に申し訳ないです。。。😭

www.youtube.com

顔に出るほどひどかったから動画を載せるか悩んだけど、過度に緊張した点以外、過去のDroidKaigi登壇と比べて上達したはずなので、自分に厳しすぎないようにしたいと思います。はい。

「スライドかっこいいね。ちゃんと人を見て喋っているね。成長したね。えらいぞ。」

と自分をもっと褒めてあげて生きて行こうと思います😤(???)

あと今回はわざと英語と日本語スライド両方を用意しました!頑張ったぞ!!

 

ところで去年からDroidKaigiのスピーカーはプロによるヘアメイクをしていただけるようになったから、登壇前に髪の毛のセットを頼んでみました。

そうしたらめっちゃ良い感じになって、期間限定のギャル復活気分を味わえましたw

アイロンを買いたくなりましたw🙈

運営スタッフとして

今年は日英翻訳、英語でのお問い合わせや英語話者のアテンドなど、英語関連のタスク全般に関わっただけではなく、追加で名札の企画にも参加しました🫡

技術の名前など様々なステッカーを名札に貼って、カスタマイズを楽しんでいただきながら、関心/属性を表現することでコミュニケーションの一助になるものを目指していました。

実際多くの人が名札をデコって来てくれたので、とても嬉しかったです!

DroidKaigiでもらったグッズ、スタッフとスピーカーの名札、DeNAのグッズ

自分は2つの名札を持っていたので、デコるチャンスが2回もありました😋

 

最後に大事な話です:毎年人混みすぎて諦めてかけていた念願のネイルアートは今年こそやっとできました!!✌️

手を見る度にあの楽しかった3日間を思い出してニヤニヤするから、ネイルアートが剥がれるまでしばらくDroidKaigiお祭りの余韻が続きそうです。

 

来年を楽しみにしながら勉強を頑張ろうと思います。

 

ノシ

【メモ】TDD、delivery patterns

www.youtube.com

Instrumented Testでも使えそうなアドバイス

 

What is Programmer Anarchy and does it have a future? | Martin Jee's blog

 

Building Features with Spike & Stabilise | by Gareth Bragg | Ingeniously Simple | Medium

 

vimeo.com

概要:

Patterns of Effective Delivery (Dan North) - DZone

ComposeでのlabelFor対応

最近「labelFor属性はComposeでどうすれば良いか?」と聞かれて、「2021年のDroidKaigi登壇で答えたから見てね」って答えたけど、確認したら説明してませんでした。失礼しました😇

 

labelFor属性とは

XMLでラベルとEditTextを分けて書いた場合、入力箇所の用途がTalkBackユーザーにより分かりやすく伝わるように、ラベルのTextViewに設定すべきものです。

入力箇所のラベルと入力された内容(もしくは初期のヒント)が一緒に読み上げられます。

 

ヒントは何か入力されたら消えるものなので、入力した内容しか案内されなくなってしまいます。

そして特に一つの画面に複数の入力箇所があれば、要素をグループ化してフォーカス移動の数を減らした方がより良い体験に繋がるそうです。

なので、通常の体験で見えないラベルでも良いから、ラベルをつけた方が良さそうです。

<TextView
// ...
android:labelFor="@id/editText"
android:text="お名前" />

<EditText
android:id="@+id/editText"
// ... />

結果はこんな感じになります。

  • 何も入力されてない場合:「編集ボックス、お名前」
  • 「ティフェン」と入力した場合:「ティフェン、編集ボックス、お名前」

詳しくは公式ドキュメントアクセシビリティサポートを確認しましょう。

 

Composeだとこの書き方が出来ませんけど、別のやり方で同じ効果が得られます。

 

 ① マテリアルデザインに従うアプリの場合

マテリアルデザインのシステムではこの問題は既に配慮されています。デフォルトのコンポーネントを使えば、ラベルは直接TextFieldに設定できます。

マテリアルデザインTextFieldの2種類:デフォルトと枠のあるバージョン。
ヒントがなければ、ラベルはヒント代わりに真ん中に表示される。

ヒントがある場合、もしくは何か入力された場合、ラベルは上に表示される。

TextFieldOutlinedTextFieldを使って、Text Composableをlabelとして渡すだけで、完成です。labelForと同じ感じで一緒に読み上げられます。終わり 🎉

var name by rememberSaveable { mutableStateOf("") }

TextField(
value = name,
onValueChange = { newText -> name = newText },
label = { Text(text = "お名前") }
)

 

。。。しかし担当アプリのデザインがマテリアルデザインのシステムに従わない場合、同じ効果を得るのに少し工夫が必要になります 😵‍💫

 

 ② その他(ほとんど)のアプリの場合

例えば、こんな仕様を渡されたとしましょう。

入力箇所に灰色の丸い枠があるけど、ラベルは枠の外にある。
初期ヒントがない。

セマンティクスを結合する

まぁラベルはTextで、入力する部分はマテリアルデザインのラベル無しOutlinedTextFieldで、両方をColumnに入れれば、と考えてしまうでしょう。

そしてlabelFor効果は、その親Columnのセマンティクスを結合させればいいじゃん、楽勝〜、と呟きながらこう書くでしょう。(少なくとも私はそうです🥲)

var name by rememberSaveable { mutableStateOf("") }
// コピペしないでね
Column(modifier = Modifier.semantics(mergeDescendants = true){}) {
Text(text = "お名前")

OutlinedTextField(
value = name,
onValueChange = { newText -> name = newText }
)
}

TalkBackフォーカスはColumn全体を包んでるし、問題ないじゃん!
(違うってば)

。。。残念ながらこれじゃ問題は解決されません🙅‍♀️

確かにTalkBackフォーカスは見た目的にColumn全体を包みますが、読み上げられるのは「お名前」のラベルだけです。「編集ボックス」や「ダブルタップでテキストを編集します」とか、TextField系は何も案内されません

実際ダブルタップすれば、ちゃんと入力モードに入りますけど、TalkBackユーザーからすれば、入力できる事がまず伝わってません。

 

ちなみにマテリアルデザインのTextFieldはヒントがないとTalkBackフォーカスをもらえないバグ(?)があるので、上のコードでセマンティクスを結合しなければ、そもそもTalkBackモードで入力ができません。

 

一応、マテリアルデザインのTextFieldではなく、Composeのfoundationライブラリに入っているBasicTextFieldなら、TextField系の案内は読み上げられますし、ヒントがなくても無視されません。

var name by rememberSaveable { mutableStateOf("") }
// これもlabelFor効果にならないよ
Column(modifier = Modifier.semantics(mergeDescendants = true) {}) {
Text(text = "お名前")

BasicTextField(
// 適当に枠をつける(padding調整などは省略する)
modifier = Modifier.border(
width = 1.dp,
color = Color.Gray,
shape = RoundedCornerShape(percent = 8)
),
value = name,
onValueChange = { newText -> name = newText }
)
}

しかし、上と同様にColumn全体がフォーカスされても、読み上げられるのは「お名前」のラベルだけです。BasicTextFieldの内容を案内してもらうには、フォーカスを次の要素へ動かす必要があります

つまりlabelFor効果になってません。

 

セマンティクス経由でグループ化する方法は、もう一つあります。Modifier.clearAndSetSemantics{}ですね。しかしこれを使うと、TextFieldのアクション(テキスト編集など)や案内を自分で管理することになります。

非常に面倒・・・かなりややこしくなりますし、TalkBackのプロではない限りあまりおすすめできません。

 

今回はセマンティクスに頼らず、別の方法を試してみましょう。

 

BasicTextFieldのdecorationBoxをカスタマイズする

decorationBox属性はTextFieldのレイアウトをカスタマイズする時に使います。

こんな感じでラベルとTextFieldの入ったColumnをdecorationBoxに渡します。

var name by rememberSaveable { mutableStateOf("") }

BasicTextField(
value = name,
onValueChange = { newText -> name = newText },
// フォントサイズを指定し直す必要がある
// TextStyle.Default.copy()innerTextFieldのレイアウトが崩れるから使わない
textStyle = TextStyle(fontSize = 16.sp),
decorationBox = { innerTextField ->
Column {
// ラベル
Text(text = "お名前")

// 枠のあるTextField(自作のComposable
OutlinedTextFieldInput(
inputValue = name,
innerTextField = innerTextField
)
}
}
)

 

コードを読みやすくするために、入力する部分は別途書き出します。

枠をつけたり、デフォルトのpaddingなどOutlinedTextFieldのスタイルを引き継ぐためにOutlinedTextFieldDecorationBoxを使います。

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun OutlinedTextFieldInput(
inputValue: String,
innerTextField: @Composable () -> Unit
) {
// 枠をつけてもらう
TextFieldDefaults.OutlinedTextFieldDecorationBox(
value = inputValue,
innerTextField = {
Box(modifier = Modifier.fillMaxWidth()) {
// 入力したものは実際これで表示される
innerTextField()
}
},
// ここから下は本来親のBasicTextFieldから引き継ぐべき
// (とりあえずデフォルトの値にする)
visualTransformation = VisualTransformation.None,
interactionSource = MutableInteractionSource(),
enabled = true,
singleLine = false
)
}

 

これでちゃんとlabelFor効果になります😭✨

 

 

TL;DR

labelFor効果は、マテリアルデザインのシステムを使うか、BasicTextFieldのDecorationBoxをカスタマイズすれば再現できます。

 

実際動かしてみたい方はどうぞこちらへ:

github.com

 

ノシ

 

【メモ】アクセシビリティ リンク集

ガイドライン

www.bbc.co.uk

a11y-guidelines.orange.com

www.ogcio.gov.hk

記事

jakearchibald.com

accessible-usable.net

バイス

www.blindsquare.com

www.bose.co.jp

www.microsoft.com

ゲーム

play.google.com

その他

conf.a11yto.com

inclusivedesign24.org

dequeuniversity.com

bangumi.ouj.ac.jp

bbc.github.io

bbc.github.io

bbc.github.io

stuff.mit.edu