東北TECH道場秋田道場ブログ

2024年4月25日木曜日

東北TECH道場秋田道場 2024年04月 online3

東北TECH道場秋田道場道場主の菅原です。

オンライン開催を4/18(木)に実施しました！
今回は1名参加いただきました。

今回は雑談会的な感じで、ちょっとTableauまわりのお話をしていました～

4月、5月と毎週木曜にオンライン開催予定で、4/28(日)にはオフライン開催しようと思います！

オンラインからでもオフラインからでも、是非お気軽にご参加ください！
※オンライン開催時はDiscordで行っています

https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming

この後の予定です

東北TECH道場秋田道場 2024年04月 online2

東北TECH道場秋田道場道場主の菅原です。

オンライン開催を4/11(木)に実施しました！
今回は1名参加いただきました。

今回もいつも通り各々のテーマでの作業です！

私の方ではアプリを作ろうと思って、引き続き作りたいUIをちょっとずつ仕込んでいます。
アコーディオンっぽいメニューを実装したかったのですが、Compose Multiplatformでの例をなかなか見つけられず・・・Jetpack Composeの実装は見つけられたので移植を試みたのですが、上手くいかず・・・
https://docs.google.com/presentation/d/1LNn-fI4a3hOFTn93u8hn_9OAon9HnFGkylc1inr6b-o/edit#slide=id.gf6a57e036c_0_42

4月、5月と毎週木曜にオンライン開催予定で、4/28(日)にはオフライン開催しようと思います！

オンラインからでもオフラインからでも、是非お気軽にご参加ください！
※オンライン開催時はDiscordで行っています

https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming

この後の予定です

2024年4月4日木曜日

東北TECH道場秋田道場 2024年04月 online1 + ComposeMultiplatformでタブUIを実装する

東北TECH道場秋田道場道場主の菅原です。

オンライン開催を4/4(木)に実施しました！
今回は1名参加いただきました～

今回もいつも通り各々のテーマでの作業です！

私の方ではアプリを作ろうと思って、作りたいUIをちょっとずつ仕込んでいます。
今回は以下のJetpackComposeの記事を参考にして、タブUIを実装してみました！
https://zenn.dev/shogo/articles/3930dbb1c9e2f1

シンタックスハイライトも無いしほぼコピペなのであれですが、色設定の部分だけComposeMultiplatformには無いようなので、そこだけ書き換えてあげると参考リンクの実装がそのまま機能します。

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.Icon
import androidx.compose.material.IconButton
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Scaffold
import androidx.compose.material.Tab
import androidx.compose.material.TabRow
import androidx.compose.material.Text
import androidx.compose.material.TopAppBar
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.primarySurface
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.resources.ExperimentalResourceApi
import org.jetbrains.compose.ui.tooling.preview.Preview
@OptIn(ExperimentalResourceApi::class)
@Composable
@Preview
fun App() {
var selectedTabIndex by remember { mutableStateOf(0) }
val presses by remember { mutableStateOf(0) }
Scaffold(
topBar = {
TopAppBar(
backgroundColor = MaterialTheme.colors.primarySurface,
contentColor = MaterialTheme.colors.onPrimary,
title = {
Text("テイスティングアプリ")
},
actions = {
IconButton(onClick = { /* */ }) {
Icon(Icons.Default.Add, "Add Tab")
}
IconButton(onClick = { /* */ }) {
Icon(Icons.Default.Settings, "Open Settings Page")
}
}
)
},
) { innerPadding ->
Column {
TabRow(
selectedTabIndex = selectedTabIndex,
backgroundColor = MaterialTheme.colors.surface
) {
Tab(
selected = selectedTabIndex == 0,
onClick = {
selectedTabIndex = 0
},
text = {
Text(
text = "冬樹",
fontWeight = FontWeight.Bold,
color = if (selectedTabIndex == 0) Color.DarkGray else Color.LightGray
)
}
)
Tab(
selected = selectedTabIndex == 1,
onClick = {
selectedTabIndex = 1
},
text = {
Text(
text = "十四代",
fontWeight = FontWeight.Bold,
color = if (selectedTabIndex == 1) Color.DarkGray else Color.LightGray
)
}
)
}
Column(
modifier = Modifier
.background(Color.LightGray)
.verticalScroll(rememberScrollState()),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
repeat(100) { index ->
Text(text = "$presses Item: $index")
}
}
}
}
}

