カテゴリー: android

普段、私は英語の例文を覚えるために、AnkiDroid というスマホのアプリを利用しています。（ストアのレーティングが4.9というすごく評価の高いアプリです。）
しかし、もともとこのAnkiDroid は英単語などを覚えるためのものなので、デフォルトだとQ&Aがすべて中央（Center）に表示されてしまいます。

それでも、そんなに困らないのですが、かなり長文になってくるとやはり違和感を感じることがあり、左寄せにする方法を探してみました。

Q＆A画面からEdit noteで変更可能

Webでいろいろ検索していたところ、PC版のAnkiアプリケーションから変更可能という記事を見つけました。

しかしながら、その為だけにAnkiをダウンロードしてPCにインストールするのはちょっとめんどくさいなので、もっと簡単な方法がないか探していたところ、スマホの画面から直接変更することができることを発見しましので記載しておきます。

１．デッキを選んでQ&Aを開始

AnkiDroid でデッキを選択すると、以下のようにQuestionが始まると思います。

２．noteの編集

ここで、右上の点が３つ縦に並んだ部分を選んでください。
すると、以下のようにメニューが表示され、その中に「Edit note」が表示されていると思いますのでそれを選択します。

これにより以下のとおり、Q&A（note）の編集画面が表示されますので、一番下に表示されている「Cards:Card 1」を選んでください。

３．CARDのHTMLタグを編集

CARDを選択すると、以下のようにCARDの編集画面になりますので、Stylingのセクションにある”text-aline”の部分を”center” から”left”に編集し、上のチェックを選択してください。

これだけで、以下のようにすべてのFlashcardが左寄せになります。

注意事項

なお、この設定変更はCARD毎（今回の場合、CARD 1を使っているフラッシュカードはすべて対象）となるようですので、注意してください。
デッキ毎に設定を変えたい場合、CARDを別のものにしておく必要があると思われます。

また、note毎にこういった設定を変えたいといった場合は、編集画面のFront と Backのセクションで直接<p align=left>（変えたい表示）</p>とやれば良いみたいです。

AnkiDroidは基本的にHTMLタグで編集できるようなので、慣れてくるといろいろカスタマイズしやすそうです。また、いろいろなプラグインもありそうですので、興味のある人は試してみると良いと思います。

とりあえず前回、以下のページでAndroid Studioをセットアップするところを説明しました。
今回は、一歩進んで、簡単なアプリを開発してみたいと思います。

http://k2-ornata.com/android-app-dev/

とはいえ、まったく初めての方は何からやればいいのかわからないとおもますので、自分がやったことを１つずつ説明したいと思います。

ボタンを押すと文字が変わるアプリ

わたしも最初、何から手をつけてよいのかわからず、とりあえず他の人がよく作成している、ボタンを押すと文字が変わるアプリを作成してみることにしました。

今回、開発に必要な画面（ソース）としては、とりあえずアプリのGUIを決めるactivity_main.xlmと、GUIでの操作に応じて動くMainActivity.javaの２つです。

１．とりあえず、GUIを眺めてみる

まずは、activity_main.xlmを見てみます。プロジェクトを立ち上げて画面の上の方を見てみると、「activity_main.xlm」というタブがあると思います。そのタブを選択すると、以下のような画面が表示されます。

２．テキストの属性を設定する

１．でタブを開くと、最初はスマホアプリのGUIの真ん中あたりに、Hello Worldのようなテキストが表示されていると思います。そのテキスト（オブジェクト）をクリックし、右のウィンドウから属性を変えてみましょう。上記の例ではidの属性を以下のように設定しています。

属性	値
id	message01

このようにオブジェクトの属性を設定しておくことで、あとで、MainActivity.javaからそのオブジェクトを明示的に指定することができるようになります。

３．ボタンを作成する

次にアプリのGUI上にボタンを新しく配置してみます。下記のウィンドウの真ん中すこし左あたりにパレットがあると思いますので、そこから「Button」をマウスでクリックして、アプリのGUI上にもってきます。

その後で、先ほどのテキストと同様に属性を設定します。まずはid属性を設定し、その後にこのボタンが押された時に動き出す関数を設定します。
具体的な操作としては、右側の属性ウィンドウを下にスクロールしていくと、「onClick」という属性があると思いますので、そこに「changeText」という関数を設定します。

ボタンオブジェクトの設定をまとめると以下の通りです。

属性	値
id	button02
onClick	changeText

４．ボタンを押すとテキストが変わるようにする

ここまででアプリのGUIは作成できたので、あとはMainActivity.javaで先ほどボタンに設定した「changeText」関数を使って動きを設定するだけです。

MainActivity.javaのタブを最初に開いた時は以下のような感じになっていると思いますので、ここから「changeText」関数を定義していきます。

具体的には以下のような感じで記述します。全コードを記載しているので、このままコピー＆ペーストでもいいですが、最初は自分で真似しながら打ってみるといいかと思います。
Android Studioはなかなかかしこくで、コードを打っていると自動的に入力候補を出してくれるので、初心者にはありがたいです。

