🙋‍♂️

DroidKaigi カンファレンスアプリ へのコントリビュート

2024/12/02に公開

ポート株式会社 サービス開発部 Advent Calendar 2024 の2日目です。

初めに

ポート株式会社でAndroid開発をしている@shxun6934 です。
2日連続投稿です!

DroidKaigi 2024初めて登壇しました。
登壇に関しての内容はブログになっているので、良かったら、そちらもみてください!

https://note.com/shxun6934/n/n3e7aaa40409b

この記事では、登壇資料の作成をしている時の息抜きとして行った、カンファレンスアプリへのコントリビュートを軽く振り返っていきます。

DroidKaigi カンファレンスアプリ

DroidKaigiは、毎年、一般社団法人DroidKaigi(以下、運営)がカンファレンスアプリを出しています。

iOS: https://apps.apple.com/jp/app/droidkaigi-2024/id6654925989
Android: https://play.google.com/store/apps/details?id=io.github.droidkaigi.confsched2024

このアプリは、GitHubでOSSとして公開されているので、誰でもコントリビュートできます。

https://github.com/DroidKaigi/conference-app-2024

コントリビュートへの思い

去年、いくつかのIssueの対応を行いました。

今年もいくつか対応したい気持ちはありましたが、登壇資料の作成に時間を使いたかったので、あまりできないなと思っていました。

ですが、それでも、できるものがあればちょっとでもやろうと思い、なんとか時間を作ってやりました。

コントリビュートの大まかな流れ

コントリビュートをするためには何をすればいいかは、下記のようなガイドを運営が出しています。

英語版:https://github.com/DroidKaigi/conference-app-2024/blob/main/CONTRIBUTING.md
日本語版:https://github.com/DroidKaigi/conference-app-2024/blob/main/CONTRIBUTING.ja.md

コントリビュートする際は基本的には英語でコミュニケーションをとるのですが、日本の方で英語が苦手でもすんなりコントリビュートできるように日本語版の資料も出しています。

こちらを読むとおおよそわかると思うのですが、大枠としては以下のような流れになります

  1. Repositoryをforkしてcloneする
  2. Buildしてアプリを動かしてみる
  3. 自分ができそうなIssueを見つけてコメントする
  4. 開発してPRを出す
  5. レビューが来た場合は修正する
  6. Approveをもらったら、マージしてもらえる

ここで重要だと思っているのが自分ができそうなIssueを見つけてコメントするだと思っています。

自分ができそうなIssueを見つけてコメントする

公式 にも書いてる通り、Issueにcontributions welcomedifficulty: easy 🌱がついているラベルはとてもとっつきやすいものになっています。

例:

  • フォントサイズ・カラーをFigma通りに変更する
  • 空白サイズを修正する
  • スクロールの挙動を修正する

自分で何かできるものがあれば、勇気を出して「🙋‍♂️」をコメントしてみましょう!

何をしたか

今年は、2つのIssueに取り組みました。

これらのIssueの内容をそれぞれ説明しつつ、どういうことを学んだか・工夫したことを振り返りしていきます!

DescriptionSection of TimetableItemDetailScreen shows the More button even when there is no description

タイムテーブル画面の説明欄に「続きを読む」ボタンが用意されていて、セッションの説明を展開できるようになっています。

自分が取り組む前の状態は、説明欄内の説明の行数に限らず、「続きを読む」ボタンが表示されていました。
それを7行未満の場合は表示しない、7行以上の場合は表示するという対応を行いました。

before after

EventMapItem text color is different from Figma

イベントマップタブ内の各イベントのタイトルとボタンのフォントカラーがFigmaと違うため、Figmaのフォントカラーになるように修正する対応を行いました。

before after figma

学んだこと・工夫したこと

去年の知見を活かして

タイムテーブル画面の対応では、要素のHeightを取得しボタンを表示するかどうかの判定に用いる実装を行いました。
この「要素のHeightを取得する」内容は、去年のコントリビュートでも似たようなことをやったことがあるので、その知見を活かして実装を行うことができました。

ただし、その対応が運営さんの意図にそぐわないものになっているかの確認は必要だと感じたので、PRの該当する行にコメントを残すようにしました。

https://github.com/DroidKaigi/conference-app-2024/pull/522#discussion_r1719601536

このような動きは、普段の開発(個人開発や仕事での開発)でも真似できることだと思います。

Figmaによるデザインの管理

DroidKaigiのカンファレンスアプリには、公式のFigmaのデザインデータがあるので、それを見ながら実装を進める必要があります。

各イベントのタイトルとボタンのフォントカラーを変える対応では、Figmaのデザインデータをみながら実装を進める必要があります。

普段の業務でFigmaの見方・使い方を把握していたつもりですが、タイポグラフィーや色の設定がプログラムの変数のようになっています。

この色の設定がコードでそのまま使用できるようになっていて、変数名も同じになっているので、コードで変更することがとても簡単になっています。

https://github.com/DroidKaigi/conference-app-2024/pull/795/files#diff-58f629131740cb31fd1939fc092b957074b9f45146e5a87494d27cc630fe3bf2

このようにデザインデータとコードでの認識が同じようにできることは、エンジニアにとっても、デザイナーにとっても、共通認識をそろえるという点でとても良いことだと思います。

レビューコメントを通したコミュニケーション

PRを出した後には必ず運営さんからのレビューが来ますが、運営さんがとても優しくとても前向きなコメントをくださるので、こういうコミュニケーションを普段から意識していきたいなと思うようになりました。

参考になる設計

アプリのコードを読むと、KMPを使用してiOS/Androidのロジックの共通化が行われていたり、Convention Pluginを用いてPlugin化していたり、ViewModelがなくなっていたりします。

そのため、コントリビュートしなくても、コードを読むだけでもとても学びになることがたくさんあったなと思っています。

終わりに

上記のような学びを多く経験できることは、コントリビュートのいいところだなと思います。
そういう機会を気軽に提供してくれるDroidKaigiにとても感謝しています。

また、DroidKaigiのコントリビュートを行なっていると、DroidKaigi内で自分のGitHubアイコンが載ります。
これを目指して頑張るということもできますし、のった時に次のモチベにもつながるので、とてもいいなと思います!

3日目は、わとぽっぽさんの記事なので、そちらもみてください!

ポート株式会社 エンジニアブログ

Discussion