1. 賃金階級年齢階級別労働者割合のアンドロイドアプリ
1. Android application for ratio of workers by wage class and age group

ニコニコ動画にアップした動画のまとめ記事です。

This is a summary blog post about a video I uploaded to NicoNico.

細かい部分は動画を参考にしてください。

Please refer to the video for details.

今回作るAndroidのアプリはこのようになります。

This is the Android app we are going to make this time.

Android Studioの環境設定方法は以前の動画を参考にしてください。

See my previous video for how to set up the Android Studio.

前回の動画でPythonのFlaskを使って作成した賃金階級の表アプリのAndroid版です。

This is the Android version of the list of wage classes app I created in the last video using Flask in Python.

今回は指定した年齢の範囲における賃金階級全体の棒グラフを表示できるように新たに改良してみました。

This time, I have made a new improvement to display a bar chart of the entire wage class within a specified age range.

Androidアプリの作り方は以前の動画で何回か紹介しているので参考にしてみてください。

I've shown you how to make an Android app a few times before, so check it out.

ではいつも通りにAndroid Studioを立ち上げてから、空のアクティビティを選択して新しいプロジェクトを作成してください。

Start Android Studio as usual, then select an empty activity to create a new project.

プロジェクトの名前は好きなようにつけてください。分かりやすい名前が良いかもしれません。

Name the project as you like. An easy to understand name might be good.

まずは[App]で右クリックして、[new]ー＞[Folder]ー＞[Assets Folder]の順に選択して新しいアセッツフォルダを作成しましょう。

First, create a new assets folder by right-clicking on [App] and selecting [new] ー＞ [Folder] ー＞ [Assets Folder].

作成したアセッツフォルダ内に前回使用した賃金階級表のCSVファイルをコピペしましょう。

Copy and paste the CSV file of the table of wage classes used last time in the created assets folder.

そしてまた[App]で右クリックして、[new]ー＞[Activity]ー＞[Empty Activity]の順に選択して新しいアクティビティを作成しましょう。

Let's create a new activity by right clicking on [App] and selecting [new] ー＞ [Activity] ー＞ [Empty Activity].

棒グラフ用のアクティビティです。分かりやすい名前を付けましょう。

This is an activity to display a bar chart. Please give it a name that is easy to understand.

[Generate a Layout file]にチェックを入れると、自動でレイアウトファイルを作ってくれます。

If you check [Generate a Layout file], the layout file will be created automatically.

次に、[Java]フォルダ内にある、[MainActivity.java]等があるパッケージフォルダで右クリックして、[new]を選択して[Java Class]ファイルを作成しましょう。

Next, in the [Java] folder, right click on the package folder that contains [MainActivity.java] and select [new] to create the [Java Class] file.

Canvas APIを使用してグラフを実際に表示させるクラスファイルと、CSVファイルの読み込みと賃金階級の計算等を操作するクラスファイルを作成します。

Create a class file to actually display the bar chart using the Canvas API, and a class file to read the CSV file, calculate the wage class, etc.

[layout]フォルダ内の[activity_main.xml]ファイルに[Grid Layout]を配置して、[columnCount]を2列、[rowCount]を6行に設定します。

Place [Grid Layout] in the [activity_main.xml] file in the [layout] folder, with [columnCount] set to 2 columns and [rowCount] set to 6 rows.

<GridLayout
    android:id="@+id/GridLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="2"
    android:rowCount="6">

[values]フォルダ内の[strings.xml]ファイルにプロジェクト全般で使用するテキスト等を予め別で作成して登録しておきます。

In the [strings.xml] file in the [values] folder, create and register the text, etc. to be used for the entire project separately.

<resources>
    <string name="app_name">wageClass</string>
    <string name="wageSpinnerLabel">Select Your Wage</string>
    <string name="ageSpinnerLabel">Select Your Age</string>
    <string name="calcBtnText">Calculate</string>
    <string name="displayTextLabel">show the percentage of the wage class in your age</string>
    <string name="chartActivityBtn">Show Chart</string>
</resources>

この[strings.xml]で登録したテキストをレイアウトファイルで使用する時は、頭にアットマークを付けて[name属性]に登録した名前を指定します。

