BtoCカテゴリー記事の一覧です

WSL2を使ってDocker開発環境を構築する方法を紹介！

2023.01.05

BtoC, Docker, PC, Ubuntu, Windows, WSL2, ツール, 紹介

現在、アプリケーションの開発環境の構築をDockerで行うということが一般的になってきました。ただし、これまではWindows環境で試そうとすると複雑な手順が多く、気軽に試すということが難しいものでした。
しかし、WSL2 (Windows Subsystem for Linux 2) の登場により、WindowsOS上で互換性の高いLinux環境の構築が可能になり、高速でDockerを動かせるようになりました。
そこで今回はWindows上でWSL2を用いてDocker開発環境を構築する方法を紹介します。
また、今回はUbuntuを使用しますので、そちらもWSL2と合わせてインストールします。

実行環境

今回は以下の環境で実行します。

Windowsバージョン : 11 Pro 21H2
OS ビルド : 22000.1335
Ubuntu : 20.04
Docker Desktop : 4.15.0

WSL2, Ubuntuのインストール

WSL2のインストール

それでは早速、WSL2のインストール方法から紹介します。
WSL2のインストールではPowerShellを使用しますので、Wndows PowerShellの”管理者として実行する”を選択します。

PowerShellが開けたら以下のコマンドを実行します。

wsl --install

その後以下のような表示がでたら、インストールは完了です。表示に出ているように、このコマンド一つで必要な内容をまとめて実行することができます。

PS C:\WINDOWS\system32> wsl --install
インストール中: 仮想マシン プラットフォーム
仮想マシン プラットフォーム はインストールされました。
インストール中: Linux 用 Windows サブシステム
Linux 用 Windows サブシステム はインストールされました。
ダウンロード中: WSL カーネル
インストール中: WSL カーネル
WSL カーネル はインストールされました。
ダウンロード中: GUI アプリ サポート
インストール中: GUI アプリ サポート
GUI アプリ サポート はインストールされました。
ダウンロード中: Ubuntu
要求された操作は正常に終了しました。変更を有効にするには、システムを再起動する必要があります。
PS C:¥Windows¥system32>

インストールが完了したら、PCを再起動します。
Linuxのディストリビューションを指定する場合は以下のようにコマンドを実行してください。

wsl --install Ubuntu-20.04

Ubuntuの設定

WSL2、Ubuntuのインストールが完了すると、Ubuntuが起動するので、ユーザー名とパスワードの設定をしてください。
設定が終われば、Ubuntuが使用可能な状態になります。
PowerShellでも以下のコマンドを実行することで、以下のようにUbuntuの状態がRunningと表示され、WSL2が有効になっているということが確認できます。

PS C:\WINDOWS\system32> wsl -l -v
  NAME                   STATE           VERSION
  Ubuntu-20.04           Running         2
  Ubuntu                 Running         2
PS C:\WINDOWS\system32>

Dockerを利用する手順

Docker Desktop for WIndowsのダウンロード

Ubuntuの設定まで終わった後は、公式サイトからDocker Desktop for WIndowsをダウンロードします。
Dockerの公式サイトを開くと「Download Docker Desktop Windows」というボタンがあるので、こちらをクリックしてください。

その後インストーラを起動し、画面に従ってインストールを行ってください。
途中の [Configuration]の画面では「Install required Windows components for WSL 2」にチェックがついているか確認してください。もし、されていない場合はチェックしてください。

Docker Desktop for WIndowsの設定

インストールが終了したら、最後にDocker Desktopの設定を確認します。
起動していない場合はDocker Desktopを起動して、右上の歯車マークから設定画面を開いてください。

Settingの画面が開けたら、[General]の “Use the WSL 2 based engine” が有効になっていることを確認します。

その後、サイドバーから[Resource] > [WSL integration]を選択し、”Enable integration with additional distros:” の下からDockerを使用するものの設定を有効にしてから、右下の「Apply & Restart」ボタンを押します。
今回は例としてUbuntu-20.04を有効にしています。

Setting画面の[Resources] > [WSL integration]を開き、Dockerを使用するものを有効にする。

これで、WSLからDocker Desktopを利用することができるようになりました。

Dockerの動作確認

最後にDockerの動作確認を行います。Docker Desktopの設定でUbuntuが有効になっているので、Ubuntuから動作確認をします。Ubuntuを起動し、以下のコマンドを実行してください。

docker --version

Dockerのバージョンが以下のように表示されれば、動作しています。

Docker version 20.10.21, build baeda1f

まとめ

いかがでしたでしょうか。WSL2を使用することによって、WindowsでもLinuxを簡単に動かせるようになり、Dockerも手軽に試すことができるようになりました。また、今回はUbuntuをインストールして使用していますが、その他のディストリビューションを利用することもできますので、目的に合わせて色々試してみてください。

【Postman】FirebaseにHTTP Requestを送る方法

2022.12.23

BtoC, Firebase, PC, Postman, SNS, ツール, 紹介

WebAPI開発やWebAPIのテストを行う際に役に立つツールとして「Postman」があります。Postmanはウェブの世界では広く普及しており、Webアプリケーションの開発に携わっていると、使ったことがあるという人も多いと思いますが、中には初めて聞くという人も多いと思います。
Postmanを使うことで、今までコマンドを使って行っていたことが容易にできるようになり、今後のWebAPI開発やテストにおいてはさらに使われる機会も増えると思います。

また、それと同時にWebアプリケーションのバックエンドの処理をするために、「Firebase」を使用しているという人も多いと思いますので、今回はPostmanを使ってFirebaseにHTTP Requestを送信する方法について解説していきたいと思います。

Postmanとは

