2020年12月15日

Androidで単語帳を作ろう(1) - 画面遷移、アクティビティのライフサイクルなど

今回から3回に分けてAndroid用の単語帳アプリを作って行こうと思います。

ひとまず Version 0.1として最低限の機能を実装してみます。

Version 0.1の機能

  • 単語一覧(英語のみ表示。覚えたものにはチェックマークを表示。)

  • 単語確認(英語・日本語を表示。「覚えた」「忘れた」ボタンでフラグ更新)

  • 単語新規登録

  • 単語編集・削除




作成する画面は以下の4画面ですが、新規登録と編集・削除は同じアクティビティなので実質的には3画面になります。









ソースコード





実装する上でポイントになる点としては、大まかに分けて以下の6つがあります。

1. ConstraintLayoutによるレイアウト
2. ActionBar(Toolbar)の使い方
3. 画面遷移の実装方法
4. Activityのライフサイクル
5. ListViewの使い方
6. SQLiteデータベースの使い方


以下にそれぞれのポイントについて簡単にメモして、参考になりそうなリンクなどを紹介していきます。


*なお、今回の説明のために参考になる資料を探していたところ、みんなのプログラミング by Telulu LLC 様の説明が大変分かりやすかったので、以下の説明で特にたくさんリンクさせていただきました。(ありがとうございます!)


1. ConstraintLayoutによるレイアウト


従来通りのRelativeLayoutやLinerLayoutを入れ子にして画面を作成する方法でも良かったのですが、どうせなら新しいバージョンで推奨されているやり方を使おうと言うことで、ConstraintLayoutを使って画面レイアウトを作成しました。

この方法だとほとんど入れ子構造を使わずにフラットな構成でウィジェット同士の相対的な位置関係を定義することでレイアウトが出来るので、慣れれば確かにこちらの方が効率が良いかも知れません。特にAndroid Studioのレイアウトエディタを使いこなせるようになればドラッグ&ドロップで画面をデザイン出来るので、かなり強力ですね。


下の動画を観ればおおよその使い方は分かると思います。

    🎬[Android]Constraint Layoutはこれだけ知っておこう① 

    🎬[Android]Constraint Layoutはこれだけ知っておこう② 

    🎬[Android]Constraint Layoutはこれだけ知っておこう③

    🎬[Android]ConstraintLayoutでレイアウトを作成する場合の注意点


公式のガイドも必読ですね。

    Layout Editor を使用して UI を作成する  |  Android デベロッパー





2. ActionBar(Toolbar)の使い方


「戻る」「編集」「削除」などのボタンを画面上部のActionBar内に表示する方法です。


最近(と言ってもAndroid 5以降らしいですが)のAndroidではActionBarではなく「Toolbar」を使うほうが何かとメリットが大きいようです。

    AndroidのToolBar(新しいActionBar)メモ - Qiita 


ただ今回のサンプルでは特に不都合は無かったのでActionBarを使って実装しました。

    アプリバーの設定  |  Android デベロッパー 


また単語の新規登録と編集で同じアクティビティを使っていますが、新規登録の場合はActionBar内の「削除」メニューを非表示にする制御を行っています。

    OptionMenuの内容を動的に変更する - Qiita 

    実行時におけるメニュー項目の変更  |  Android デベロッパー 




3. 画面遷移の実装方法


Androidでの画面遷移を上手く制御するためには、アクティビティの「スタック」の概念をしっかりと理解しておく必要があります。






たとえば、新しい画面に遷移する場合は startActivity() を使いますが、前の画面に戻るときは finish() で現在のアクティビティを「終了」する必要があります。

終了せずにさらに startActivity() で元の画面に遷移してしまうと、スタックの上にさらに新しいアクティビティのインスタンスが積まれることになります。


    🎬[Android]今の画面を閉じて前の画面に戻る方法


また、複数の画面(A → B → C)を開いたあとで、(Bを飛ばして)一気に最初の画面(A)に戻りたいという場合には、ちょっと工夫が必要になります。


今回のサンプルでは、単語一覧(A) → 単語確認(B) → 単語編集(C)と遷移した状態で、単語が削除されたらBではなくAに戻すためにこの方法を使いました。


この場合は finish() で戻るのではなく startActivity() を使いますが、そのさいに特別なフラグをパラメータに追加することで  C → A  という画面遷移が可能になります。

    private void backToList(){
        Intent intent = new Intent(getApplicationContext(), WordListActivity.class);
        intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
        intent.addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP);
        startActivity(intent);
    }


詳しくは下のサイトを参照してください。

最初のActivityに戻る - Qiita 



次の画面にデータを渡す


単語一覧画面から単語確認画面に遷移するケースでは、画面間で「どの単語がタップされたのか」という情報を受け渡す必要が出てきます。これは、インテントの putExtra() メソッドを使って渡したいデータをインテント内に詰め込むことで実現出来ます。

            Intent intent = new Intent(getApplicationContext(), WordViewActivity.class);
            intent.putExtra("_id", word._id);
            startActivity(intent);


渡されたデータを取得する


