---
title: モバイルアプリの操作方法を疑ってみる
tags: 
author: [KAWASHIMA Yoshiyuki](https://www.docswell.com/user/ykws)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PJXP2W6ZEX.jpg?width=480
description: モバイルアプリの操作方法を疑ってみる by KAWASHIMA Yoshiyuki
published: November 08, 23
canonical: https://www.docswell.com/s/ykws/ZG1L7P-2024-10-13-030652
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PJXP2W6ZEX.jpg)

モバイルアプリの操作方法を疑ってみる
KAWASHIMA Yoshiyuki
YUMEMI.grow Mobile #8 2023.11.08


# Page. 2

![Page Image](https://bcdn.docswell.com/page/3JKDMV1V7D.jpg)

伝えたいこと
• モバイルアプリが提供している操作は絶対ではない
• モバイルアプリが使いづらいのであれば変えることができる


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LE3RYMNQ75.jpg)

話す内容
• インタフェースに対する見解の共有
• ユースケースを通してインタフェースを作ってみる


# Page. 4

![Page Image](https://bcdn.docswell.com/page/8EDY56WWEG.jpg)

書籍案内
• ゆめみ大技林 &#039;23 (2) に掲載
• この書籍は技術書典15開催日
（11/11）以降に購入できます
• 無料配布です


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V7P6GY9XJ8.jpg)

インタフェースとは何でしょうか？


# Page. 6

![Page Image](https://bcdn.docswell.com/page/2JV36GM3EQ.jpg)

つなぐ


# Page. 7

![Page Image](https://bcdn.docswell.com/page/5EG3N8GY7L.jpg)

モバイルアプリのインタフェースは何か？


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4JQ5Q9X67P.jpg)

画面


# Page. 9

![Page Image](https://bcdn.docswell.com/page/K749NX6ME1.jpg)

モバイルアプリのインタフェースは画面以外にもある
• マイクとスピーカーによる音声の入出力
• 位置情報の送受信
• カメラによる映像の入力
• 指紋認証
• 電源ボタン
• マナーモードボタン
• 音量調整ボタン
• 振動で着信を伝える


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LJ1K5NVY7G.jpg)

“ユーザーインプットではなく、
マシンインプットを考えろ”
さよなら、インタフェース
脱「画面」の思考法 / ゴールデン・クリシュナ 著 / 2015年


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GJWD54L172.jpg)

インタフェースを作ってみよう


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4EZGN2MXJ3.jpg)

ユースケース
• 電車で片手でスマホをスクロール操作する


# Page. 13

![Page Image](https://bcdn.docswell.com/page/Y76Y8VNPEV.jpg)

過剰なユーザーインプット


# Page. 14

![Page Image](https://bcdn.docswell.com/page/G75G9D5P74.jpg)

マシンインプットが使える？


# Page. 15

![Page Image](https://bcdn.docswell.com/page/9J2Y28NZJR.jpg)

サンプルアプリ
• https://github.com/ykws/motion-scroll-app


# Page. 16

![Page Image](https://bcdn.docswell.com/page/DEYGY6PNEM.jpg)



# Page. 17

![Page Image](https://bcdn.docswell.com/page/VJNGPZ5V78.jpg)

傾きを検知する
• iOS CoreMotion
• Android SensorManager


# Page. 18

![Page Image](https://bcdn.docswell.com/page/YE9W3ZYVE3.jpg)

傾きの検知を開始する
• iOS startAccelerometerUpdates
• Android registerListener


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GE8NM1647D.jpg)

傾きの検知を終了する
• iOS stopAccelerometerUpdates
• Android unregisterListener


# Page. 20

![Page Image](https://bcdn.docswell.com/page/LELP3Q9V7R.jpg)

ボタンと組み合わせスクロールを制御する
• iOS
• SwiftUI ScrollViewReader 座標 NG
• UIKit setContentO set
• Android
• rememberScrollState
ff
• detectTapGestures


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4JM4D1ZN7W.jpg)

おわりに
• 当たり前になっている操作方法も変えることができる
• それをすぐに試すことができる
• スマートフォンに搭載されているセンサーと API は身近な存在になっている
• マシンにユーザーを従わせるのではなく、ユーザーにマシンが従うようにシス
テムを設計・構築したい


# Page. 22

![Page Image](https://bcdn.docswell.com/page/PJRW4L6479.jpg)

考えてみてほしいこと
• スマートフォンに搭載されているセンサーにはどんなものがあるか
• Apple や Google が公開している API にはどんなものがあるか
• 面倒だったのに慣れてしまった操作は何があったか
• もし画面がなかったらどんな表現で情報を伝えるあるいは処理できるか


# Page. 23

![Page Image](https://bcdn.docswell.com/page/PEXP2WMZ7X.jpg)

書籍案内
• ゆめみ大技林 &#039;23 (2) に掲載
• この書籍は技術書典15開催日
（11/11）以降に購入できます
• 無料配布です


