TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発でアクティビティを作成する方法【初心者向け】
icon
icon
Androidアプリ開発

Androidアプリ開発でアクティビティを作成する方法【初心者向け】

Androidアプリ開発で【アクティビティ】を作成する方法を初心者向けに解説した記事です。アクティビティとは、ユーザーが実際に目にするアプリケーション画面のことです。アクティビティを使って画面を切り替える方法も紹介しています。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

Androidアプリでは、画面の切り替えといった操作が可能です。そんな操作を実現する「アクティビティ」について初心者向けに解説します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター！！Android StudioでAndroidアプリのプロジェクトを作ったんですけど、これからどうやってアプリを開発していけばいいですか〜？

田島悠介

まずアクティビティについて理解したほうがいいね。

大石ゆかり

アクティビティですか・・・？

 

アクティビティとは

アクティビティとは、ユーザーが実際に目にするアプリケーション画面のことです。Androidアプリでは、さまざまな画面を用意する場合があります。

 

レイアウトが同じ場合はテキストや画像を書き換えて使用することができますが、レイアウトが大きく変わる場合は、別の画面を用意することになります。

例えば、下の画像のような診断系のアプリを作る場合は、出題のときはアクティビティ1で問題と回答を差し替えながら表示していき、診断結果を表示するときは、アクティビティ2を画面に表示するというように、2つのアクティビティを用意し、途中でアクティビティの切り替えを行います。

001

このように、Androidアプリでは、1つのアプリの中に複数のアクティビティを用意することがあります。

 

 

アクティビティクラスについて

 

アクティビティは、「app」フォルダー内の、パッケージ名のフォルダー内にあります。

 

Android Studioでプロジェクトを作成したときに一緒に作成されるアクティビティのコードは下の図のようになっています。

 

このコードを例に、アクティビティクラスについてご説明します。

「public class MainActivity extends AppCompatActivity」で、「MainActivity」というクラスは、「AppCompatActivityクラス」を継承していることがわかります。

アクティビティは、AppCompatActivityクラスを継承したクラスになっています。AppCompatActivityクラスとは、Androidアプリの画面制御の基本的な機能を提供しているクラスです。

 

また、コードの中に「onCreate()」というメゾットがあります。このメゾットは、アクティビティが起動されたときに呼び出されるメゾットです。

さらに、そのメゾットの中に「setContentView();」というメゾットがあります。これは、画面に表示するビューを設定しています。今回は、「R.layout.activity_main」が設定されています。

このビューとは、テキストボックスやボタンなど、画面に表示するコンテンツを管理しているオブジェクトです。

この記事を読んで基本がわかったら、ご自身でもアクティビティを作成してみてください。

Androidアプリ開発についてさらに学びたい場合は、Androidアプリ開発でログを出力する方法も合わせてご覧ください。

 

大石ゆかり

アクティビティが画面の管理をしているわけですね！

田島悠介

そうだね。クリックしたらどうするとか画面遷移はどうするとかもアクティビティに書いていくから、きちんと理解しておこうね。

大石ゆかり

はい、わかりました！

 