それではまず、Postmanについて説明したいと思います。
PostmanはWebAPIを開発して使用するためのWebAPIプラットフォームです。これによって簡単にHTTP通信を行うことができます。
また、Postmanにはオンライン上で使用できるWeb版とインストールして使用するApp版が存在しますが、今回はApp版を使用しての解説になります。ただし、Web版とApp版での操作に違いはないので、Web版を使用していただいても構いません。

Firebaseとは

続いてFirebaseについても簡単に説明したいと思います。
FirebaseはGoogle社のクラウドサービスの一つで、モバイルアプリやWebアプリケーションの背後で必要となるサーバ上の機能をまとめて提供しているものになります。
主な機能としては、利用者認証、メッセージの配信、データの保存、簡易なWebサーバ、FaaS(Function as a Service)、NoSQLデータベース、利用状況の記録・解析といったものがあります。

PostmanからFirebaseにリクエストを送る方法

PostmanとFirebaseについて簡単に理解ができたところで、Postmanを使ってFirebaseにリクエストを送る方法を紹介したいと思います。

ただし、全てを紹介するとかなりの時間がかかってしまうので、今回は基本的な機能であるユーザーの作成、ユーザーのログイン、ユーザーの削除の方法について紹介していきたいと思います。

FirebaseのWebAPIキーを取得

ではまず、FirebaseにアクセスするためのWebAPIキーを取得します。
取得と言ってもFirebaseから、プロジェクトの設定画面を開くと「ウェブ API キー」と表示されているので、それをコピーするだけでOKです。

コレクションとHTTP Requestの作成

続いてPostmanの Collection と HTTP Requestの作成を行います。
Postmanのアプリを立ち上げて、左側の[Create Collection]を選択するか、ワークスペース名の右側にある[new]から”Collection”を選択してください。

ちなみに、Collection というのは、複数の HTTP Request などをサービス単位等でまとめたもののことです。今回はこの Collection の中にそれぞれの HTTP Request を用意していきます。

Collectionの作成ができたら、HTTP Request の作成に入ります。
左側のCollection名の下にある [Add a request] か、先ほどと同じように [New] のボタンから”HTTP Request”を選択してください。

Collection作成後の画面。NewかAdd a requestでHTTP Requestを作成する

HTTP Requestの画面まで開けたら、準備は完了です。この内容を行いたい処理に合わせて編集していきます。

ユーザーの作成

まずはアプリにユーザーを登録したいと思います。
FirebaseAuthenticationは RestAPI を備えており、そのドキュメントが公式から出ているので、こちらの情報をもとにHTTP Requestの編集を行っていきます。
今回はメールとパスワードを使って登録する方法でユーザーを追加するので、ドキュメントの中の「Sign up with email / password」の内容を確認します。
ここで重要になってくるのが、“Method”, “Content-Type”, “Endpoint”, “Request Body Payload”になりますので、よく確認しておきましょう。

ドキュメントを確認した後はそれをもとにPostmanを編集していきます。
まずは、HTTP RequestのMethodをドキュメントと同じPOSTに、「Enter request URL」に以下の Endpoint の内容を貼り付けてください。

//ユーザー登録のEndpoint
 https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API_KEY]

すると、[Params]タブに新しく”key”が追加されますので、対応する[API_KEY]をFirebaseのウェブAPIキーに書き換えてください。上のURLにウェブAPIキーが反映されていれば成功です。

次は実際に登録するメールアドレスやパスワードの情報を送るために、[Body]タブを編集します。
初めは”none”にチェックが入っていると思いますので、[raw] にチェックを入れて一番右の「Text」をドキュメントの “Content-Type” と同じ「JSON」に変更します。
[Body] に記載する内容はドキュメントの “Sample Request” から data-binary を参考に、以下に記載するようにメールアドレスとパスワードを入力すればOKです。

//以下のようにBodyに記載
 {"email":"登録したいメールアドレス","password":"登録したいパスワード","returnSecureToken":true}

ここまでできたら、最後に右上の「Send」ボタンを押して、200OKのレスポンスが返ってくれば成功です。

Firebaseの[Authentication] > [Users]を見ると先ほど入力したメールアドレスでユーザーが追加されていることを確認できると思います。

ユーザーログイン

ログインの場合もやることは基本的に同じです。
まずは公式ドキュメントの「Sign in with email / password」を確認します。
確認した内容をもとに以下のEndpoint等の入力をします。ここはEndpoint以外はユーザー登録と同じです。

//ユーザーログインのEndpoint
 https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=[API_KEY]

続いて[Body]タブを開いて、先ほどと同じように[raw]にチェック、「Text」を「JSON」に変更して、今度は先ほど登録したユーザーのメールアドレスとパスワードを入力します。入力できたら「Send」を押して、レスポンスが返ってくれば成功です。

//以下のようにBodyに記載
 {"email":"登録されているメールアドレス","password":"登録されているパスワード","returnSecureToken":true}

また、ここで返ってきた “idToken” は、この後のユーザー削除や他の操作で必要になる場合があるので、もし入力内容で “idToken” が必要な場合は、対象のユーザーでこの操作を行ってトークンを確認してください。

ユーザーの削除

最後に、今回作成したユーザーのアカウントを削除したいと思います。
公式ドキュメントでは「Delete account」の箇所になります。エンドポイントは以下の通りです。

//ユーザー削除のエンドポイント
 https://identitytoolkit.googleapis.com/v1/accounts:delete?key=[API_KEY]

今回も、前二つの操作とほとんど変わりありませんが、今回は送信する情報が “idToken” となっています。この “idToken” はユーザー作成時かログイン時のレスポンスで確認することができます。

//以下のようにBodyに記載
 {"idToken":"削除したいアカウントのidToken"}

入力が終わって「Send」を押して200 OKのレスポンスが返ってくれば成功です。

この時にエラーが出た場合はトークンの期限が切れている可能性がありますので、その場合は再度ログインして、新しい”idToken”を入力し直してください。

最後にFirebaseの[Users]を確認してユーザーの情報が消えていたら完了です。

