動画の音ズレはどうして発生するの?

iPhoneやAndroidのスマートフォンが普及して以来、スマートフォンのカメラを利用して写真や動画を撮る機会が年々増えてきた人も多いかと思います。
動画を編集する作業をしたことがある人なら、
「スマートフォンで撮影した動画をそのまま再生する分には問題ないけど、複数の動画を一纏めにしようと動画編集すると、なぜか音ズレが起こる」
という経験をしたことがある人も、中にはいるのではないでしょうか?

今回は、このような音ズレが発生する原因と、その解決方法についてご紹介していきます。

前提:フレームレートについて

音ズレの原因を解説する前に、動画とは切っても切り離せない関係の「フレームレート」を紹介します。
フレームレートは、「fps(frames per second)」の略称で使われることがほとんどで、「1秒あたりに表示される画像の枚数」を表したものになります。
そもそも、動画とは「複数の画像を連続で表示させたもの」であるので、このフレームレートが高ければ高いほど、一つの動画で使える画像の枚数が増える(=動画が滑らかに見える)ことになります。
一般的に、テレビやyoutubeなどで目にする動画は30fpsであることがほとんどです。

動画ファイルのフレームレートは2種類存在する

一般的にフレームレートと言っても、「固定フレームレート(CFR)」と「可変フレームレート(VFR)」の2種類が存在することはご存知でしょうか?

固定フレームレート(以降はCFRと表記)は、その名の通り、1秒間に表示される画像の枚数が一定値で固定されているものを指します。CFRの場合、30fpsと指定されている場合、どの区間においても必ず30fpsで動画が作成されます。

一方、可変フレームレート(以降はVFRと表記)は1秒間に表示される画像の枚数が定まっていない動画を指します。
例えば、
「区間Aでは動きが激しい描画が多いから、この区間ではフレームレートを増やして動きを滑らかに見せよう」
「区間Bではほとんど動きがないから、この区間はフレームレートを減らして動画ファイルの容量を削減しよう」
というように、動画の内容に合わせて適切なフレームレートを使い分けてくれるのがVFRの特徴です。

昨今のスマートフォンで撮影された動画は、VFRであることがほとんどです。

動画の音ズレはどうして発生するの?

ここからが本題で、音ズレが発生する原因は、動画のフレームレートがVFR(可変フレームレート)である場合が多いです。
VFR形式の動画は、動画再生ソフトでは音ズレなく再生できているように見えますが、動画編集ソフトなどで読み込みを行うと音ズレが発生してしまいます。
これは、動画編集ソフト側がVFR形式の動画に対応しておらず、無理やりCFR形式として読み込もうとして発生してしまう事象です。

もう少し詳しく解説します。
VFR動画の「画像」と「音声」を、以下のように切り分けたとします。

VFR動画
画像:\-\-\‐\-\‐\ー\-\―\-\-\-\-\-\-\―\-\‐\-\―\-\
音声:\-\-\‐\-\‐\ー\-\―\-\-\-\-\-\-\―\-\‐\-\―\-\

上記のVFR動画で、”\”区切りで記載されている”-“や”ー”が、1フレームの表示時間となります。VFRは可変フレームレートなので、1フレームが長い部分は動きがない部分、逆に短い部分は動きがある部分と捉えていただけたら大丈夫です。

このVFR動画の内容をCFR動画に変換し、1フレームレートでの表示時間をすべて一定化すると以下のようになります。

CFR動画
画像:\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\-\
音声:\-\-\‐\-\‐\ー\-\―\-\-\-\-\-\-\―\-\‐\-\―\-\

パッと見でもわかるように、画像の表示時間と音声の再生時間に大きな差が出てきていますね。これが音ズレの原因となります。(図で表示するとかなりずれ込んでいるように見えますが、実際にズレてくるのはごくわずかです)
フレームレートはあくまで動画(画像)の表示方法であり、音声には反映されないため、動画編集ソフトを介するとこのような音ズレが起こります。(こんな感じの説明で理解できるでしょうか。。?)
ちなみに、動画再生ソフトのほとんどがVFR形式の動画に対応しているため、音ズレなく再生できます。逆に、動画編集ソフトの大半はVFR形式に非対応のため、VFR形式の動画ファイルは編集に不向きな動画と言えますね。