[お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

KotlinのMapでオブジェクトのペアを保存する方法【初心者向け】

KotlinのMapの使い方について解説します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内...
Androidアプリ開発

Androidアプリ開発でBitmapクラスを使って画像を表示させる方法

Androidアプリを開発では、Bitmapクラスを使って画像を表示したり変更したりすることができます。 そこで今回はBitmapクラスを使って画像を表示...
Androidアプリ開発

KotlinでAndroidアプリのradiobuttonを追加する方法を現役エンジニアが解説【初心者向け】

KotlinでAndroidアプリのradiobuttonを追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...
Androidアプリ開発

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、TableLayout（テー...
Androidアプリ開発

覚えておくと便利！Androidアプリ開発のLayoutの使い方【初心者向け】

Androidアプリ開発において、GUI（ボタンやラベルといったパーツ）をどのように配置するかによって、いくつかのレイアウトが用意されています。 そこで今...
Androidアプリ開発

Android Studioで開発したアプリを実機でテストする方法【初心者向け】

今回は、Android Studioで開発したアプリを実機でテストする方法を解説します。 Androidアプリを開発したら、実機ではなくエミュレータでテス...
Androidアプリ開発

あわせてよく読まれている記事

Androidアプリでインテントを使って画面を遷移させる方法【初心者向け】

Androidアプリの開発では、「インテント（Intent）」という機能を使って画面を遷移させることが可能です。 インテントは、Androidの特徴的な機能の一つで、アプリケーション内の機能や他のアプリケーションへの橋渡しの役割をしてくれます。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！アプリの画面遷移ってどうやって実装するんですか？ 田島悠介 複数のアクティビティを作っておいてインテントっていう機能を使うと遷移できるんだ。 大石ゆかり インテント、ですか・・・？どうやるんですか〜？   2つの画面を用意する 画面遷移をさせるための準備をまずは行います。 今回は同じアプリ内に2つのアクティビティを用意しました。   1つ目の画面であるMainActivityには、テキストボックスとサブ画面に遷移するためのボタンを用意しています。   2つ目の画面であるSubActivityには、1つ目の画面のテキストボックスで入力された文字列を表示するためのテキストビューを用意してあります。   新しくアクティビティを追加した場合は、下記のようにマニフェストファイルにアクティビティの宣言を追加してください。 <activity android:name=”.SubActivity”></activity>   メイン画面を用意する 続いてメインの画面を用意します。 xmlファイルで、サブアクティビティを呼び出すボタンにandroid:onclicl属性を追加し、イベントが発生したときにonClickメゾットを呼び出すようにしてあります。 また、onClickイベントを作成します。   下記のように記述しましょう。 public void onClick(View v) { //インテントの作成 Intent intent = new Intent(this, SubActivity.class); //データをセット EditText editText = (EditText)this.findViewById(R.id.editText); intent.putExtra("sendText",editText.getText().toString()); //遷移先の画面を起動 startActivity(intent); }   19行目でインテントの作成を行い、遷移先のクラス名を指定しています。 また、22行目のputExtraで遷移先に渡すデータを名前と値のセットで登録し、26行目で遷移先の画面を起動します。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中サブ画面を用意する 次にサブ画面を用意します。 ここでは、下記のように記述しました。 Intent intent = this.getIntent(); String text = intent.getStringExtra("sendText"); TextView textView = (TextView)this.findViewById(R.id.textViewSub); textView.setText(text);   遷移された画面では、getIntentメゾットでインテントを使って渡されたデータを受け取ることができます。16行目のgetStringExtraでデータを取得します。 今回は文字列なので、getStringExtraメゾットを使っていますが、受け取るデータによって、getBooleanExtra,getIntExtraというように置き換える必要があります。     動作確認をする 最後に、エミュレーターを使って画面が遷移できるかどうか動作確認をしてみましょう。   まず、アプリを起動するとメイン画面が表示されます。テキストボックスに好きな文字を入力して、ボタンをクリックします。   ここでサブ画面が起動し、メイン画面で入力した文字が表示されれば成功です。    アプリによっては画面遷移を多く使うこともあると思いますので、覚えておきましょう。 エミュレータだけでなく、Androidを実機でテストすることも試してみましょう。   大石ゆかり 画面遷移できました！！！ 田島悠介 アプリはよほど簡単なアプリでない限り1画面で終わることはないから、インテントは覚えておいたほうが良いね♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう
Androidアプリ開発

UiPathとは！UiPath studioの使い方も解説【入門者向け】

作業を自動化する上で注目されているRPA。 RPAとは何か聞いたことはあるけど一体どんなツールがあるのか、導入するとどういったメリットがあるのかイメージできない方も多いかと思います。 企業内でも業務効率化を推進する会社も多く、今回紹介するUiPathはプログラミング不要で使うことができ、活用できる幅が多くあるはずです。 UiPath studioの使い方についても解説しているので、今後導入を考えている方はぜひ一度知っておきましょう。   目次 UiPathとは UiPathを使うメリット・デメリット UiPath StudioとUiPath Orchestratorとは UiPath Studioの簡単な使い方 学習方法   ※免責事項 この記事は2019年7月に更新された記事のため情報が古くなっている場合がございます。   UiPathとは UiPathというのは、作業や業務を自動化するロボットを開発するものです。 UiPathは、UiPath社が提供しているRPAです。 UiPathとしては、 UiPath Studioというロボットを実際に開発する開発環境 UiPath Robotという開発したロボットを実行するもの Orchestratorというロボットをまとめるもの があります。 UiPathでは、ドラッグ＆ドロップでロボットのActibity（アクティビティ）という動作を指定していき、これらを自動化することによってロボットを開発していきます。 ロボットを開発するためにプログラミングは実際に必要ありませんが、プログラミングの知識はある程度ある方がいいでしょう。 例えば、プログラミングの知識としては、 配列 変数 分岐条件 エラー処理 ループ処理 などが挙げられます。 また、開発ツールとしては英語だけが準備されていますが、UiPathアカデミーの学習環境やいろいろなドキュメントは日本語が準備されています。 UiPath Studioの開発環境は、個人や中小企業で使用するときは無料版のCommunityエディションが公開されています。   UiPathの歴史 2005年 UiPathはルーマニアで生まれました。 コンピュータグラフィックスを手始めに、自動化ライブラリを最初に構築することに着手しました。 2013年 UiPath Desktop自動化を提供し始めて、現在はUiPath Studioになっています。 2015年 UiPath Orchestratorが出来上がりました。 2016年 UiPath Studioコミュニティエディションを提供してから、6ヶ月間でユーザ数が1万人になりました。 2017年 Forrester やEverestからRPAソフトウェアを提供する企業として高く評価されました。 日本法人をこの年の2月に設立してサービスを始めました。   UiPathの拠点 UiPathは  ニューヨーク（本社） イギリス ルーマニア インド 日本 フランス シンガポール オーストラリア 香港 に拠点があります。   UiPathの日本での採用実績 UiPathの日本での採用実績としては、金融機関の三井住友銀行などや電通などの有名な大会社が多くあります。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中UiPathを使うメリット・デメリット ここではUniRathを使うメリット・デメリットを確認していきましょう。 UiPathを使うメリット UiPathは次のようなメリットがあります。 簡単にロボットでの業務の流れが構築できる オープンで拡張できる開発環境である 低い専門スキルでもプログラムが組める モチベーションがアップする 詳しく解説していきます。 簡単にロボットでの業務の流れが構築できる UiPathは機能が豊富にある自動化ツールを開発する環境を提供しており、簡単にロボットでの業務の流れが構築できます。 業務の流れのシナリオ化（作業記録）は、ロボットにさせるアクティビティ（動作）をドラッグ＆ドロップすることによって簡単にできるだけでなく、「レコーダー」という人の動作を見て自動化するものを使用するのみです。 オープンで拡張できる開発環境である また、UiPathのメリットとしては、別のRPAツールではできないような面倒な手順を自動化するときはオープンで拡張できる開発環境であることも挙げられます。 チームで共同作業がリアルタイムにできるように開発されており、複数の担当者が作業する場所に関係なく同時にいつでもデータにアクセスできます。 低い専門スキルでもプログラムが組める プログラムが組めると、業務の自動化が簡単にできるため、低い専門スキルでも組めます。 モチベーションがアップする 従業員の業務は単純な作業を自動化することによって効率アップし、モチベーションがアップします。   UiPathを使うデメリット UiPathのデメリットは、反対にその便利さです。 UiPathは簡単に組めるために、どのような開発プログラムでも実践に投入できることがデメリットです。 そのため、基本的に単純作業が必要なものか、全体の業務を改善する方が生産性がアップするのではないか、などというようなことを考えなくなる恐れがあります。 つまり、全体最適化ができなくなるのではないかという不安があります。   UiPath studioとUiPath Orchestratorとは ここではUiPath studioとUiPath Orchestratorについて詳しく解説していきます。 UiPath Studio UiPath Studioとは、業務を自動化するロボットを開発するための環境です。 マクロなどのように操作をアプリケーション上で自動化するツールはこれまでもありましたが、自分が行いたいことを自動的にその通りに行うためにはプログラミングする必要がありました。 また、プログラミングをしても自動化はそのアプリケーションだけでしかできなく、横断的にWindows上で動くアプリケーションを自動化するためには膨大なプログラミングの量が必要でした。   しかし、UiPathの場合は、自動化するためのロボットを開発するためにプログラミングは不要です。 アクティビティというロボットのファイルの読み込みやクリック、アプリケーションの起動などの動作をドラッグ＆ドロップで指定し、これらを繋ぐことによっていろいろなアプリケーションの自動化ができます。 また、ユーザーの操作を記録するレコーダー機能を使って、実際にユーザーの操作を流れとしてコンピューター上で一覧化し、ロボットがこの動きを同様に操作することもできます。 UiPath Studioはこのようなロボットを開発するための環境であり、2016年に公開してから1年間に数回アップデートを繰り返しています。   UiPath Orchestrator UiPath Orchestratorは、少ない工数でRPA環境を安定的・安全に運用する管理ツールです。 主な機能としては次のようなものがあります。 ロボット構成管理 シナリオ配布、実行管理 運用モニタリング ガバナンス/セキュリティ管理 拡張機能   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。
ツール系

Androidアプリ開発のGridLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、GridLayout（グリッドレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！電卓アプリを作っているんですけど、ボタンを等間隔に設置する方法ってないですか〜？ 田島悠介 それならGridLayoutがいいよ。格子状にパーツを並べることができるんだ。 大石ゆかり あ、どうやって使うんですか〜？   GridLayoutとは GridLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。TableLayoutと似ていますが、GridLayoutでは列をまたいでパーツを配置することができます。 Android4.0で公開された比較的新しいレイアウトです。     GridLayoutを配置する 今回は、GridLayoutを使用してこの画像のような画面を作成してみます。   GridLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。 パレット内のGridLayoutを、プレビュー画面までドラッグしましょう。   次に、GridLayoutの列数を指定します。 列数は、プロパティの「ColumnCount」で指定できます。今回は5列必要なので、「ColumnCount」の値を「5」にします。     [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中GridLayoutにパーツを配置する GridLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 ボタンを画面に配置したら、ボタンを配置するセルを指定しましょう。   セルの指定はプロパティの「Layout Parameters – Row」で、配置する行を指定できます。また、「Layout Parameters – Column」で、配置する列も指定できます。 上から2行目の3列目に配置したい場合は、layout_rowを「1」、layout_columnを「2」といった具合に指定していきましょう。   また、複数のセルをまたぐ場合は、「android:layout_rowSpan」「android:layout_columnSpan」を指定します。 「CE」ボタンや「0」ボタンのように、横にまたぐ場合は「android:layout_columnSpan」を「2」にします。   同じように、「+」ボタンのように縦にまたぐ場合は「android:layout_rowSpan」を「2」にします。 すべてのボタンが配置できたら実行して、画面を確認してください。     GridLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <GridLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”fill_parent” android:layout_height=”fill_parent” android:columnCount=”5″ > <Button android:id=”@+id/button1″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”0″ android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”0″ android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”0″ android:text=”9″ /> <Button android:id=”@+id/button4″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_columnSpan=”2″ android:layout_row=”0″ android:text=”CE” /> <Button android:id=”@+id/button5″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”1″ android:text=”4″ /> <Button android:id=”@+id/button6″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”1″ android:text=”5″ /> <Button android:id=”@+id/button7″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”1″ android:text=”6″ /> <Button android:id=”@+id/button8″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”3″ android:layout_row=”1″ android:text=”×” /> <Button android:id=”@+id/button9″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”1″ android:text=”÷” /> <Button android:id=”@+id/button10″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button11″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”1″ android:layout_row=”2″ android:text=”2″ /> <Button android:id=”@+id/button12″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”2″ android:layout_row=”2″ android:text=”3″ /> <Button android:id=”@+id/button13″ android:layout_width=”60dp” android:layout_height=”120dp” android:layout_column=”3″ android:layout_row=”2″ android:layout_rowSpan=”2″ android:text=”+” /> <Button android:id=”@+id/button14″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”2″ android:text=”1″ /> <Button android:id=”@+id/button15″ android:layout_width=”120dp” android:layout_height=”60dp” android:layout_column=”0″ android:layout_columnSpan=”2″ android:layout_row=”3″ android:text=”0″ /> <Button android:id=”@+id/button16″ android:layout_width=”60dp” android:layout_height=”60dp” android:layout_column=”4″ android:layout_row=”3″ android:text=”=” /> </GridLayout> 今回の記事は以上です。   さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。   大石ゆかり GridLayout、とても便利ですね〜♪ 田島悠介 そうだね。Androidは色々なレイアウトが用意されているから、他のレイアウトも使ってみると良いよ♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安
Androidアプリ開発

Androidアプリ開発で新規プロジェクトを作成する方法【初心者向け】

Android StudioでAndroidアプリを開発する場合、まず最初にプロジェクトを作成する必要があります。今回は、このプロジェクトを作成する方法を初心者向けにご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！Android Studioのインストールは終わったんですけど、どうやってアプリ開発をするんですか〜？ 田島悠介 Android Studio上で、新規プロジェクトを作るんだよ。 大石ゆかり どうやって作るんですか〜？   プロジェクト作成の手順 プロジェクトの作成は以下の手順で行います。 新規プロジェクトダイアログを表示させる 新規Androidアプリケーションを作成する アクティビティを作成する   新規プロジェクトダイアログを表示させる   Android Studioの起動時のダイアログから「Start a new Android Studio project」を選択します。   既にAndroid Studioのプロジェクトの画面になっている場合、FileメニューからNew→New Projectを選択します。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中新規Androidアプリケーションを作成する   Create New Projectダイアログが表示されるので、各項目を入力します。 Application nameには、アプリケーションの名前を半角英数（先頭大文字）で入力します。なお、日本語を使うことはできません。 Company domainには、自分が所属するドメインを入力します。Application nameと合わせてアプリを認識するためのIDになります。他のアプリと重複しないよう命名してください。 Project locationは、プロジェクトを保存する場所となります。上記を入力すると、自動的に設定されます。 設定したら「Next」をクリックします。   この画面では、どのような端末を対象とするのか、動作可能な最低限のAPIレベルをいくつにするのかを指定します。インストールする対象機種やアプリで使いたい機能などを検討して選択してください。 設定したら「Next」をクリックします。   アクティビティを作成する   アクティビティを作成します。 今回は、一般的に使用頻度の高いEmpty Activityを選択し、「Next」をクリックします。   アクティビティ名とレイアウト名を入力します。このままでよければ「Finish」をクリックします。   少し待つと、下記のようにAndroid Studioで作成したプロジェクトが表示されます。   これでプロジェクトの新規作成は終了です。 新規作成ができたら、Androidアプリのエミュレータを使ってみてください。   大石ゆかり これでアプリ開発がスタートするわけですね！ 田島悠介 そうだね。Android Studioは操作がなれないうちは難しいから、何度か簡単なアプリを作って慣れていこうね♪ 大石ゆかり はい♪   [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。 プログラミングを独学で学習していて、このように感じた経験はないでしょうか？ ・調べてもほしい情報が見つからない ・独学のスキルが実際の業務で通用するのか不安 ・目標への学習プランがわからず、迷子になりそう
Androidアプリ開発

Androidアプリ開発のTableLayoutの使い方【初心者向け】

Androidアプリ開発では、アプリの画面を簡単に作成できるレイアウトが数多く用意されています。 今回はそのなかの1つである、TableLayout（テーブルレイアウト）を追加する方法と基本的な使い方をご紹介します。   本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。   大石ゆかり 田島メンター！！HTMLのtableタグみたいにAndroidアプリのパーツを並べる方法ってないですか〜？ 田島悠介 TableLayoutっていうレイアウトを使うと、tableタグと同じようにパーツを設置できるよ。 大石ゆかり あ、そうなんですか〜！？   TableLayoutとは TableLayoutとは、パーツを格子状に並べるときに使用するレイアウトです。 HTMLのtableタグと似ているので、ホームページ作成をしたことがある人は使いやすいレイアウトかもしれません。 ただし、行をまたいでパーツを配置することはできませんのでご注意ください。     TableLayoutを配置する 今回は、TableLayoutを使用して次のような画面を作成してみます。 TableLayoutは、大枠である「TableLayout」とテーブルの行である「TableRow」でできています。   最初にTableLayoutを配置します。 TableLayoutはレイアウトエディタのパレットの「レイアウト」から配置できます。パレット内のTableLayoutを、プレビュー画面までドラッグしましょう。   次に、作成する画面には4行必要なので、TableRowを4回プレビュー画面までドラッグして配置します。（行の数によってドラッグする回数を変えてください） 配置をしたらアウトラインで、レイアウトが正しく配置されているか確認をしましょう。     [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中TableLayoutにパーツを配置する TableLayoutにパーツを配置するには、レイアウトエディタのパレットから配置したいパーツを選択し、プレビュー画面へドラッグします。 横の位置は後ほど調整しますので、目的の行に対して順番にパーツを配置できていれば大丈夫です。     TableLayoutのコードを確認する XMLタブでコードを確認すると、下記のようになっています。 <TableLayout xmlns:android=”http://schemas.android.com/apk/res/android” android:layout_width=”match_parent” android:layout_height=”match_parent” > <TableRow android:id=”@+id/tableRow1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”7″ /> <Button android:id=”@+id/button2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”8″ /> <Button android:id=”@+id/button3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”9″ /> <Button android:id=”@+id/button15″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”/” /> </TableRow> <TableRow android:id=”@+id/tableRow2″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”4″ /> <Button android:id=”@+id/button5″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”5″ /> <Button android:id=”@+id/button6″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”6″ /> <Button android:id=”@+id/button14″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”*” /> </TableRow> <TableRow android:id=”@+id/tableRow3″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button7″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”1″ /> <Button android:id=”@+id/button8″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”2″ /> <Button android:id=”@+id/button9″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”3″ /> <Button android:id=”@+id/button12″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”-” /> </TableRow> <TableRow android:id=”@+id/tableRow4″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” > <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:text=”0″ /> <Button android:id=”@+id/button11″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”.” /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:text=”+” /> </TableRow> </TableLayout>     コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
Androidアプリ開発

【未来のUIデザイナーへ！】初心者のためのプロトタイピングガイド

本稿は、本稿は、Web Designerdepotのブログ記事を、Web Designerdepotより了解を得て日本語翻訳し掲載した記事になります。   プロトタイピングの概念そのものは、インターネットの成立以前から存在していました。典型的な例として、新しい製品を開発をする人々は最初に製品を組み立て、次に製品が期待した通りに作動するか試します。 最初のバージョンで特許を取得して、潜在的な投資家に製品を見せることもあるかもしれません。もし投資家が独自の生産ラインの設備を利用できるとしたら(例えば既存の会社で働いているなどの理由から)、製造可能なレベルのモデルが完成するまで、製品の開発が進められて、バグの修正も行われます。   昔のデモディスクを覚えていますか？ 機能の制限されたプログラムが入っていたり、ゲームの初歩レベルあるいはゲームが2つだけ入っているようなディスクのことです。プロトタイプはデモディスクと似ている点が多くありますが、よりシンプルでさえあります。 Webサイトやアプリのプロトタイプを作成するのは、期待した通りに作動するか確かめるためです。 プロトタイプの目的は、将来の顧客の獲得というよりも、より良い製品を作るのに役立てることです。 Webサイトやアプリのプロトタイプは、製品が期待通りに作動するか確かめるために作成します。またクライアントや潜在的な投資家に製品の作動を示すこともできます。   最近では、Webとモバイルアプリ用のプロトタイプ作成アプリが多数登場しています。 最近リリースされたデザインツールのAdobe Experience Designerは、Webとモバイルに対応したデザインアプリとしての機能と、プロトタイプ作成用のアプリとしての機能が融合されています。 Adobe社の知名度とプロ向け製品における市場シェアを考えれば、多くの人々が今まで以上にプロトタイプを実践し始めているのも当然かもしれません。   今回の記事は初心者向けのガイドです。デザイン業界でどのような経験を積んできたかにかかわらず(あるいは未経験でも)、プロトタイプを日常的に使い始めた方向けに書いています。 このガイドでは何よりもまず基本的な原則を説明します。もちろんその後に発展的な情報として、役立つツールやアプリをリンクとともにご案内します。   ワイヤーフレーム＆モックアップ VS. プロトタイプ デザイナーとしての経験が豊富な方は、すでにワイヤーフレームやモックアップを編集で利用しているかもしれません。ただ、これらは必ずしもプロトタイプとはいえません。 ワイヤーフレームやモックアップで問題なのは静的なことです。製品の機能についての多くの情報を伝えることができないのです。このため、製品の動作性についてクライアントやデベロッパーに誤解を与えるおそれもあります。こうした理由から、プロトタイプとは一般的に、何かインタラクティブな要素を持つものと定義できます。 ただし、例外的に静的なものにもプロトタイプと見なせるものもあります。 例えば、概念的なプロトタイプや、詳細に作成された設計書などです。重要なのは単にインタラクティブであることよりも、製品に期待される機能について情報を伝えられることだからです。 それでもやはり、ワイヤーフレームやモックアップは単にプロトタイプの作成によく使われているという理由だけで、誰も捨てようとはしません。   いつプロトタイプが必要になるのか？ 何かがどのように作動するかを示す必要があるときにはいつでも、プロトタイプが必要です。 わかりやすい例は、Webアプリやモバイルアプリです。アプリは、モックアップでは簡単に見たり予測したりできない機能を数多く持っている傾向があります。コンテンツ中心型の静的なWebサイトでさえプロトタイプを必要とするかもしれません。 1つの理由として例を挙げると、私は以前クライアントにシンプルなビジネスサイトのモックアップを見せたときに、クライアントから「トップページにある「概要」や「サービス」などをクリックしたら別のページに移行するのか？」、「コンタクトフォームでユーザーが「送信」をクリックしたら、私はメールを受信することになるのか？」と聞かれたことがあります。 シンプルなタスクでさえ不確実性を伴うことがあり、プロトタイプは当て推量を解消するのに役立ちます。 また、簡単なブラウジングの操作さえ、ユーザーやクライアントによってはわかりづらくて大変な作業となりえます。プロトタイプがあればネットワークからサインオフするときにも、当て推量する手間を省くことができます。 加えて、プロトタイプはユーザーテストに役立ちます。ユーザーテストを行うときには、初期段階からプロジェクトのシミュレーションを始めるのがベストです。作業がほとんど完了した後に大きな変更をしなければならない事態は避けたいところです。   [PR] Androidアプリの開発で挫折しない学習方法を動画で公開中4種類のプロトタイプ プロトタイピングを始める前に、どの種類を使うか決めます。ほとんどのデザイナーたちが実践しているように、どのようなプロジェクトでも複数の種類を組み合わせて使うことができます。   1. 概念的プロトタイプ このプロトタイプは、形の上では完成した製品と全く似ていません。ここでインターフェースのディテールとレイアウトは重要ではありません。インタラクションとプロセスだけに集中します。 全てのプロトタイプの目的は製品の動作性を示すことです。その意味で、このプロトタイピングは原始的な形だといえます。機能性だけがテーマであり、形は問題となりません。 この段階では、フローチャート、ポストイットのメモ、PowerPointのプレゼンテーション、アイコンでプロセスを説明するビデオを使ったり、身振り手振りを加えてカメラに向かって録音してもいいでしょう。要点を伝えることができれば何でもいいのです。 概念的プロトタイプはプロジェクトの初期段階で使われます。プロジェクトにはまだ名前がないかもしれません。アプリやWebサイトもアイデアの段階なので、「こんな感じで作動すると思う。」と話しているかもしれません。   2. ローファイプロトタイプ ローファイプロトタイプでは、レイアウトやスクリーンのサイズなど具体的な対象を扱うようになります。このプロトタイプは、作られるのも破棄されるのもサイクルが速いです。 ローファイプロトタイプの目的は、あなたとクライアントが基本的な部分に満足できるまで、試行錯誤を最速で繰り返すためのものです。だからプロトタイプに愛着を持つべきではありません。ほとんどのプロトタイプは使い捨てであり、それこそが長所です。 「ローファイプロトタイプ」は「ワイヤーフレーム」とよく置き換えることができます。この段階では紙に書いて行うこともよくあります。 アプリでローファイプロトタイプを作成するときには、他のスクリーンへのリンクやコメントの機能など、基本的なプロトタイピングの機能を備えているものを使うことがおすすめです。ワイヤーフレームのアプリはインターネットとの連携が容易であるというメリットがありますが、やや動きが遅いことも多いです。 概念的プロトタイプと同じくプロジェクトの初期段階で使われますが、ビジネスモデルやプロジェクト名はすでに存在している段階でしょう。上手くいくと確信できるものが持てるまで、頭の中で思いつく無数のアイデアをえり分ける時です。   3. ミディアムファイプロトタイプ 段階によっては、ローファイプロトタイプでは要点を把握しにくい一方、ハイファイプロトタイプでは十分過ぎることがあります。スタイルガイドを完全には作成していなかったり、まだグラフィカルアセットを全て作り終えていない段階です。 ミディアムファイプロトタイプは、このようなデザインの初期～中間の段階で使うことができます。インタラクションのシミュレーション機能を持つプロトタイピング作成アプリによって作られることも多いです。CSSのフレームワークを利用して、HTMLとCSSによって構築することもできます。 BootstrapとFoundationが、現在存在しているプロトタイピングのツールの中ではおそらく主流です。 有名ブランドのイメージがあればそれを使うべきですが、ストックイメージでも足りるでしょう。ストックタイプのUIエレメントは、模作のインターフェイスをより速く構築するために使われます。プロトタイピング作成アプリの多くは、これらのUIエレメントのライブラリを持つことが多く、作業の高速化に役立ちます。 ミディアムファイプロトタイプは、リテラル思考型(Literal thinker:全体的なイメージよりも、具体的なステップや言葉の定義から考えるような人)で外観や動作の近似を見たいと思うような人に向いています。彼らにとっては、「未完成」のヘッダーの方が、Webサイトのヘッダーに全く見えないようなスケッチ風の代物よりも、まだ耐えられます。 リテラル思考のクライアントには、ワイヤーフレームで素早く考えた初期のアイデアを見せる必要はないでしょう。ミディアムファイプロトタイプの段階で見せる方が、彼らに方向性を分かってもらいやすいです。   4. ハイファイプロトタイプ この段階までプロジェクトが進むと、全てのスクリーンのモックアップが完成していて、全てが立派なものになっているでしょう。製品をバックエンドのコードと統合して、人々に製品の動作性を見てもらう時です。 ハイファイプロトタイプは通常、デザインに関する最終的な合意をクライアントと結ぶために使われます。ただのPSDファイルを送るだけれはなく、インタラクティブなものを提示しなければなりません。 2つの方法のうちいずれかによって行われます。1つの方法では、静的なHTMLとCSSを利用して、一部をインタラクティブな外観に仕上げます。もう1つの方法では、画像やPSDのファイル形式をインポートできるアプリを利用して、擬似インタラクティブな特性を加えることで完成品のアプリ（製品）の機能を模倣します。 アプリによっては、プロトタイプのデモをWeb上(またはモバイルデバイス上)で行うことも可能です。   プロトタイピングのメソッド プロトタイプの主な種類を見たところで、次にプロトタイプを実際に作るためのツールをご紹介します。基本的な使い方も含めてすでにほとんどご紹介していますが、さらに詳細を見てみましょう。 あなた自身とクライアント双方にとって適合するメソッドを選びましょう。   ビデオまたはプレゼンテーションのプロトタイプ これらは具体的な作業がなされる前に、アイデアを売るためによく使われます。そのため通常は、潜在的な投資家を意識したものです。 クライアント向けにも使えますが、他の代替手段の方が効率的なコミュニケーションを図るには優れていることも多いです。アドバンテージは人によって異なるでしょう。 ビデオとプレゼンテーションのプロトタイプで、利益率を上げるために作られたものは商業型の公式に従います。 聴き手が共感できる問題を提示する。 あなたの製品によってその問題がどのように解決されるかデモを示す。 (オプションとして)会社のマスコットをデジタル形式で表現して、キャッチフレーズを叫ばせながら楽しそうにダンスさせる。 これらのプロトタイプの中にはアイコン、テキスト、イラストレーションを使うだけで完成するものもあります。他にはアニメーションを利用して、要点を説明するのに動きを使うこともあるでしょう。あなたのアイデアを売ることができれば、正しく使いこなせているといえます。 ビデオのプロトタイプと紙のプロトタイピングを組み合わせた良い例をご紹介します。Video Prototype for Mobile Cooking App : Youtube動画より   ワイヤーフレーム ワイヤーフレームは紙面上かアプリにおいて作成できます。ワイヤーフレームは通常ローファイプロトタイプと見なされていますが、時間をかければミディアムファイプロトタイプにアップグレードすることも可能です。もっとも労力をかけるだけの価値はほとんどありませんが。 ワイヤーフレームは、作成されるのも破棄されるのも速いです。紙面上でワイヤーフレームを作成することが魅力的である理由の1つです。アプリでワイヤーフレームを作ると、より正確なデザインが可能となり、既存のワイヤーフレームから簡単に編集することもできます。しかし、あなた自身以外には誰も見ないであろうスケッチを速く作成できるという点が、やはりワイヤーフレームの長所として一番優れています。 しかし、すで述べたようにアプリでワイヤーフレームを作成すると、より簡単にインターフェースの機能を模倣できるというメリットもあります。紙面上に作成したワイヤーフレームをタップしたところでトントン音が鳴るだけですから、面白いかもしれませんが、あなたの意図するところを伝えることはできません。   紙のプロトタイプ これはただのスケッチではないという点で、紙面上のワイヤーフレームとは異なります。紙を利用するのは、物理的でフラットな素材でインターフェースのモデルを作るためです。先にご紹介したビデオのプロトタイプにもその例を見ることができます。 インターフェースの要素は、紙にスケッチして、カットして作ります。コピーして予備を作ることもあります。そして作ったピースを他の紙の上に集めます。 ある要素のサイズが間違っていれば、他の要素の並びを変えたり、新しいサイズの要素を紙をカットして作るなどの方法があります。 またワイヤーフレームより「本物」らしいといえます。特に面白さはないとしても、クライアントは紙のモデルを触ることができます。この触覚に訴える方法はクライアントに多くを説明できるので、他のどんな方法より優れていることもあります。 誰でも対象をより深く理解するためには、物理的なコンタクトが必要です。UXデザインの半分は、物理的なインタラクションの使い心地を、デジタルのインターフェースで作り直す作業であるといえます。   アプリで作成するミディアムファイおよびハイファイプロトタイプ これらは紙のプロトタイプとの共通点が多いです。以下でご紹介するInvisionなどのアプリで作成するプロトタイプは、あらかじめデザインしたインターフェースの要素をもとに作り始め、これらのピースを集めて完成品を模倣します。 異なる点は、全ての作業がスクリーン上でなされることです。完成製品のグラフィック作成やブランド化も可能であり、プロトタイプであっても完成製品のように作成することができます。その次はすでに述べたことですが、アプリによって製品のデモをブラウザやモバイルデバイス上で行うこともできます。 また手で触れて感じることも可能になります。クライアントの触覚に訴えることで、もし気に入ってもらえれば、最終的な承認を得たも同然です。   コード もちろんインタラクションを必要とする場合には、インターフェースのプロトタイプをコードで作るのがいい方法です。その理由もご紹介します。 あなたのワークフローによく合う(とにかくブラウザ上でデザインするような場合)。 作成するサイトやアプリに、ボタンなどのインタラクティブな要素が多数存在している。 製品作成の最終段階でプロトタイプのコードを利用すると、時間の節約になる。 インターフェースの機能性のデモを、アプリを使わずにブラウザ上で実行したい。 あなたがキーを押すのが好きで、クリックするのは嫌いである。 ブラウザ上でプロトタイピングを行うと、特に修正版を作成中はやや時間がかかります。製品の初期段階ではおすすめしません。ミディアム～ハイファイプロトタイプで使うのがベストです。 すでにHTMLやCSSで作業を進める方法を好んでいるとしたら、完成間近のプロジェクトを提示するには最良の方法の1つです。   フレームワークによるプロトタイピング フレームワークを利用すると、コードを使ったプロトタイピングのスピードを相当上げてくれます。さらに、完成製品用のフレームワークを利用するとしたら、コーディングの量も少なくて済みます。 補足として、BootstrapやFoundationのような人気の高いフレームワークを利用して構築された、ドラッグ＆ドロップ形式のWebページ用エディタもあります。これらを使うことで、ローファイプロトタイプからコードを加えた完成製品まで全て作ることができます。 または、これらをプロトタイプを速く作る目的だけに使い、プロジェクトの最終段階ではカスタマイズしたコードを使う方法もあります。どちらの方法でも上手くいくでしょう。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
アプリデザイン

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） Androidアプリコース スマートフォンアプリ開発 Androidアプリ開発 Androidアプリ開発でアクティビティを作成する方法【初心者向け】