目次
第1章 環境構築をしよう
1.1 フロントエンド開発とバンドラー
1.2 最小限のwebpack設定
1.3 Babelによるトランスパイル
JSX記法とBabel
ECMAScriptとブラウザー実装
1.4 HMRで変更をすぐ確認しよう
1.5 CSS Modulesを導入しよう
1.6 Browserslistで必要最低限のトランスパイル
1.7 スマートフォンでの開発
React Devtools
Android
iOS
1.8 npm scriptsにコマンドを設定しよう
第2章 シンプルなカメラアプリを作ろう
2.1 画面の切り替え部分を作る
2.2 コンポーネントの設計をする
映像表示部分を作る
操作部分を作る
2.3 カメラの映像を取得する
2.4 画像を保存する
ImageCapture
saveAs
第3章 カメラの設定を変えよう
3.1 カメラの最大解像度を調べる
3.2 外側カメラ・内側カメラを切り替える
3.3 ズーム機能を実装する
ズームスライダーを作る
ズームを操作する
3.4 シャッター音をつける
第4章 EXIFをつけよう
4.1 EXIFの仕様
4.2 piexifjsでEXIFを設定する
4.3 GPS情報をつける
4.4 Orientation情報を追加する
画面の向きの計算方法
画面の向きを取得する
第5章 コンポーネントを整理しよう
5.1 コンポーネントを切り出す準備
5.2 ＜ZoomSlider＞
5.3 ＜ControllerButton＞
5.4 ＜ControllerGrid＞
5.5 ＜ControllerWrapper＞
5.6 ＜Loading＞
第6章 フィルターを実装しよう
6.1 プレビュー画面を作る
＜FilterPage＞
ページの切り替え
6.2 フィルターの仕様について
6.3 JavaScriptでフィルターを実装する
6.4 WebGLでフィルターを実装する
最低限のWebGLについての知識
シェーダーを書く
JavaScriptとWebGLのデータ受け渡し
座標の設定と面の作り方
6.5 いろいろなフィルターを作る
RGBスプリット
バイラテラルフィルター
顔認識を使った宇宙人フィルター
機械学習を使ったアートフィルター
6.6 WebWorkerとOffscreenCanvasで別スレッド処理
第7章 QRコードリーダーを作る
7.1 Barcode Detection API
7.2 Comlinkで手軽にWebWorker化
7.3 Clipboard APIとWeb Share API
＜BarcodeResultPopup＞
Clipboard API
Web Share API
第8章 アニメーションGIFを作ろう
8.1 GIF撮影画面を作る
＜App＞と＜CameraPage＞
GIF撮影画面のパーツを作る
撮影時間がわかるシャッターボタンを作る
GIF撮影画面を作る
8.2 GifRecorderクラスを作る
8.3 RustとWebAssemblyでGIFを作る
Rustの環境構築
GifEncoder
ComlinkとWebAssembly
第9章 PWAとして配信しよう
9.1 Web Manifestでアプリの設定をする
9.2 Service Workerでオフライン対応する
9.3 Netlifyで配信する
9.4 Androidアプリとして配信する
Trusted Web Activity
Androidアプリの開発セットアップ
TWA用のActivityを設定する
Android側のDigital Asset Links設定
配信用のアプリファイルを作る
アプリの配信をする
PWA側のDigital Asset Links設定
付録A ES Modulesで開発しよう
A.1 ビルド設定を整理する
A.2 コードを整理する
ファイルのimportを書き換える
ライブラリーのimportを書き換える
WebAssemblyの読み込みを書き換える
Service Workerを書き換える
A.3 テンプレートリテラルを活用する
シェーダーを埋め込む
htmでJSXを書く
emotionでCSSを書く
A.4 ＜script＞タグを書く