どうやったらCFRかVFRか分かるの?

基本的に、動画ファイルのプロパティからではCFRかVFRかの判別は不可能です。
撮影した動画がVFRかを判断するには、「MediaInfo」等のファイル解析ソフトを利用する必要があります。

せっかく撮影した動画がVFR形式だった!

これまでに解説した通り、VFR形式の動画だと動画編集で利用するときにかなり不便を感じるかと思います。
では、VFR形式の動画が全部編集で使えないのか?と聞かれるとそんなことはありません。いくつかの対応方法を紹介します。

①事前にVFR形式の動画をCFR形式に変換する
VFR形式の動画を予めCFR形式に変換して動画編集ソフトに読み込ませると、上に挙げたような音ズレはなくなります。
フリーソフトの「Hand Brake」や「AviSynth」などを活用すれば、CFR形式の動画に変換できるので、お手軽に試せる手段でもあります。

②動画編集ソフト側にVFR形式の動画を読み込めるよう設定を行う
フリーの動画編集ソフトである「AviUtl」では、特定のプラグインをインストールすることでVFR形式の動画を読み込むことができるようになります。
ただし、対応しているソフトが極端に少ない(筆者が調べた限り、情報が出たのはAviUtlのみでした。。)ので、こちらの手順よりは前述した①の手段のほうが確実といえます。

 

今回は、「動画の音ズレ」という少しマニアックな問題について解説させていただきました。
皆さんも、動画編集を行う際にはフレームレートの種類に気をつけてください!(筆者は動画編集が終わったあとに完成品を検閲して何度かやらかしてます汗)

アクティビティ図について

【アクティビティ図(Activity Diagram)】

アクティビティ図とは、UML(統一モデリング言語)の一種で「システム実行の流れと条件分岐」を図解したものです。基本設計において、システムやその処理の流れを簡単な図で示すことで、図形の意味や、読み方さえわかれば、処理やシステムに対する理解度が向上します。

あらかじめ構成された要素(ノードだったりオブジェクトだったり)を配置し、それらを矢印でむずびつけることで、開始状態から何らかの終了状態への手順を示すことができます。

構成要素

構成要素として以下が挙げられます。※一部抜粋

初期ノード 記号 初期ノード:スコープ内での開始を意味します。

最終ノード 記号 終了ノード:スコープ内での終了を意味します。

最終制御 記号 最終制御:それまでのアクション(制御)で使用されたトークンをすべて破棄します。

♢ デジションノード/マージノード:条件によるフロー分岐または、複数のフローの合流を意味します。

などなど約15種類以上もの要素で表現可能です。

フローチャートとアクティビティ図の違いは?

ざっくりでいうと、全体的なシステムをアクティビティ図で表し、詳細な流れの部分をフローチャートで表します。

まとめ

もし、アクティビティ図やそのほかのUMLを理解できれば、システムの概要や、処理の詳細などのコードや文面じゃわかりにくい部分も図解することで大まかに理解できたりします。企業の基本設計書だったりにも使用されていたりするので、書き方や読み方など覚えておいても損はないと思い、紹介しました。

企業説明会

企業説明会の様子

2023年6月14日に国際電子ビジネス専門学校(KBC)様で会社説明会を行いました。
今回の会社説明会ではユーマーク株式会社様との合同説明会で15人の参加者に来場していただきました。

*説明会の様子*


GitとGithub

前書き

個人的にGithubについて学習している際に便利と思ったり、感心したりした内容だけを抜粋して書いていきます。

おおまかな概念やどういった利便性があるのかを伝えられたらなと考えています。

Gitとは

Gitとはソフトウェアバージョン管理ツールの一つです。

Gitを使うことで、複数人で開発する時に「誰が、いつ、どのような目的でコードを修正したのか」を残せるというメリットがあります。

例えば「2023/06/12に田中さんが〇〇機能のバグ修正」を行なったとします。

