---
title: 情報表現入門2024 アプリ成果物「funget」
tags: 
author: [uiro](https://www.docswell.com/user/famisics)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/9J24GN5Z7R.jpg?width=480
description: 情報表現入門2024 アプリ成果物「funget」 by uiro
published: August 02, 24
canonical: https://www.docswell.com/s/famisics/Z9VP21-funget
---
# Page. 1

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



# Page. 2

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

fun + widget
= funget
タイトル
アプリの機能
アプリの技術
デモ
3
改善したこと


# Page. 3

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

おねがい
4
• このアプリでは API を使っています
• APIキーは解読したり、他の場所で使ったりしないでください
• APIのリクエスト回数が制限に達するような使い方
をしないでください（リロードしまくる等）
タイトル
アプリの機能
アプリの技術
デモ
改善したこと


# Page. 4

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

アプリの機能
5
• 「朝弱い ＋ 生活リズムやばい」を改善
• 日常で使いたいウィジェット
天気、バス、歩数、睡眠
• 現在地を自動で判別する
• グラフを表示する
タイトル
アプリの機能
アプリの技術
デモ
改善したこと


# Page. 5

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

アプリの技術
6
• Processing 製
• Google Apps Script →（Fitbit API のラップ、バスの時刻表）
• Fitbit API →（歩数、睡眠データ）
• Open Weather Map →（天気データ）
• ipinfo.io →（IPアドレスデータ）
タイトル
アプリの機能
アプリの技術
デモ
改善したこと


# Page. 6

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

デモ（１分）
7
スライドはまだ続く
1分
タイトル
アプリの機能
アプリの技術
1分
1分
デモ
改善したこと


# Page. 7

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

もっと進んだ話
8
• ここからは、あくまで授業の内容 ＋α の話
• 個人的にはどうしてもスマホで使いたい
• できれば Android と iPhone の両方で
• Processing で iPhone アプリの作成は現実的ではない
（と私は思った）
タイトル
アプリの機能
アプリの技術
デモ
改善したこと


# Page. 8

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

スマホで使いたいよね…
9
• 技術選定の旅へ
• あくまで Processing のコードを使いたい、
Flutter / React Native はもはや Processing ではない
• p5.js + PWA !
タイトル
アプリの機能
アプリの技術
デモ
改善したこと


# Page. 9

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

スマホで使いたいよね…
10
• PWA → Progressive Web App（アプリ化に対応したWeb）
Android / iOS / Windows などでアプリと同じ動作
• p5.js → Processing Foundation のプロダクトの１つ
• Processing のコードをほとんどそのまま Web に移植できる
• モチベーション → 「やってみたい～
タイトル
アプリの機能
アプリの技術
」
デモ
改善したこと


# Page. 10

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

改善したこと
11
• Processing コードを p5.js に全て書き換え（1700行）
• データの管理を LocalStorage / json にした（元はHashMap）
• 非同期処理に対応し、描画を高速化
• 全ての実数値指定を、変数に書き換え、複数の画面サイズに対応
• バス用APIの事前出力 → 超高速
タイトル
アプリの機能
アプリの技術
デモ
改善したこと


# Page. 11

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



# Page. 12

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

13
ログが見れます！(ロマン)
タイトル
アプリの機能
アプリの技術
デモ
改善したこと


# Page. 13

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