まとめ

いかがでしたでしょうか。Postmanを使うことで、curlコマンドなどを使うよりも効率的にリクエストを送ることが可能になります。また、表示も複雑というわけではないので、視覚的にも扱いやすいというメリットもあります。
これからも、使える機会は増えていくと思いますので、これを機会にぜひPostmanを使ってみてください。

GitHubとは？Gitのコマンドと合わせて紹介！

2022.12.20

BtoC, Git, PC, Windows, ツール, 紹介

前回、Gitの使い方について解説をしました。それによって、Gitがどういうものか少なからず理解していただけたと思います。しかし、前回のブログの中で説明したように、あの内容はローカルリポジトリという、個々人のマシン上にあるリポジトリの使い方のみの説明であり、Gitを使う上ではそれに加えてリモートリポジトリに関連したGitの使い方や、GitHubについても知る必要があります。
そこで今回は、Gitの使い方とGitHubについて解説していきたいと思います。

GitHubとは

ではまずGitHubについて紹介します。GitHubはGitについて調べると必ずと言っていいほど目にする言葉で、どういったものかある程度理解していたり、名前だけは知っているという方も多いと思います。
ではそのGitHubが何かというと、Gitの仕組みを利用して世界中の人々が自分の作品を保存、公開でき、リモートリポジトリとしての活用や、チーム開発のための機能を提供するWEBサービスの名称です。

リモートリポジトリとは

前回の内容と被ってしまいますが、リモートリポジトリについても簡単に復習します。
そもそも、リポジトリとはバージョン管理によって管理される管理されるファイルと履歴情報を補完する領域のことです。
まずは個々人のマシン上のリポジトリで作業を行い、その後ネットワーク先のサーバー上などにあるリポジトリに集約します。この集約先になっているのがリモートリポジトリになります。
ローカルリポジトリだけでは、一人の作業内容しか保存できないため、複数人で作業するとなると、必ずこのリモートリポジトリが関わってきます。

リモートリポジトリ関連のGitの使い方

前回の使い方では、ローカルリポジトリ内だけでも使えるコマンドについて説明しましたが、最初に説明したように、Gitにおいてはリモートリポジトリも重要な要素であるため、今回はリモートリポジトリに関連した内容を紹介します。

リモートリポジトリの作成

まずは、リモートリポジトリの作成を行います。コマンドを使って作成することも可能ではありますが、今回はGitHubを使った作成方法を紹介します。

まず、GitHubのダッシュボードのページ右上の「＋」マークから「New repository」を選択するか、ページ左側「Top Repositories」の「New」を選択します。

選択後は作成するリポジトリの内容について選択する画面が出てきます。
「Repository name」は作成するリポジトリの名前を入力します。(画像ではsample)
次にリポジトリの種類として「Public」か「Private」のどちらかを選択します。「Public」の場合は、他のユーザーがソースコードなどを閲覧することができ、「Private」の場合は非公開となります。
「Initialize this repository with a README」はリポジトリの説明や使い方を記述するREADMEファイルを事前に作成したい場合にチェックします。
その後の「.gitignore」や「license」は None を選択で問題ありません。

すべて入力が終わったら「Create repository」を押して、リモートリポジトリの作成は完了です。

リモートリポジトリが作成できたら、Gitで使うコマンドについても紹介していきます。

git remote

git remote はローカルリポジトリで指定するリモートリポジトリの追加や削除を行うコマンドです。
以下の例のように、GitHubで作成したリモートリポジトリを指定することができます。

$ git remote add origin https://github.com/（自分のアカウント名）/（リポジトリ名）.git

git push

git push はローカルリポジトリの内容をリモートリポジトリに反映させるコマンドです。
より正確に言うと、ローカルの現在のブランチをリモートの指定したブランチに反映させるコマンドであり、リモートのブランチを指定する必要があります。ただ、例のように「-u」を付けるとローカルとリモートのブランチを紐づけることができるので、次回からは git push だけで実行可能にすることもできます。
また、コマンドを実行する際にはGitHubのアカウント名とパスワードが求められますので、間違えないように注意しましょう。

$ git push -u origin main
Username for 'https://github.com': アカウント名
Password for 'https://〇〇@github.com': パスワード

git clone

git clone はリモートリポジトリをローカルリポジトリにコピーするためのコマンドです。
前回紹介した git init がリポジトリを新しく作成するのに対して、こちらは既にあるリポジトリを使うという違いがあります。

$ git clone https://github.com/アカウント名/リモートリポジトリ名
Cloning into 'リポジトリ名'...
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Receiving objects: 100% (3/3), done.

git fetch

git fetch はリモートリポジトリの情報をローカルリポジトリに持ってくるためのコマンドです。ただし、持ってくるのは更新情報だけであり、これだけではワーキングディレクトリのファイルに変化はありません。後述する git merge を使うことで、ワーキングディレクトリのファイルを更新することができます。

$ git fetch
remote: Enumerating objects: 3, done.
remote: Counting objects: 100% (3/3), done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 587 bytes | 48.00 KiB/s, done.
From リポジトリ名
 * [new branch]      main       -> origin/main

git merge

git merge は特定のブランチやリビジョンを、現在のブランチに取り込むコマンドです。
これによって、fetchで持ってきた情報を使って、ローカルを更新することができます。
ちなみに、個人開発でもブランチで作業していた内容を統合する際にはmergeコマンドを使うことになります。

$ git merge origin/main
Updating d66e548..e117b19
# 更新内容
Fast-forward
 profile.md | 1 +
 1 file changed, 1 insertion(+)

git rebase

git rebase はmergeと同じように、他のブランチのリビジョンを取り込むコマンドです。
mergeと異なる点としては、取り込んだブランチがベースとなって、自ブランチの差分リビジョンを後ろに付け替えるという点になります。
では、どちらを使うのが良いのか？と疑問に思うかもしれませんが、merge をした場合に生成される「マージリビジョン」がGit管理を複雑にさせるということで、現在は rebase を使う方が一般的となっています。

