カメラアプリで体感するWeb App

目次

第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>タグを書く

 

 

 

 

 

 

Web技術 最強の指南書

60分でわかる! プログラミング教育 最前線

関連記事

  1. 冒険で学ぶ はじめてのプログラミング

    目次プロローグ 小さな村の大騒動〜東の辺境 トレモロ村〜…

  2. 人狼知能で学ぶAIプログラミング ~ 欺瞞・推理…

    目次第1章 人狼知能とは第2章 人狼知能エージェント…

  3. More Effective C# 6.0/7.…

    目次第1章 データ型の扱い項目1 アクセス可能なデー…

  4. 図解まるわかり セキュリティのしくみ

    目次第1章 セキュリティの基本的な考え方 ~分類して考える~…

  5. だから、また行きたくなる。 伝説の外資系トップ営…

    目次第1章 なぜ、あのお店は「選ばれる」のか?第2章…

  6. AWS認定資格試験テキスト AWS認定 クラウド…

    目次第1章 AWS認定資格1-1 AWS認定資格とは…

  7. コマンドで覚えるLinux

    目次Chapter1 CentOS(Red Hat/Fedo…

  8. 達人に学ぶSQL徹底指南書 第2版 初級者で終わ…

    目次第1部 魔法のSQL1 CASE式のススメ SQ…

最近の記事

  1. Microsft .NET C#
  2. れいといちかとまほうのトンネル
PAGE TOP