3年生秋学期のプロジェクト研究成果物

1. 使いやすいソフトウェアの開発
早稲田大学基幹理工学部情報理工学科
近藤 智美 (1W182141-0 )
使う人によってレイアウトを最適化するAndroidアプリ
令和3年2月10日
プロジェクト研究B最終発表

2. 目次
1
1. 概要
2. 始めに
3. タップ回数保存
4. レイアウト変更
5. 動作の様子
6. まとめ
1
5
9
13
18
21

3. 概要｜今回やったこと
使いやすいソフトウェアを作りたい
• 操作が苦手な人にも使って欲しい
• より人の身近にあるスマートフォンを題材に
押しやすい位置よく使うボタンが来るアプリケーションを開発する
2
人によって”使いやすい”の定義は異なるが…
スマートフォンには押しやすい位置と押しにくい位置がある
押しにくい位置にボタンがあるアプリは使いづらい！！と仮定

4. 概要｜使用するツール・アプリの内容
Android Studioを利用して
アプリを開発
• OS｜Android
• 使用言語｜Kotlin
• Androidアプリ開発用の公式IDE
3
ドラマ・映画を管理するアプリ
• 感想や評価、出演俳優をメモ
• リストから年や俳優で絞り込みできる

5. 4
ボタンをタップ
回数を保存
並び替え
概要｜プログラムの流れ
よく使うボタン
タップ回数が多いボタン
 ボタンをタップするたび
タップ回数を保存
 タップ回数の多い順に
ボタンを押しやすい位置に
 画面が再表示される際に
ボタンを並べ替える

6. 目次
5
1. 概要
2. 始めに
3. タップ回数保存
4. レイアウト変更
5. 動作の様子
6. まとめ
1
5
9
13
18
21

7. 始めに｜タップしやすい場所とそうでない場所
6
押しやすい
押しにくい
左より右の方が、
上より下の方が押しやすい

8. 始めに｜ユーザーインターフェースの設計
7
よく使うボタンが右寄りになるように
下すぎる位置にボタンを配置しない
リストはタップ回数の降順に表示
→見えやすさを重視
ここからレイアウトを
ボタンのタップ回数により
変化させることが目標

9. 始めに｜画面レイアウト作成方法
A) LinearLayout
画面部品を縦／横方向に並べて配置
B) ConstraintLayout
画面部品を相対的に配置
C) FrameLayout
画面部品を重ねて配置
8

10. 始めに｜LinearLayout
LinearLayout 画面部品を縦／横方向に並べて配置
9
ボタン1
ボタン2
ボタン3
ボタン4
幅や高さなどの設定
設定の記述順に整列
( FrameLayoutは
LinearLayout＋部品が重ねられる
というイメージ)
<LinearLayout
…
>
<Button
…
/>
<Button/>
<Button/>
<Button/>
</LinearLayout>
①の設定
②の設定
③の設定
④の設定
XMLの内容 画面の様子
色や背景色等
※簡略化しています

11. ConstraintLayout 画面部品を相対的に配置
始めに｜ConstraintLayout
10
幅や高さなどの設定
<ConstraintLayout
…
>
<Button
…
/>
<Button/>
<Button/>
<Button/>
</ConstraintLayout>
①の設定
②の設定
③の設定
④の設定
XMLの内容 画面の様子
ボタン2の右
ボタン1
ボタン2
ボタン3
ボタン4
記述順に関わらず
ボタンの設定を
書き換えることで
位置を変えられる
ボタン1の左
ボタン4の下
ボタン1の下
※簡略化しています

12. 始めに｜画面レイアウト作成方法
A) LinearLayout
画面部品を縦／横方向に並べて配置
B) FrameLayout
画面部品を重ねて配置
C) ConstraintLayout
画面部品を相対的に配置
11
並び順=記述順
あとから画面部品を追加したり
動かすのに適さない
並び順=記述順
あとから画面部品を追加したり
動かすのに適さない
部品の位置関係を変えることで
容易に部品を動かすことが可能
ConstraintLayoutでアプリの見た目を作成

13. 目次
12
1. 概要
2. 始めに
3. タップ回数保存
4. レイアウト変更
5. 動作の様子
6. まとめ
1
5
9
13
18
21

14. タップ回数保存｜データベースのER図
13
視聴済みリスト
作品名
気になるリスト
公開年
制作会社
評価
感想など
俳優名
ジャンル番号
タップ回数
ボタンリスト
ボタンid
タップ回数
俳優リスト
俳優名
登場回数
1-3
1-3
ジャンルリスト
ジャンル番号
ジャンル名
登場回数

