Androidアプリ開発におけるGUIコンポーネントの使い方【初心者向け】

Androidアプリ開発での【GUIコンポーネント】の使い方を初心者向けに解説した記事です。GUIを使うと、ボタンやスイッチなどのパーツを簡単に追加することができます。GUIの種類、パーツの追加方法も紹介しています。

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

Androidアプリ開発において、ボタンやスイッチといった便利なパーツ（GUI）が用意されています。

そこで今回は、アプリ開発の初心者向けにGUIコンポーネントの使い方を紹介します。

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

田島メンター！！Androidアプリでボタンとかテキストってどうやって設置するんですか？？？

GUIコンポーネントっていうのが用意されていて、気軽にボタンとかテキストを設置できるようになっているんだ。

え、どうやって使うんですか〜？？？

GUIコンポーネントとは

GUIコンポーネントとは、ボタンやテキストボックスなどのGUI（グラフィカルインターフェース）のライブラリです。

Androidアプリを開発するときは、すでに用意されているGUIを使うと簡単に画面を作成することができます。アプリのデザインを考える際にも役に立つことでしょう。

GUIコンポーネントの一部を紹介

実際にどんなものがあるのか部品を一部紹介します。画像と見比べるとよく理解できると思います。

また、リンク先にそれぞれのGUIコンポーネントを追加する方法も紹介しているので、合わせてご覧ください。

TextView

画面上に文字列を表示するための部品です。

001

Androidアプリ開発でTextViewを追加する方法

EditText

テキストを入力するための部品です。いくつか種類があり入力させたい文字によって、Plain TextやNumberなど使い分けることができます。

002

Androidアプリ開発でEditTextを追加する方法

Button

読んで字のごとくボタンです。クリックすることで、動作をするきっかけにすることができます。

003

Androidアプリ開発でButtonを追加する方法

Date Picker

日付を入力するための部品です。アプリを使う中でよく目にするのではないでしょうか。

008

Androidアプリ開発でDate Pickerを追加する方法

SeekBar

ある一定の範囲で数値を入力するときに便利な部品です。つまみをドラッグすることで値を入力することができます。

004

Androidアプリ開発でSeekBarを追加する方法

RatingBar

レート（評価）を入力させたい場合に使います。

005

Androidアプリ開発でRatingBarを追加する方法

RadioButton（ラジオボタン）

複数の選択肢の中から一つを選択させたい場合に使います。

006

Androidアプリ開発でRadioButton(ラジオボタン)を追加する方法

Switch

オンオフの状態を表す部品です。視覚的に状態が分かりやすいため、設定画面などで用いられることが多いです。

007

Androidアプリ開発でSwitchを追加する方法

Image View

画像を表示するための部品です。

009

Androidアプリ開発でImage Viewを追加する方法

Web View

Webページを表示するための部品です。

010

Androidアプリ開発でWebViewを追加する方法

[PR] Androidアプリ開発コース

GUIコンポーネントを追加する方法

最後に、実際GUIコンポーネントをアプリに追加する方法をご紹介します。今回は「TextView」を例にして紹介します。

まずは、Android Studioのパッケージ・エクスプローラーでres/layoutフォルダ内にある、xlmファイルを開いてください。

中央に「Pallete」があります。ここにアプリで利用できるGUIが用意されています。

フォーム・ウィジェット内のTextViewを配置したい場所にドラッグ＆ドロップしてください。

表示する文字を変えたい場合は、プロパティの「Text」の文字を変更します。

このプロパティの値を変更することで、表示する文字列のほかにも、文字の大きさを変えたり、センタリングをしたりといろいろなカスタマイズが可能です。

このように、グラフィカル・レイアウトで部品を配置すると、xmlに下記のコードが自動的に作成されます。

<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_alignParentLeft=”true”
android:layout_alignParentTop=”true”
android:layout_marginLeft=”56dp”
android:layout_marginTop=”60dp”
android:text=”表示させたい文字を入力します” />

今回の記事は以上です。

ぜひ自分でも使ってみてください。

また、iPhoneアプリを開発したい場合も同じようなことができるので、XcodeでiPhoneアプリにUIパーツを追加する方法も合わせてご覧ください。

とても便利ですね♪

