Android Studio のダウンロードとインストール JetBrains Toolboxを使用してインストール・アップデートすることもできます 個別にダウンロードしてインストールする場合は https://developer.android.com/studio?hl=ja からダウンロードします macOSの場合 ダウンロードしたdmgをマウントしてAndroid Studio.appを/Applicationsにドロップ Windowsの場合 Android Virtual Deviceを選択し、ウィザードに沿ってインストールする Android SDK のインストール Android Studio を初回起動時にセットアップが始まるので画面指示どおりに進めてください Android Virtual Device (AVD)作成 Android Studio を起動し、起動時の画面のConfigureからAVD Manager起動 Android Virtual Device Manager で Create Virtual Device を選択 適当な端末定義を選択 (画像ではPixel 2) OSイメージを選択 (ダウンロードしていなければ先にDownloadボタンでインストール) AVD Name を決めて完了 ※コマンドラインで操作する場合にこの名前で指定することになります

Android エミュレータを利用するために Android Studio をインストールし 仮想端末(AVD)を作成する手順です ※わかりにくい記述などありましたら、ご指摘いただけるとありがたいです Android Studio のダウンロードとインストール JetBrains Toolboxを使用してインストール・アップデートすることもできます 個別にダウンロードしてインストールする場合は https://developer.android.com/studio?hl=ja からダウンロードします macOSの場合 ダウンロードしたdmgをマウントしてAndroid Studio.appを/Applicationsにドロップ Windowsの場合 Android Virtual Deviceを選択し、ウィザードに沿ってインストールする Android SDK のインストール Android Studio を初回起動時にセットアップが始まるので画面指示どおりに進めてください Android Virtual Device (AVD)作成 Android Studio を起動し、起動時の画面のConfigureからAVD Manager起動 Android Virtual Device Manager で Create Virtual Device を選択 適当な端末定義を選択 (画像ではPixel 2) OSイメージを選択 (ダウンロードしていなければ先にDownloadボタンでインストール) AVD Name を決めて完了 ※コマンドラインで操作する場合にこの名前で指定することになります