# リベースで「main」ブランチを取り込む
$ git rebase main
First, rewinding head to replay your work on top of it...
Applying: Add リベース用ファイル

git pull

git pull は先述した git fetch と git merge をまとめて実行できるコマンドです。
わざわざコマンドを分ける必要がないときはこのコマンドを利用するのがおススメです。
また、「–rebase」オプションを使うことで、mergeの代わりにrebaseを実行することができます。

# 通常のコマンド
$ git pull

#rebaseオプション付きのコマンド
$ git pull --rebase

リモート追跡ブランチ

gitのコマンドを一通り紹介させていただきましたが、補足内容として「リモート追跡ブランチ」について解説したいと思います。補足とはいっても、Gitを正確に理解するための重要な内容になりますので、ぜひ覚えていってください。

リモート追跡ブランチとは？

一つのプロジェクトから分岐をさせて、本体に影響を与えず開発をすることができる機能がブランチになりますが、Gitではローカルとリモートリポジトリの同じ名前のブランチが直接連携しているわけではありません。
例えば、先ほど紹介したコマンドの中に “git fetch” がありました。その説明として、リモートリポジトリの情報をローカルリポジトリに持ってきていると言いましたが、その情報(コミット履歴)が更新されるのは、作業中のブランチではありません。
その情報はリモートリポジトリの各ブランチと直接連動しているブランチで更新され、そのブランチのことを「リモート追跡ブランチ」と呼びます。

リモート追跡ブランチはリポジトリをクローンした際にローカルリポジトリ上に作成され、リモートリポジトリの状態を表します。

ブランチ名

リモート追跡ブランチは「remotes/リモートレポジトリ名/リモートブランチ名」という名前がついているブランチになります。
例えば “origin” という名前のリモートリポジトリの “main” ブランチがあるとすると「remotes/origin/main」という名前になります。

ただし、リモート追跡ブランチを指定する時は「remotes/」を省略することが可能なので、「origin/main」だけでも問題ありません。

コマンドとの関係

リモート追跡ブランチがどういったものか理解ができたところで、実際にどのように影響しているのかを、コマンドと合わせて紹介します。

git fetch

リモート追跡ブランチとは何かを説明した際に触れましたが、”git fetch” はリモートリポジトリの内容をリモート追跡ブランチに反映するというコマンドになります。
なので、実際に作業をしているローカルのブランチが変化することはありません。

git merge

“git merge” はfetchで更新されたリモート追跡ブランチの内容をローカルのブランチに反映するコマンドになります。
コマンド紹介の例でも「$ git merge origin/main」のように、冒頭を省略した形でリモート追跡ブランチを指定しています。

git pull

“git pull” は fetch と merge をまとめて行っているものなので、処理の途中でリモート追跡ブランチを経由しているという形になります。

git push

“git push” では、ローカルブランチの内容をリモートブランチだけでなく、リモート追跡ブランチにも反映します。変更した内容が、「origin/main」にも影響を与えるので注意してください。

まとめ

いかがでしたでしょうか。チームで開発を行うとなった時には必ず、このリモートリポジトリやGitHubが関わってきますので、使い方はもちろん、Gitがどういう仕組みなのかを理解しておくと大変役に立つと思いますので、今回の内容はぜひ覚えていってください！

【Kotlin】
渡っているデータを
確認しよう！
【RxKotlin】

2022.11.25

Android, BtoC, Kotlin, PC, 紹介

kotlinを使ってアプリ開発を行っていると、RxKotlinを使ってデータそれぞれに処理を行うことがあると思います。
その際、処理を行うデータがちゃんと渡っていなければ上手く実行することができない場合があります。なので、意図しないエラーを減らすためにも、実装時にはデータを確認するのがおすすめです。
今回は、doOnSuccessやdoOnErrorの処理をする時にちゃんとデータが渡っているか確認する方法について紹介しますので、ぜひ参考にしてみてください。

RxKotlinとは

このブログを見ている方はすでにご存じだとは思いますが、RxKotlinについて説明したいと思います。
ただ、説明のためにはまずRxを理解する必要があるので、こちらについても簡単に説明します。
Rxは Reactive Extention を略したもので、Microsoftが開発した概念になります。
データが生成されるたびに送信されるデータに対して、その都度処理を行って目的を達成するといった考え方のことで、リアクティブプログラミングとも呼ばれています。

そして、RxをJavaに導入したRxJavaというライブラリがあり、それをKotlinで使いやすくするための軽量ライブラリがRxKotlinになります。

データの確認方法

では、実際にRxKotlinを使った際のデータの確認方法をお伝えします。
結論からお伝えすると、データを確認したい時は Log.d(“tag”, “出力内容”) を使ってログを出力すればOKです。
かなり簡略化している例ですが、実際に書くとこのような形になります。

dataList() //渡したいデータ
    .map {
        item -> Log.d("tag", item.toString())
        //処理内容
    }
    .doOnSuccess {
        res -> Log.d("tag", res.toString())
        //処理内容
    }
    .doOnError {
        e -> Log.d("tag", e.toString())
        //処理内容
    }

処理した後の結果を出力したい場合は、処理内容の後にログを入れれば大丈夫です。
これで、それぞれの処理が行われる際に、渡っているデータの内容がログに出力されるようになりますので、必要なデータに対して処理が行われているか確認することができます。

まとめ

いかがでしたでしょうか。普段と違う書き方であったり、処理の仕方が違ってくると、動きが分かりにくくなってしまうこともあると思います。そのような時はいつも通りログを出力すると把握がしやすくなると思いますので、ぜひ確認してみてください。

