Merge pull request #76 from subroh0508/feature/speakerdeck-embed-links

subroh0508 · web-flow · commit 0c754c06cde2 · 2026-01-05T01:48:21.000+09:00
Add SpeakerDeck embed for Conference works
diff --git a/shared/src/commonMain/kotlin/component/WorkCard.kt b/shared/src/commonMain/kotlin/component/WorkCard.kt
@@ -1,7 +1,6 @@
 package component
 
 import PortfolioTag
-import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Tag
@@ -13,12 +12,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.input.pointer.PointerIcon
 import androidx.compose.ui.input.pointer.pointerHoverIcon
-import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.dp
 import component.work.Time
 import component.work.Work
-import org.jetbrains.compose.resources.imageResource
 import org.jetbrains.compose.resources.stringResource
 import utils.openWindow
 
@@ -45,14 +42,7 @@ internal fun WorkCard(
             )
         }
     },
-    thumbnail = {
-        Image(
-            imageResource(work.thumbnail),
-            contentDescription = null,
-            contentScale = ContentScale.Crop,
-            modifier = Modifier.fillMaxSize(),
-        )
-    },
+    thumbnail = work.thumbnail,
     modifier = modifier,
 )
 
@@ -66,10 +56,7 @@ internal fun WorkCard(
     thumbnail: @Composable () -> Unit,
     modifier: Modifier = Modifier,
 ) = ElevatedCard(modifier) {
-    WorkCardThumbnail(
-        type,
-        thumbnail,
-    )
+    WorkCardThumbnail(thumbnail)
 
     Column(
         modifier = Modifier.padding(16.dp),
@@ -90,12 +77,23 @@ internal fun WorkCard(
         Spacer(Modifier.height(16.dp))
 
         Row(
-            modifier = Modifier.align(Alignment.End),
-            horizontalArrangement = Arrangement.spacedBy(8.dp),
-        ) { linkButtons() }
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            WorkTypeTag(type)
+            Spacer(Modifier.weight(1f))
+            LinkButtons(linkButtons)
+        }
     }
 }
 
+@Composable
+private fun LinkButtons(
+    content: @Composable () -> Unit,
+) = Row(
+    horizontalArrangement = Arrangement.spacedBy(8.dp),
+) { content() }
+
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
 internal fun LinkButton(
@@ -123,27 +121,11 @@ internal fun LinkButton(
 
 @Composable
 private fun WorkCardThumbnail(
-    type: String,
     thumbnail: @Composable () -> Unit,
 ) = Box(
     modifier = Modifier.fillMaxWidth()
         .height(WorkCardThumbnailHeight),
-) {
-    thumbnail()
-
-    NoRippleAssistChip(
-        onClick = { },
-        colors = AssistChipDefaults.assistChipColors(
-            containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.8F),
-        ),
-        border = null,
-        leadingIcon = { Icon(Icons.Default.Tag, contentDescription = null) },
-        label = { Text(type) },
-        modifier = Modifier.align(Alignment.BottomEnd)
-            .offset(x = (-8).dp, y = (-4).dp)
-            .testTag(PortfolioTag.WORK_CARD_TAG),
-    )
-}
+) { thumbnail() }
 
 @Composable
 private fun WorkHeadline(
@@ -165,3 +147,17 @@ private fun WorkHeadline(
         modifier = Modifier.testTag(PortfolioTag.WORK_CARD_TIME),
     )
 }
+
+@Composable
+private fun WorkTypeTag(
+    type: String,
+) = NoRippleAssistChip(
+    onClick = { },
+    colors = AssistChipDefaults.assistChipColors(
+        containerColor = MaterialTheme.colorScheme.surface.copy(alpha = 0.8F),
+    ),
+    border = null,
+    leadingIcon = { Icon(Icons.Default.Tag, contentDescription = null) },
+    label = { Text(type) },
+    modifier = Modifier.testTag(PortfolioTag.WORK_CARD_TAG),
+)
diff --git a/shared/src/commonMain/kotlin/component/work/SpeakerDeck.kt b/shared/src/commonMain/kotlin/component/work/SpeakerDeck.kt
@@ -0,0 +1,58 @@
+package component.work
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.viewinterop.WebElementView
+import kotlinx.browser.document
+import org.w3c.dom.HTMLIFrameElement
+
+@OptIn(ExperimentalComposeUiApi::class)
+@Composable
+internal fun SpeakerDeck(
+    link: SpeakerDeckLink,
+    modifier: Modifier = Modifier,
+) {
+    Box(modifier = modifier) {
+        WebElementView(
+            factory = { iframe(link.src, link.title) },
+            modifier = Modifier.fillMaxSize(),
+            update = { iframe -> iframe.src = iframe.src },
+        )
+    }
+}
+
+internal data class SpeakerDeckLink(
+    val src: String,
+    val title: String,
+)
+
+private fun iframe(
+    src: String,
+    title: String,
+): HTMLIFrameElement {
+    val element = document.createElement(
+        "iframe"
+    ) as HTMLIFrameElement
+
+    return element.apply {
+        this.src = src
+        this.title = title
+        className = "speakerdeck-iframe"
+        allowFullscreen = true
+        setAttribute("data-ratio", "1.7777777777777777")
+        with(style) {
+            border = "0px"
+            background = "padding-box padding-box rgba(0, 0, 0, 0.1)"
+            margin = "0px"
+            padding = "0px"
+            borderRadius = "6px"
+            boxShadow = "rgba(0, 0, 0, 0.2) 0px 5px 40px"
+            width = "100%"
+            height = "auto"
+            setProperty("aspect-ratio", "560 / 315")
+        }
+    }
+}
diff --git a/shared/src/commonMain/kotlin/component/work/Work.kt b/shared/src/commonMain/kotlin/component/work/Work.kt
@@ -1,13 +1,19 @@
 package component.work
 
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.automirrored.filled.OpenInNew
 import androidx.compose.material.icons.filled.Code
 import androidx.compose.material.icons.filled.Description
 import androidx.compose.material.icons.filled.Movie
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.layout.ContentScale
 import org.jetbrains.compose.resources.DrawableResource
 import org.jetbrains.compose.resources.StringResource