主に公式ドキュメントに書いてることを自分なりに解釈した言葉でまとめます。 Composeのプロジェクトを作ったら MainActivityの onCreate（）に setContentが配置されてると思いますが、その中で NavHostを用意してあげます。ここが従来のNavigation ComponentのNavGraphみたいな感じになります。 まずは普通に画面遷移 NavHostを用いて画面遷移する際に NavControllerのインスタンスが必要なので、 NavHostをつくる前に作っておきます。 val navController = rememberNavController() 次に NavHostを定義します。 setContentの中で呼ばれるように @Composableなメソッドの中で定義します。 setContent { NavHost(navController = navController, startDestination = "home") { composable(route = "home") { HomeScreen() } composable(route = "detail") { DetailScreen() } } } よくありそうな、Home画面のようなリストがある画面から1つのItemをタップしたときに詳細画面に遷移するイメージの NavHostです。 NavHostの第2引数には、従来のNavigation Componentにも必要だった startDestinationを設定します。そうすることで、このKeyが routeに設定されている画面から起動します。 HomeScreen()では、リストの中のItemがタップされたときに DetailScreen()に遷移したいのですが、この際に、最初に定義した navControllerを HomeScreen()に渡してあげる必要があります。 HomeScreen()の中で実際になにかタップされたときに DetailScreen()に遷移したいときはこんな感じです。 @Composable fun HomeScreen(navController: NavController) { Button( onClick = { navController.navigate("detail") } ) { } } DetailScreen()に遷移後、 Toolbarなどに置かれた戻るボタンが押されたときに前の画面に戻りたいときはこうです。 navController.popBackStack() 遷移先に値を渡す HomeScreen()から DetailScreen()に遷移したときに何かしら値を渡したいときがよくあると思います。 まずは Stringを渡せるようにしてみましょう。 setContent { NavHost(navController = navController, startDestination = "home") { composable(route = "home") { HomeScreen(navController = navController) } composable( route = "detail/{id}", arguments = listOf(navArgument("id") { type = NavType.StringType }) ) { backStackEntry -> val argId = backStackEntry.arguments?.getString("id") ?: return@composable DetailScreen(id = argId) } } } この NavHostでは HomeScreen()から DetailScreen()に idという名前の Stringを遷移時に渡しています。 HomeScreen()で遷移するときは、こんな感じです。 val id = "hogeId" navController.navigate("detail/$id") NavHostを定義するときに、 backStackEntryを用いて遷移元から渡ってきた値を取り出すことができます。 また、 argumentsで定義している NavTypeには他にもたくさんあります。 Stringの渡し方はわかりましたが、実際に開発していて Stringや Booleanなどの簡単な型の値を渡したくなるときはあまりなく、 Userがたくさん並んでるリストから1つタップして User型を UserDetailScreen()に渡して表示するみたいなユースケースが多いと思います。 そこで、 NavTypeには NavType.SerializableTypeというのがいるので、 Serializableな data classを定義してそれを渡すようにすれば良さそうです。 data class User( val name: String, ) : Serializable コードの全体像はこんな感じです。 class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { val navController = rememberNavController() NavHost(navController = navController, startDestination = "home") { composable(route = "home") { HomeScreen(navController = navController) } composable( route = "detail/{user}", arguments = listOf(navArgument("user") { type = NavType.SerializableType(User::class.java) }) ) { backStackEntry -> val user = backStackEntry.arguments?.getSerializable("user") as User DetailScreen(navController = navController, user = user) } } } } } @Composable fun HomeScreen(navController: NavController) { Scaffold { Column { Text(text = "This is HomeScreen") val user = User(name = "hoge") Button(onClick = { navController.navigate("detail/$user") }) { } } } } @Composable fun DetailScreen(navController: NavController, user: User) { Scaffold { Column { Text(text = "This is DetailScreen $user") Button(onClick = { navController.popBackStack() }) { } } } } これを実行して、実際に遷移させると以下のようなエラーが起きてうまく動きません。 java.lang.UnsupportedOperationException: Serializables don't support default values. 色々と調べてみましたが、わたしの方ではこの解決策は見つけることができませんでした…。 もし、解決策をご存知の方がいましたらご教授願います。。。 そこで、こんな動画を見つけました。 この動画では、これに対処するために Userを一度 Gsonを用いてJsonに変換したものを Stringとして遷移先に渡して、遷移先の今回でいう DetailScreen()で Stringを Userに変換して取り出す方法で実装していました。 一応これで自分で定義した data classを遷移先に渡すことができましたが、今はまだこのように実装するしかないのでしょうか… 遷移後に前の画面に戻れないようにする 今までのユースケースでは遷移後に戻るボタンで前の画面に戻れてよかったのですが、ログイン画面でログインボタンを押してホーム画面に戻ってくるときなど、遷移後に遷移前の画面に戻ってほしくないときがあると思います。 そのときは、遷移時にこのように実装します。 Button( onClick = { navController.navigate("home") { popUpTo("login") { inclusive = true } } } ) ホームに navigateするときに同時に inclusiveというのを設定して現在のログイン画面を popUpToしてあげます。 これによってAndroidの戻るボタンを押しても前の画面に戻らないような挙動を実現できます。 ネストしたNavigation 従来のNested navigation graphsのように、ComposeのNavigation Componentでもアプリ内の特定の画面遷移をモジュール化することができます。 たとえば、ログインやユーザ登録などの認証機能周りの画面遷移のモジュールと、ログイン後のBottomNavigationがあるような様々な機能に触れる画面遷移のモジュールなどでしょうか。 NavHostの中で navigationを用いて特定の画面遷移の塊をモジュール化してこのように実装します。 setContent { val navController = rememberNavController() NavHost(navController = navController, startDestination = "home") { navigation(startDestination = "login", route = "auth") { composable(route = "login") { LoginScreen() } composable(route = "register") { RegisterScreen() } } composable(route = "home") { HomeScreen(navController = navController) } composable( route = "detail/{user}", arguments = listOf(navArgument("user") { type = NavType.SerializableType(User::class.java) }) ) { backStackEntry -> val user = backStackEntry.arguments?.getSerializable("user") as User DetailScreen(navController = navController, user = user) } } } 認証周りの画面遷移を authという名前で定義して、遷移時に以下のようにすると authのNavigationの塊を見て startDestinationで定義されている loginに遷移します。 navController.navigate("auth") おわり ほかにも、ComposeのNavigation Componentにはディープリンクの機能もあってintent filterで特定のComposeの画面に遷移させることもできそうです。 Composeはまだbetaで、私も探り探りなので色々な人と知見を共有して他にもこんなふうに書けるよや、そこは使い方間違ってるよなどあれば是非コメントください。 参考 https://developer.android.com/jetpack/compose/navigation https://youtu.be/OgYfQNbl0ts