【Android】
Activity,Fragmentの
ライフサイクルを
理解しよう！

2022.11.21

Android, BtoC, PC, ツール, 紹介

Androidアプリの開発ではActivityやFragmentを使ってアプリの画面を実装していくと思います。そして、その際に気を付けなければならないのが、それぞれのライフサイクルです。
ライフサイクルを理解していないままコーディングを行ってしまうと、画面の表示が意図しないものになってしまったり、メモリが増加してしまったり等、予期しない不具合が起こってしまうことがあります。
逆にライフサイクルを正しく理解していれば、アプリの状態に合わせて的確な処理が実装できるようにもなります。
そこで、今回はActivityとFragmentそれぞれのライフサイクルがどのようになっているのかをまとめてみました。

Activity

まずはActivityから解説します。

Activityとは

Activity とは簡単に言えば、「Androidアプリで表示される画面」になります。
普段皆さんが使っているアプリも、起動するとアプリの画面が開いてから操作ができるようになると思います。その時に開く画面そのものがActivityになります。
アプリの中に複数の画面が用意されている場合は、Activityも複数使われます。

Activityのライフサイクル

Activityのライフサイクルを理解するために、まずはこちらの画像をご覧ください。

　　出典：アクティビティのライフサイクルについて

この画像から分かるように、Activityのライフサイクルでは7つのコールバックが提供されています。
それぞれのコールバックについて説明します。

onCreate()

Activityが生成される際、最初に呼ばれます。
このタイミングでViewを作成したり、基本的な設定をする処理を行ったりします。

onStart()

Activityが「開始」の状態になると呼び出されます。
このタイミングでonCreate()で取得したViewへのイベント登録や初期化を行います。
この時点でActivityはフォアグラウンドに移動しますが、まだ操作をすることはできません。

onResume()

Activityがユーザーからの操作を受け付け始める際に呼び出されます。
このタイミングではデータベースからデータを取り出したり、必要な情報をセットしたりするなど、表示や操作ができるようになるために必要な処理が実行されます。

onPause()

アプリがフォアグラウンドでなくなった時や、停止する前に呼び出されます。
この状態はActivityが一時停止している状態であり、続行しない操作を停止したり、続行する操作をバックグラウンドで動くように調整したりします。

onStop()

アプリが完全にバックグラウンドに移動した時に呼び出されます。
この状態ではActivityは非表示になり、停止しています。
ユーザーからアプリが見えていない状態のため、不要なリソースの開放やアニメーションの一時停止といった処理を行います。

onRestart()

Activityが非表示の状態から再度表示される際に呼び出されます。
画像にあるように、この後はonStart()が呼び出されます。

onDestroy()

アプリが終了するなどして、Activityが破棄される前に呼び出されます。
以前のコールバックで解放されていないリソースがここで解放されます。

Fragment

続いてFragmentについて解説します。

Fragmentとは

FragmentとはアプリUIの部品になるビューです。Activityよりも細かい単位でのレイアウトを定義して管理することができ、Activityの子ビューとして構成されます。
Fragment自体はActivityに依存しているわけではないので、複数のActivityから呼び出すことが可能という性質もあります。

Fragmentのライフサイクル

Fragmentのライフサイクルにおいても、まとめられた画像がありますのでご覧ください

　　出典：フラグメント

見てわかるように、Fragmentも複数のコールバックが提供されていますので、それぞれ説明します。

onAttach()

FragmentがActivityと関連付けられた時に呼び出されます。
Fragmentにおける最初のメソッドになります。

onCreate()

Fragmentが作成された時に呼び出されます。
この時点でFragmentの初期化が行われます。

onCreateView()

Fragmentに関連付けられたViewを作成する際に呼び出されます。
Fargmentに描画したいViewを返すことで、任意のViewを表示できるようになります。

onActivityCreated()

ActivityのonCreate()が完了した際に呼び出されます。

onStart()

Fragmentがユーザーに見えるようになった時に呼び出されます。
Activityと同様に、この時点ではまだ操作することはできません。

onResume()

Fragmentがユーザーの操作を受け付け始める時に呼び出されます。
このメソッドはActivityと同時に実行されます。

onPause()

Fragmentがフォアグラウンドでなくなった時や、停止する前に呼び出されます。
この時点で保存しておくべき情報が保存されます。

onStop()

Fragmentがバックグラウンドに移動し、ユーザーに表示がされなくなった時に呼び出されます。
この時点では表示はされていないものの、破棄するまでには至っていません。

onDestroyView()

Fargmentに関連付けられたViewが削除された時に呼び出されます。

onDestroy()

Fragment自体が破棄される前に呼び出されます。
こちらはActivityのonDestroy()の前に呼び出されます。

onDetach()

FragmentとActivityの関連付けが解除された時に呼び出されます。
このメソッドもActivityのonDestroy()の前に呼び出されます。

まとめ

いかがでしたでしょうか。一度にすべて覚えるというのは難しいかもしれませんが、ライフサイクルは重要な考え方の一つですので、流れだけでも覚えておくと役に立つと思います。
細かい部分が分からなくなってしまったという時は、今回の記事を見直して一つずつ確認してみてください。

【Kotlin】
データを一覧で表示！
ListViewの使い方

2022.11.07

Android, BtoC, Kotlin, PC, Windows, 紹介

アプリの機能として、配列のデータやリストを一覧として画面に表示させたいということがあると思います。Kotlinでは “ListView” というViewを使うことで、データを一覧で表示することができます。
今回はその表示方法について、解説していきたいと思います。

Adapter

ListViewを使って一覧を表示できると初めに説明しましたが、その際にAdapterというものを使う必要があります。どのAdapterを使うかによって表示できる内容が異なるので、そちらについて簡単に説明します。

ArrayAdapter

まず基本的なものがArrayAdapterを使って表示する方法です。
こちらは文字だけのリストといった、簡単な内容を表示させることができるものになっています。

