ログイン、Webview表示だけのAndroidアプリ(java)を作成する

この記事は2023/04/03に作成されました。

始めに　

今回は、私がほぼ始めて、知識ゼロからAndroidのアプリを作成した際の経験から、簡単なアプリを始めて作成する際に持っておくと便利な知識などを少し紹介できたらと思います。

以前少しだけ他社が作成したアプリに手を加える機会があったのですが、すでにあるプログラムを変更したり追加したりしただけだったので、Andoridアプリの知識としてはゼロに近い状態でした。

当時アプリを作成する前までの知識としては、2ページ目の３つしかありませんでした。

・AndroidManifest.xmlファイルに、この機能を使いますよ～という宣言を書く必要があるということ
・xmlというhtmlみたいな記述方法ができるファイルに、webviewというタグ（タグと言っていいのかはわからないのですが）を追加することで、webviewをレイアウト上に配置することができるということ
・activity という、ＣＩでの考え方でいうとコントローラーにあたる部分にメソッドを書いていくこと、
おそらくWebview内の処理　どの URL を読み込むかとかも、ここでやれば動くんだろうなということ

あとは、とりあえずgoogle でやりたいことを検索すれば、ほぼ確実に解決方法が見つかるということくらいしか知らない状態でした。

さて、この３つの知識だけで、実際に動くアプリを作成できるのでしょうか・・・？

できました。

さすがにあの三つだけでは完成しませんが、少しのGoogle検索があれば形になります。

画面作成

というのも、今回のざっくりとした構成は3ページ目のような感じで、とても簡単なものです。
ログイン情報をサーバーサイドにPOST して、返ってきたURLにWebviewでアクセスするだけ。といったアプリでした。

Webview表示だけなら、先程の３つの知識だけで大丈夫です。
4ページ目のコードをご覧ください。

レイアウトのxmlファイルに Webview を追加して、ActivityのonCreateでWebview要素の取得、そのWebview要素の読み込み先URLを指定します。
そして、AndroidManifest.xml ファイルに、インターネット接続をしますよ～という宣言を書くことで、完成です！

これだけで表示可能です。

残りの部分を作成するのにも特別な知識は必要なく、先程のWebviewの部分の応用と、JSのaddEventListenerみたいなコードで onclick イベントを登録することで、サーバーサイドとの通信部分まで行けてしまいます。

5ページ目のコードをご覧ください。

レイアウトのxmlファイルはWebviewとあまり変わらず、要素名を対応する EditText要素（HTMLでいうInputタグ）、Button要素 を追加します。
そして、ActivityのonCreateでButton要素の取得と、クリック時のイベントを設定しています。
ログインボタンでサーバーとの通信をする準備部分です。
このonClick内にコードを書くことにより、ログインボタン押下時に実行されます。
入力されたテキストを取得して、バリデーションをかけてエラーメッセージを出したり・・・といった処理です。
大体はJSみたいな流れで読んでいけば、その通りに動いてくれます。

これでログイン画面の機能は完成です。

以上で、二つの画面が必要な部分が完成しました。

サーバー再度との通信

残りはサーバーサイドとの通信部分です。
この部分では少し苦戦しました。HTTP通信をするライブラリがいくつかあり、違いがよくわかりませんでした。

また、Androidはまだまだ変化が早く、去年まで使ってたライブラリがdeprecatedになっているということが多々あるようです。参考にしたコードで使用しているライブラリが、先月deprecatedになりました。ということも・・・。

今回は、volleyというライブラリを使用しました。
理由としては、Androidの公式ページにチュートリアルが書いてあったからです。

Postに必要な部分は6ページ目の太字の部分です。

これで login と pass にそれぞれログイン画面のTextViewで入力された値を挿入すれば、POSTで送信ができます。
また、書ききれませんでしたが、同じようにoverride の getHeaders でヘッダーを追加したりできるので、ベーシック認証だったりの処理はそちらに書くことで突破可能です。
その返りを取得して、Webview画面に移動する部分は7ページ目の太字の部分になります。
返ってきた string の response を渡しつつ、Webviewのアクティビティを開きます。

最後に、8ページ目で先程のサーバーサイドからの返り値である url を渡された Webview のアクティビティで、loadUrl をする前に url を受け取り、挿入すれば大体の流れは完成です！

完成！

完成しました！

Activityにメソッドを記入して、レイアウトのxmlファイルにタグのようなものを書き、POSTでの送信方法を検索するだけでログインができました。

おわりに

いかがでしたでしょうか。

アプリを作成するのは敷居が高いと思っている方や、難しそうと思っている方へのハードルを少しでも下げられたでしょうか？

私が業務で作成したときもそうでしたが、想像しているより６割くらい簡単にアプリを作れるので、ぜひ皆さんもアプリを作成してみてください。