これらの情報を残さない場合、以下のような場合チームメンバー全員に確認する手間と時間が増えるため効率的ではありません。

いつ修正したのか、誰が修正したのか、何のためにソースを修正したのか。

Gitはこういった情報を一括で履歴を保管してくれます。


GitHubとは

バージョン管理ツール「Git」によりチーム開発に適した機能を付け加えたサービスがGitHubです。

プロジェクトのバグ管理に使えるIssuesや、コードレビューを効率化するPull Requestsなどのチーム開発に役立つ機能が、Web上から使えるようになります。

他にもPull Requests時にレビュワーがレビューOKと判断した場合にメインブランチへ修正を結合するといったこともできます。

※メインブランチという言葉が出ましたが、これは後ほど詳しく説明するため「一旦そういうのがあるんだな〜」くらいに考えてください。


GitHub_機能説明

リポジトリとは

作成したファイルやディレクトリの状態を保存・記録しておく 「場所」 のことです。

修正を行う作業場所とイメージすると分かりやすいと思います。

Githubには大きく分類してリモートリポジトリローカルリポジトリの2つの作業場所があります。

リモートリポジトリ

ネット上にあるチームメンバー全員で共有されている作業場所です。

ここにアップされたソースはチームメンバー全員が見ることができ、かつ修正を加えることが可能です。

ローカルリポジトリ

名前の通り自分のPC上にあるチームメンバーに共有されない作業場所です。

自分自身しか使えない作業場所なので、誰にも影響を与えずに修正を行うことが可能です。

ブランチとは

Gitにはブランチという概念があります。

このブランチ機能を上手く活用すると、例えば新規機能開発とバグ修正といった複数の作業を、並行して進められるようになります。

例えばこのようにターミナルで git branchと入力するとmainが表示されます。

これはローカルリポジトリ内のブランチはmainだけありますよという結果を教えてくれています。

「*」が今いるブランチという意味で、今の作業場所はmainだよといった意味になります。

試しに新しく「test01」というブランチの作成を行います。

改めてブランチ一覧を表示してみると以下のようになります。

以下二つのブランチがありますよと結果が返ってきます。

  • main
  • test01

mainブランチが大元として存在している状態で、「バグ修正」を行いたいとなった場合に新しくブランチを作成します。

ブランチ=作業ディレクトリの複製

ただ複製するだけでなく、最終的に複製前のブランチに変更点をマージできます。

mainブランチとは別の作業場所でバグ修正を行い、レビュー、テストまで完了して問題ないと判断されれば大元のmainブランチへマージを行います。

この一連の作業後、mainブランチでも動作に問題ないと判断すればリモートリポジトリへPush(アップロード)し、最終的にはリリースといった流れになります。

ブランチ機能のないバージョン管理システムだと、一度新規機能の実装を始めてしまうと簡単なバグでも修正することが難しくなってしまいます。

新規機能の実装分がコードに反映されているため、バグを修正したとしても中途半端な状態となり、リリースができなくなります。

ヘッダーメニュー

ヘッダーのキャプチャと紐付けながら説明します。

Search or jump to…

検索ボックスです。ぱっと見で分かると思いますが、こちらに何か知りたいキーワードを入力することでキーワードにヒットした内容が表示されます。

例:Githubに公開されているOSSなどの検索が可能です。

Pull Requests

ローカルリポジトリをリモートリポジトリへアップロードするために、レビュワーへレビュー依頼を行う機能です。レビュー依頼を出し、OKが出ればリモートリポジトリのmainブランチへマージされます。

Issues

Issuesはプロジェクトやソースコードの課題を管理するための機能です。

例えばバグが見つかった場合に「〇〇機能_バグ修正」といった内容でIssuesを作成することで、そのIssuesにAssigneesするメンバーや、バグやドキュメント修正などのタグを割り当てることができます。

基本的にはIssues一つに対して1つのブランチが紐づくようにして作業を行なっていきます。

Codespaces

GitHubが提供するクラウドホステッド開発環境のこと(有料)

