321 Views
August 02, 24
スライド概要
fun + widget = funget タイトル アプリの機能 アプリの技術 デモ 3 改善したこと
おねがい 4 • このアプリでは API を使っています • APIキーは解読したり、他の場所で使ったりしないでください • APIのリクエスト回数が制限に達するような使い方 をしないでください(リロードしまくる等) タイトル アプリの機能 アプリの技術 デモ 改善したこと
アプリの機能 5 • 「朝弱い + 生活リズムやばい」を改善 • 日常で使いたいウィジェット 天気、バス、歩数、睡眠 • 現在地を自動で判別する • グラフを表示する タイトル アプリの機能 アプリの技術 デモ 改善したこと
アプリの技術 6 • Processing 製 • Google Apps Script →(Fitbit API のラップ、バスの時刻表) • Fitbit API →(歩数、睡眠データ) • Open Weather Map →(天気データ) • ipinfo.io →(IPアドレスデータ) タイトル アプリの機能 アプリの技術 デモ 改善したこと
デモ(1分) 7 スライドはまだ続く 1分 タイトル アプリの機能 アプリの技術 1分 1分 デモ 改善したこと
もっと進んだ話 8 • ここからは、あくまで授業の内容 +α の話 • 個人的にはどうしてもスマホで使いたい • できれば Android と iPhone の両方で • Processing で iPhone アプリの作成は現実的ではない (と私は思った) タイトル アプリの機能 アプリの技術 デモ 改善したこと
スマホで使いたいよね… 9 • 技術選定の旅へ • あくまで Processing のコードを使いたい、 Flutter / React Native はもはや Processing ではない • p5.js + PWA ! タイトル アプリの機能 アプリの技術 デモ 改善したこと
スマホで使いたいよね… 10 • PWA → Progressive Web App(アプリ化に対応したWeb) Android / iOS / Windows などでアプリと同じ動作 • p5.js → Processing Foundation のプロダクトの1つ • Processing のコードをほとんどそのまま Web に移植できる • モチベーション → 「やってみたい~ タイトル アプリの機能 アプリの技術 」 デモ 改善したこと
改善したこと 11 • Processing コードを p5.js に全て書き換え(1700行) • データの管理を LocalStorage / json にした(元はHashMap) • 非同期処理に対応し、描画を高速化 • 全ての実数値指定を、変数に書き換え、複数の画面サイズに対応 • バス用APIの事前出力 → 超高速 タイトル アプリの機能 アプリの技術 デモ 改善したこと
13 ログが見れます!(ロマン) タイトル アプリの機能 アプリの技術 デモ 改善したこと