$30 off During Our Annual Pro Sale. View Details »

Compose for Webでポートフォリオサイトを作る

subroh_0508
September 24, 2024
85

Compose for Webでポートフォリオサイトを作る

集まれKotlin好き!Kotlin愛好会 vol.54のLT資料です。

https://love-kotlin.connpass.com/event/328642/
ポートフォリオサイト: https://subroh0508.me/

subroh_0508

September 24, 2024
Tweet

More Decks by subroh_0508

Transcript

  1. 自己紹介 2 【¥303,075】にしこりさぶろ〜 @subroh_0508 🎤経歴 1995年生まれ。東京の離島・伊豆大島出身。 メインの技術スタックはKotlin・Android・Rails・React。 • 2016年3月 東京高専

    情報工学科卒 • 2016年4月 株式会社TOKIUM入社(当時はBearTail) 2016年4月 💼Android/Webエンジニア • 2023年1月 DevHRにロールチェンジ 2023年1月 💼エンジニア採用・組織作り・採用広報 • Now!! 新卒9年目、プレイヤーとして6年8ヶ月 その後、人事職にロールチェンジして2年目
  2. 自己紹介 3 【¥303,075】にしこりさぶろ〜 @subroh_0508 💖趣味 ああああああああああああああああとアイドルマスター。 Kotlin本体へのContribute経験、Kotlin Festへの登壇経験 アリ(2019、2022、2024)。DevHRになって以降は開発 業務から離れたが、趣味でKotlinを書き続けている。

    アイドルマスターが好きすぎて、ライブがあれば全国どこに でも飛び、ほぼ月1回の頻度で現地会場に現れる。昨年末の 異次元フェスで脳が破壊され、最近ラブライバーになった。 Kotlin Fest 2024登壇時
  3. 🔧自身のポートフォリオサイト 初代: Kotlin/JS + React.js 2代目: Compose HTML (Kotlin/JS) 3代目:

    Compose for Web (Kotlin/Wasm) 初回リリースは2019年5月! WebアプリをフルKotlinで 実装する謎の縛りプレイを 5年以上続けている😂 4 subroh0508.me subroh0508/portfolio 自己紹介 / どのくらいKotlinが好きか Now!!
  4. 6 🤔 Compose Multiplatformとは ➔ AndroidアプリのUIを宣言的に実装できるJetpack Composeの Kotlin Multiplatform対応版 ➔

    iOS・Desktop・WebアプリのUIを1つのコードで宣言的に実装できる! 公式サイト: Compose Multiplatform UI フレームワーク | JetBrains Desktop向けは既に安定版に到達! iOS向けも、実はα版までリリースされている! 前提知識: フレームワークについて Androidに加え
  5. 7 🌐 Compose HTML Kotlinコードが最終的にJavaScriptコードに変換される 👍 情報・ライブラリ資産が豊富(=JavaScriptの情報・ライブラリが転用可) 👎 見た目の調整にCSSを利用するため、UI実装を他ターゲットと共通化できない 🤖

    Compose for Web Kotlinコードが最終的にWebAssemblyコードに変換される 👍 他ターゲットと同じ仕組みで見た目を調整でき、UI実装の完全な共通化を実現 👎 ビルド後のファイルサイズが大きい、DOMへのアクセスに制限がある 前提知識: Compose MultiplatformでのWebアプリ実装方法
  6. 8 🌐 Compose HTML Kotlinコードが最終的にJavaScriptコードに変換される 👍 情報・ライブラリ資産が豊富(=JavaScriptの情報・ライブラリが転用可) 👎 見た目の調整にCSSを利用するため、UI実装を他ターゲットと共通化できない 🤖

    Compose for Web Kotlinコードが最終的にWebAssemblyコードに変換される 👍 他ターゲットと同じ仕組みで見た目を調整でき、UI実装の完全な共通化を実現 👎 ビルド後のファイルサイズが大きい、DOMへのアクセスに制限がある 前提知識: Compose MultiplatformでのWebアプリ実装方法 今日はこちらにフォーカス🔎
  7. 10 Compose for Webでできること 💻動作デモ ➔ ライトテーマ・ダークテーマ切り替え ➔ ナビゲーション(URLのパスと画面が紐づく) ➔

    各種アニメーション(Fade In/Out、Ripple Effect) ➔ CSSを一切書かずに実装 subroh0508.me subroh0508/portfolio 状態を持たないシンプルな Webアプリとして 十分な機能が実現できている💪
  8. 12 Compose for Webでの困りごと 😣 ここまで実装する上で困ったこと(1/3) ➔ 外部リンクにジャンプできない! 通常、 <a>

    タグを使えば、何も考えることなく実現できるが… <a href="https://x.com/subroh_0508">X.com</a>
  9. 13 Compose for Webでの困りごと 😣 ここまで実装する上で困ったこと(1/3) ➔ 外部リンクにジャンプできない! 通常、 <a>

    タグを使えば、何も考えることなく実現できるが… Compose for WebはDOM操作・HTML出力をしないので <a> タグを使った外部リンクへのジャンプができない🫠 <a href="https://x.com/subroh_0508">X.com</a>
  10. 通常、 <a> タグを使えば勝手に「👆」に変わってくれるが、 Compose for WebはDOM操作・HTML出力をしないので カーソルが変化しない🫠 14 Compose for

    Webでの困りごと 😣 ここまで実装する上で困ったこと(2/3) ➔ クリック可能なコンポーネントでマウスカーソルが変化しない!
  11. 17 Compose for Webでの困りごとを乗り越える(1/3) 😣 外部リンクにジャンプできない! ➔ Kotlinの標準ライブラリにBrowser APIのラッパーメソッドが存在 これは、Kotlin/Wasmからも呼び出すことが可能!

    fun openWindow(url: String, target: String) { window.open(url, target) } @Composable fun AccountLink( label: String, href: String, ) = FilterChip( selected = true, onClick = { openWindow(href) }, leadingIcon = { icon() }, label = { Text(label) }, ) window.open を呼び出すメソッドを定義 → 引数 onClick に渡せばOK👍
  12. 18 Compose for Webでの困りごと(2/3) 😣 クリック可能なコンポーネントでマウスカーソルが変化しない! ➔ Modifierでホバー時のカーソルを指定してあげる @Composable fun

    AccountLink( label: String, href: String, ) = FilterChip( selected = true, onClick = { openWindow(href) }, label = { Text(label) }, modifier = Modifier.pointerHoverIcon(PointerIcon.Hand), ) pointerHoverIcon で、ホバー時のカーソルを変えられる! Default / Crosshair / Hand / Textの4種類に対応
  13. 19 Compose for Webでの困りごと(2/3) 😣 クリック可能なコンポーネントでマウスカーソルが変化しない! ➔ Modifierでホバー時のカーソルを指定してあげる @Composable fun

    AccountLink( label: String, href: String, ) = FilterChip( selected = true, onClick = { openWindow(href) }, label = { Text(label) }, modifier = Modifier.pointerHoverIcon(PointerIcon.Hand), ) pointerHoverIcon で、ホバー時のカーソルを変えられる! Default / Crosshair / Hand / Textの4種類に対応
  14. 😣 日本語フォントがtofuになる! ➔ コード内で明示的に日本語フォントを読み込ませる 20 Issue #3967 Compose for Webでの困りごと(3/3)

    private val fontSets: List<FontSet> = listOf( FontSet("NotoSansJP-Medium.ttf", FontWeight.Medium, FontStyle.Normal), // 略 ) @Composable fun rememberFontFamily(): FontFamily { val fontFamily = remember { mutableStateOf(listOf<Font>()) } LaunchedEffect(Unit) { fontFamily.value = fontSets.map { val byte = loadBytesFromPath("fonts/${it.fileName}") Font(it.fileName, byte, it.weight, it.style) } } return FontFamily(fontFamily.value) } Noto Sansフォントを 読み込むコード
  15. 😣 日本語フォントがtofuになる! ➔ とりあえずNoto Sans JPフォントをウェイトごとに全て読み込ませたところ… 21 Compose for Webでの困りごと(3/3)

    Wasmファイルの読み込み完了から 文字の表示までに2分かかる 激重ポートフォリオサイトが爆誕😂 対応時のIssue
  16. 🤔 Compose for Webの使いどころ 28 現状の障壁 WebAssemblyは「高いパフォーマンス」や 「複数プラットフォームでの安定動作」が必要な 場面で最も力を発揮する 採用事例:

    Google Meetの背景ぼかし機能、 Amazon Prime Videoの動画再生クライアント 「主要ブラウザで動作すればOK」であり、 「高いパフォーマンスは必要とされない」 Webサイトへの採用は正直Too Much😇 出典: WebAssembly の概要 - WebAssembly | MDN
  17. 🤔 Compose for Webの使いどころ ➔ Android / iOS / Desktopアプリが既にあり、Webでも使えるようにしたい!

    ➔ WebアプリをAndroid / iOS / Desktopでも提供したい! 29 現状の障壁 上記ユースケースでは、大きな価値を発揮する💪 以前作った、スマホを気軽にペンライトにできる WebアプリをCompose for Webで書き直したい…!😊
  18. まとめ 30 👍 Compose for Webを使うと、Androidアプリの実装経験を強く活かしながら Webアプリの開発に取り組むことができる! ➔ CSSを使わずにWebアプリを実装できるのは、非常に強力 ➔

    「JavaScriptでのWebアプリ開発と同じことができる!」と思って進めると ハマりどころが多数あるため注意 👍 Compose for Webは、アプリのX-Plat対応において大きな価値を発揮する!(はず) ➔ 「モバイルとWeb、両方欲しい!」ケースに遭遇したら、検討してみては😉 ポートフォリオサイト、簡単なゲーム、効率化アプリ等 まずは小さな開発からCompose for Webを試してみましょう!楽しいぞ!😘 Thank you for listening!