GitHubのWebサイトから起動することが可能で、ブラウザさえ使えればパソコンからでもタブレットからでも利用でき、WebベースのIDEとして用いることが可能。

公式から引用した有料料金も載せておきます。

Maeketplace

開発者に各種開発ツールを提供するオンラインストアのこと。

一般のユーザや企業などが開発したツールが有料で提供されています。

Explore

超いけてるトレンドのリポジトリの一覧などを確認することができます。

気に入ったものはwatchに追加することで、Issuesが作成されたことを通知してくれたりします。watchはSNSでいうフォローと同じかなと思ってます。

気になるリポジトリを見つけた場合は読んでみるのもいいかもしれませんね。

Github Apps

Githubへの拡張機能のようなものです。GoogleChromeの拡張機能や、VSCodeの拡張機能のGithub版だと思ってください。

今回は個人的に便利だと思った2つを紹介します。

GitHub Apps:Create Issue Branch

issues を作成した際に、リモートブランチ を自動で作成することが可能になる機能です。

ブランチ 名は予め設定した内容になり、一人一人がブランチを作成する手間を削減することができます。

GitHub Apps:Delete merged Branch

Pull Requests が マージ された際に、紐づいている リモートブランチ を自動で削除してくれる機能です。ブランチ が整理されていくので、レポジトリ をシンプルに保つことができます。

ざっくりですが、私が便利だと思った機能の紹介でした。

2023年度新入社員 研修レポート

 こんにちは、4月にエイブリッジに入社しました田場と内間です。無事に新人研修を終えましたので今回は研修内容と感想をお伝えします!

研修で学んだこと

  • 社会人マナー(仕事に取り組む姿勢、社会人としての心得、情報セキュリティ、傾聴力、メール作成、Slack)
  • office研修(PowerPoint、Excel)
  • プログラミング基礎研修(HTML、CSS、Java、JavaScript、
  • spring boot)

研修での感想

田場

 「二ヶ月の研修を終え、私は自分自身が大きく成長していると感じました。私は入社以前IT業界とは全く別の業界におり、ITに関して右も左もわからない状態でした。しかし、専属講師のもとで研修をこなし、また同期や先輩社員の方々にサポートしていただくことで着実にITのスキルや知識を身に付けることができました。
その他にも社会人マナー研修では社会人としての心得や傾聴力を学習し、今後仕事をしていくうえで大切なスキルを身に付けることができました。」

内間

 「研修で難しかったことはプログラミング研修のJavaについてです。私は長い間プログラミングについて学習してきましたが、Javaについては初めて学習しました。Javaはこれまで習ったC言語ととても似ていましたが、記述の方法が多少異なっていたためつられてしまうことが多く、理解するまで時間がかかりました。」

Q&A

Q:社内の雰囲気について

A:内間「明るく気軽に質問できる会社で、質問に対してもしっかり答えていただきました!」

Q:プログラミングを実際に学習して感じたことは?

A:田場「専門用語を1から覚えていかなければならず、また論理的思考力が必要であるため、かなり苦戦しました。しかし、それと同時にプログラムを実際に動かす楽しさも感じることができました!」

Q:今後の目標は何ですか?

A:田場「まずは一人前のエンジニアを目指していこうと考えており、その後ITコンサルタントを目指そうと考えています!」

A:内間「フルスタックエンジニアを目指します。そして 目標達成のため一年に一つの資格取得を目指します。!」
 *フルスタックエンジニアとは、複数のスキルを持ち、マルチに活躍できるエンジニアのこと

意気込み

田場「研修を終えこれから業務に取り組んでいくため、研修で学んだことをしっかりと活かしていきたいです!」

内間「IT業界は常に新しくなり続けているので、日々学習を続け置いていかれず、他者に教えられるようになります!」

 

 

那覇市文化財をGoogleマイマップで公開してみた

の2023年5月12日の琉球新報に以下の記事が掲載され、興味があり実装してみました。

新ビジネスの種、あるかも 沖縄県がオープンデータサイト開設、
県内全41市町村と民間団体が掲載対象
https://ryukyushimpo.jp/news/entry-1708664.html