Android Studioのインストール Android StudioのインストールまではUIに従って手順にできる。 以下、その時の手順をメモとして残しておく。 公式サイトよりダウンロード https://developer.android.com/studio/ トップに出てくる最新版をダウンロードする。 ダウンロード時の同意確認をOKしてダウンロードを行う インストール ダウンロードしたExeを実行 カスタムがなければ手順通りに実行し完了 難しい箇所はない 設定ファイルがなければ設定ファイルのインポートなしでOK SetUp Wizard完了 SDKのインストール 次にSDKマネージャーを起動し、必要なSDKをインストールする。 この時点では、Andoroid11.0のみインストールされている。 Android10.0のシミュレータで開発・テストを実施することがある場合は、Android10.0もインストールしておく。 AVDマネージャよりデバイスのインストール デフォルトでもPixelのとあるバージョンが入っているのでそれを使う場合は、追加インストールは不要。 仮想デバイス1つ追加すると1ギガ程度は必要になるため、必要な分だけインストールするようにする。 これでシミュレータの準備はOKで、開発時にコネクトさせることでデバッグ開発が可能となる。

はじめに ktlintの使い方、およびCustom Ruleを追加する方法を説明します。 ktlintはKotlin Codeの形式的なチェックをおこないます。Ruleの例は[2]を参照ください。 可能な範囲で自動Formatできます。 基本的な使い方を説明した後に、Custom Ruleを追加する方法を説明します。 環境 Android Studioを使います。Versionの詳細は以下の通りです。 Android Studio 4.0 Build #AI-193.6911.18.40.6514223, built on May 21, 2020 Runtime version: 1.8.0_242-release-1644-b01 amd64 VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o Windows 10 10.0 ktlintを使う ktlintの基本的な使い方を説明します。 手順は次の通りです。 Android Studioを起動します。"Welcome to Android Studio"の画面が表示されます。(*1) "Start a new Android Studio project"を選択します。 "No Activity"を選択します。Nextを押下します。 ここでは次のように設定しました。 (*1)表示されない場合は[File]-[Close Project]をおこないます。 Name -> My Application Package name -> com.e.myapplication Language -> Kotlin Minimum SDK -> API 30: Android 10.0+(R) Finishを押下します。 app\build.gradleの最後に以下を追加します。([1] without a pluginを引用します) com.pinterest:ktlint:0.41.0 -> com.pinterest:ktlint:0.38.0-alpha01 に置き換えます。 build.gradle configurations { ktlint } dependencies { ktlint "com.pinterest:ktlint:0.38.0-alpha01" // additional 3rd party ruleset(s) can be specified here // just add them to the classpath (e.g. ktlint 'groupId:artifactId:version') and // ktlint will pick them up } task ktlint(type: JavaExec, group: "verification") { description = "Check Kotlin code style." classpath = configurations.ktlint main = "com.pinterest.ktlint.Main" args "src/**/*.kt" // to generate report in checkstyle format prepend following args: // "--reporter=plain", "--reporter=checkstyle,output=${buildDir}/ktlint.xml" // to add a baseline to check against prepend following args: // "--baseline=ktlint-baseline.xml" // see https://github.com/pinterest/ktlint#usage for more } check.dependsOn ktlint task ktlintFormat(type: JavaExec, group: "formatting") { description = "Fix Kotlin code style deviations." classpath = configurations.ktlint main = "com.pinterest.ktlint.Main" args "-F", "src/**/*.kt" } 画面右上の"Sync now"を実行します。 [View]-[Tool Windows]-[Gradle]を選択します。 Gradle [My Application]-[Tasks]-[verification]-[ktlint]を押下します。 実行後に次のエラーが表示されます。 > Task :app:ktlint FAILED C:\Users\[User]\AndroidStudioProjects\MyApplication\app\src\androidTest\java\com\e\myapplication\ExampleInstrumentedTest.kt:1:1: File must end with a newline (\n) C:\Users\[User]\AndroidStudioProjects\MyApplication\app\src\androidTest\java\com\e\myapplication\ExampleInstrumentedTest.kt:3:1: Imports must be ordered in lexicographic order without any empty lines in-between with "java", "javax", "kotlin" and aliases in the end C:\Users\[User]\AndroidStudioProjects\MyApplication\app\src\androidTest\java\com\e\myapplication\ExampleInstrumentedTest.kt:9:1: Wildcard import (cannot be auto-corrected) C:\Users\[User]\AndroidStudioProjects\MyApplication\app\src\test\java\com\e\myapplication\ExampleUnitTest.kt:1:1: File must end with a newline (\n) C:\Users\[User]\AndroidStudioProjects\MyApplication\app\src\test\java\com\e\myapplication\ExampleUnitTest.kt:3:1: Imports must be ordered in lexicographic order without any empty lines in-between with "java", "javax", "kotlin" and aliases in the end C:\Users\[User]\AndroidStudioProjects\MyApplication\app\src\test\java\com\e\myapplication\ExampleUnitTest.kt:5:1: Wildcard import (cannot be auto-corrected) 1 actionable task: 1 executed 次の手順で自動Formatします。 [View]-[Tool Windows]-[Gradle]を選択します。 Gradle [My Application]-[Tasks]-[formatting]-[ktlintFormat]を押下します。 自動Formatによりエラー数が減りました。 > Task :app:ktlint FAILED C:\Users\[User]\AndroidStudioProjects\MyApplication\app\src\androidTest\java\com\e\myapplication\ExampleInstrumentedTest.kt:5:1: Wildcard import (cannot be auto-corrected) C:\Users\[User]\AndroidStudioProjects\MyApplication\app\src\test\java\com\e\myapplication\ExampleUnitTest.kt:3:1: Wildcard import (cannot be auto-corrected) 1 actionable task: 1 executed Ruleを作る ktlintではユーザが独自にRuleを作ることができます。 ktlintのgitに含まれるktlint-ruleset-templateを例に説明します。 0.38.0-alpha01を使いました。以下を取得して、展開してください。 https://github.com/pinterest/ktlint/archive/refs/tags/0.38.0-alpha01.zip ktlint-ruleset-template ktlint-ruleset-templateはvarが使用できないRuleを定義しています。 ktlint-ruleset-templateの処理内容を説明します。 ktlint-ruleset-template\src\main\kotlin\yourpkgname NoVarRule.ktを説明します。 Rule classを継承したNoVarRuleを実装します。 visitはAbstract syntax tree(AST)のnodeを訪れます。 visitを実装することでRuleに適合しているかどうかをチェックできます。 elementTypeがVAR_KEYWORDであればemitを実行します。 emitによりエラー発生をktlintに返します。 NoVarRule.kt package yourpkgname import com.pinterest.ktlint.core.Rule import com.pinterest.ktlint.core.ast.ElementType.VAR_KEYWORD import org.jetbrains.kotlin.com.intellij.lang.ASTNode class NoVarRule : Rule("no-var") { override fun visit( node: ASTNode, autoCorrect: Boolean, emit: (offset: Int, errorMessage: String, canBeAutoCorrected: Boolean) -> Unit ) { if (node.elementType == VAR_KEYWORD) { emit(node.startOffset, "Unexpected var, use val instead", false) } } } ktlint-ruleset-template\src\main\kotlin\yourpkgname CustomRuleSetProvider.ktを説明します。 NoVarRuleをktlintに登録するためにRuleSetProviderを実装します。 getをoverrideします。getはRuleSetを返します。RuleSetにNoVerRuleを登録します。 CustomRuleSetProvider.kt package yourpkgname import com.pinterest.ktlint.core.RuleSet import com.pinterest.ktlint.core.RuleSetProvider class CustomRuleSetProvider : RuleSetProvider { override fun get(): RuleSet = RuleSet("custom", NoVarRule()) } なお、RuleSetには次のように複数のRuleを設定できます。 例えばNoValRule()を追加したい場合は次のようにします。 override fun get(): RuleSet = RuleSet("custom", NoVarRule(), NoValRule()) CustomRuleSetProviderを次のファイルの登録します。 ktlint-ruleset-template\src\main\resources\META-INF\services\com.pinterest.ktlint.core.RuleSetProvider com.pinterest.ktlint.core.RuleSetProvider yourpkgname.CustomRuleSetProvider jarの作り方 まず、Ruleのjarを作ります。 次に、jarをktlintを実行するProjectに取り込み、実行します。 jarの作り方を説明します。 [1]から0.38.0-alpha01を取得します。展開します。 https://github.com/pinterest/ktlint/archive/refs/tags/0.38.0-alpha01.zip Android Studioを起動します。 "Import project(Gradle, EclipseADT, etc.)"により、展開したディレクトリをImportします。 ※MAVEN_REPOSITORYの定義がないことによるエラーが表示されます。 Ruleを作ることには影響がないため無視します。 [View]-[Tool Windows]-[Gradle]を選択します。 Gradle [ktlint]-[ktlint-ruleset-template]-[Tasks]-[build]-[jar]を押下します。 ktlint-ruleset-template.jarができます。 ktlint-ruleset-template\build\libsに配置されます。 jarの使い方 jarの使い方は次の通りです。 ktlintを使う で作ったProjectを開きます。 app\libsにktlint-ruleset-template.jarをコピーします。 app\build.graldeのtask ktlintを以下のように変更します。 app\build.gradle - args "src/**/*.kt" + args '--debug', 'src/**/*.kt', '-R', 'libs/ktlint-ruleset-template.jar' app\src\test\java\com\e\myapplication\ExampleUnitTest.ktを以下のように変更します。 assertEquals(4, 2 + 2) + var v = "val" 画面右上の"Sync now"を実行します。 [View]-[Tool Windows]-[Gradle]を選択します。 Gradle [My Application]-[Tasks]-[verification]-[ktlint]を押下します。 次のエラーが表示されていればRuleが適用できています。 C:\Users\[User]\AndroidStudioProjects\MyApplication\app\src\test\java\com\e\myapplication\ExampleUnitTest.kt:15:9: Unexpected var, use val instead (cannot be auto-corrected) 自動Formatする 自動でvarをvalに変換します。 ktlint-ruleset-template\src\main\kotlin\yourpkgname NoVarRule.ktを変更します。 ktlintFormatを実行するとcanBeAutoCorrected=trueが指定されてvisitが呼ばれます。 trueの場合、replaceWithTextでvarをvalに置き換えます。 NoVarRule.kt class NoVarRule : Rule("no-var") { override fun visit( node: ASTNode, autoCorrect: Boolean, emit: (offset: Int, errorMessage: String, canBeAutoCorrected: Boolean) -> Unit ) { if (node.elementType == VAR_KEYWORD) { - emit(node.startOffset, "Unexpected var, use val instead", false) + emit(node.startOffset, "Unexpected var, use val instead", true) + if (autoCorrect) { + (node.psi as LeafPsiElement).replaceWithText("val") + } } } } jarを作成します。 ktlintを使う で作ったProjectを開きます。 app\libsにktlint-ruleset-template.jarをコピーします。 app\build.graldeのtask ktlintFormatを以下のように変更します。 app\build.gradle - args "-F", "src/**/*.kt" + args '-F', '--debug', 'src/**/*.kt', '-R', 'libs/ktlint-ruleset-template.jar' [View]-[Tool Windows]-[Gradle]を選択します。 Gradle [My Application]-[Tasks]-[formatting]-[ktlintFormat]を押下します。 Gradle [My Application]-[Tasks]-[verification]-[ktlint]を押下します。 次のエラーが表示されなくなります。 C:\Users\[User]\AndroidStudioProjects\MyApplication\app\src\test\java\com\e\myapplication\ExampleUnitTest.kt:15:9: Unexpected var, use val instead Abstract syntax tree(AST)を確認する Ruleを作る際、ASTを確認できると便利です。 ktlin の引数 "--print-ast" を設定することで出力されます。 app\build.graldeのtask ktlintを以下のように変更します。 app\build.gradle - args '--debug', 'src/**/*.kt', '-R', 'libs/ktlint-ruleset-template.jar' + args "--print-ast", "src/**/*.kt" ktlintを実行します。出力の一部を抜粋します。 > Task :app:ktlint 1: ~.psi.KtFile (FILE) 1: ~.psi.KtPackageDirective (PACKAGE_DIRECTIVE) 1: ~.c.i.p.impl.source.tree.LeafPsiElement (PACKAGE_KEYWORD) "package" 1: ~.c.i.p.impl.source.tree.PsiWhiteSpaceImpl (WHITE_SPACE) " " 1: ~.psi.KtDotQualifiedExpression (DOT_QUALIFIED_EXPRESSION) 1: ~.psi.KtDotQualifiedExpression (DOT_QUALIFIED_EXPRESSION) ... References [1] https://github.com/pinterest/ktlint [2] https://ktlint.github.io