カスタムAdapter

その他にはAdapterを使いたい形に合わせてカスタムする方法があります。こちらはArrayAdapterと違い、複数のテキストや画像をまとめて表示するということが可能です。

実装方法の解説

サンプル紹介

では、実際にリストを表示する方法について解説していこうと思います。今回はより実践で使える内容をお伝えしたいと思いますので、カスタムAdapterを使ったリストを作成します。
作成する内容は下記に示しているような、所属している社員の「アイコン」「名前」「年齢」を表示するリストになります。

実装方法の解説

では早速実装方法について解説していきます。
今回はlist-trainingという名前でプロジェクトを作成し、その中に記述しています。

ListViewの実装

まずはリストを表示するために不可欠なListViewを実装します。
今回は activity_main.xml の中に<ListView/>タグを使用して実装します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

<!--ListViewの実装-->
    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

これでListViewの準備は完了です。この後、表示する内容をAdapterを使って設定していきます。

dataクラスの用意

続いて、表示するdataのクラスを用意します。最初に説明したように社員の「名前」「年齢」「アイコン」を表示させたいので、それぞれのパラメータを持つEmployeeクラスを作成します。

package jp.co.chrono.list_training

data class Employee(
    val name: String,
    val age: String,
    val imageId: Int
)

これでリストに表示するデータのクラスも完成です。

カスタムAdapterの作成

続いて、今回使うCustomAdapterの作成をします。
以下のように記述します。

package jp.co.chrono.list_training

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.ImageView
import android.widget.TextView
import com.example.list_training.R

class CustomAdapter(context: Context, var employeeList: List<Employee>): ArrayAdapter<Employee>(context, 0, employeeList) {
    private val layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater

//    getViewメソッドでレイアウトを設定
    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
//      Employeeを取得する
        val employee = employeeList[position]

//      レイアウトの設定
        var view = convertView
        if (convertView == null) {
            view = layoutInflater.inflate(R.layout.list_item, parent, false)
        }

//      それぞれの項目を表示するviewの設定
        val imageView = view?.findViewById<ImageView>(R.id.image)
        imageView?.setImageResource(employee.imageId)

        val title = view?.findViewById<TextView>(R.id.name)
        title?.text = employee.name

        val age = view?.findViewById<TextView>(R.id.age)
        age?.text = employee.age

        return view!!
    }
}

CustomAdapterは、ArrayAdapterを継承しています。コンストラクタでContextとListを受け取って、ArrayAdapterのコンストラクタに渡しています。
ArrayAdapterの第二引数のresourceは0を渡しておいて、getViewメソッド内で実装します。

また、CustomAdapterはgetViewメソッドをオーバーライドしており、このgetViewメソッド内でそれぞれのレイアウトを設定しています。
引数として渡ってくるpositionは、項目の位置が格納されているので、これを使って対象のデータを取得します。

初回の画面表示では convertView が null で渡ってくるので、新たにレイアウトを設定するようになっていますが、再描画する場合は、最初に設定したレイアウトを再利用するという形になっています。

その後、以下の list_item.xml に実装した各Viewの設定をしています。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="12dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="60dp"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical"
        android:layout_marginStart="16dp">

        <TextView
            android:id="@+id/name"
            android:textColor="#000000"
            android:textSize="18sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="4dp" />

        <TextView
            android:id="@+id/age"
            android:textColor="#000000"
            android:textSize="18sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </LinearLayout>
</LinearLayout>

ここで、それぞれの項目のレイアウトを変えることができます。表示されているコードはあくまでも例としての内容になりますので、テキストの色や大きさなど、自分の好みに合わせて編集してみてください。

ListViewにCustomAdapterを設定

最後に MainActivity.kt で CustomAdapter を生成し、ListViewのAdapterとして設定します。
今回は、リストとして表示するデータもここで設定します。ただし、その場合アイコンに使う画像はあらかじめインポートしておく必要がありますので、注意してください。

package jp.co.chrono.list_training

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import android.widget.ListView
import com.example.list_training.R

class MainActivity : AppCompatActivity() {

    lateinit var customAdapter: CustomAdapter
    lateinit var employeeList: ArrayList<Employee>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val employee1 = Employee("田中", "25歳", R.drawable.icon_107620_48)
        val employee2 = Employee("山田", "42歳", R.drawable.icon_113120_48)
        val employee3 = Employee("斎藤", "37歳", R.drawable.icon_113200_48)
        val employee4 = Employee("吉川", "29歳", R.drawable.icon_160440_48)
        val employee5 = Employee("渡辺", "50歳", R.drawable.icon_113150_48)
        val employee6 = Employee("立花", "46歳", R.drawable.icon_107970_48)
        employeeList = arrayListOf(employee1, employee2, employee3, employee4, employee5, employee6)

        val listView = findViewById<ListView>(R.id.list_view)

        customAdapter = CustomAdapter(this, employeeList)
        listView.adapter = customAdapter

    }
}

CustomAdapter の第一引数には MainActivity にあたる this を指定し、第二引数でリストの情報を渡しています。

これで実装は完了です。

プログラムの実行

記述したプログラムを実行すると、初めに例として挙げた完成予想図と同じものが表示されます。

まとめ

いかがでしたでしょうか。今回のようにデータを一覧で表示したいという機会は多いと思いますので、その時々に合わせたリストをぜひ作成してみてください。
また、解説だけだと分かりにくい部分があると思いますので、解説したサンプルも実際に作って理解を深めていってください。

【Excel】
スマホで使える！
アプリ版Excelの紹介

2022.11.01

Android, BtoC, Excel, PC, ツール, 紹介