沖縄県は4月、県内全41市町村と民間団体が公開する
「オープンデータ」をまとめた
サイト「沖縄オープンデータプラットフォーム」を開設した。
2日現在、48種510個のデータが掲載されており、
それぞれダウンロードできる。
さらに、県内企業のデータ活用事例を紹介したり、
実際にデータを視覚化したりするツールの使い方も紹介している。

目次

  1. 前提条件
  2. 手順
  3. マイマップ公開

  1. 前提条件
    BODIKのAPIからJSON形式で取得
    GoogleAppsScrip(以下 GAS)tを使用するため、Googleアカウントが必要
  2. 手順
    1. Googleスプレッドシート(以下スプレッドシート)を作成
    2. データ取得API
      GASを使ってBODIKのAPIからデータを取得するために、データのリソースIDを把握しておく必要があります。
      今回は、那覇市文化財一覧のリソースIDは、以下の斜字部分です。
      https://data.bodik.jp/dataset/okinawa-dpf_naha_city/resource/889ddb57-cf16-438e-ad69-25be2c98ec3a
      上記のURLの情報をスプレッドシートに展開します。
    3. GAS編集
      Apps Scriptを開きます

      プログラムコードを記述します。

      function myFunction(){
       
      }

      と記載されている部分を、以下のコードに書き換えます。

function getFacility() { 
  // API request 
  var resource = '889ddb57-cf16-438e-ad69-25be2c98ec3a'; 
  var requestUrl = `https://data.bodik.jp/api/3/action/datastore_search?resource_id=${resource}`; 
  var response = UrlFetchApp.fetch(requestUrl); 
  var res = JSON.parse(response.getContentText()).result.records; 

  // データ項目のうち「名称」「住所」「緯度」「経度」のみを取得 
  var values = res.map((content) => { 
    return [content['名称'], content['住所'], content['緯度'], content['経度']]
  }); 

  // データの項目名をセット 
  var title = [['名称', '住所', '緯度', '経度']]; 
  // 項目名とデータを結合する 
  values = [...title, ...values]; 
  // 結合したデータをスプレッドシートに出力する 
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); 
  sheet.getRange(`A1:D${values.length}`).setValues(values); 
}

デプロイします。


実行します。

スプレッドシートを確認するとデータ取得されていることが確認できます。

  1. マイマップ公開
    1. Googleマイマップを開きます。
    2. インポートを選択します。
    3. インポートしたいスレッドシート(那覇市文化財一覧)を選択します。
    4. 指示に従い選択していきます。
      1. 目印を配置する列の選択
        緯度と経度を選択
      2. マーカーのタイトルとして知丗する列を選択します。
        名称を選択
      3. 公開!

【UnityとHololens2のエミュレータを連動させてみた】

今回は、唐突にUnityとHololens2のエミュレータを連動させてみたくなったのでその備忘録も兼ねて手順をまとめていきたいと思います。

目次


[1]前提条件(環境等)
[2]手順
[3]まとめ


[1]前提条件(環境等)

前提条件としてWindows OSの使用とします。
また、Hyper-Vの機能が使える事が必須です。(Windows 10 Proのみ)

今回、以下の3つを使用いたします。※インストールします
【Unity・Visual Studio2019・Hololens2エミュレータ】

【Unity】https://unity3d.com/jp/get-unity/download
・現時点での最新のバージョンで尚且つ長期サポート(LTS)の『2021.3.24f1』を使用していきます。

【Visual Studio 2019】https://visualstudio.microsoft.com/ja/downloads/
・無料版の『Community』をダウンロードします。

【Hololens2 Emulator】https://go.microsoft.com/fwlink/?linkid=2220897
・サイト記載時の最新のビルド『10.0.20348.1535』を使用

[2]手順

⓪必要なソフトのインストール!
※今回、各ソフトウェアのインストール手順は省きます。

①初めにPCにHololens2のエミュレータを使用するためにHyper-Vの確認をします。※PCにHyper-Vがないとエラーになります…
1.「windowsの機能の有効化または無効化」を開きます。

