見出し画像

「COMPOSE を用いた ANDROID アプリ開発の基礎」の学習支援⑦ -ユニット2パスウェイ2

皆さん、こんにちは!又はこんばんは!初めての方は初めまして!
Google Codelabsの「COMPOSE を用いた ANDROID アプリ開発の基礎」コースのお手伝いをする「りおん」です。

「COMPOSE を用いた ANDROID アプリ開発の基礎」コースの補足について書きます。
今回は、ユニット2「アプリ UI を作成する」の中のパスウェイ2「アプリにボタンを追加する」です。

補足なので、「COMPOSE を用いた ANDROID アプリ開発の基礎」コースで心配になった時、エラーが起きて詰まった時や、分からないことがあった時に見てください!
また、目次を見て、自分に必要なところだけ見るのをお勧めします!

この記事を作成するにあたり使用しているAndroid StudioのバージョンはGiraffeです。
バージョンによってはUIが違ったりもするのでご了承ください。
また、2024年2月6日現在の「COMPOSE を用いた ANDROID アプリ開発の基礎」コースを参考にしています。


学習内容

今回のCodelabs内の「②インタラクティブなサイコロ アプリを作成する」では、サイコロアプリを作ることにより、Column()関数を使った縦向きレイアウトでボタンの作成法画像の表示法を学び、また[Resource Manager]を使ってアプリに画像を追加する方法も学んだと思います。

Codelabs内で作成したサイコロアプリ

「③Android Studio でデバッガを使用する」では、作成したサイコロアプリを使用してデバッガの使い方を学んだと思います。
まずデバッガの使用方法として1.アプリにデバッガをアタッチする方法と2.デバッガでアプリを起動する方法の二種類を学び、その後[Debugger]ボタンをクリックすることで表示されるFrames,Variables,Overhead3つのペインについてと、ブレークポイントを使ったデバッグ方法について学ぶという流れでした。

デバッガの起動方法
Frames,Variables,Overheadペイン
ステップ実行に関わるボタン

そして、「④練習: クリック動作」にて今回学んだことを通して、クリックしたら表示される画像が変わるアプリを作成したと思います。

用語集

②インタラクティブなサイコロ アプリを作成する

コンポーザブル

Codelabsのユニット1、パスウェイ3にも書いてあるように、コンポーザブルとは、コンポーズ可能な関数のことで、コンポーズ可能な関数とは、UI の一部を記述する関数のことです。
コンポーズ可能な関数には、@Composable アノテーションが付けられるという特徴があります。

Modifierオブジェクト

Codelabs内では、Modifierは「Compose UI 要素の動作を装飾または変更する要素のコレクション」と書かれています。
modifierは日本語訳すると「修飾子」のことです。
日本語の修飾語といえば、文を詳しく説明するために付け加えられる言葉です。修飾語は「何を」「どのように」「どんな」などを表します。
同様に考えて、例えば、Modifier.padding(24.dp)はパディング(<-「なにを」)を24dp(<-「どのように」)の様に詳しく説明していると考えると分かりやすいと思います。

ContentDescription

アプリで画像を作成する時に必ず必要になる要素です。
その役目は、要素に関する説明です。
今回の画像はサイコロの目を表す画像でしたので、ContentDescriptionに数値を入れることで、この画像はサイコロの目が示す数値を表すものだと説明しているわけです。
Image()関数を使う時はContentDescriptionを含めないとエラーが出ます。

↑ContentDescriptionをコメントアウトすると…

remember

rememberを使うと再コンポーズした際に値を保持できます
ダイスロールアプリではこのrememberを使う機会がありませんでしたが、「④練習: クリック動作」でレモネードアプリを作った方ならわかるように、例えば、ボタンを押した回数をカウントしたい時に使うものです。

③Android Studio でデバッガを使用する

デバッグとデバッガーとデバッガ

デバッグは、プログラムのバグや欠陥を特定し取り除く作業
しかし、コトバンクによるとデバッガーとデバッガは両方同じ意味で、「コンピューターで、プログラムのバグを取り除く(デバッグする)作業をする人やそのためのプログラム。」と記されています。
つまり、文脈で人をさすかプログラムをさすか見分ける必要があります。
今回の場合、デバッガはコードを検査しバグを修正するためのツールという意味です。

アタッチする

英語のattachの意味通り「取り付ける」ことです。
アプリプロセスにデバッガをアタッチすると言ったら、アプリの実行中にデバッガ機能を取り付けるといった感じでしょうか。

ペイン

英語で表記するとpainではなく、paneです。
日本語では一区画という意味で、IT用語辞典さんの「操作画面上のウィンドウを複数に分割した個々の領域」というのがシンプルで分かりやすいと思います。

注意点

②インタラクティブなサイコロ アプリを作成する

アプリ実行時に起きるエラー

初回アプリ実行時のエラーの解決法は以下の通りです。詳細な方法が知りたい方は過去の記事をご覧ください。

新しいアプリを作成した時に起こるエラー
モジュールのbuild.gradleを開く  -> compileSdk = 34にすれば解決

解答コードをダウンロードしたが、実行できない

GitHubで解答コードのzipファイルをダウンロードしたが実行できない場合は、zipファイルの展開場所に問題がある可能性があります。デフォルトの場所ではなく、[ダウウンロード]等に変えてみてください

デフォルトだと展開先がダウンロードしたアプリの下になる
展開先画面で[ダウウンロード]を選択

もっと詳しい操作が知りたい場合は以下の記事をご覧ください。

③Android Studio でデバッガを使用する

[Debugger] ボタンをクリックしたがFrames,Variables,Overheadのペインいずれかが表示されない

以下の画像は、Overheadがない場合の例です

Frames,Variablesの2つのペインのみ表示されている

このような場合の対処法は、
1.[Layout Setting]ボタンを押す
2.表示したいペインの名前が書かれているところにチェックを入れる

赤丸が[Layout Setting]ボタン
Overheadにチェックを入れる

さいごに

Codelabsでの学習お疲れさまでした!
前回とは打って変わって今回はAndroid Studioをフルで活用した内容でしたね。最後のレモネードアプリを作成する演習で分かるように今回学んだ内容だけでも簡単なアプリを作ってしまうことは既に出来ます!知人ぐらいにしか見せられないクスっと笑えるアプリを作って送り付けてみてはいかがでしょうか?



この記事が気に入ったらサポートをしてみませんか?