普段ほとんどの方がExcelをパソコンで使っていると思いますが、スマートフォンでもExcelを使うことができるというのを知っていますでしょうか？
わざわざ画面が小さいスマートフォンでやる必要もないと思われるかもしれませんが、パソコンが手元にない時にちょっとした編集を行ったり、簡単な資料作成をしたり、データの閲覧だけをするといった複雑な操作をしない場合には、アプリ版の方がお手軽にできるということもあります。
なので今回はスマートフォンでExcelを使う方法を紹介していきたいと思います。

アプリ版Excelの種類

アプリでExcelを使う方法としては、Excel単体のアプリをインストールするか、Officeのソフトがまとまって入っているアプリをインストールするかの２種類があります。

Excelのみで考えると単体アプリの方が機能性が高く、編集作業などをする場合はこちらの方が使い勝手が良いです。しかし、機能が多い分アプリの容量も大きくなっているので、スマートフォンの容量が気になるという方は注意していください。

逆にExcelで高度な編集をしないという場合や、他のOfficeソフトも使いたいという場合はOfficeのアプリをインストールするのがおすすめです。アプリの容量もExcel単体より少ないため、容量が気になるという方もこちらがおすすめです。

どちらも無料で使うことができ、Excelの場合はMicrosoftアカウントがなくても使えるという特徴もあります。

アプリ版Excelの始め方

早速アプリの始め方を紹介していきます。
※Androidでの紹介になりますので、iOSの方は画面が違う場合があります。

1. アプリのインストール
2. Microsoftアカウントでサインイン(しなくても可)
3. 画面表示に従って進む

これでExcelを使うことができるようになります。

今回はExcelの紹介なので、機能性が高いExcel単体のアプリをインストールしています。
また、こちらのアプリはサインインしなくても使うことが可能ですが、その場合はOneDriveへの保存やファイルの共有といった機能が使えません。

アプリの基本操作

続いてアプリの基本的な使い方について紹介します。
基本的な機能についてはパソコンのものとほとんど変わらないので、画面の表示などを主に説明していきたいと思います。

初期画面

始めは「最近使ったもの」の画面が表示されます。
下のタブから共有されているファイルや保存されているファイルを開くことも可能です。
新規で作成する場合は右上の「＋」マークを押してデータの作成をします。

編集画面

まず画面の下にテキストや数式を入力する欄があります。
テキスト欄左の、マークを押すと入力する関数の候補を表示してくれます。

メニューバーを表示させる際は画面上部にある “Aとペン” のマークを押します。すると下にメニューバーが表示され、「ホーム」「挿入」「描画」「数式」「データ」「校閲」「表示」の7種類から操作を選択することができます。

「描画」はPCのメニューバーには無いタブですが、こちらは画面上にペンで何かを描くことができる機能になります。

編集が完了したら、右上のマークから保存することが可能です。

まとめ

いかがでしたでしょうか。無料でも使うことができる上、基本的な機能も一通りそろっているので、使える場面も少なくないと思います。パソコンでの画面や操作とは大きく異なっているので、使いこなすのには少し時間がかかってしまうかもしれませんが、機会があればぜひ使ってみてください。

【Excel】
無料で使える！
Web版Excelの紹介

2022.10.31

BtoC, Excel, PC, Windows, ツール, 紹介

Excelを始めとした、 Microsoft Officeを仕事でよく使っているという人はとても多いと思います。また、場合によっては普段の生活でも使っているという人もいるかもしれません。
そんなMicrosoft Officeは便利なソフトウェアでありますが、有料でもあるため、購入をしていないという方もいらっしゃると思います。
では購入していないからOffice系のソフトが使えないかというと、そんなことはありません。
Microsoft Officeには無料で使えるWeb版のソフトがあり、アカウントの登録さえすれば、だれでも使うことが可能です。今回はその無料版のソフトの中でも、Web版Excelについて紹介したいと思います。

Web版Excelとは

Web版のExcelは、Microsoftアカウントを持っていれば、誰でも無料で使うことのできるソフトです。有料版と一部機能が違っていますが、基本的な操作は同じなので、そこまで複雑な機能を使っていないという方はWeb版のExcelでも問題ないと思います。

Web版Excelの特徴

Web版のExcelでは有料版と違って、このソフトならではの特徴があります。

・オンラインであれば、どこでも利用ができる

Web上のソフトになるので、オンラインの状況であればどこからでも、またパソコン以外のタブレットやスマホなどの端末からでも利用することができます。

・データを共有し、同時に編集することができる

複数のユーザーとデータを共有し、同時に編集を行うことが可能です。アクセス権を設定すれば指定のユーザーにだけ閲覧・編集権限を設定するということも可能です。

・自動保存機能がある

編集を行うたびに、One Driveに自動で保存をしてくれます。変更履歴を復元する機能もあるため、やり直しをしたい場合も戻って編集をすることができます。

Web版Excelでできないこと

Web版のExcelでは一部の機能には制限がかけられてしまっています。
使い始めてから必要な機能がないことに気づいた、ということがないようにWeb版のExcelでできないことの中でも重要な部分について紹介します。

・オフライン上で使うことができない

Web版のソフトになるため、オフラインの状況で使うことができません。もし、作業中にオフラインになってしまった場合は復帰後に直前の作業状態が復元されます。

・マクロの編集と実行ができない

マクロに関しては、編集と実行どちらもすることができません。

・外部を参照したグラフの作成ができない

基本的なグラフの作成は可能ですが、外部のデータを参照してのグラフ作成などは制限されています。

・自動保存のため、保存せずに閉じることができない

One Driveに自動で保存されているため、編集した後、その編集内容を保存せずにそのまま閉じるということができません。

・CSV形式のファイルが開けない

csvなど一部のファイル形式をサポートしていないため、開けない場合があります。開く場合は有料のExeclを使う必要があります。

Web版Excelの使い方

では実際に、Web版Excelを使う方法について紹介します。
実際の手順は以下の通りです。