あとはちょっとTableauのお話もしたりしてました。

4月も毎週木曜にオンライン開催予定で、4/28(日)にオフライン開催しようと思います！

オンラインからでもオフラインからでも、是非お気軽にご参加ください！
※オンライン開催時はDiscordで行っています

https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming

4月の予定です！

2024年3月28日木曜日

東北TECH道場秋田道場 2024年03月 online4

東北TECH道場秋田道場道場主の菅原です。

オンライン開催を3/28(木)に実施しました！

今回もいつも通り各々のテーマでの作業ですが、
以前の職場の先輩が参加してくださって、今回は雑談に花が咲きました笑

4月も毎週木曜にオンライン開催予定で、4/28(日)にオフライン開催しようと思います！

オンラインからでもオフラインからでも、是非お気軽にご参加ください！
※オンライン開催時はDiscordで行っています

https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming

4月の予定です！

2024年3月21日木曜日

東北TECH道場秋田道場 2024年03月 online3

東北TECH道場秋田道場道場主の菅原です。

オンライン開催を3/21(木)に実施しました！
今回も私だけだったのでソロでもくもく作業を進めました！

今回もいつも通り各々のテーマでの作業です

私の方は継続して、Compose MultiplatformでのUI実装方法をしました。
AppBarにボタンを付けたり、スクロール挙動確認用のリストを置いたりしてみました。

3月は毎週木曜のオンライン開催に加え、3/23(土)には発表会もあります！
4月も毎週木曜にオンライン開催予定で、4/28(日)にオフライン開催しようと思います！

オンラインからでもオフラインからでも、是非お気軽にご参加ください！
※オンライン開催時はDiscordで行っています

https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming

4月の予定です！

2024年3月20日水曜日

東北TECH道場秋田道場 2024年03月 offline1 + Compose MultiplatformのUIをいじってみる

東北TECH道場秋田道場道場主の菅原です。

2か月ぶりのオフライン開催を3/17(日)に実施しました！
今回は2名参加いただきました！

今回もいつも通り各々のテーマでの作業しました。

私の方は前回まででCompose MultiplatformでのUI実装方法に目途を付けたので実践してみました！

Jetpack Composeのドキュメントが参考になるようだったので、以下を実装してみました。
https://developer.android.com/jetpack/compose/components/scaffold?hl=ja

ただ、コードを記載してみたところ、一部エラーで動かない・・・
どうやらJetpack Composeがベースにはなっているものの一部異なる部分があるようで、そのままでは動作しない模様(※ChatGPTに教えてもらった)

Jetpack Compose自体の経験もあまりないので挫折しかけましたが、そこもChatGPTに修正してもらったところ、Compose Multiplatform上で動作させることができました。
これでJetpack Composeのドキュメントを参考にしつつCompose MultiplatformでのUI実装を進めて行けそうです。

サンプルをCompose Multiplatform上で動かせた

オンラインからでもオフラインからでも、是非お気軽にご参加ください！
※オンライン開催時はDiscordで行っています

https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming

4月の予定です！

2024年3月19日火曜日

東北TECH道場秋田道場 2024年03月 online2

東北TECH道場秋田道場道場主の菅原です。

オンライン開催を3/14(木)に実施しました！
今回は私だけだったのでソロでもくもく作業を進めました！

今回もいつも通り各々のテーマでの作業です

私の方は先週と継続して、作りたいアプリのUIを検討しつつ、Compose Multiplatformでの実装方法を調べたりしていました。
Compose MultiplatformはJetpack Composeをベースに作られている背景があるので、Jetpack Composeのドキュメントを参考に進めるのが良さそうかなと感じたところです。

3月は毎週木曜のオンライン開催に加え、3/17(日)にオフライン開催・3/23(土)には発表会もあります！

オンラインからでもオフラインからでも、是非お気軽にご参加ください！
※オンライン開催時はDiscordで行っています

https://tohoku-tech-dojo-akita.doorkeeper.jp/events/upcoming