ReactとTypescriptでexif-jsを使ってEXIF情報を取得する方法

React

趣味でEXIF情報を取得するアプリを作る際にReact×Typescriptでexif-jsを使ってEXIF情報を取得する際に少し悩んだので備忘録的な感じで記録しておきます。

なお、本記事ではReactやTypescriptについては使えるものとして細かく解説はしません。

プロジェクトの作成

はじめに、React×Typescriptで新規のプロジェクトを作成して、exif-jsを使う前の準備をします。

以下のコマンドでTypescriptが適用済みのReactプロジェクトを作成します。

npx create-react-app --template typescript [プロジェクト名]

作成されたプロジェクトファイル内の「src/App.tsx」の中身を以下のように書き換えて空にします。

import React from 'react'
import './App.css'

const App = () => {
  return (
    <div className="App">
    </div>
  );
}

export default App

プロジェクトの作成と準備はこれで完了です。

ファイル選択処理

先ほど空にした「src/App.tsx」を以下のように変更し、ファイルを選択できるようにします。(onChange関数の作成、input要素の追加)

import React from 'react'
import './App.css'

const App = () => {
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files == null || files.length <= 0) return
    for (let i = 0; i < files.length; i++) {

    }
  }
  return (
    <div className="App">
      <input type="file" multiple accept="image/*" onChange={onChange} />
    </div>
  );
}

export default App

onChange関数の中でファイルループをするのにfor(インデックス)を使用していますが、filesの型がFileList | nullのためforEach関数やfor in文を使用することができないためそのようにしています。(for in文は使用できるが求める結果と違う結果となる)

一応Array.fromでArray化してからforEachやfor in文を使用することもできるようなので、その辺はお好みの方法でどうぞ。

FileList(ArrayモドキObject)でもArrayのmapを使いたい!!

exif-jsを適用しEXIF情報取得

exif-jsを使用できるようにするため以下のnpmコマンドを実施します。

npm i exif-js  

exif-jsのインストールが完了したら「src/App.tsx」を以下のように変更します。

import React from 'react'
import './App.css'
import EXIF from 'exif-js'

const App = () => {
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files
    if (files == null || files.length <= 0) return
    for (let i = 0; i < files.length; i++) {
      EXIF.getData(files[i] as unknown as string, () => {
        const exif = EXIF.getAllTags(files[i] as unknown as string)
        console.log(exif)
      })
    }
  }
  return (
    <div className="App">
      <input type="file" multiple accept="image/*" onChange={onChange} />
    </div>
  );
}

export default App

EXIF情報取得処理では、EXIF.getDataやEXIF.getAllTags関数の引数にstring型を要求されますがFile型からの直接変換ができないので「files[i] as unknown as string」として渡すようにしています。(他にやり方があるならコメントなどで教えてください)

実行後適当なファイルを数枚選択しデベロッパーツールで確認をすると、以下のように取得されたEXIF情報が出力されることが確認できます。

終わりに

ReactとTypescriptでexif-jsを使ってEXIF情報を取得する方法を簡単にまとめました。

カメラの撮影時の情報を一覧で確認したかったのでEXIF情報を取得するアプリを作りましたが、SONYはレンズ情報をMakerInfo(独自規格)に格納しているようで欲しい情報全てを取れなくちょっと残念でした。

この記事について誤っている点・不明な点などありましたらコメントまでお願いします。

コメント

タイトルとURLをコピーしました