そうだね。GUIコンポーネントはAndroidアプリを作るためのパーツをほとんど用意してくれているから、活用すれば簡単にアプリを開発できるよ。

そうなんですね！

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

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

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

Androidアプリ開発

Androidアプリ開発でCheckBoxを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、CheckBox...

Androidアプリ開発

Androidアプリ開発でEditTextを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はその中の1つである、EditTextを...

Androidアプリ開発

Androidアプリ開発でRadioButton(ラジオボタン)を追加する方法

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、RadioBut...

Androidアプリ開発

Android StudioでAndroidアプリのデバッグをする方法【初心者向け】

今回は、初心者向けAndroid StudioでAndroidアプリのデバッグをする方法を解説します。 Androidアプリをリリースする前に、実際にアプ...

Androidアプリ開発

Androidアプリ開発でWebViewを追加する方法【初心者向け】

Android Studioでは、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。今回はそのなかの1つである、WebVie...

Androidアプリ開発

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

PythonでGUIアプリを作成するのにおすすめのライブラリとは？現役エンジニアが解説【初心者向け】

PythonでGUIアプリを作成するのにおすすめのライブラリについて解説します。 Pythonで作成するGUIアプリというのは、みなさんが通常WindowsやMacなどで操作している画面上で、ダブルクリックして起動するアプリケーションを意味しています。アプリケーションを起動するのにダブルクリックをするのが普通だと感じるかもしれませんが、プログラミングにおいて、普通はコマンドラインやターミナルと呼ばれる黒い画面で起動コマンドを入力することでアプリケーションを実行します。これをGUIといいます。 GUIとはコマンドラインインターフェイスという意味です。しかし、すべての人がコマンドラインインターフェイスを使いこなすことができないため、GUI（グラフィカルユーザーインターフェイス）を利用したWindowsやMacで通常利用するアプリケーションを生成する必要がでてきます。目次 GUIを使うメリットとは？ GUIのフレームワークを選ぶ際のポイントは？ PythonにおすすめのGUI 実際にPySimpleGUIでGUIアプリを作ってみるまとめ田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 PythonでGUIアプリを作成するのにおすすめのライブラリについて詳しく説明していくね！大石ゆかりお願いします！ GUIを使うメリットとは？ GUIはGraphical User Interfaceの略で、画面操作(ボタンのクリックやマウスによる移動など)で、プログラムを操作する方式です。対義語はCUI(Character User Interface)で、キーボードによるコマンド入力で、プログラムを操作する方式です。文字に加え、アイコンなどの画像で操作対象をわかりやすくしたり、マウスで直感的に操作できたりするのがGUIの利点です。コンピュータ操作に不慣れな人や、そのプログラムを初めて扱う人でも、GUIならばプログラムを操作できます(十分親切なインターフェイスであることが条件です)。 [PR] Androidアプリ開発コースGUIのフレームワークを選ぶ際のポイントは？ GUIプログラミングの際、ウィンドウ操作のAPIを直接操作するのはまれで、適当なフレームワーク(開発環境)を用いるのが一般的です。選定では以下のような点に着目します。ターゲットとするOS(Windows, Linux, Macなど)に対応しているか機能は充足しているか外観(見た目)はどうかこれらについて、詳しく解説していきます。ターゲットOSに対応しているか GUIプログラムを生成する場合、ターゲットOSに対応しているかを考える必要があります。ターゲットOSとはWindowsやLinuxやMacを意味します。最終的に納品する場合、納品先との契約でターゲットとするOSに合わせてGUIアプリを生成します。もしも、顧客がMacのみ利用している環境で、WindowsのGUIアプリを納品しても、顧客先では利用できないためです。機能は充足しているか納品先との契約で指定された機能を実装するために、使用するGUI生成プログラムが仕様を満たしているか考える必要があります。たとえば、マルチタッチアプリを開発したいのか、データ入力支援するアプリを開発したいのかで機能が異なるためです。 UIはどうか使用する上でGUIフレームワークのUI（ユーザーインターフェイス）は非常に重要です。 GUIフレームワークのUIはGUIフレームワークを使いこなす上で、使いやすい配置によく使うボタンが配置されているか、設定で思い通りの設定ができるかなどで判断する必要があります。 PythonにおすすめのGUI Tkinter 表示例引用元：https://www.tutorialsteacher.com/python/create-gui-using-tkinter-python 強み TkinterはPython標準のGUIフレームワークなので、ドキュメントや事例も豊富です。また、追加インストールも不要で、Python本体に合わせてバージョンアップされます。用途非常に安定しているので、PythonのGUIプログラミングを最初に試す場合、良い選択肢です。ターゲット Mac 、Windows 、Unix、Linuxに対応しています。 Kivy 表示例引用：Kivy: Cross-platform Python Framework for NUI Development 強み KivyはNUI(Natural User Interface)でのマルチタッチアプリ開発のためのライブラリです。 GPUによる高速化もサポートしています。用途スマートフォンやタブレット向けのマルチタッチアプリをPythonで開発したい場合に、選択肢の筆頭になります。 2Dゲーム画面の開発にも適しています。ターゲット Windows、Mac、Linux、RPi、Android、iOS、Anacondaで利用できます。 PyQt 表示例引用元：PyQt5 book (4th Edition, 2020) Create GUI Applications with Python & Qt5 強み PyQt(パイキュート)はC++で記述されたGUIフレームワークです。 C++で開発されたことで、クロスプラットフォーム対応のため、WindowsでもMacでもLinuxでも同じコードで作成したものを利用することができます。用途商用で利用する場合はライセンス費用を支払う必要があります。非常に多岐にわたる機能があるため、ライセンス費用をはらって商用で利用する用途が良いです。ターゲット Windows、Mac、Linux、Unix、Android、iOSで利用できます。 wxPython 表示例強み Tkinterと比較するとウィジェットが豊富で、外観や操作感をカスタマイズしやすいです。用途ウィジェットを使用するためには、追加インストールが必要ですが、豊富なウィジェットを求める場合はTkinterよりもwxPythonを選んだほうが良いです。ターゲット Linux、Windows、Macに対応しています。 PySimpleGUI 表示例強み Tkinterをベースに開発されているため、動作が安定しています。非常にシンプルなコードで実装が可能です。用途細かい指定をすることが難しいですが、最初に利用するGUIとしては使いやすいです。ターゲット Windows、Linux、Mac、Trinketに対応しています。 Pygame 表示例引用：Historical Wargame Simulator – Revision E.5 (0.6.1.8) (pygame.org) 強み公式ページのチュートリアルを真似するだけで、それらしいプロダクトを作成可能です。用途ゲーム専用のGUIフレームワークです。ターゲット Linux、Windows、Mac、Unixで利用できます。一覧表名前強み用途 Tkinter ドキュメント動作が安定 Kivy マルチタッチ対応スマホアプリ PyQt クロスプラットフォーム商用アプリ wxPython ウィジェット豊富ウィジェット目的 PySimpleGUI 簡単に実装できる初心者用 Pygame チュートリアル豊富ゲーム用実際にPySimpleGUI でGUIアプリを作ってみる PySimpleGUI でGUIアプリを作成する理由は、初心者向けで非常に簡単にGUIアプリの作成が可能だからです。 PySimpleGUI のインストール PySimpleGUI公式サイトの説明に沿ってPySimpleGUI をインストールします。 pip install pysimplegui サンプルコード PySimpleGUI公式ページのサンプルコードを利用します。 import PySimpleGUI as sg sg.theme('DarkAmber') layout = [ [sg.Text('Pythonを勉強')],

