--- 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)