遷移先の画面では、onCreate または onResume でインテントの getIntExtra(), getStringExtra() などのメソッドを使って詰め込まれたデータを取り出します。


    protected void onResume() {
        super.onResume();

        // 渡されたインテントから単語IDを得る。
        Intent intent = getIntent();
        mWordId = intent.getIntExtra("_id", 0);

        // 指定された単語のデータをデータベースから取得して表示する。
        loadWord(mWordId);
    }




4. Activityのライフサイクル


サンプルの WordViewActivity では、上に書いた「元の画面から渡されたデータを取り出す」という処理を onResume でおこなっていますが、これは単語一覧画面から開かれたときだけでなく単語編集画面から戻ってきた場合にも単語の表示を更新したい(=編集後の最新の値を反映したい)ためです。


onCreate はアクティビティが生成されたタイミングでしか呼ばれませんが、onResume はアクティビティがスタックの先頭に来て画面に表示される度に毎回呼ばれます。


Android用のアプリケーションを開発する上では、このようにアクティビティのライフサイクルを理解することが非常に重要になります。


これについては下の動画が大変分かりやすいのでオススメです。

    🎬[Android]画面(Activity)のライフサイクルとは




今回は、
1. ConstraintLayoutによるレイアウト
2. ActionBar(Toolbar)の使い方
3. 画面遷移の実装方法
4. Activityのライフサイクル

について書きました。

次回は、

についてまとめたいと思います。




Androidで単語帳を作ろう - 目次
Androidで単語帳を作ろう(1)- 画面遷移、アクティビティのライフサイクルなど 







🍻

2020年11月27日

Mac上のChromeで自己署名のサーバー証明書を使ったサイトが開けないとき

ある開発中のWebサイトがあるのですが、最近開発マシンを変えたところ、今までGoogle Chromeでアクセス出来ていたのに急に出来なくなりました。

表示されるエラーメッセージはこんな感じです。

今までは、このメッセージが出ても下の方に「危険を承知で開く」という意味のリンクがあってそこをクリックすれば続行出来ました。


試しに古い方の開発マシンからやってみると、確かにそのようになっていてそちらでは開けます。


マシンが変わっただけで開けなくなったということは、何か新しいマシン上で設定が足りていないのかな、と思って調べてみたところ、下の方法で解決したのでメモしておきます。


Chromeの「Settings」メニューから、「Privacy and Security」→ 「Security」を開きます。



その中の「Manage certificates」メニューをクリックすると、Appleの「Keychain Access」アプリが開きます。(直接このアプリを開いた方が早かった。。。)


Keychain AccessアプリのCertificatesの中に該当のサイトの証明書があればそれをダブルクリックします。



証明書の詳細が表示されるので、「Always Trust」にしてこの画面を閉じればOKです。


この後、ブラウザで該当のURLを開くと、いつも通りにセキュリティの警告が出ますが、一番下の「危険を承知で開く」という意味のリンクをクリックすればサイトが開きます。



追記:
デバッグ用にローカル環境(localhost)でサイトを動かしている場合は上の方法では上手く行かないかも知れません。その場合は、下の方法を試してみてください。











🍻 

2020年10月31日

Windows, Linux, Macで英語キーボードの左右ALTキーで日本語入力ON/OFFを切り替える

一つのキーでトグルするのではなく別々のキーを使うことのメリット


下で紹介している alt-ime-ahk の作者さんのブログに書かれているとおりです。

”これの何が便利かというと、現在の IME の状態が何であろうと、日本語を入力したいときは「かな」英語を入力したいときは「英数」を押せばよい所です。いちいち IME の状態を気にしなくてもよいので、とても楽なのです。”


左でOFF、右でONこれに慣れるともうトグル方式には戻れません。


ちなみに、「英語配列」のキーボードでの話です。



Windowsでの設定 


alt-ime-ahk」を使います。

Win+Rキーから「shell:startup」と入力して開くフォルダにExeファイルへのショートカットを作成しておけば、ログイン時に自動的に起動してくれます。

この設定をしてから、英語キーボードで毎回「ALT+`」で切り替えていたのが「どれだけ時間の無駄だったのか」を痛感しました。



Linuxでの設定


Mozcでは上手く行かないので、「Fcitx」で設定します。詳細はこちら



Macでの設定


Karabiner-Elements」を使います。

普通に設定すると左右のCommandキーで切り替え可能になります。

私はさらにCommandキーに加えて左右のOptionキーでも切り替わるように設定を追加して使っています。 ました。

こうするとWindowsやLinuxと共通になるので便利ですでした。

Karabiner-Elementsの設定ファイルを開いて、left_command, right_commandをleft_option, right_optionに変更すればOptionキーで切り替え可能に。


その後、 MacでOptionキーのアサインを変えてしまうと「Optionを押しながらメニューをクリック」した時の挙動が変わってしまうことに気付いたので、やっぱりMacではこの設定はやめて左右Commandキーで切り替えることにしました。Windos, LinuxではALTキー、MacではCommandキーという点が異なりますが、「左でOFF、右でON」というのは共通しているので、ひとまずこれで良しとしています。







🍺