Python

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アプリ開発の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> TableLayout上のパーツの配置を調整する「0」ボタンは2つのセルをまたいで配置されています。複数のセルをまたぎたい場合は、「android:layout_span」を追加してください。 <Button android:id=”@+id/button10″ android:layout_width=”wrap_content” android:layout_span=”2″ android:text=”0″ /> 実行すると、この画像のようにボタンが表示されます。また、途中のセルを空白にしたい場合は、「android:layout_column」を追加し、列番号を指定します。列番号は、一番左から「0,1,2,3…」となっています。 <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:layout_span=”2″ android:text=”0″ /> <Button android:id=”@+id/button13″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_column=”3″ android:text=”+” /> </TableRow> さらに実行すると、この画像のようにボタンが表示されます。これで完成です。さらに他のレイアウトを試したい場合はFrameLayoutの使い方も合わせてご覧ください。大石ゆかり tableタグを同じように設置できますね！田島悠介そうだね。GridLayoutもそうだけど一定の間隔でパーツを並べる場面って結構あるから、そういう時に使うと良いね。大石ゆかりそうですね〜♪ [お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。

Androidアプリ開発

Pythonにおけるguiライブラリ（windows）について現役エンジニアが解説【初心者向け】

Pythonにおけるguiライブラリ（windows）について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。そもそもPythonについてよく分からないという方は、Pythonとは何なのか解説した記事を読むとさらに理解が深まります。なお本記事は、TechAcademyのオンラインブートキャンプPython講座の内容をもとに紹介しています。田島悠介今回は、Pythonに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 guiライブラリ（windows）について詳しく説明していくね！大石ゆかりお願いします！目次 guiとは windowsで利用できるguiライブラリ guiライブラリをインストールしてみようまとめ guiとは guiとは、グラフィックユーザーインターフェースの略称で、アプリケーションやソフトの操作を簡単に行う為の操作画面のことを指します。身近なもので例えると普段使用しているパソコンやスマホの操作画面やテレビの設定画面等もguiにあたります。 [PR] Androidアプリ開発コースwindowsで利用できるguiライブラリ windows環境でのPython利用できるguiライブラリは下記のようなものが存在します。 Tkinter Tkinterは今回紹介するguiライブラリの中でも唯一のPython標準ライブラリです。標準ライブラリなのでセットアップやインストール等は必要なくPythonの環境があればすぐ使用することができます。 Tkinterは標準ライブラリで導入は簡単ですが、他のguiライブラリと比較すると機能面では少し物足りないかもしれません。 Kivy Kivyはクロスプラットフォーム対応のguiの開発ができるライブラリです。ゲーム制作に強いguiライブラリですが、日本語での情報が少ないのと、guiを開発する時にPythonコードとは別にCSSに似たKivy独自の言語を必要とする為、guiライブラリの入門としては少しハードルが高いライブラリになります。 PyQt PyQtとは、C++言語で開発されたQtというGUIツールをPythonで使用できるようにしたものです。PyQtでは、美しいGUI開発を得意とし、これまでに様々なソフト開発に使用された実績があります。 wxPython wxPythonは、PyQtと同様にC++言語で作成されたwxWidgetsをPythonで使用できるようにしたものです。 Python3でしか動作しませんが、クロスプラットフォームのGUI開発対応で、ライブラリも豊富なことから、より拡張性の高いGUI開発が可能なライブラリになります。 guiライブラリをインストールしてみようここでは先ほど紹介したguiライブラリの中からwxPythonのインストール方法と、簡単なサンプルコードについて紹介します。まずはじめに、wxPythonをインストールしてみましょう。 wxPythonはpipを使用してインストールが可能なので下記コマンドをターミナル/コマンドプロンプトで実行する事でインストールができます。 pip install wxpython サンプルコードを参考にwxpythonを利用して簡単なGUIを作成してみましょう。ここではwxPythonを使用して、ボタンをクリックすると動作する簡単なGUIを作成します。ボタンはサンプルボタンと終了ボタンを作成し、それぞれクリックしたらメッセージを表示する、クリック後10秒経過後GUIを終了する機能を実装します。サンプルコード # -*- coding: utf-8 -*- import wx import sys import time # ボタン1のクリックイベント関数 def click(event): frame.SetStatusText("ボタンがクリックされました。") # ボタン2のクリックイベント関数 def end(event): for i in range(9,-1,-1): frame.SetStatusText('終了ボタンが押されました。' + str(i+1) + "秒後に終了します。") time.sleep(1) sys.exit() app = wx.App() frame = wx.Frame(None, -1, u'GUIサンプル', size=(290, 250)) frame.CreateStatusBar() panel = wx.Panel(frame, -1) # ボタン1/2の設置 button_1 = wx.Button(panel, -1, pos=(60, 40), size=(150, 50) , label = 'サンプルボタン') button_2 = wx.Button(panel, -1, pos=(60, 110), size=(150, 50) , label = '終了ボタン') # ボタン1/2のクリックイベント button_1.Bind(wx.EVT_BUTTON, click) button_2.Bind(wx.EVT_BUTTON, end) frame.Show() app.MainLoop() 実行結果 [サンプルコード実行時] [サンプルボタンクリック時] [終了ボタンクリック時] 解説コード2-4行目では、サンプルコードで使用するモジュールのインポート処理をしています。コード7-8行目では、ボタン1(サンプルボタン)をクリックした時のイベント内容を記述しています。コード11-15行目では、ボタン2(終了ボタン)をクリックした時のイベント内容を記述しています。コード17-29行目では、wxPythonを利用してフォームを作成するコードを記述しています。コード31-32行目では、作成したフォームを表示する処理を記述しています。サンプルコードを実行すると実行結果のようなフォームが起動し、サンプルボタン/終了ボタンをクリックするとそれぞれのイベントが起動する事が確認できます。まとめ今回は、Pythonにおけるguiライブラリ（windows）について紹介しました。作成したプログラムにGUIを実装する事で、より操作のしやすいアプリケーション開発が可能になります。今回は簡単なGUIを作成する方法を紹介しましたが、同様の内容で様々なアプリケーション開発ができるようになるので、是非今回の記事を参考に挑戦してみて下さい。監修してくれたメンター菅繕久現在はフリーランスのエンジニアをしていてプログラミング歴は8年目になります。普段は Python、FileMaker等を使って様々な業務で活用できるIoTプロダクトRPAツールを作成しています。開発実績としては、業務自動化ツール(在庫管理・発注・ファイル操作 etc)、電子カルテシステム、ロボット用プログラムなどがあります。 TechAcademy ではPythonコースを担当しております。大石ゆかり内容分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ TechAcademyでは、初心者でもPythonを使った人工知能（AI）や機械学習の基礎を習得できるオンラインブートキャンプPython講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

Python

覚えると便利！UnityでGUIを作成する方法【初心者向け】

ゲームエンジンのUnityでGUIを作成する方法を初心者向けに解説した記事です。覚えておくとゲーム開発が便利になるので、この記事を参考にして実装してみてください。なお、本記事はTechAcademyのUnity入門オンライン講座の内容をもとにしています。田島悠介今回はUnityでGUIを実装する方法を見てみよう。大石ゆかり田島メンター！！GUIっていうのは何ですか～？田島悠介 GUIはGraphical user interfaceの略で、ユーザーが操作を行う際に使用するグラフィカルなインターフェイスのことだよ。例えば各種メニューボタンやテキスト入力エリアなどだね。大石ゆかりなるほど、色々なところで必要になりそうですね。ぜひ知っておきたいです！ GUIとは GUI（グラフィカルユーザインターフェース）とは、ユーザが視覚的に操作できる入出力機能です。ボタンやテキストフィールドといったGUIは、どのアプリケーションでも一般的に使用されていますね。 Unityでは、GUIをスクリプトから実装します。様々なGUIが用意されており、コードを1行記述するだけで簡単に実装できます。なお、GUIエディタのデモビデオは公開されているので、今後さらに簡単に使えるようになるかもしれません。代表的なGUI UnityのGUIのうち、代表的なものを紹介しましょう。 TextField 1行のテキストフィールドを表示します。ユーザはフィールド内の文字を編集することができます。 UnityのGUIでテキストを表示させる方法 Button シングルクリックに反応するボタンです。ユーザがボタンを押した際のイベントをスクリプトに記述できます。 UnityのGUIでボタンを表示させる方法 Label ラベルとして文字やテクスチャを画面に表示します。ユーザからの操作は受け付けない表示機能のみのGUIです。 UnityのGUIでラベルを表示させる方法 Slider マウスのドラッグ操作で値を設定するスライダー式のボタンです。ユーザは最小値から最大値の間でスライダーを操作して、値を調節できます。 UnityのGUIでSlider(スライダー)を表示させる方法 Texture 画像を表示させることができます。 UnityのGUI Textureを使って画像を表示させる方法では、実際にGUIを作成してみましょう。大石ゆかりボタンなんかは特によく使うことになりそうですね。田島悠介では実際に、GUIを追加する一連の手順を見ていこう。まずはオブジェクトの作成からだよ。大石ゆかり分かりました！ [PR] Androidアプリ開発コース事前準備今回は、ラベルを例にしてGUIの追加方法を解説します。まずは、スクリプトを追加するためのゲームオブジェクトを作成します。画面上部のタブで、[GameObject]→[Create Empty]と選択します。作成したゲームオブジェクトは、名前を「MenuWindow」としました。　次に、スクリプトを作成します。初めにスクリプトを保存するためのフォルダを作成しましょう。 [Project]タブで「Assets」フォルダを右クリックし、[Create]→[Folder]と選択します。作成したフォルダは、名前を「Script」としました。　そして、フォルダ内にスクリプトを作成します。「Script」フォルダを右クリックし、[Create]→[Javascript]と選択します。作成したファイルは、名前を「MenuWindow」としました。 ※注意：スクリプトファイル名を「GUI」にしてはいけません。 Unityのシステムで使用される名前のため、エラーの原因となります。　最後に、ゲームオブジェクトへスクリプトを追加しましょう。 [Hierarchy]タブで「MenuWindow」を選択し、[Inspector]タブで[Add Component]→[Scripts]→「MenuWindow」と選択します。　スクリプトファイルは、ゲームオブジェクトへ直接ドラッグ＆ドロップして追加することもできます。スクリプトの追加スクリプトにコードを追加し、GUIを画面に表示させましょう。「MenuWindow」スクリプトをテキストエディタで開き、以下のコードを追加してください。 // JavaScript function OnGUI () { // ラベルを表示する GUI.Label (Rect (10,10,100,100), “MenuWindow”); } C#の場合は以下のようになります。スクリプトファイルを作成する際に[C# Script]を選択し、スクリプトファイル名のクラスに追加してください。 //C# public class MenuWindow : MonoBehaviour { void OnGUI () { // ラベルを表示する GUI.Label(new Rect(10,10,100,100), “MenuWindow”); } } Rectはラベルの表示位置を決める構造体です。ゲーム画面の左上を原点にして、表示位置の「X座標」、「Y座標」、GUIの「幅」、「高さ」の順に値を設定します。その隣の” “で囲まれた文字列は、画面に表示される文字列です。では、コードを追加した状態で、ゲームを再生してみましょう。ゲーム画面に「MenuWindow」と書かれたラベルが表示されました。今回の記事は以上です。田島悠介再生したときにGameタブで上の画面が出てきたかな？大石ゆかり無事に表示されました！田島悠介表示される座標を変えたり、テキストを変更したりして実際に画面でどのように実装されるかを確認するといいよ。基本の方法が分かったら他のGUIにも挑戦してみよう。大石ゆかりさっそくチャレンジしてみます。ありがとうございました！ Unityをさらに使いこなしたい場合は、Unityにtransformの値を設定する方法も合わせてご覧ください。 [お知らせ]TechAcademyではオリジナルゲームアプリが公開できるUnityオンラインブートキャンプを開催しています。現役Unityエンジニアのサポートで効率的に学びたい場合はご検討ください。

Unity

【ゼロから作る！】初心者から始めるAndroidアプリ開発の開発手順とは

Androidアプリの開発手順をゼロから紹介していきます。今回の記事では、アプリを作ったことがないという未経験者でも分かりやすく2人のキャラクターが登場しながらAndroidアプリ開発について解説しています。「Androidアプリを作る上で必要なもの」「Androidアプリを作ってリリースしてみたい」などそれぞれシチュエーションに分けて細かく紹介していきます。では、Androidアプリの開発手順を実際に見ていきましょう！目次 Androidアプリ開発をする上で必要なもの実際にAndroidアプリを作ってみるアプリをリリースしてみるアプリで収益を得る大石ゆかり田島メンターってなんでiPhoneとAndroid、両方のスマホ持ってるんですかー？田島悠介なんでって両方のアプリを勉強するためだよ！大石ゆかりえ、でも同じアプリ入れてるじゃないですかっ！田島悠介実はね、iPhoneとAndroidで同じアプリでも違うデザインになっていたりするんだよ！大石ゆかりへぇ〜そうなんですね。どっちも同じように作ってると思ってました！田島悠介実は結構違うんだよね！ちなみにiPhoneとAndroid、それぞれ持ってる人の割合って何%くらいか知ってる？大石ゆかりんー、私の周り見てもみんなiPhoneだからほとんどiPhoneなんじゃないですかー？田島悠介たしかに日本人でiPhone使ってる人は多いよね！でも世界ではスマホを使ってる人の71.9%くらいがAndroidって言われているんだよ！（2021年1月statcounter調べ：Mobile Operating System Market Share Worldwide | StatCounter Global Stats）大石ゆかりえ、そうなんですかー！初めて知りました！田島悠介アプリを海外の人に使ってもらおうと思ったらAndroidから作る方が良いかもね！せっかくだからAndroidアプリの作り方を一通り説明しようか？大石ゆかりぜひ！知っておきたいです！(Androidアプリ作れたら海外で働く夢も叶うかも♪) Androidアプリ開発をする上で必要なもの PC(Mac/Windows/Linuxのいずれか) Android Studio JavaやKotlinなどのAndroid開発言語 Androidアプリの開発を進めるためには上の3つが必要です。 PC MacやWindowsなどのOSに関わらず、メモリは16GBほど搭載しておくと、開発する際にストレスなく動作させることが可能です。もちろん、CPU性能も影響します。開発環境 Android StudioではなくEclipseという環境でアプリ開発することも可能ですが、Android Studioで作る場合が一般的です。 Android Studioに関しては次の記事を参考にしていただくと分かりやすいです。「AndroidStudio」を使ったアプリ開発環境の構築方法 | TechAcademyマガジン言語 Java Javaは世界中の基幹システムで使われているプログラミング言語です。 Androidアプリ開発でも利用しますが、業務システムでもよく利用されるため、Javaを習得することで幅広い業務のシステム開発を行うことが可能になります。 Javaについては、次の記事を参考にしていただくと分かりやすいです。今さら聞けない！Javaとは【初心者向け】 | TechAcademyマガジン Kotlin KotlinはJava言語と100%の互換性を保ちつつ、より簡潔にソースコードを書けるよう、現代的な言語仕様が多く取り入れられています。 2010年に開発が始まり、2017年にはAndroid開発用言語として正式サポートされた新しい言語のため、書きやすい文法であるよう工夫されています。 Kotlinについては、次の記事を参考にしていただくと分かりやすいです。 Androidアプリ開発に使うメリットを解説！Kotlinとは【初心者向け】 | TechAcademyマガジン Dart（Flutter2） Dart言語を利用してAndroid開発をを行う際、Flutter2というフレームワークを利用します。 Flutter2を利用することで、「iOS」「Android」などのスマホアプリ、「Windows 10」「macOS」「Linux」などのデスクトップアプリ、「Google Chrome」「Safari」「Microsoft　Edge」など、ブラウザアプリを1つのソースコードですべて開発可能です。 https://flutter.dev/ JavaScript（React Native） JavaScriptを利用するReact Nativeでは、React.jsというフロントエンドフレームワークを利用してスマホアプリの開発が可能です。基本的にはフロントエンドプログラミングの技術を利用しているため、フロントエンドエンジニアがスマホアプリを開発する際、低い学習コストで開発が可能です。 React.jsもReact NativeもFacebookがサポートしています。 React Native · A framework for building native apps using React また、中にはツールを使ってアプリ開発できるものもありますが、プログラミングをして自分の力で作りたいという人は「Java」というプログラミング言語を理解する必要があるでしょう。 C#（Unity） C#を利用して開発するUnityでは、ゲームの開発を行うことが可能です。 Unityで開発したゲームは、AndroidやiPhoneなどのスマホアプリだけでなく、PlayStationやNintendoSwitchやXboxなどの家庭用ゲーム機用や、WindowsやMacやLinuxなどのPC向けゲームなどでリリースすることが可能です。 Unityについては、次の記事を参考にしていただくと分かりやすいです。今さら聞けない！ゲーム開発で人気のUnityとは | TechAcademyマガジン C#（.net） Xamarin という機能を利用して、iOS、Android、Windows向けアプリケーションを実装可能です。 Xamarinという名称は、今後、MAUI という名称に変更される予定です。 Xamarin とは – Xamarin | Microsoft Docs ノーコードノーコードとは、コードを書かずに実装が可能なツールを言います。実際プログラミング言語を学ばなくてもある一定レベルのアプリを作成することが可能です。スマホアプリを実装可能なノーコードツールはたくさんありますが、代表的なものとしてGoogleが買収したAppSheetなどがあります。 Make an App with No-Code. Start building today for free.

Androidアプリ開発

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

Androidアプリ開発におけるGUIコンポーネントの使い方【初心者向け】

GUIコンポーネントとは