2.Hyper-Vを有効にします(有効にした場合、再起動する必要あり。)

②Unityでエミュレータにて起動するアプリのプロジェクトを作成します。
1.Unity Hubを起動し、新規作成ボタンを押下する。

2. バージョン、保管場所、プロジェクト名を適当に決めてプロジェクトを生成します。※テンプレートは『3D』を選んでください。

3.エミュレータとの連携確認用に好きなオブジェクトを設置します。

③.Microsoft.MixedReality.Toolkit(MRTK)をプロジェクト(アセット)に追加
※MRTKをもっていない人は先にダウンロードから!
1.『Assets』⇒『Import Package』⇒『Custom Package』押下。

2.ダウンロードしたMRTKを選択する。
(Microsoft.MixedReality.Toolkit.Unity.Foundation.2.8.3.unitypackage)

3.そのまま、すべてImportします!

4.『Mixed Reality』⇒『Toolkit』⇒『Add to Scene and Configure…』を押下。
※プロジェクト(Scene)にMRTKが追加されます!

④ Unityの書き出し設定
『Build Settings』
・Universal Windows Platform に切り替える。値を画像に合わせる。

『Project Settings』
・【XR Plugin Management】をインストールする。

・【Quality】を画像に合わせる

⑤プロジェクト(Seacne)をビルドする。※事前に別フォルダを作るのをお勧めします!(今回は「Build」フォルダを作成)

⑥ビルドしたプロジェクトをVisual Studio 2019にてエミュレータ環境で実行する。

[3]まとめ

まとめ!大まかな流れとしては以下となります。
⓪必要なソフトをインストール
①前提条件をチェック(Hyper-Vが有効になっているか等)
②Unityプロジェクトを作成、オブジェクト設置。
③UnityプロジェクトにMRTKをインポート
④Unityの書き出し設定を行う。
⑤プロジェクト(Seacne)をビルドする。
⑥ビルドしたプロジェクトをVisual Studio 2019にてエミュレータ環境で実行する。

以上、UnityとHololens2のエミュレータを連動させてみた!でした~

自然言語からHTMLとCSS、JSまで生成してくれるAIツール

AIによってプログラムを生成するツールは色々あるのですが、HTML・CSS・JSを生成してくれる日本語対応のツールをご紹介します。

JIT.codes
※利用にはメールアドレスの登録が必要です。


『シンプルモダンなログインフォーム IDとパスワード入力 IDはメールアドレス パスワードは8文字まで』
というオーダーをしてみました。
背景が黒なので文字が見えにくいですが、必要な物は生成されています。

<div class="login-form">
  <h2>Login</h2>
  <form>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" id="email" placeholder="Enter email" required>
    </div>
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" placeholder="Enter password" maxlength="8" required>
    </div>
    <button type="submit">Login</button>
  </form>
</div>

生成されたHTMLのソースを見てみると、最初のinputはtypeがemailになっていますし、パスワードのinputはmaxlengthが8に設定され、オーダー通りとなっています。

次はJSも生成されるよう、下記の内容でオーダーしました。
『ハンバーガーメニュー クリックするとアイコンが×にアニメーションで変化する メニューが開いている場合はbodyのスクロールを止める』

ハンバーガーメニュー開閉のJSは動いたのですが、『アイコンが×にアニメーションで変化する』が理解できなかったようで、生成されませんでした。(記号の×をcorss markに変更して再度オーダーしましたが、結果は変わりませんでした。)

画面上部の「Explore」からは、誰かがオーダーしたものを見ることができます。(私が確認した時点では、生成されたはずのJSのコードがごっそり抜けていますのでご注意。)
https://jit.codes/explore

生成されるものは完璧ではありませんが、ベースとして使えば、イチからコーディングするより時間短縮になるかなと思います。

ChatGPTを開発した会社

今や聞いたことがない人の方が、少ない「Chat-GPT」ですが開発元OpenAIの事はご存知でしょうか。
本記事では、OpenAIがどんな所かを簡易に説明できればと思います。