+import org.jetbrains.compose.resources.imageResource
 import portfolio.shared.generated.resources.*
 
 internal data class Work(
@@ -16,8 +22,54 @@ internal data class Work(
     val type: WorkType,
     val links: List<Link>,
     val time: Time,
-    val thumbnail: DrawableResource,
-)
+    val thumbnail: @Composable () -> Unit,
+) {
+    companion object {
+        operator fun invoke(
+            headline: StringResource,
+            description: StringResource,
+            type: WorkType,
+            links: List<Link>,
+            time: Time,
+            thumbnail: DrawableResource,
+        ) = Work(
+            headline,
+            description,
+            type,
+            links,
+            time,
+            thumbnail = {
+                Image(
+                    imageResource(thumbnail),
+                    contentDescription = null,
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier.fillMaxSize(),
+                )
+            },
+        )
+
+        operator fun invoke(
+            headline: StringResource,
+            description: StringResource,
+            type: WorkType,
+            links: List<Link>,
+            time: Time,
+            slide: SpeakerDeckLink,
+        ) = Work(
+            headline,
+            description,
+            type,
+            links,
+            time,
+            thumbnail = {
+                SpeakerDeck(
+                    slide,
+                    modifier = Modifier.fillMaxSize(),
+                )
+            },
+        )
+    }
+}
 
 internal enum class WorkType(val label: StringResource) {
     Conference(Res.string.conference),
@@ -79,7 +131,10 @@ internal val DevelopersBoost2025 = Work(
         ),
     ),
     Time.Event(2025),
-    Res.drawable.developersboost2025,
+    SpeakerDeckLink(
+        src = "https://speakerdeck.com/player/5de4947ef6a34dd299b99abe62d65bc7",
+        title = "技術以外の世界に『越境』しエンジニアとして進化を遂げる 〜Kotlinへの愛とDevHRとしての挑戦を添えて〜",
+    ),
 )
 
 internal val EngineerAnime2025 = Work(
@@ -95,7 +150,10 @@ internal val EngineerAnime2025 = Work(
         ),
     ),
     Time.Event(2025),
-    Res.drawable.engineeranime2025,
+    SpeakerDeckLink(
+        src = "https://speakerdeck.com/player/60ea30fcfad241239cba1b136736fc20",
+        title = "MustをWillに変える技術 〜アイドル・郁田はるきが&quot;すべき&quot;の壁を超えるまで〜",
+    ),
 )
 
 internal val KotlinFest2024 = Work(
@@ -117,7 +175,10 @@ internal val KotlinFest2024 = Work(
         ),
     ),
     Time.Event(2024),
-    Res.drawable.kotlinfest2024,
+    SpeakerDeckLink(
+        src = "https://speakerdeck.com/player/a537a3def3ae4c23a5bfe8d763b089b0",
+        title = "あらゆるアプリをCompose Multiplatformで書きたい！ -ネイティブアプリの「あの機能」を私たちはどう作るか-",
+    ),
 )
 
 internal val KotlinFest2022 = Work(
@@ -139,7 +200,10 @@ internal val KotlinFest2022 = Work(
         ),
     ),
     Time.Event(2022),
-    Res.drawable.kotlinfest2022,
+    SpeakerDeckLink(
+        src = "https://speakerdeck.com/player/f023b131957a4c409d633498272cc6bf",
+        title = "フロントエンドもJetpack Composeで書きたい！ -Compose for WebはモダンWebアプリケーションの夢を見るか？-",
+    ),
 )
 
 internal val KotlinFest2019 = Work(
@@ -161,7 +225,10 @@ internal val KotlinFest2019 = Work(
         ),
     ),
     Time.Event(2019),
-    Res.drawable.kotlinfest2019,
+    SpeakerDeckLink(
+        src = "https://speakerdeck.com/player/cc46277d17c240b5955026ab25cbc083",
+        title = "フロントエンドもKotlinで書きたい！ -WebページをKotlin/JSで作った軌跡-",
+    ),
 )
 
 internal val DroidKaigi2019 = Work(
@@ -183,7 +250,10 @@ internal val DroidKaigi2019 = Work(
         ),
     ),
     Time.Event(2019),
-    Res.drawable.droidkaigi2019,
+    SpeakerDeckLink(
+        src = "https://speakerdeck.com/player/52a0289ebfe649f09524739bb4f7ddd5",
+        title = "Spek2+MockK+JaCoCoでイケてる Unit Test環境を手に入れろ！",
+    ),
 )
 
 internal val KotlinMaterialUi = Work(