1. Office on the Webのサイトにアクセス
2. Microsoftアカウントでサインイン（持っていいない場合は無料で作成できます）
3. Officeのホーム画面が表示されるので、左のバーからExcelを選択
4. 新しい空白のブックを作成するか、ファイルをアップロードして編集開始

これで、Web版Excelを開始することができます。

まとめ

いかがでしたでしょうか。Excelをほとんど使わない方や、基本的な機能しか使っていないという方はWeb版のExcelでも問題なく作業を行うことができると思います。
また、Web版ならではの機能もありますので、使用する状況によって有料版と使い分けるということもできると思います。
オンライン上であればいつでも使うことができますので、興味がある方はぜひ一度試してみてください。

【Excel】
データの個数を
調べたい時はこれ！
COUNTIF関数の紹介

2022.10.28

BtoC, Excel, PC, Windows, ツール, 紹介

以前のブログで、まとめたデータを整理する方法や、多くのデータの中から必要なものを探して表示する機能などを紹介してきました。
そのようにして、特定のデータを見つけることができるようになりましたが、特定の条件を満たしたデータが表の中にどれくらい存在しているのか？という “データの個数” を調べたいということもあると思います。
そんな時に便利な機能が「COUNTIF関数」になります。
今回はその「COUNTIF関数」について詳しく説明していきたいと思います。

COUNTIF関数とは

「COUNTIF関数」とは “COUNT” と “IF” という言葉が組み合わさっている通り、条件に合ったデータの個数を数えることができる関数になります。

COUNTIF関数の使い方

COUNTIF関数の構文

COUNTIF関数を使う際は、データの個数を入力したいセルを選択して

「＝COUNTIF(範囲, 検索条件)」

と入力します。

「範囲」は言葉通り、データの個数を調べたい範囲を設定する項目です。
「検索条件」は以前 IF関数でも紹介した “論理式” と同じで、そこに入力された条件を満たすか満たさないかで、カウントするか判断されます。
「検索条件」に文字列を使う場合は、その文字列と一致するかという条件になります。
また、「検索条件」に 60以上 (>=60) のような式を用いる場合は「””」で囲む必要がありますので注意してください

COUNTIF関数を使う手順

では実際に、COUNTIF関数の使い方を例を用いて紹介します。
今回は、「番号」「名前」「点数」「判定」のデータを入力した表と、「合格者数」「合格率」を入力する欄を用意しました。
「判定」の項目はIF関数を使ってすでに入力してあります。

こちらの表から「COUNTIF関数」を使って合格者が何人いるのか、加えて合格率が何％なのか？を調べたいと思います。

実際の手順は以下の通りです。

1. 合格者を入力するセル（G2）を選択し、「=COUNTIF()」と入力
2. データの個数を調べる範囲（D2:D21）を選択し入力
3. 検索条件として合格と入力されているセル（G5）を選択し入力

これで合格者数が求められます。
また、今回は「判定」の項目に “合格” と入力されているかを条件にしましたが、IF関数で使っているように「範囲」を点数の列に設定して “70点以上” かどうかで調べることも可能です。

それでは、続いて合格率も調べます。
合格率は、入力するセルに「＝合格者数 / 人数」の式を入力することで求められますが、人数に関しては「COUNTA関数」という関数を使います。
こちらは、COUNTIF関数と同様にデータの個数を調べることができますが、条件などは設定せずに選択した範囲のデータの個数を表示してくれます。
使い方も、「範囲」を選択するだけなので覚えやすいと思います。

4. 合格率を入力するセルに「=合格者数（G2）」を入力
5. 続けて “合格” “不合格” 含めた数「COUNTA(D2:D21)」で合格者数を割る
6. そのままだと少数で表示されるため、セルの書式設定からパーセンテージを選択する。

以上で合格率も求めることができました。
今回、人数を調べる範囲として「判定」列を使用しましたが、データの個数が同じであれば他の列を使用したり、直接数値を入力しても問題はありません。

重複しているかどうかの判定

今説明した例では「合格者」にあたるデータの個数を求めましたが、重複している内容がないかを調べるということもできます。
どのようにそれを求めるのかは先ほどの表を使って説明します。

まず先ほどの表に「重複数」という項目を新たに追加しました。その表の中にデータがいくつあるのかを表示する欄になるので、重複していた場合は、2以上の数値が表示されます。

手順は以下の通りです。

1. 重複数を表示するセル（E2）を選択してCOUNTIF関数を入力
2. 名前が重複していないか調べるため、名前の列（$B$2:$B$21）を範囲に設定
3. 検索条件にCOUNTIF関数を入力した行の名前（B2）を選択
4. 設定したCOUNTIF関数をほかのセルにも適用

これで、名前が同じものがあった場合、重複数に2以上の数値が表示されます。
用意した表では、2回名前が登録されている方が2人いるということが分かりました。

データを手入力した場合は、誤って同じ内容を入力してしまうということもあると思いますが、このようにCOUNTIF関数を使えば重複しているかどうかも調べることができます。

まとめ

いかがでしたでしょうか。そのデータがいくつあるのか？という情報も、データを分析する際には重要な要素になってくると思います。データが当てはまっているのか一つずつ数えていくのは大変ですし、数が増えてくるほどさらに困難になっていくと思います。
そんな時にCOUNTIF関数を使うととても便利なので、ぜひ使って調べてみてください。

【Excel】
データ探しに便利！
VLOOKUP関数の紹介

2022.10.27

BtoC, Excel, PC, Windows, ツール, 紹介

前回の記事で、データを見やすくする方法について紹介しましたが、特定のデータを確認したい場合には少し手間がかかってしまう場合があります。
その場合はVLOOKUP関数を使うことで、手軽にデータを取り出して確認することができます。
今回は、そのVLOOKUP関数がどういったものなのか、実際にどう使えば良いのか詳しく解説します。