15. タップ回数保存｜データベースの接続方法
14
Activityクラス
DB接続
オブジェクト
DB接続
ヘルパークラス
D
B
M
S
DB
結果
SQL
②
要求
生成
DBヘルパークラスを作成する
①
アクティビティでDBヘルパーオブジェクトから
DB接続オブジェクトを取得する
DB接続オブジェクトを使ってSQLを実行
結果を取得
③

16. タップ回数保存｜ボタンタップ時の動作
15
ボタンタップの
検出
要求
DBヘルパーオブジェクト DB接続オブジェクト
生成
タップ回数取得
（SQL作成）
実行 タップ回数
タップ回数＋1
旧データの削除
（SQL作成）
実行
新データの挿入
（SQL作成）
実行

17. 目次
16
1. 概要
2. 始めに
3. タップ回数保存
4. レイアウト変更
5. 動作の様子
6. まとめ
1
5
9
13
18
21

18. レイアウト変更｜レイアウトの設定方法
ConstraintLayout
部品のどことどこを繋げるか指定
制約関係
幅や高さを指定
入れ子型で設計可能
17

19. レイアウト変更｜ボタン位置変更の流れ
18
ボタンのタップ回数に応じて制約の繋ぎ直し

20. 19
レイアウト変更｜アクティビティのライフサイクル
アクティビティの開始
onCreate() onStart() onResume()
アクティビティが実行中
onDestroy() onStop() onPause()
アクティビティの破棄
プロセスのキル
onRestart()
ユーザの操作で
アクティビティが再び開始
他のアプリが
メモリを要求
アクティビティが
再び表示
アクティビティが再び表示 別のアクティビティ が開始
アクティビティが
非表示

21. 20
レイアウト変更｜アクティビティのライフサイクル
アクティビティの開始
onCreate() onStart() onResume()
アクティビティが実行中
onDestroy() onStop() onPause()
アクティビティの破棄
プロセスのキル
onRestart()
ここでボタンの
タップ回数の取得と
制約の繋ぎ直し
ユーザの操作で
アクティビティが再び開始
他のアプリが
メモリを要求
アクティビティが
再び表示
アクティビティが再び表示 別のアクティビティ が開始
アクティビティが
非表示
アプリ開始時
画面の再表示時

22. レイアウト変更｜リストの並べ替え
21
3
2
1
5
count
検索結果を
タップ回数降順で
並べ替えるよう指定
DB接続オブジェクトの取得
リスト内レイアウトの取得
DB検索用カーソルの準備
DB内容とレイアウトの紐づけ
レイアウトに反映

23. 目次
22
1. 概要
2. 始めに
3. タップ回数保存
4. レイアウト変更
5. 動作の様子
6. まとめ
1
5
9
13
18
21

24. 23

25. 目次
24
1. 概要
2. 始めに
3. タップ回数保存
4. レイアウト変更
5. 動作の様子
6. まとめ
1
5
9
13
18
21

26. まとめ｜気づいたこと
使いやすさとは
• ボタンが押しやすい位置に来ることで特定のボタンを速く押せるようになった
• 削除・並び替え・絞り込みボタンの位置が変わると逆に使いづらい
• 持ち方によってはボタンが右下に来ると使いづらいことも
• 見えやすさと使いやすさの共存の難しさ
25
Android Studioについて
• コードの補完機能や修正機能が充実している
• 初心者にも使いやすいというわけではないが
ユーザーのことを考えられている

27. まとめ｜改善点
26
ボタンのタップ履歴
101 201 201 203 204 103 103 103
・・・
ボタンレイアウトの決定
他の持ち方にも対応させる
履歴からボタンレイアウトを考える

28. まとめ｜終わりに
27
プロジェクト研究で ボタンのレイアウトが使用者によって
最適化されるようなアプリの作成 をした
使用頻度の高いボタンが押しやすい位置に動くようにすることができた
他にも…
• 見やすい配色を意識してユーザーインターフェースを考えられた
• Androidアプリの開発方法とKotlinという言語について学ぶことができた
• データベースの授業で習ったことを実践できた
しかし
• もう少し滑らかな動き方を実現させる
• 他の持ち方に対応させる
• 趣味管理アプリとしての機能を完成させる ことができなかった