To use the text registered in this [strings.xml] in the layout file, add an [at sign] to the beginning of the character and specify the name registered in [name attribute].

android:text="@string/wageSpinnerLabel"

[activity_main.xml]ファイルに戻り、[spinner]を使用してユーザーが年齢と年収を選択できるようにします。

Return to the [activity_main.xml] file and use [spinner]. This allows users to select their age and annual salary.

<Spinner
    android:id="@+id/wageSpinner"
    android:layout_row="1"
    android:layout_column="0"
    android:layout_columnWeight="1"
    android:layout_margin="10dp" />

何を選択するかの説明となるテキストも[spinner]の上に配置します。

Text that describes what to select is also placed above [spinner].

賃金階級の計算を行うボタンを配置します。[columnSpan]をカラムの数と同じにすることで一行に一つだけエレメントを配置することができます。

Places a button to calculate the wage class. Only one element per line can be placed by setting [columnSpan] equal to the number of columns.

[layout_gravity]を[center_horizontal]にすることで、レイアウトの真ん中にエレメントを配置できます。

You can position elements in the middle of the layout by setting [layout_gravity] to [center_horizontal].

[res]フォルダ内の[drawable]フォルダで右クリックして、[new]ー＞[Drawable Resource File]の順に選択して新しいリソースファイルを作成します。

Right-click the [drawable] folder in the [res] folder to create a new resource file by selecting [new] ー＞ [Drawable Resource File].

ファイル名を[border.xml]にして、[shape]を使って外枠を作成します。

Name the file [border.xml] and use [shape] to create the border.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="#000" />
</shape>

[activity_main.xml]ファイルに戻り、計算結果を表示する[TextView]に外枠を付けるため、[TextView]の[background属性]に[border.xml]を指定します。

Return to the [activity_main.xml] file and specify [border.xml] in the [background attribute] of the [TextView] to place an outline around the [TextView] that displays the result of the calculation.

android:background="@drawable/border"

棒グラフを表示するアクティビティへ移動するためのボタンを配置します。

Places a button to go to an activity that displays a bar chart.

[visibilty]を[invisible]にしてボタンの初期表示を非表示にし、計算結果が出たらボタンを表示させるようにします。

To create a mechanism for displaying the button when the result of the calculation comes out, set [visibilty] to [invisible] to hide the initial display of the button.

それではボタンが押された時や、スピナーが選択された時の動作のコードを書いていきましょう。

Now let's write code for what happens when a button is pressed or a spinner is selected.

[Java]フォルダ内にある、[MainActivity.java]を開いて、Class内で使用する変数を書いていきましょう。

In the [Java] folder, open [MainActivity.java] and write the variables to be used in Class.

計算結果を格納する為の空のリストを初期化し、賃金階級のCSVファイルの読み込みや計算をするクラスファイルのインスタンスを作成します。

Initializes an empty list used to store the calculation results and create an instance of the class file required to load and calculate the CSV file for the wage class.

それからユーザーが[spinner]を使って値を選択できるようにするために必要なアダプターを作成する関数を別で作成します。

You then create a separate function that creates the adapter needed to allow the user to select values using [spinner].

あとはテキストとボタンを操作できるようにレイアウトのIDからオブジェクトを作成します。

You then create an object from the layout ID so that you can manipulate the text and buttons.

[Java]フォルダ内にある、[WageDriver.java]を開いて、賃金階級のCSVファイルの読み込みや計算をするクラスファイルのコードを書いていきます。

In the [Java] folder, open the [WageDriver.java] and write the code of the class file which reads and calculates CSV file of the wage class.

ゲッターと呼ばれているメソッドを使用して、クラスのメンバ変数に直接アクセスして変数の値を参照する変わりに、メソッドを通して値を取り出すようにします。

You use a method called [Getter] to retrieve values through a method instead of directly accessing the member variables of a class and referencing the values of the variables.

public List<List<String>> getCsvArray() {
    return csvArray;
}

public List<String> getWageClassList() {
    return wageClassList;
}

public List<String> getAgeList() {
    return ageList;
}

ではCSVファイルの読み込みを行うメソッドを作成していきましょう。

Now let's create a method to load a CSV file.

Part2へ続く。

Continue to Part 2.

以上です。お疲れ様です。

That's all. Thank you for your hard work.