ニート大学生がアプリを作ってみた！ その➀ ~アニメ掲示板を作ろう~

2022-05-06

 

主
主
こんにちは、主です。


以前も他のサイトを運営していましたが、本投稿がこのサイト初の記事になります。

 

やはり、最初の記事は進め方とか今後の記事にも影響してくるので少し緊張。。。

 

そして、その記念すべき初投稿の内容はアプリ開発(Android用)について、です！

 

主
主
マイナー。。。

特段アプリ開発が得意なわけでもないですが、如何せん引きこもりニートでありますから、自宅でできるようなことしか記事にはできません(´・ω・)ｽﾏｿ

 

まあ一応、IT企業でのバイトを通して、開発の手順とかサーバサイドのこととか少しは知識がありますが、アプリ開発に関しては数年前に少しかじった程度なので、分かる人にとっては

 

「もっと簡単にできるのに！」

「何なのこの拙いコードは！！！」

 

なんてことが多々あると思いますが、とりあえず

 

「正常に動くこと・この記事を見てアプリ開発に興味を持っていただくこと」

 

を目標にして取り組んでいこうと思います｡(^▽^)ゞ

 

ではでは、前置きが少し長くなりましたが、アプリ開発についてお話ししていきます。

 

 

 

今回、作成するアプリはアニメ掲示板アプリです。

 

今までいくつかのアプリを作成してきました。

 

しかし、掲示板アプリについては作成したことがありません。

 

そして、掲示板アプリ自体がが少ないこと＋掲示板アプリに関する記事が少ない

という理由で今回作成することにしました。

 

また、サーバサイドでの処理も必要になってくるので、良い勉強になるかなと。

 

この掲示板アプリの機能は、大雑把に

・ジャンル選択

・アニメ選択

・投稿

・表示

です。

 

主
主
めちゃくちゃ大雑把。。。(笑)

 

機能としては、本当にこれだけなのですが、投稿するためにCSVファイルを扱ったり、アニメのタイトルをサーバ内に格納して引き出す処理なんかが面倒さそう。。。

 

まあ、何とかなるでしょう！

今回はボタンを置いたりするだけの処理なので、上記のことは次回以降行います！

 

今回のアプリ開発に必要なモノ

アプリ開発に移る前に、まずは「アニメ掲示板アプリ開発」に必要なモノを掲示しておきます。

全体を通して必要なモノ

・PC(Mac,Windowsどちらでも可)

・Android Studio(後でインストール)

・レンタルサーバー

今回必要なモノ

・PC(Mac,Windowsどちらでも可)

・Android Studio(後でインストール)

 

掲示板というのは、利用者が同一のPC（サーバ）にアクセスしてデータのやり取りを行います。

今回はサーバサイドのことはしませんが、次回から必要となってきます。

 

しかし、レンタルサーバを借りていないという方でも、アプリ開発がどのようなものなのかを知っていただけるかと思うので、良ければ最後まで見ていってください。

 

アプリ開発の準備

まずは、お使いのPCにAndroid Studioをインストールします。

 

インストール方法についてはnyanさんの記事をご参考ください→https://akira-watson.com/android/adt-windows.html

 

また、nyanさんのサイトではAndroidアプリ開発について基本～応用まで分かりやすく説明されているので、僕の説明が分かりにくかったり、物足りない場合はぜひご活用してみてください！

 

主
主
僕もよく助けてもらっています！

 

※結構容量使うので、Android Studioをインストールする際には十分空きを確保してからインストールしてくださいね。

プロジェクトを作成

左上のnewからfile→new projectを選択

必要条項を入力して、finish

ちなみに開発言語はJavaでやらせていただいてます。

ジャンル選択画面を作ろう

いよいよ開発スタートです。

 

今回作成するアニメ掲示板では、

ジャンルを選択→アニメ選択→投稿

のフローを考えているので、まずは最初のジャンル選択画面を作っていきましょう。

 

ジャンル選択画面の外観を編集

projectを作成し終わったら、まずMainActivityで扱うactivity_main.xml（外観）を開き、以下のコードを貼り付けます。

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/background"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/tool"
        android:minHeight="?attr/actionBarSize"
        app:titleTextColor="@color/toolColor"/>

    <EditText
        android:id="@+id/search"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:layout_marginVertical="20dp"
        android:layout_marginHorizontal="10dp"
        android:paddingHorizontal="8dp"
        android:textSize="14sp"
        android:background="@drawable/search_flame"
        android:hint="検索" />

    <TextView
        android:id="@+id/genre"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_marginHorizontal="10dp"
        android:textSize="12sp"
        android:textStyle="bold"
        android:text="ジャンル"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        >

        <Button
            android:id="@+id/genre_button1"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="5dp"
            android:textSize="12sp"
            android:background="@color/genreButtonColor"
            android:text="SF/ファンタジー" />

        <Button
            android:id="@+id/genre_button2"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="5dp"
            android:textSize="12sp"
            android:background="@color/genreButtonColor"
            android:text="ロボット/メカ" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        >

        <Button
            android:id="@+id/genre_button3"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="5dp"
            android:textSize="12sp"
            android:background="@color/genreButtonColor"
            android:text="アクション/バトル" />

        <Button
            android:id="@+id/genre_button4"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="5dp"
            android:textSize="12sp"
            android:background="@color/genreButtonColor"
            android:text="コメディ/ギャグ" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        >

        <Button
            android:id="@+id/genre_button5"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="5dp"
            android:textSize="12sp"
            android:background="@color/genreButtonColor"
            android:text="恋愛/ラブコメ" />

        <Button
            android:id="@+id/genre_button6"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="5dp"
            android:textSize="12sp"
            android:background="@color/genreButtonColor"
            android:text="日常/ほのぼの" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        >

        <Button
            android:id="@+id/genre_button7"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="5dp"
            android:textSize="12sp"
            android:background="@color/genreButtonColor"
            android:text="スポーツ/競技" />

        <Button
            android:id="@+id/genre_button8"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="5dp"
            android:textSize="12sp"
            android:background="@color/genreButtonColor"
            android:text="ホラー/サスペンス/推理" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp"
        >

        <Button
            android:id="@+id/genre_button9"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="5dp"
            android:textSize="12sp"
            android:background="@color/genreButtonColor"
            android:text="歴史/戦記" />

        <Button
            android:id="@+id/genre_button10"
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:layout_weight="1"
            android:layout_marginEnd="10dp"
            android:layout_marginStart="5dp"
            android:textSize="12sp"
            android:background="@color/genreButtonColor"
            android:text="戦争/ミリタリー" />

    </LinearLayout>