OpenAIについて
OpenAIですが、正式名称 OpenAI Inc.といい2015年にサンフランシスコで設立されました。
設立メンバーには数々の著名人が名を連ねています。
なんと、設立時には合計で10億ドルがOpenAIに提供されました。(日本円だと1000億円ぐらい)

最高責任者について
OpenAIの最高責任者であるサム・アルトマンという方はプログラムーであり起業家・投資家です。OpenAIの設立の際は30歳になります。
サム・アルトマンさんの経歴を簡単に紹介させていただくと19歳の時にスマホアプリの会社立ち上げ・会社を買収->Yコンビネータ社にパートナー契約し・代表に就任という凄い経歴です。

今・今後のOpenAI
その後OpenAI社は2022年11月にChatGPTを発表し、2023年の2月にChatGPT Plusを開始しています。
ChatGPTはGPT-3.5がベースモデルになりますが、最近GPT4が追加されました。

今後ChatGPTがどのように進化していくかは想像もつかないですが公開されて半年ほどで社会現象を起こすコンテンツを開発したOpenAI社がどのような会社になっていくか楽しみです。

【Laravelとトロッコを連携させてデータをExcelに出力する方法】

今回は、【Laravelにてトロッコを使用したデータの出力】について実装していきましょう。

※Laravel バージョンは9をベースにしております。

目次

――――――――――――――――――――――――――――

①前提

②実装

③発展

――――――――――――――――――――――――――――

①前提に

トロッコとは?・・・trocco®は、ETL/データ転送・データマート生成・ジョブ管理・データガバナンスなどの
データエンジニアリング領域をカバーした、分析基盤構築・運用の支援SaaSです。

・「/trocco」のアクセスにて処理の実行していきます。
 ※シンプルに実装したいため、今回はControllerなどは使わずにRouteの中で実装します。

・トロッコにcsvでデータを渡し、そこからExcelにデータを渡し出力していきます。

・文字コードは「UTF-8」を使用します。※Laravelではcsvの出力はデフォルトで「UTF-8」になってます。

②実装

では、実際に処理を見ていきましょう。

Route::get('/trocco', function () {
$callback = function() {
$csv = fopen('php://output', 'w');
$users = User::get(['id','name','email']);
foreach ($users as $user) {
fputcsv($csv, [
$user-&gt;id,
$user-&gt;name,
$user-&gt;email,
]);
}
fclose($csv);
};
return response()-&gt;stream($callback, 200, [
'Content-Type' =&gt; 'text/csv',
]);
});
Route::get(‘/trocco’, function () {
┗https://○○/troccoにアクセスがあった時の処理を記載します。

$callbackの中でcsvファイルを作成していきます。
$csv = fopen(‘php://output’, ‘w’);
┗ファイルを開きます。

$users = User::get([‘id’,’name’,’email’]);
┗Modelを使用し、userテーブルのidと名前、メールアドレスを取得します。

foreach ($users as $user) {
┗件数分繰り返し処理を行います。

fputcsv($csv, [$user->id,$user->name,$user->email,]);
┗開いたファイルに第二引数の配列を書き込みます。

fclose($csv);
┗ファイルを閉じてcsvファイルの完成です。

最後にreturn response()->stream($callback, 200, [‘Content-Type’ => ‘text/csv’,]);  にてcsvのファイルを『$callback』にて作成し返します。

③発展

このまま実装したままだと、誰でもアクセスされるとユーザー情報が取れてしまいます。

セキュリティ的に問題が大ありなので、アクセスにIP制限をかけたいとおもいます。

IP制限の実装は簡単で、【Route::get(‘/trocco’, function () {】の中の一番上に以下の処理の追加で制限をかけることができます。

// IPアドレス許可リスト


$white_list = [

'○○.○○○.○○.○○○',
'○○.○○○.○○.○○○',
'○○.○○○.○○.○○○',

];

if (config('app.env') != 'local' &amp;&amp; ! in_array(request()-&gt;ip(), $white_list)) {
abort(403);
}

 

以上でLaravelにてトロッコを使用したデータの出力機能の完成です!!
いつの日か、トロッコについてもまとめてみようと思います。