package com.example.textandbutton;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;


public class MainActivity extends AppCompatActivity {

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

    public void changeText(View view) {
        TextView message01 = (TextView)findViewById(R.id.message01);
        message01.setText("You pushed button!");
    }
}

public class MainActivity以降がアプリの動作を定義している部分で、それぞれの関数の実行タイミングはだいたい以下のようになると思います。

関数	実行されるタイミング
onCreate	名前のとおり、このアプリが作成（Create）されたときに動く関数だと思います。secContentViewで先ほどGUIで設定したテキストやボタンを生成・配置しているものと思われます。
changeText	先ほど自分でボタンを押した時に呼び出されるようにした関数です。テキストを実体化して、ボタンが押された時に、”You pushed button!”を表示するようにしています。

ちなみに上の方のimport文はコードの作成に必要なライブラリみたいなものを取り込む処理になります。
さらにその上のpackageはこのプログラム自身の名前だと思えばいいかと思います。

５．仮想環境を選択する

コーディングは以上になりますので、あとは実際に動かしてみます。
Android Studioの上のツールバーに緑色の三角ボタンがあると思いますので、それを押せばいいのですが、その前に、スマートフォンの仮想環境を設定しておく必要があります。

うろ覚えですが、上図の赤い四角に囲まれたプルダウンから仮想環境を選択することができます。選択が終わっていると、このように選択した機種が表示されていると思います。

６．動かしてみる

それでは先ほど説明したとおり、緑の三角（再生）ボタンを押してみます。以下のようにスマートフォンの仮想環境が表示され、その中にテキストとボタンが描画されていると思います。

この後、ボタンを押してテキストが”You pushed button!”になれば成功です。もしうまく動かなかった場合は、Android Studioの画面下（たぶんEvent Log）にエラーが表示されていると思いますので、確認してみてください。

どうでしょう？意外と簡単だったのではないでしょうか？

コロナウィルス対策としてCocoaというアプリがリリースされていますが、そのアプリの仕様に満足がいかず、自分でそれを補完するようなアプリが作れないかと思い、アプリ開発の勉強をしてみることにしました。

とはいえ、長い間、開発から遠ざかっており、今時の言語もあまり知らないので、一から勉強してみることにしました。

とりあえず開発環境を整える

正直、まったくAndroidアプリの開発をやったことがなく、何から手を付けたらいいのかわからない状態でしたが、いろいろ調べてみると、とりあえず開発環境としてAndroid Studioというものがあることが分かりました。Androidをターゲットに開発を考えている場合は、これが一番メジャーな開発環境なのではないでしょうか？

１．Android Studioの入手

Andoroid Studioは以下のサイトから入手可能です。

https://developer.android.com/studio

ダウンロードしたら早速インストールします。
インストーラの中で色々カスタマイズすることができるようですが、とりあえずデフォルトで問題なさそうです。

２．Android Studioの起動

インストールが完了したら、起動してみます。
起動した直後の画面は以下の通りです。（4.0.1 for Macの場合）
バージョンによってかなり画面が変わる可能性がありますが、基本的な操作は変わらないかと思います。

ここから、新規にアプリを作成する場合は「＋Start a new Android Studio Project」を選択します。

またすでに作成済みのProjectがある場合は、左側にリストで表示されます。

３．プロジェクトテンプレートの選択

新規にプロジェクトを作成する場合、最初にテンプレートを聞かれるようです。上の右３つであればどれでもよさそうですが、普通は、一番右のEmpty Activityを選択するといいようです。

４．言語とミニマムSDKの選択

ここは最初、選択が悩ましいところでした。

一番上のNameは適当で良いとして、LanguageはJava かKotlinを選べます。私の場合、Kotlinって何？状態だったので、昔すこし勉強したことがあるJavaを選択しました。Javaも最近結構進化しているようですが、Kotlinの方が今時でコーディングしやすいようですね。

あとここでもう一点注意が必要そうなのが、Minimum SDKの選択です。古いSDKを選択すればするほど、サポート可能なAndoroidは増えますが、あまり古いと自分の使いたいライブラリがインポートできなかったりするみたいです。とりあえず、ここではAndroid 5.0を選択しています。

５．Projectの初期画面

上記の画面でFinishボタンを押してしばらく待つと、以下のような画面が表示されます。（インストール直後はちょっと違う画面になっているかもしれません。）

ここでまた、何から手をつけたらいいんだ？と混乱するかもしれませんが、とりあえず、画面を見ると、MainActivity.javaのソースが開いていることがわかると思います。また、そのタブのとなりにもう一つactivity_main.xmlというタブがでていることが分かります。それぞれの役割は以下のような感じです。

MainActivity.java・・・アプリの動作について記述するコード
activity_main.xml・・・アプリの画面について記述するコード

とりあえず、難しいことをしないのであれば、まずはこの２つをいじっていけば簡単なアプリが開発できるようです。

以上、Android Projectのインストールから起動までをご紹介しました。昨日、始めたばかりなので、間違いがあったらこめんなさい。

続きはまた次のブログで記載していきたいと思います。