</LinearLayout>

見た目はこんな感じ。

LinearLayout とは子要素を縦・横の一列に並べるレイアウトです。

 

この中にEditTextやButtonなどの部品を配置します。

 

８行目の android:background="@drawable/background" で背景（木目）を指定しています。

 

res>drawableの中にお好きな画像をアップロード（コピー＆ペーストでできると思います）してください。

 

主はphotoacで、掲示板らしく木目の画像を使用してbackground.jpgとして保存してます。

 

ボタンをクリックしたときの処理

続いて、MainActivity.javaで動的な処理を行っていきます。

 

MainActivity.javaを開いて以下のコードを貼り付けてください。

 

package com.nushiweb.animekeijiban;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import androidx.appcompat.widget.Toolbar;

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        findViewById(R.id.genre_button1).setOnClickListener(this);
        findViewById(R.id.genre_button2).setOnClickListener(this);
        findViewById(R.id.genre_button3).setOnClickListener(this);
        findViewById(R.id.genre_button4).setOnClickListener(this);
        findViewById(R.id.genre_button5).setOnClickListener(this);
        findViewById(R.id.genre_button6).setOnClickListener(this);
        findViewById(R.id.genre_button7).setOnClickListener(this);
        findViewById(R.id.genre_button8).setOnClickListener(this);
        findViewById(R.id.genre_button9).setOnClickListener(this);
        findViewById(R.id.genre_button10).setOnClickListener(this);
        Toolbar toolbar = findViewById(R.id.toolbar);
        toolbar.setTitle("アニ掲");

        EditText searchEdit = findViewById(R.id.search);
        searchEdit.setOnKeyListener(new View.OnKeyListener() {
            @Override
            public boolean onKey(View v, int keyCode, KeyEvent event) {

                //EnterKeyが押されたかを判定
                if (event.getAction() == KeyEvent.ACTION_DOWN
                        && keyCode == KeyEvent.KEYCODE_ENTER) {

                    //ソフトキーボードを閉じる
                    InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);
                    assert inputMethodManager != null;
                    inputMethodManager.hideSoftInputFromWindow(v.getWindowToken(), 0);

                    //検索処理

                    return true;
                }
                return false;
            }
        });

    }

    @Override
    public void onClick(View v) {
        //ボタン処理
        //Button button = findViewById(v.getId());
        moveToSelectActivity(( (Button) v).getText().toString());
    }

    private void moveToSelectActivity(String genre) {
        Intent i = new Intent(this,
                SelectActivity.class);
        i.putExtra("search", genre);
        startActivity(i);
    }

}

※遷移先のSelectActivityを作成しておかないとエラーで落ちます。

 

OnClickListenerを継承し、ボタン押下時の処理を public void onClick(View v) の中に書いていきます。

 

findViewById(R.id.genre_button1).setOnClickListener(this);

 

このように書くことによって、リスナーを呼びだします。

 

今回は、 moveToSelectActivity 関数で次のアクティビティに遷移するようにしています。

 

private void moveToSelectActivity(String genre) {
        Intent i = new Intent(this,
                SelectActivity.class);       
　　　　i.putExtra("search", genre);
        startActivity(i);
    }

 

引数でボタンの文字（ジャンル名）を受け取り、それをintentを使って次のアクティビティに渡してあげます。

 

検索処理については、単に部分一致処理だけで済ますのであれば簡単なのですが、実用的ではないため今回はスルーさせていただきます(　；∀；) ｶﾅｼｲ

（追記）APIとか使えば簡単にできるかもです。

 

と、忘れていました！

res>values>styles.xmlに

<item name="windowNoTitle">true</item>

を追加しておいてください！

 

これは、アクションバーを非表示にして、xmlの方でツールバーを設定し、カスタムするためです。

まとめ

今回はジャンル選択画面の作成を行いました。

 

ジャンルを選択し、ボタン押下→押下したボタンがどのジャンルなのかを次のアクティビティに教えてあげるといった簡単な処理です。

 

掲示板っぽいことと言えば、背景を木目にしたくらい？でしたが、次回は、遷移先のアクティビティ（ジャンルに適合するアニメ一覧表示）の処理を行います。

 

サーバサイドのこともします！

 

そして、その次はいよいよ投稿フォームを作ったり、他の人が投稿した内容を表示する処理を行います。(*^-ﾟ)v

ではでは！

雑記android studio,アプリ開発,ニート,大学生

Posted by 主