はじめに Flutterでアイコンを利用するときは既存のIconを使って以下のように表示しますよね? const Icon(Icons.home); しかし既存のアイコンでは表現できない時や何かもの足りない時があるかと思います。 svgファイルをインポートして一個一個 flutter_svgを使って表示するのも面倒なのでカスタムアイコンをいい感じにFlutterで導入できる方法をご紹介します? やり方 FlutterIcon.comというサイトを使って実装して行きます。 こんな感じのサイトです。 このサイトでは自分でインポートしたSVGはもちろん、MaterialIconを含め色々なアイコンを自分で選びDartで使える形でダウンロードすることが可能です。 1. アイコンを選ぶ まずは使いたいアイコンを選んでいきます。FlutterIconのサイトに既存であるものはクリック、自分で用意したsvg形式のアイコンはサイト上部にドラッグしてクリックすることで選択することが可能です。 2. ダウンロード 使いたいアイコンが選択できたら、ダウンロードをして行きます。 サイトの右上にテキストフィールドとDownloadボタンがあるので、テキストフィールドにアイコンセットのタイトルを設定（初期値はMyFlutterApp）してDownloadボタンを押してダウンロードします。 ダウンロードしたファイルを解凍すると以下のようなファイルが入っています。fontsフォルダの中にはttf形式のファイルがあります。 3. プロジェクトへ設置 ダウンロードしたファイルをインポートしていくことでflutterプロジェクト内で選択したカスタムのアイコンが利用できるようになります！ assetsフォルダにttfファイルを設置してpubspec.yamlに以下のように書くことでアイコンセットをインポートできます。 assets: - assets/ #assetsフォルダ以下を読み込む fonts: - family: MyFlutterApp #アイコンセットのタイトル fonts: - asset: assets/MyFlutterApp.ttf #設置したファイル 4. インポートしたアイコンを使う まずは、ダウンロードしたフォルダ内にあるdartファイルを設置して行きましょう！ dartファイルには以下のようにIconDataが定義されているクラスがあります。 import 'package:flutter/widgets.dart'; class MyFlutterApp { MyFlutterApp._(); static const _kFontFam = 'MyFlutterApp'; static const String _kFontPkg = null; static const IconData insert_link = IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData insert_photo = IconData(0xe801, fontFamily: _kFontFam, fontPackage: _kFontPkg); static const IconData alexandergreat = IconData(0xf058, fontFamily: _kFontFam, fontPackage: _kFontPkg); } あとはこれを好きな場所で呼び出してあげるだけでアイコンが利用できるようになります? 簡単！ @override Widget build(BuildContext context) { return Center( child: Icon(MyFlutterApp.alexandergreat), ); } これでカスタムしたアイコンが表示できるようになりました！ （画面のアイコンは拾ったsvg） 最後に 今回はFlutterで簡単にカスタムしたアイコンを表示する方法を紹介しました? よりアプリの表現に幅を広げたい場合は使ってみてはいかがでしょうか？ freesvg.orgのようなサイトでいろんなsvgファイルがダウンロードできるので使ってみるのも面白いかもしれません? またTwitterの方でもFlutterの情報も発信していくのでよろしければフォローお願いします！

課題 android studioで新規でファイルを作成しようとする →android stuioがフリーズしてします。強制終了しない限り抜け出せない (PC:Mac) 解決法 macのシステム環境構築「一般」タブで赤線部を「しない」で選択