
![Sketchfab,100](/images/blog/workwith_sketchfab/lp.webp)


\
Scaniverseで測定した3DスキャンデータはSketchfabと連携ができます。Sketchfabとは3DモデルデータをWeb上に無料で公開できるサービスですが、3DスキャンデータについてもSketchfab上にアップロードすることができます。

今回はScaniverseからデータをアップロードする手順とSketchfabを使ってできることを紹介したいと思います。

\
　

## 連携手順
\
　
まずScaniverse上で連携したいデータを選択してから、右下のShareボタンを押します。すると、Export ModelなどのShareメニューが表示されますので、そこから「Post to Sketchfab」を選択します。

![Post to Sketchfab](/images/blog/workwith_sketchfab/posttossketchfab.webp)

\
　
するとSketchfabのログイン画面が表示されます。アカウントがない場合にはサインアップ画面からアカウントを作成してからログインしてください。

![Sketchfabへのログイン](/images/blog/workwith_sketchfab/login.webp)

\
　
ログイン成功すると、アップロードする3Dスキャンデータの属性情報（Title/Description）を入力する画面が表示されますので、それぞれ情報を記入して、Publishボタンを押します。

![属性情報の入力](/images/blog/workwith_sketchfab/zokusei.webp)

\
　
これだけです！iPhoneで測定した3DスキャンデータをWeb上に公開することができました。

![公開完了](/images/blog/workwith_sketchfab/upload.webp)

\
　
## Sketchfabでできること
Sketchfabは多くの3Dファイル形式をサポートしており、アップロードしたデータは3DViewerで閲覧したり、ウェブサイト、ブログ、ソーシャルメディアに埋め込むなど実にさまざまな用途で利用することができます。その中から今回はいくつかの機能を紹介したいと思います。

\
　
#### SNSとの連携
3Dモデルの詳細画面からShareタブを押すと、SNSに貼り付けるためのリンクURLが表示されます。リンクURLをSNS本文に貼り付けることでSNSと簡単に連携することができます。

![SNS連携](/images/blog/workwith_sketchfab/sns.webp)

\
　
#### Webサイトへの埋め込み
3Dモデルの詳細画面からEmbedタブを押すと、Webサイトに埋め込むためのiframeタグが表示されるので、それをコピーして既存サイトの任意の場所にフレームとして埋め込みます。フレームのサイズやViewerのアニメーションを指定することができます。

![Web埋め込み](/images/blog/workwith_sketchfab/embeded.webp)

\
　
## まとめ
紹介した他にもVR/ARデバイスとの連携などの機能もあり、しかも多くの機能は無料で使うことができます。そのため、非常に使い勝手の良いサービスと言えますが、Sketchfabを無料プランで使う際に注意すべき点を最後にまとめておきます。

+ 3Dモデルの公開範囲を指定できない（誰でも閲覧できる）
+ 誰でも3Dモデルをダウンロード可能（ダウンロード不可設定を行うこともできますが、無料プランの場合、10コンテンツが上限）

\
　
今回はScaniverseからSketchfabへデータをアップロードする方法とSketchfabの主な機能について紹介させていただきました。
次回はSketchfabのプラン別の機能について紹介していきたいと思います。

\
　

Scaniverseで測定した3DスキャンデータをSketchfabへ連携する方法とSketchfabを使ってできることを解説します

ScaniverseからSketchfabへのデータ連携

Sketchfabによる3Dスキャンデータの共有


![top,100](/images/blog/reduce_buildsize/top.webp)


\
LiDARセンサーが搭載されているiPhone Proは、カメラのスペックも総じて高いため、1台で高画質の3Dスキャンデータを撮ることができます。しかし、スキャンデータのサイズは大きくなりがちで、スキャン範囲によっては数十〜数百メガバイトのサイズになることがあります。

\
撮ったデータをiPhone内で閲覧する分には特段気にすることはありませんが、このようなサイズのスキャンデータを素材としてアプリケーションを作成した場合、ビルドファイルの肥大化を招くことがあります。

\
ビルドファイルの肥大化は、アプリケーションの読み込み時間の遅延につながり、ユーザビリティの低下を引き起こします。この問題を解決する一つの方法は、元データの画質を下げることですが、アプリケーションの開発者としては、クオリティを維持しながらビルドサイズを小さくすることが理想です。

\
そこで今回は、UnityでWebGLのビルドサイズを抑制する手順について、クオリティとのバランスの観点から解説していきたいと思います。

\
　
## ビルドサイズ抑制のアプローチ
\
Unityでビルドファイルを小さくするためには、幾つかのアプローチがあります。

1. テクスチャファイルを圧縮する
2. メッシュファイルを圧縮する
3. ビルド設定を変更する

\
メッシュファイルは3Dスキャンデータの骨格となるファイルでLiDARセンサーで測定された座標群から構成されます。テクスチャファイルはメッシュの表面に貼り付けられる画像データでカメラで撮影されたjpegファイルなどが元データになります。

\
いずれもビルドサイズに占める割合が大きく、ファイルサイズを圧縮することで、ビルドサイズの抑制に大きく寄与しますが、過度の圧縮は画質の低下に直結するため、注意が必要です。

\
ビルド設定の変更に関しては、上記のようなクオリティ低下の懸念はないものの、ビルドサイズの抑制効果は限定的です。

\
まとめると下表の関係になります。

| 項目 | ビルドサイズ↓ | クオリティ↓ | 
| :-: | :-: | :-: |
|  テクスチャ圧縮  | ◎ | ◎ |
|  メッシュ圧縮  | ⚪︎ | ◎ |
|  ビルド設定変更  | △ | × |

\
　
## テクスチャ圧縮
\
テクスチャ圧縮に関する設定はProjectウィンドウにあるアセットを選択した状態で、Inspectorにある設定画面から行います。
\
右端にあるWebGLのタブを選択して、Override For WebGLにチェックを入れると、各項目の設定変更が可能となります。

![テクスチャ圧縮](/images/blog/reduce_buildsize/テクスチャ圧縮.webp)

\
　
#### Max Size
\
テクスチャの最大サイズをピクセル単位で指定します。このサイズを超えるとリサイズの対象となります。
リサイズすると画質が明確に落ちるので、品質重視の場合には、あまり小さくしない方が良いです。例えばテクスチャファイルのサイズが8000×5000の場合には、MaxSize=8192にすると画質を維持できます。

\
　
#### Resize Algorithm
\
リサイズ時のアルゴリズムを指定します。WebGLの場合、Mitchell/Bilinearの二択になります。どちらもリサイズ後のファイルサイズは同じですが、Bilinearの方が詳細を維持できます。

\
　
#### Format
\
テクスチャ圧縮形式を指定します。下記リンクの品質別・プラットフォーム別のテーブルを参考にユースケースに応じて選択してください。

[*テクスチャーフォーマット (品質別)*](https://docs.unity3d.com/ja/2021.3/Manual/class-TextureImporterOverride.html#texture-compression-by-quality)

[*サポートされるテクスチャ形式 (プラットフォーム別)*](https://docs.unity3d.com/ja/2021.3/Manual/class-TextureImporterOverride.html#texture-compression-support-platforms)

\
　
## メッシュ圧縮
\
メッシュ圧縮に関する設定はProjectウィンドウにあるアセットを選択した状態で、Inspectorのにある設定画面から行います。
ModelタブのMeshesにあるMesh Compressionの変更が可能です。

\
　
#### Mesh Compression
\
メッシュ圧縮ON/OFFを設定できます。デフォルトではOFFですが、Low/Middle/Highに変えることができます。Highにするとかなり画質が落ちます。Low/Middleの場合は画質はキープできますが、あまりビルドサイズも減少しません。

![メッシュ圧縮](/images/blog/reduce_buildsize/メッシュ圧縮.webp)

\
　
## ビルド設定変更
\
File > Build Settingsよりビルドファイル作成時の設定を変更できます。Strip Engine CodeとEnable ExceptionsはBuild Settingsの左下にあるPlayer Settingsより、WebGLタブのメニューから変更を行います。

\
　
#### Code Optimization
\
WebGLのコードをコンパイルする際に使用する最適化モードを選択します。Speed/Sizeの二択になります。大きなプロジェクトファイルでない限りはランタイムのパフォーマンスに優れたSpeedを選択しましょう。

![ビルド設定_codeoptimization](/images/blog/reduce_buildsize/ビルド設定_codeoptimization.webp)

\
　
#### Strip Engine Code
\
Other SettingsタブのOptimizationから設定可能。使用コードの削除に関する設定になります。Minimal/Low/Medium/Highから選択できます。右に行くほどビルドサイズを小さくできますが、スクリプトで実際に使用するコードまで削除するとエラーとなるため、アセットバンドルを使用する際には事前の動作確認を推奨します。

![ビルド設定_splitenginecode](/images/blog/reduce_buildsize/ビルド設定_splitenginecode.webp)

\
　
#### Enable Exceptions
\
Publishing Settingsタブから設定可能。WebGLの例外検出に関する設定になります。デバックが不要な場合はNoneを選択することでビルドサイズを小さくできます。

![ビルド設定_enableexception](/images/blog/reduce_buildsize/ビルド設定_enableexception.webp)

\
　
## まとめ
\
いかがでしたでしょうか？
今回はUnityのビルドサイズの圧縮について、アプリケーション画質への影響を踏まえて、幾つかの選択肢をご紹介させていただきました。

\
　
読み込み時間の短縮という点では、アセットバンドルやサーバ設定など別観点のアプローチもありますので、機会があればその辺りについてもご紹介できればと思います。

\
　












3Dスキャンデータの画質を保ちつつ、アプリケーションのビルドサイズを圧縮する方法について紹介します。

Unityアプリ開発：ビルドファイルの最適化

3Dスキャンデータの活用事例５


![UIトップ,100](/images/blog/add_ui/UIトップ.webp)

    \
前回のコラムでは、iPhoneで測定した3Dスキャンデータをインプットとして、Unityでコンテンツとビルドファイルの作成を行い、サーバ上に公開する手順をご紹介しました。

ここまででImport→Create→Build→Distribute→LoadというUnityのワークフローと基本的な流れは掴めたと思いますので、今後は各タスクを掘り下げた内容をテーマとして取り扱っていきたいと思います。

ということで、今回再びコンテンツの作成（Create）をテーマとして取り上げます。
過去のコラムの中で、3Dスキャンデータが360°回転する簡単なアニメーションをサンプルとして使ってきましたが、これはユーザから操作ができない閲覧専用のコンテンツでした。

Unityは本来ゲーム開発エンジンですので、キーボードやマウス操作を入力として、コンテンツを制御するのはお手のものです。
そこでサンプルコンテンツに対して、以下の機能を追加し、ユーザインタラクティブなコンテンツに仕上げたいと思います。

+ 回転の停止・再生
+ 回転方向（時計回り・反時計回り）の切り替え
+ 回転速度（通常・高速）の切り替え

\
　

## ユーザーインターフェースの作成
\
ユーザーインターフェースに関してUnityには３つのシステムがあります。UI Toolkitが最新のシステムですが、まだ機能が揃っていないため、ここではUnity UIを使用します。

+ UI Toolkit
+ Unity UI(uGUI)
+ IMGUI

Unity UIではUI要素を配置するための領域（Canvas）が必要で、ボタンやテキストボックスなどのUIはCanvasの子要素として配置されます。ですので、まずはCanvasを作成します。

サンプルコンテンツのHierarchyウィンドウの左上にある＋をクリックして、リストメニューからUI > Canvasを選択してください。Hierarchyに「Canvas」と「EventSystem」という二つのオブジェクトが追加されたと思います。

次にCanvasを選択した状態で＋をクリックして、リストメニューからUI > Button - TextMeshProを選択してください。ここでTextMeshProのインポートを促されますが、指示通りインポートすると、Canvasの子要素として「Button」が追加されます。

![UI（button）の作成](/images/blog/add_ui/UI（button）の作成.webp)

ボタンはこの後もう二つ追加しますので、わかりやすいようにいま作成した「Button」の名称を変えましょう。オブジェクトの名称は「Button」のInspectorウィンドウの最上部のテキスト枠から変えることができます。このボタンは回転の停止・再生に使うため「StopButton」という名称に変更します。

![UI名の変更](/images/blog/add_ui/UI名の変更.webp)

ここでGameウィンドウを確認してみましょう。作成したボタンが画面中央に配置されていると思います。このままだと邪魔なので、配置位置を画面右下に変えたいと思います。Canvas上の配置位置についてはボタンのInspectorにあるRectTransformコンポーネントから変更することができます。

RectTransformの左上にある四角い照準のようなものをクリックすると、AnchorPresetsというメニューが表示されると思います。ここではUIをCanvasのどこに配置して、ピン（Anchor）を刺すかを指定することができます。今回は右下に配置するので、Shift＋Optionを押しながら右下のマークをクリックするとボタンUIがCanvasの右下に配置された状態でピン留めされます。

![Anchorの変更](/images/blog/add_ui/Anchorの変更.webp)

次にボタンのキャプションがデフォルト（Button）のままとなっているため変更します。ボタンのキャプションについては、Buttonオブジェクトの子要素であるTextオブジェクトで定義されています。
TextオブジェクトのInspectorにあるTextMeshProコンポーネントで、TextInputのテキスト枠がButtonとなっているのでこれを「Stop」に変更します。またテキストオブジェクトの名称も親オブジェクトに合わせて「StopButton」に変更します。

![テキスト名の変更](/images/blog/add_ui/テキスト名の変更.webp)

最後にボタンの場所やサイズについてはRectTransformのPosX、PosY、Width、Heightで調節できますので、以下のように微調整します。

![Transformの微調整](/images/blog/add_ui/Transformの微調整.webp)

同じように回転方向の切り替えを行う「ReverseButton」と回転速度の切り替えを行う「SpeedChangeButton」をCanvas上に配置します。

以上でUIの作成が完了しました。

\
　

## 制御用スクリプトの作成
\
続いて各機能のボタンを押した際の制御について、C#スクリプトで記述していきます。過去バックナンバーで作成したObjectRotator.csを以下のように編集します。

```csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;　// <= 追加

public class ObjectRotator : MonoBehaviour
{
    // カメラオブジェクト
    public GameObject _cameraObject;

    // 回転速度
    public float _rotationSpeed = 10;

    // 停止ボタンのテキスト
    public TextMeshProUGUI _stopButtonText; // <= 追加

    // 停止ステータスを示すフラグ
    bool _isStop = false;　// <= 追加

    // リバースボタンのテキスト
    public TextMeshProUGUI _reverseButtonText;　// <= 追加

    // リバースステータスを示すフラグ
    bool _isReverse = false;　// <= 追加

    // スピードアップボタンのテキスト
    public TextMeshProUGUI _speedChangeButtonText;　// <= 追加

    // ハイスピードステータスを示すフラグ
    bool _isFastSpeed = false;　// <= 追加

    // Start is called before the first frame update
    void Start()
    {
        // 回転させる対象のゲームオブジェクトのtransformを取得
        Transform _transform = this.gameObject.transform;
        // ゲームオブジェクトの座標（スタート時）を設定
        _transform.position = new Vector3(0, 0, 0);
        // ゲームオブジェクトの回転角（スタート時）を設定
        _transform.rotation = Quaternion.Euler(0, 0, 0);
        // ゲームオブジェクトのサイズを設定
        _transform.localScale = new Vector3(20 ,20, 20);

        // メインカメラのtransformを設定
        Transform _cameraTransform = _cameraObject.transform;
        // ゲームオブジェクトの座標（スタート時）を設定
        _cameraTransform.position = new Vector3(0, 2, -10);
        // ゲームオブジェクトの回転角（スタート時）を設定
        _cameraTransform.rotation = Quaternion.Euler(0, 0, 0);

    }

    // Update is called once per frame
    void Update()
    {
        // ゲームオブジェクトのtransformを取得
        Transform _transform = this.gameObject.transform;

        // 停止ステータスがfalseの場合
        if (!_isStop)　// <= 以下追加
        {
            if (!_isReverse)
            {

                if (!_isFastSpeed)
                {
                    // ゲームオブジェクトのY軸を（前回Updateからのデルタ時間（Time.deltaTime）* 回転速度）分回転させる
                    _transform.Rotate(0, Time.deltaTime * _rotationSpeed, 0);
                }
                else
                {
                    // ゲームオブジェクトのY軸を（前回Updateからのデルタ時間（Time.deltaTime）* 回転速度）分回転させる
                    _transform.Rotate(0, Time.deltaTime * _rotationSpeed * 2, 0);
                }
                
            } else
            {
                if (!_isFastSpeed)
                {
                    // ゲームオブジェクトのY軸を（前回Updateからのデルタ時間（Time.deltaTime）* 回転速度）分回転させる
                    _transform.Rotate(0, Time.deltaTime * _rotationSpeed * -1, 0);
                }
                else
                {
                    // ゲームオブジェクトのY軸を（前回Updateからのデルタ時間（Time.deltaTime）* 回転速度）分回転させる
                    _transform.Rotate(0, Time.deltaTime * _rotationSpeed * -2, 0);
                }
            }
            
        }   
    }

    // 回転の停止・再生を制御する関数
    public void RotateController()　// <= 以下追加
    {

        _isStop = !_isStop;

        // 停止ステータスに応じてテキストを変更する
        if (!_isStop)
        {
            _stopButtonText.text = "Stop";
        }
        else
        {
            _stopButtonText.text = "Start";
        }

    }

    // 回転方向を制御する関数
    public void ReverseController()　// <= 以下追加
    {

        _isReverse = !_isReverse;

        // 停止ステータスに応じてテキストを変更する
        if (!_isReverse)
        {
            _reverseButtonText.text = "Reverse";
        }
        else
        {
            _reverseButtonText.text = "Forword";
        }

    }

    // 回転速度を制御する関数
    public void speedController()　　// <= 以下追加
    {

        _isFastSpeed = !_isFastSpeed;

        // 停止ステータスに応じてテキストを変更する
        if (!_isFastSpeed)
        {
            _speedChangeButtonText.text = "Fast";
        }
        else
        {
            _speedChangeButtonText.text = "Slow";
        }

    }
}

```

変更内容について簡単に説明します。
+ 15〜31行目：画面に追加する３つのボタンのテキストオブジェクトを格納する変数と、ボタン押下時のステータスを管理する変数をそれぞれ追加しています。

+ 60〜91行目：各ボタンのステータスによって回転動作を変更する分岐処理を追加しています。

+ 94〜146行目：各ボタンのクリックイベント時に呼び出される関数を定義しています。関数内ではステータスとボタンテキストの変更を行なっています。

\
　
## クリックイベントの追加
\
スクリプトの編集が完了しましたが、まだこの段階ではボタンを押しても何も反応が起こりません。ボタンのクリックイベントとスクリプトが紐づいていないためです。

クリックイベントの紐付けはボタンオブジェクトのInspectorにあるButtonコンポーネントから行います。ButtonコンポーネントのOn Clinkの右下にある「＋」をクリックして、赤枠内に対象の3DスキャンデータのGameオブジェクトを選択してから、黄枠内で先ほど編集したスクリプト（ObjectRotator.cs）のクリックイベント時に呼び出す関数を設定します。ボタン毎に呼び出す関数は異なりますので、それぞれ以下の対応になるように設定してください。

+ StopButton → ObjectRotator.RotateController
+ ReverseButton →　ObjectRotator.ReverseController
+ SpeedChangeButton → ObjectRotator.SpeedController

![クリックイベントの割り当て](/images/blog/add_ui/クリックイベントの割り当て.webp)

\
　
## ボタンテキストオブジェクトの指定
\
次にスクリプト内で各ボタンのテキストオブジェクトをpublicで定義してますので、スクリプトのInspectorから以下のようにボタンテキストオブジェクトの指定を行います。

![テキストオブジェクトの紐付け](/images/blog/add_ui/テキストオブジェクトの紐付け.webp)

\
　
## 動作確認
\
以上で全ての準備が整いましたので、Unity画面中央上部の再生ボタンで動作確認を行います。
Gameウインドウの右下にUnity UIで作成した３つのボタンが配置されていますので、それぞれのボタンを押して以下の動作であることを確認してみましょう！

+ ボタン（左）：回転速度がFast・Slowの二段階で切り替わる
+ ボタン（中央）：回転方向が時計回り・反時計回りで切り替わる
+ ボタン（右）：回転の停止・再開が制御できる

![UIトップ](/images/blog/add_ui/UIトップ.webp)

\
　
## まとめ
\
いかがでしたでしょうか？

3DスキャンデータのGameオブジェクトにユーザインターフェース（Unity UI）を追加することで、閲覧専用から対話可能なコンテンツにアップデートする方法を説明しました。

今回紹介したのは簡易的な機能ですが、使い方によってはよりリッチなコンテンツを作成することもできますので、ぜひお試しいただければと思います！

\
　






iPhoneの3Dスキャンアプリで撮影したデータとUnity UIを使って、ユーザインタラクティブなアプリケーションを開発する手順についてわかりやすく解説します。

Unityアプリ開発：UIで広がるユーザ体験

3Dスキャンデータの活用事例４


![ワークフロー,100](/images/blog/distribute_webgl/ワークフロー.webp)

\
前回のコラムでは3Dスキャンデータを使った簡単なコンテンツを作成し、WebGLでビルドしたデータをローカルサーバーでホストし、ブラウザー表示するまでの一連の作業で紹介しました。

自分でコンテンツを楽しむだけならこれでもOKですが、上手に撮影できたスキャンデータはどうせならインターネット上で共有してみたいですよね？

ということで今回のテーマはUnityワークフローのDistribution（配信）の部分に焦点を当てて、WebGLビルドデータを既存のホスティングサービスを使って公開するところを解説していきたいと思います。

\
　

## 事前準備
\
配信先として使えるサービスは色々ありますが、今回は[Vercel](https://vercel.com/)を使って構築したいと思います。Vercelで構築する際には、Vercelのユーザアカウントに加えて、事前にNode.jsをインストールしておく必要があります。

[*Node.jインストール手順*](https://kinsta.com/jp/blog/how-to-install-node-js/)

\
　
## アプリケーションの作成
\
最初にコマンドラインでアプリを保存したいディレクトリまで移動し、以下のコマンドでアプリケーションの作成を行います。

```command
npx create-next-app@latest unity-distribution-test --use-npm
```

設問に対しては全てEnterで応答すると、必要なライブラリのインストールが始まります。

```command
✔ Would you like to use TypeScript with this project? … No
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use `src/` directory with this project? … No
? Would you like to use experimental `app/` directory with this project? › No 
✔ Would you like to use experimental `app/` directory with this project? … No
✔ What import alias would you like configured? …
```

しばらく時間がかかりますが、アプリ作成が完了すると、直下にunity-distribution-testフォルダができますので移動します。

```command
cd unity-distribution-test
```

インストールが正常に完了しているかを確認するために、以下のコマンドを入力します。

```command
npm run dev
```

上記コマンドではローカル環境（http://localhost:3000）にNext.jsの開発サーバを起動します。
ブラウザで[http://localhost:3000](http://localhost:3000)にアクセスしてみてください。
以下のサンプルページが表示されていればOKです。（確認が終わったらCtrl+Cで一旦サーバを停止します）

![Nextサンプルページ](/images/blog/distribute_webgl/Nextサンプルページ.webp)

\
　
次にunityのWebGLビルドを扱うためのライブラリを以下のコマンドでインストールします。

```command
npm install react-unity-webgl
```

unity-distribution-testは以下のようなツリー構造となっています。

```command
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package-lock.json
├── package.json
├── pages
├── public
├── styles
└── tsconfig.json
```

まず手始めに前回WebGLでビルドしたファイルをツリー内に格納します。ビルドしたファイル構成は以下のようになってましたが、このうちBuild配下をフォルダごとpublic直下にコピーします。

![ビルドファイル](/images/blog/distribute_webgl/ビルドファイル.webp)

\
　
その結果、public直下のツリー構造は以下のようになります。（**XXXX**はビルドファイル名なので適宜読み替えてください）

```command
public
 ├── Build
 │   ├── XXXX.data
 │   ├── XXXX.framework.js
 │   ├── XXXX.loader.js
 │   └── XXXX.wasm
 ├── favicon.ico
 ├── next.svg
 ├── thirteen.svg
 └── vercel.svg
```

続いてソースコードの変更を行います。ツリー構造のpages配下にはサイトの各ページを構成するJavaScriptファイルが格納されています。

![フォルダ構成](/images/blog/distribute_webgl/フォルダ構成.webp)

\
　
このうちトップページ（先ほど確認したhttp://localhost:3000）を構成するindex.jsを開いて以下の内容に書き換えます。

##### index.js
```javascript
import React from "react";
import { Unity, useUnityContext } from "react-unity-webgl";

export default function Home() {
  const { unityProvider } = useUnityContext({
    loaderUrl: "../Build/XXXX.loader.js",
    dataUrl: "../Build/XXXX.data",
    frameworkUrl: "../Build/XXXX.framework.js",
    codeUrl: "../Build/XXXX.wasm",
  });

  return <Unity unityProvider={unityProvider} style={{ width: 800, height: 600 }} />;
}
```
コードの解説については[こちら](https://react-unity-webgl.dev/docs/main-concepts/unity-config)をご参照ください。

\
　
## 動作確認
\
変更箇所はこれだけです。とても簡単ですよね！
早速、ローカルサーバを起動して動作確認してみましょう。

```command
npm run dev
```

再度ブラウザで[http://localhost:3000](http://localhost:3000)にアクセスしてみます。
先ほどまではサンプルページが表示されていましたが、3Dスキャンが回転するアニメーションが表示されているかと思います。

\
　

## サーバへの配置
\
ローカルで動作確認ができたら、Vercelのサーバ上にアプリケーションを配置（デプロイ）します。Vercelへのデプロイについては以下の４つの方法がありますが、今回はCLIを使ってデプロイしたいと思います。

+ Gitリポジトリとの連携
+ CLI
+ Deploy Hook
+ API

まずはVercel CLIを以下のコマンドでインストールします。

```command
npm i -g vercel
```

インストールが完了したら、カレントディレクトリがプロジェクトルート（unity-distribution-test）であることを確認した上で以下のコマンドを入力します。

```command
vercel
```

vercelコマンドを実行すると、ローカルディレクトリをVercelプロジェクトにリンクするためにサインインが求めれますので、画面の指示に従ってVercelへのログインを行ってください。

またプロジェクト設定に関して幾つか設問が続きますが、**YYYY**にはVercelのアカウント名、**ZZZZ**はインターネット公開時のサブドメイン（ドメインはvercel.app）になりますので、任意の名前を割り当ててください。

```command
? Set up and deploy “~/work/next/unity-distribution-test”? [Y/n] y
? Which scope do you want to deploy to? YYYY
? Link to existing project? [y/N] n
? What’s your project’s name? ZZZZ
? In which directory is your code located? ./
Local settings detected in vercel.json:
Auto-detected Project Settings (Next.js):
```

入力が完了すると、サーバへのデプロイが始まります。問題なくデプロイが完了したら、ブラウザから以下のURLにアクセスしてみましょう。ローカルサーバと同じように3Dスキャンが回転するアニメーションが表示されたら成功です！

*https://(上記で割り当てたサブドメイン).vercel.app/*

![動作確認](/images/blog/distribute_webgl/動作確認.webp)

\
　
## まとめ
\
いかがでしたでしょうか？

前回Unityで作成したWebGLビルドをインターネット上で公開する手順（Distribution）について簡単にご紹介させていただきました。

今回はVercelを使用しましたが、選択肢はたくさんありますので、ご自身の環境に合った方法で試してみてください。

\
　

## 参考文献
+ [https://react-unity-webgl.dev/](https://react-unity-webgl.dev/)
+ [https://vercel.com/docs/concepts/deployments/overview](https://vercel.com/docs/concepts/deployments/overview)

\
　











iPhoneの3Dスキャンアプリで撮影したデータとUnityを使って作成したWebアプリケーションをインターネット上で公開する手順についてわかりやすく解説します。

Unityアプリ開発：WebGLビルドデータを公開する

3Dスキャンデータの活用事例３


![WebGLロゴ,100](/images/blog/build_webgl/WebGLロゴ.webp)

\
前回のコラムではiPhoneで測定した3DスキャンデータのUnityへの取り込みについて紹介しましたが、今回はUnity上で取り込んだスキャンデータを動かす簡単なアプリケーションを作成した上で、それをWebブラウザ上で表示させる手順について解説したいと思います。

\
　
## Unityのワークフロー
\
Unityエディターを使うと、2D/3Dのアニメーションやゲームなどのコンテンツを開発することができます。コンテンツ内で使うオブジェクトについてはUnity上で作成することもできますが、外部からアセットとして様々な形式のデータをインポートすることが可能で、3Dスキャンデータもその一つです。

このようにUnityでできることは多岐に渡りますが、作業は基本的には以下のワークフローに則って行います。

![ワークフロー](/images/blog/build_webgl/ワークフロー.webp)

* Import: 外部からアセットをUnityエディターにインポートする。
* Create: Unityエディター上でアセットやスクリプトを使い、コンテンツを作成する。
* Build: 作成したコンテンツを任意のプラットフォーム上で動作させるためにビルドする。
* Distribute: ビルドしたファイルを配布し、ユーザーがブラウザやアプリストア経由でアクセスできるようにする。
* Load: ダウンロードしたファイルをPCやスマートフォン上で利用する。

今回はこのうち、CreateとBuildの部分の説明となります。

\
　
## コンテンツの作成
\
前回のコラムの続きで、UnityのSceneとHierarchy上にスキャンデータが表示されているところから作業を開始します。

今回、下図のようにスキャンデータがY軸（黄緑色の軸）を中心に自動で回転するコンテンツをC#スクリプトを使って作成していきたいと思います。

![コンテンツイメージ](/images/blog/build_webgl/コンテンツイメージ.webp)

\
スクリプトはProjectウィンドウ上で作成します。まずスクリプトを格納するフォルダを作成します。Projectウィンドウの左上にある＋ボタンをクリックして、リストから「Folder」を選ぶとProjectウィンドウ内に新規フォルダーが作成されるので「Scripts」にリネームします。

Scriptsフォルダーを開いて、もう一度＋ボタンをクリックして今度は「C# Script」を選ぶとフォルダー内に「NewBehaviourScript」というファイルが作成されるので、これを「ObjectRotator」にリネームします。これが空のC#スクリプトファイルになりますので、ダブルクリックして編集を行います。

![スクリプトファイルの作成](/images/blog/build_webgl/スクリプトファイルの作成.webp)

\
　
##### C#エディターの設定
 UnityのSetting > External ToolsからC#エディターを設定できます。個人的には補完機能が充実しているVisual Studioがおすすめです。Visual Studioのインストールなどは以下をご参照ください。

 [*クイックスタート: Unityを使ったクロスプラットフォーム開発のためのVisual Studioの構成*](https://learn.microsoft.com/ja-jp/visualstudio/gamedev/unity/get-started/getting-started-with-visual-studio-tools-for-unity?pivots=macos)

![エディター設定](/images/blog/build_webgl/エディター設定.webp)

\
　
## スクリプトの作成
\
スクリプトには以下を貼り付けて保存します。

##### ObjectRotator.cs

```csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class ObjectRotator : MonoBehaviour
{
    // カメラオブジェクト
    public GameObject _cameraObject;

    // 回転速度
    public float _rotationSpeed = 10; 


    // Start is called before the first frame update
    void Start()
    {
        // 回転させる対象のゲームオブジェクトのtransformを取得
        Transform _transform = this.gameObject.transform;
        // ゲームオブジェクトの座標（スタート時）を設定
        _transform.position = new Vector3(0, 0, 0);
        // ゲームオブジェクトの回転角（スタート時）を設定
        _transform.rotation = Quaternion.Euler(0, 0, 0);
        // ゲームオブジェクトのサイズを設定
        _transform.localScale = new Vector3(20, 20, 20);

        // メインカメラのtransformを設定
        Transform _cameraTransform = _cameraObject.transform;
        // ゲームオブジェクトの座標（スタート時）を設定
        _cameraTransform.position = new Vector3(0, -2, 10);
        // ゲームオブジェクトの回転角（スタート時）を設定
        _cameraTransform.rotation = Quaternion.Euler(0, 0, 0);

    }

    // Update is called once per frame
    void Update()
    {
        // ゲームオブジェクトのtransformを取得
        Transform _transform = this.gameObject.transform;
        // ゲームオブジェクトのY軸を（前回Updateからのデルタ時間（Time.deltaTime）* 回転速度）分回転させる
        _transform.Rotate(0, Time.deltaTime * _rotationSpeed, 0);
    }
}
```

スクリプトコードの内容を少し補足しますと、
* ```void Start()```はコード実行時に一度だけ呼び出される関数で、ここでは回転させるオブジェクトやカメラの初期配置を設定しています。
* ```void Update()```はコード実行中に定期的（フレーム毎）に呼び出される関数で、デルタ時間と回転速度から回転角を定義して、オブジェクトを回転させています。

その他、GameObjectやTransformなどはUnity固有のクラスになります。詳細はスクリプトリファレンスをご確認ください。

[*Unityスクリプトリファレンス*](https://docs.unity3d.com/ja/2021.3/ScriptReference/index.html)

\
　
## オブジェクトへのコンポーネント追加
\
完成したスクリプトを回転対象のオブジェクトのコンポーネントとして追加を行います。Unityではゲームオブジェクトにコンポーネントを追加することで、色々な機能を持たせることができますが、スクリプトもその一つです。

追加手順は簡単で、Hierarchyウィンドウでオブジェクトを選択した状態で、Inspectorウィンドウの空いているところにスクリプトファイル（ProjectウィンドウにあるObjectRotator）をドラッグ＆ドロップするだけです。

![コンポーネント追加](/images/blog/build_webgl/コンポーネント追加.webp)

\
　
追加したスクリプトコンポーネントを見てみましょう。スクリプト名の他に「Camera Object」と「Rotation Speed」という項目があると思います。これはソースコードの8,11行目で宣言したpublic型のクラス変数になります。このようにpublicで宣言した変数はコンポーネント上で変更可能となります。

なお「Camera Object」についてはソースコード上で未定義のため、Noneとなっていますので、リストから「Main Camera」を選んでください。

\
　
## 動作確認
\
以上でコンテンツ作成完了です。ビルドの前にシミュレーターで動作確認をしてみましょう。Unityエディターの画面中央上部にある再生ボタンを押してGameウィンドウ上での表示内容を確認します。

Gameウィンドウ上でスキャンデータがY軸を起点として回転していたら成功です！

![Gameウィンドウ](/images/blog/build_webgl/Gameウィンドウ.webp)

\
　
ちなみにスクリプトコンポーネントの「Rotation Speed」で回転スピードを調節できますので、試してみてください。

\
　
## コンテンツのビルド
\
シミュレーターでコンテンツ動作を確認したら、コンテンツを利用するプラットホームの形式に合わせてアセットファイルのビルドを行います。Unityはマルチプラットホームに対応しており、ビルドターゲットとしてはWindows,Mac,Linux,android,ios,webGLなどがありますが、今回はブラウザー上で表示を行いたいので、WebGLでビルドを行います。

WebGLのビルドでは、アセットファイルをwebブラウザーで表示可能な形式（html,js）への変換を行います。File > Build SettingsからBuild Settings画面を開いて、Platformのところで「WebGL」を選択します。初期状態では画面下に警告メッセージが表示され、Build/Build And Runボタンが非活性の状態になっていると思います。

![ビルド設定](/images/blog/build_webgl/ビルド設定.webp)

\
　
これを解消するため、左下の「Player Settings」からPlayer設定に移動し、HTML5のタブから、Other Settings > Rendering > Auto Graphics APIのチェックを外すようにしてください。

![プレイヤー設定](/images/blog/build_webgl/プレイヤー設定.webp)

\
　

チェックを外したら、元のBuild Settings画面に戻り、Build And Runボタンを押します。ビルドファイルの保存先を聞かれるので、任意の場所を指定してSaveボタンを押すと、コンテンツのビルドが開始されます。

ビルドが完了するとローカルにサーバが立ち上がり、ブラウザからコンテンツにアクセスできます。

![ブラウザ表示](/images/blog/build_webgl/ブラウザ表示.webp)

\
　

## まとめ
\
いかがでしたでしょうか？
今回はUnityのワークフローとコンテンツ作成からビルドまでの進め方について、事例を交えてご紹介させていただきました。

ビルドに関しては今回さらっと紹介しましたが、ビルドサイズや品質面において、いろいろと考慮すべき部分がありますので、次回以降でその辺りについてもご紹介できればと思います。

\
　






















iPhoneの3Dスキャンアプリで撮影したデータとUnityを使って、Webアプリケーションを開発する手順についてわかりやすく解説します。

Unityアプリ開発：3DスキャンデータをWebGLでビルドする

3Dスキャンデータの活用事例２


![Unity-logo,100](/images/blog/unity/Unity-logo.webp)

前回のコラムではiPhoneと3Dスキャンアプリ（Scaniverse）を使って、3Dスキャンデータを測定する手順についてご紹介しました。

測定したデータの閲覧や簡易的な編集作業であればScaniverseだけでも可能ですが、データを使ってゲームやWebサイトを作成したい時には、[**Unity**](https://unity.com/ja)（ゲーム開発エンジン）を使うのが一般的です。

ここではScaniverseで測定した3DスキャンデータのUnityへのインポート手順についてご紹介したいと思います。

\
　
## 事前準備
\
Unityのダウンロードおよびインストールについては[こちら](https://unity.com/ja/download)をご参考ください。

Unity Hubで作成した新規プロジェクトを起動すると以下のような画面が表示されます。
ここで見やすさのため、赤枠内の設定を変えて画面配置を変更します。

![プロジェクト画面](/images/blog/unity/プロジェクト画面.webp)

\
　
画面を構成するウィンドウの名称と役割は以下の通りです。
+ Scene: 作成中の3Dビュー
+ Game: シーンのカメラを通して描画されたゲームシミュレーションのビュー
+ Hierarchy: Sceneに配置しているオブジェクトの一覧
+ Project: プロジェクトに属するアセットの一覧
+ Inspector: 選択中のオブジェクトやアセットのプロパティ 

\
　
## Scaniverseからのデータ移行
\
Scaniverseからobj形式でエクスポートしたzipファイルを解凍して、解凍したフォルダごとUnityのProjectウィンドウのAsset配下にドラック＆ドロップします。この時、Projectウィンドウに水色のアイコンが作成されますが、この水色のアイコンをプレハブといいます。

![Projectウィンドウ](/images/blog/unity/Projectウィンドウ.webp)

\
　
次にプレハブをSceneウィンドウにドラック＆ドロップするとScene上に座標軸が現れ、Hierarchyウィンドウにプレハブと同様の水色のアイコン（プレハブから作成されたオブジェクト）ができます。しかし肝心のスキャンデータが見当たりません...そんな時にはHierarchyウィンドウのアイコンをクリックして、Inspectorウィンドウに表示されるTransformでオブジェクトの座標を確認してみましょう。

![Hierarchyウィンドウ](/images/blog/unity/Hierarchyウィンドウ.webp)

\
　
どうやら、オブジェクト自体は配置されているものの、PositionとScaleに問題があったようです。そこでPositionを(X,Y,Z)=(0,0,0)、Scaleを(X,Y,Z)=(10,10,10)にそれぞれ変更してみます。

![Scale変更](/images/blog/unity/Scale変更.webp)

\
　
これでスキャンデータが目視で確認できる大きさになりました。でもまだ少し気になるところがあります。本来スキャンデータの中心と座標軸は一致しているべきですが、実際には座標軸はデータの中心よりかなり下の方に位置しています。

\
　
## Pivotについて
\
この座標軸はPivotと呼ばれており、Pivotの原点はオブジェクトの移動や回転の中心点となります。今回、オブジェクト（スキャンデータ）とPivotの位置がずれてしまっているのは、スキャンデータに台座のデータが残っているためです。台座のデータ自体はScaniverseのCROP機能で削ったものの、Pivotの原点は台座を含んだ形で計算されており、対象物と台座の２つのデータの中心がPivotの原点となっています。

![Pivotずれ](/images/blog/unity/Pivotずれ.webp)

\
　
Pivotの原点とオブジェクトの中心がずれていると、オブジェクトの回転軸がずれてしまい、期待する動作とならないため、Unityにインポートする前にPivot位置を修正しておく必要があります。

\
　
## Pivot位置の修正
\
Pivot位置の修正については幾つか方法がありますが、MeshMixerを使うのが簡単です。

MeshMixerにスキャンデータ（.obj）をインポートした直後の状態です。データと赤丸（Pivot座標の原点）がずれているのがわかると思います。

![MeshMixerによるPivot修正前](/images/blog/unity/MeshMixerによるPivot修正前.webp)

\
　
編集→位置合わせ→適用を押すだけで、データの中心と赤丸が揃います。

![MeshMixerによるPivot修正後](/images/blog/unity/MeshMixerによるPivot修正後.webp)

\
　
修正したデータをobj形式でエクスポート保存して、再度Unityで読み込んでみましょう。

![Pivot修正後](/images/blog/unity/Pivot修正後.webp)

\
　
今度はPivotとスキャンデータの中心が一致するようになりました。

\
　
## まとめ
\
いかがでしたでしょうか？

Scaniverseで測定した3DスキャンデータをUnityへ取り込む際には、
+ PositionとScale
+ Pivot位置

が不揃いとなることがありますが、その際の対応方法について簡単に紹介させていただきました。

\
　







iPhoneの3Dスキャンアプリで撮影したデータをUnityにインポートする手順について、わかりやすく解説します。

Unityアプリ開発：3DスキャンデータのUnityへの取り込み

3Dスキャンデータの活用事例１


![穴埋め記事用小,100](/images/blog/hole/穴埋め記事用小.webp)

\
iPhone搭載のLiDARセンサーやフォトグラメトリで3Dスキャンデータを測定した場合に、測定対象の形状が複雑だと、センサー光が奥行きまで届かず、測定データに穴ができてしまうことがあります。

穴の大きさや形状にもよりますが、専用アプリを使うことでそのような穴を簡単に修復することができます。ここでは二次利用の前処理として、3Dスキャンデータにできた穴を専用ソフトで修復する方法についてご紹介したいと思います。

\
　

## MeshMixerのインストール
\
3Dデータの編集を行うには専用アプリを使いますが、AutoDesk MeshMixerは無料で使えるだけでなく、日本語にも対応しておりますので、おすすめのアプリです。手始めにMeshMixerを[*こちら*](https://meshmixer.com/japanese.html)からダウンロードして、インストールします。

\
　
## 3Dスキャンデータのインポート
\
MeshMixerのインストールが完了したら、早速アプリを開いてみましょう。以下のような画面が表示されますので、インポートから編集したい3Dファイルを選択します。ファイルのフォーマットは.stl .obj等に対応しています。

![MeshMixer開始画面](/images/blog/hole/MeshMixer開始画面.webp)

\
　
インポートすると3Dスキャンデータが画面に表示されます。スペースを押したままにすると中央にカメラ視点を動かすモーダルが表示されます。ここからカメラ位置の移動や回転・ズームイン／ズームアウトによりカメラ視点を自由に変えることができます。

![穴埋め記事素材（ワイヤー）](/images/blog/hole/穴埋め記事素材（ワイヤー）.webp)

\
　

測定データの穴にズームするとこんな感じです。「w」を押すとトップに掲載したようなワイヤー表示に切り替わります。

![穴埋め記事素材](/images/blog/hole/穴埋め記事素材.webp)

\
　

## 穴埋め処理
\
MeshMixerで測定データの穴埋めを行うには二つの方法があります。

##### 穴埋めをしたい範囲を選択して「削除と充填」
\
こちらは穴埋めしたい箇所を一つずつ選んで、マニュアルで穴埋め処理を行う方法になります。左端のメニューバーから「選択」を選ぶと、マウスポインターの先端が円形になり、選択範囲を指定するモードになります。穴の周囲をクリックしながらなぞると以下のように選択範囲がオレンジ色に変わります。

![穴埋め1_1](/images/blog/hole/穴埋め1_1.webp)

\
　
この状態で「編集」から「削除と充填」を選ぶと、穴埋めイメージのプレビューが表示されます。置き換え/埋めタイプや各パラメータの値を変えると仕上がり具合を調整することができます。調整が終わったら適用を押して変更を確定させます。

![穴埋め1_2](/images/blog/hole/穴埋め1_2.webp)

\
　

##### 解析メニューから自動修復
\
こちらはソフトが修復できる穴を検出して、自動で修復してくれるモードです。穴を一つずつ選択する必要がないので作業的にはラクですが、穴埋めしたくない箇所も埋めてしまうので、上記のマニュアル修復との使い分けが必要です。

操作は簡単。左端のメニューバーで解析→検証から「すべて自動修復」を選ぶだけです。穴埋めモードで仕上がり具合を調整することができます。

![穴埋め2_1](/images/blog/hole/穴埋め2_1.webp)

\
　

違和感なく綺麗に穴が修復されました。完了を押して変更を確定させます。

![穴埋め2_2](/images/blog/hole/穴埋め2_2.webp)

\
　

## まとめ
\
いかがでしたでしょうか？3Dスキャンデータにできた穴をMeshMixerで修復する方法として、二つの手順を紹介させていただきました。

+ 穴埋めをしたい範囲を選択して「削除と充填」

+ 解析メニューから自動修復

なお、穴の大きさや形状によってはどちらの方法でも修復できないケースがありますのでご注意ください。

\
　



iPhoneの3Dスキャンアプリで撮影した際にデータにできた穴を専用ソフト（MeshMixer）で修復する手順についてわかりやすく解説します。

3Dスキャンデータの補修

iPhoneで始める3Dスキャン２


![スキャン方法_タイトル,100](/images/blog/howtoscan/スキャン方法_タイトル.webp)

これまで3Dスキャンデータの測定にはプロ仕様の測定機材や高価な編集ソフトが必要でしたが、iPhoneの上位機種にLiDARセンサーが搭載されたことで、スマホ1台で簡単に測定ができるようになり、より身近な存在となりました。ここではiPhoneを使った3Dスキャンの実践編として、具体的な測定方法とポイントについてご紹介したいと思います。

\
　
## LiDARセンサーとは
\
LiDARとは Light Detection And Ranging の略称で、レーザー光を対象物に対して照射し、その反射光が戻ってくるまでの時間を測定することで、対象物までの距離を測定できます。

![lidarとは](/images/blog/howtoscan/lidarとは.webp)

LiDAR自体は自動運転技術やロボット掃除機などのセンサーとして使われており、そこまで新しい技術ではありませんが、スマホに搭載されたことでLiDARセンサーを携帯し、簡単に持ち運びできるようになりました。

\
　
## 3Dスキャンに必要なもの
\
3DスキャンにはLiDARセンサーと、測定データから3Dモデルを作成し、画像データをテクスチャとしてマッピングするアプリケーション（3Dスキャンアプリ）の二つが必要となります。

* iPhone 12/13/14 Pro・ProMax もしくは 2020年以降のiPad Pro（LiDARセンサー）
* Scaniverse（3Dスキャンアプリ）

[**Scaniverse**](https://scaniverse.com/)は無料で使えるスキャンアプリとして有名ですが、他にも[**WIDAR**](https://www.widar.io/ja)や[**Polycam**](https://poly.cam/)などの製品があります。この記事ではScaniverseを使った測定方法を紹介します。

\
　
## 3Dスキャン開始の下準備
\
3Dスキャンデータを測定するためには下図のように対象物に対して、側面方向やや斜め上からセンサーをかざして、ぐるっと周囲を一周しながら測定を行う必要があります。

![スキャン方法_図解](/images/blog/howtoscan/スキャン方法_図解.webp)

\
　
ハンディスキャンの場合、対象物を地面に置いた状態で測定すると、姿勢的にかなりキツくなるため、図のような台座をご用意いただくことを推奨します。私は普段組み立て式の本棚を使って撮影していますが、ダンボールなどもおすすめです。

またセンサーと対象物との距離については、iPhoneのLiDARセンサーは30cm〜5mの範囲で照射が可能ですが、測定対象が小物サイズの場合には50〜80cm程度が推奨値となります。このため、対象物と台座から半径１m程度は障害物がない状態にするとスムーズな測定ができます。ここまで準備できたらいよいよ測定を開始します！

\
　
## 3Dスキャンデータの測定
\
3Dスキャンデータの測定作業はScaniverseを使って行います。

![アプリアイコン](/images/blog/howtoscan/アプリアイコン.webp)

\
　
アプリを起動して、フッターにあるNEW SCANを押すとスキャンサイズ（Small/Medium/Large）の選択画面が表示されますので、対象物のサイズから適切なものを選びます。

![スキャンサイズの指定](/images/blog/howtoscan/スキャンサイズの指定.webp)

\
　
サイズを選ぶとREADY TO SCANの画面に遷移しますので、対象物を中央に捉えた状態で赤丸ボタンを押してスキャンを開始します。

スキャンが開始されたら、赤斜線でハッチングされている箇所がなくなるように対象物の周囲をできるだけゆっくりと移動しながら測定を行います。この時、同じ箇所を2回以上測定しないように注意しましょう。

測定が終わって、停止ボタンを押すとSelect Processing Modeの画面が表示されますので、RECOMMENDEDがついているModeを選択すると3D化処理が始まります。

![選択処理モード](/images/blog/howtoscan/選択処理モード.webp)

\
　

30秒〜1分程度かかりますが、処理が完成すると3D化されたスキャンデータが表示されます。画面上でスワイプやズームをしながら、データが万遍なく取れているか確認しましょう。問題ないようであればSaveを押して保存します。

\
　
## 3Dスキャンデータの編集
\
フッターにあるLIBRARYを押すと、測定済みのスキャンデータの一覧が表示されますので、先ほど測定したデータを選択して編集を行います。編集は画面下のEDITモードから行います。

![EDITボタン](/images/blog/howtoscan/EDITボタン.webp)

\
　
EDITモードではテクスチャ画像のフィルター処理やコントラストの調整等ができますが、ここではCROPを使って、不要な台座から下のデータを削除します。

![CROPボタン](/images/blog/howtoscan/CROPボタン.webp)

\
　

CROPの使い方は簡単です。対象物の台座の内側を↓のように矩形選択してから、右下のチェックを押します。

![CROP作業](/images/blog/howtoscan/CROP作業.webp)

\
　

台座から下のデータを削除できました。

![CROP後](/images/blog/howtoscan/CROP後.webp)

\
　
## 3Dスキャンデータのエクスポート
\
SHAREモードより測定したデータを外部にエクスポートできます。ファイル形式を指定してエクスポートしたい時はExport Modelを使います。

![SHAREボタン](/images/blog/howtoscan/SHAREボタン.webp)

![エクスポートメニュー](/images/blog/howtoscan/エクスポートメニュー.webp)

\
　
ファイル形式は**FBX/OBJ/GLB/USDZ/STL/PLY/LAS**に対応していますが、MeshMixerやUnityで二次加工する場合には**OBJ**ファイルが両方に対応しており便利です。

\
　
## まとめ
\
いかがでしたでしょうか？Scaniverseを使って3Dスキャンデータを測定する方法、並びにアプリ内での編集手順をご紹介させていただきました。

今回紹介できていないその他アプリの使用方法や、フォトグラメトリを使った3Dスキャンについても、次回以降、ご紹介していけたらと思っています。

\
　




iPhoneのLiDARセンサーと専用アプリ（Scaniverse）を使って、3Dスキャンデータを上手に撮影する手順についてわかりやすく解説します。

LiDARアプリで3Dスキャンデータを測定する

iPhoneで始める3Dスキャン１


![UIトップ,100](/images/blog/bihin/4975193_m.webp)

前回に引き続き、STROLLのスモールDxへの取り組み事例として、備品管理サイトの開発案件について紹介させていただきます。

\
　


## 開発の経緯
***
サイト開発の依頼元は都内で建設関連業を営むK社様。同社の依頼で備品の利用状況をモニターするWebアプリケーションを開発しました。   

同社では備品の在庫管理を専門に行うスタッフがおらず、社員持ち回りで各フロアの在庫状況を点検するのが日課でした。製図に使用する備品点数は多く、使用頻度も高いため、在庫の点検は毎日欠かさず行う必要があり、それが社員の負担となっていました。
この課題を解決すべく、備品管理業務を支援するWebアプリケーションの導入を提案しました。

\
　


## Before
***
当日の担当者が毎日各フロアの備品の在庫状況を見回り、必要に応じて在庫の補充を行っていました。使用頻度の高い備品は補充前に枯渇することがありました。

\
　



## After
***
備品情報と在庫数をデータベースに登録し、Web上でデータの閲覧、検索、編集ができるようにしました。備品スペースの近くにタブレットを設置し、持ち出し時に利用数を入力することで、備品の在庫状況をシステムがリアルタイムに監視し、在庫数が所定の数量を下回った際に補充時期を通知する仕組みを導入しました。

また利用者の利便性を考え、以下の改善を行いました。

+ タッチパネル操作でカンタンに備品の利用・補充ができるようUIをデザイン。入力時の手間を軽減。
+ 備品の保管場所がすぐに分かるように、タグ検索機能を追加
+ 部署毎に備品の在庫状況が管理できるように、フロア毎にアカウントを作成


\
　


*備品管理Webアプリ*

![備品管理アプリ](/images/blog/bihin/bihin.webp "備品管理アプリ")

\
　


**備品管理アプリの導入により、備品の枯渇がなくなると共に、社員は持ち回りの点検業務から解放され、本業により多くのリソースを集中させることが可能になりました。**

\
　




社員持ち回りで点検していた備品在庫管理業務を自動化

Webアプリで実現する業務DXとその成果

備品管理アプリの開発


![UIトップ,100](/images/blog/satoyama/5162811_m.jpg)

今回はSTROLLのスモールDxへの取り組み事例として、里山調査アプリの開発案件について紹介させていただきます。

\
　

## 開発の経緯
***
開発の依頼元は東京里山開拓団様。東京近隣に点在する荒れた山林を里山として保全する活動を行っているNPO法人です。同法人の依頼に基づき、全国各地の里山記事の登録・編集を行うためのWebアプリを開発しました。

同法人では里山情報の可視化を目的として、全国各地の里山をGoogleマップ上で俯瞰できる「里山鳥瞰図」を作成していますが、里山情報の管理をスプレッドシート上で行っていたため、情報の登録とメンテナンスに工数がかかることが長年の課題でした。

この課題に対して、
**スプレッドシート上で管理されていた里山情報をデータベースに移行し、専用のWebサイトから閲覧・編集可能とすることで、移行前と比べて、情報のメンテナンスにかかる作業工数を大幅に削減（Before→After）**
することができました。

\
　

## Before
***
里山情報を鳥瞰図に掲載するためには、インターネットで検索したニュース記事から所在地などの属性情報を抽出する必要があります。
この際、ニュース記事の件数が多いため、以下の手順で複数メンバーで分担して記事のチェックを行っていました。

\
　

###### 作業手順（従来）
***
1. 定期的にリーダーが新着ニュース記事の情報を収集し、作業用のスプレッドシートを作成
2. リーダーがスプレッドシートを分割して各メンバーにメールで配布
3. 各メンバーで記事内容のチェックを行い、結果をメールで返信
4. リーダーが各メンバーのチェック結果を集約し、Googleマップに掲載

\
　

###### 作業手順（従来）における課題
***
1. 作業用スプレッドシートの作成を定期的に行う必要がある
2. スプレッドシートの分割・配布・集約に工数がかかる
3. スプレッドシートであるため、スキマ時間などにスマートフォン上で作業することが難しい
4. メンバー間で稼働状況に合わせて作業をシェアすることができない
5. ニュース記事のリンク切れも同様の手順でメンテナンスするため、その分の工数もかかる

\
　

## After
***
従来手順上の課題２〜４の対策として、スプレッドシート上でローカル管理されていた里山情報をデータベースに移行し、専用のWebサイト（以下）からデータの閲覧、検索、編集ができるようにしました。またスマートフォンでの作業を想定して、Webサイトはレスポンシブなデザインで構築しました。

また課題１と課題５に対しては、サーバ上でスクリプトを定期実行することで、人手を介さずにメンテナンスすることが可能となりました。

*里山調査Webアプリ*

![里山調査アプリ](/images/blog/satoyama/satoyama.png "里山調査アプリ")


\
　



スプレッドシート上でローカル管理されていた里山データをクラウドデータベースへ移行

Webアプリによるデータ入力作業の効率化

里山調査アプリの開発


今回は前回からの引き続きで、Firebaseとの連携（Realtime Databaseからのデータ取得）について、記載していきたいと思います。

記事の前提として、Realtime Database上のデータの読み取りに対しては、セキュリティ観点からアクセス制限をかけています。
このため、事前にAuthenticationによるユーザ認証を済ませてからでないとデータへのアクセスができません。

Realtime Databaseへのアクセス制限およびAuthenticationによる認証方法については、以下をご参照ください。

* [Realtime Databaseへのアクセス制限](https://firebase.google.com/docs/database/security?authuser=2)
* [Authenticationによる認証方法](https://firebase.google.com/docs/auth/web/start?authuser=2)

\
　


## やりたいこと
***

今回やりたいこととしては、ブラウザからのリクエスト契機で、Realtime Database上からデータを取得し、データを元にHTMLを描画して返すというシンプルなものです。この場合、処理の流れとしては

1. Firebase SDKを初期化する
2. Authenticationでユーザ認証状態のチェックを行う
3. ユーザ認証完了後、Realtime Databaseから動的なデータを取得する
4. getServerSidePropsを用いて、Databaseから取得した動的データをコンポーネントに渡す
5. コンポーネント側で動的データを使ってHTMLを描画し、ブラウザに返す

となりそうですが、、、これだと残念ながらうまくいきません。

\
　


## NGパターン
***
以下がNGパターンのサンプルコードになります。実行すると2番目のところで処理が止まってしまいます。

以下のコードでは```getServerSideProps```内で```firebase.auth()```を実行していますが、```firebase.auth()```はサーバサイドではなくブラウザ側で呼び出す必要があります。
ちなみにRealtime Databaseの読み取り自体はサーバサイドでも可能であり、読み取りルールでユーザ認証を不要とすれば
```firebase.database()```でデータを読み取ることができます。

```js
// 1. Firebase SDKを初期化する
if(!firebase.apps.length) {
  firebase.initializeApp(config);
}

function fetchRealtimeDatabase() {
  return new Promise((resolve) => {
    // 2. Authenticationでユーザ認証状態のチェックを行う
    firebase.auth().onAuthStateChanged((user) => {
      // 3. ユーザ認証完了後、Realtime Databaseから動的なデータを取得する
      if(user) {
        const database = firebase.database()
        database.ref(`products/${user.uid}`).once('value').then(snapshot => {
          resolve(snapshot.val())
        })
      }
    })
  })
}

export async function getServerSideProps() {
  const fetchData = await fetchRealtimeDatabase()
  //4. getServerSidePropsを用いて、Databaseから取得した動的データをコンポーネントに渡す
  return {
    props: {
      fetchData: fetchData
    }
  }
}

export default function Home(props) {  
  const { fetchData } = props
  // 5. コンポーネント側で動的データを使ってHTMLを描画し、ブラウザに返す
  return (
    <div id="hoge">
      {props.hoge}
    </div>
  )
}

```

\
　


## OKパターン
***
上記の通り、```firebase.auth()```はサーバサイドではなくブラウザ側で呼び出す必要があります。
具体的にはuseEffectフックを使います。```useEffect```はHTMLの描画が終わってから（componentDidMount状態）処理が始まるため、動的データの取得とHTML書き換えをこの中に記述して行きます。

1. Firebase SDKを初期化する
2. 静的なHTMLを描画する
3. Authenticationでユーザ認証状態のチェックを行う
4. ユーザ認証完了後、Realtime Databaseからデータを取得する
5. 取得したデータを元にHTMLを書き換える

対策後のサンプルコードを以下に示します。

```js

// 1. Firebase SDKを初期化する
if(!firebase.apps.length) {
  firebase.initializeApp(config);
}

export default function Home() {  
  useEffect(() => {
    //3. Authenticationでユーザ認証状態のチェックを行う
    firebase.auth().onAuthStateChanged((user) => {
      if(user){
        try {
          const database = firebase.database()
          //4. ユーザ認証完了後、Realtime Databaseからデータを取得する
          database.ref(`products/${user.uid}/${key}`).once('value').then(snapshot => {
            const product = snapshot.val()
            //5. 取得したデータを元にHTMLを書き換える
            if(product){            
              const hoge = document.getElementById('hoge')
              // elementが取得できた場合、動的な値で書き換える
              if(hoge){
                hoge.innerText = product.hoge
              }
            }
          })
        } catch(error){
          console.log(error)
        }
      }
    })
  })
  //2. 静的なHTMLを描画する
  return (
    <div id="hoge">
    </div>
  )
}

```

\
　



## まとめ
***
 firebase SDKの一部の機能については、サーバサイドでは利用できないため、その回避策について説明しました。Next+firebaseの構成でまだ使用していない機能もあるため、他にも同様のパターンがありそうですが、そのあたりについても確認次第、こちらに掲載していきたいと思います。

\
　





useEffectフックとその使い方を解説

Realtime DatabaseのデータをReactページへ反映させる

Realtime Databaseからのデータ取得について


来週から6月ということは今年ももう折り返し地点。ホントに時が経つのが早いですね。
子供の頃の一年に比べて明らかに早くなっている気がします。。さて、今回はFirebaseでバックエンドを構築する際に、詰まりがちなポイントについて、過去の開発経験を交えながら書いていきたいと思います。

\
　


## コードはどこで実行されている？
***
Next.jsでWebサイトを構築する場合、サーバ側の実行環境がNode.js、クライアント側はブラウザが実行環境となりますが、どちらもJavaScriptでコードを記述することになります。例えばindex.jsというファイルを作成した場合、**index.jsのコードはサーバ・クライアント間で共有され、各々で実行**され（てしまい）ます。以前、Next.js+firebaseの開発を行った際にこの概念に気づかず1日ハマってしまいました。

問題が起きたのは、開発中のサイトにfirebase SDKのanalyticsを入れた時の事です。
analyticsを使う際にはfirebaseを初期化してから、```firebase.analytics()```を実行する必要がありますが、この部分について普通に以下のように書くとエラーが出ます。

```js
if(!firebase.apps.length) {
  firebase.initializeApp(config);
  firebase.analytics();
}
```

```code
ReferenceError: navigator is not defined
```

\
　


## エラーの原因と対策
***
エラーの原因ですが、```firebase.analytics()```を実行する際に、navigator(測位機能)が必要で、***navigatorを持たないサーバ側でコードが実行されたことでエラー***となっています。このエラーは```firebase.analytics()```をサーバ側で動作しないようにすることで回避できます。具体的には以下のようにします。

```js
if(!firebase.apps.length) {
  firebase.initializeApp(config);
}

///ブラウザのみで動作させる
if(typeof window !== 'undefined'){
  firebase.analytics();
}
```

```if(typeof window !== 'undefined'){}```の中に入れることでブラウザのみで実行されます。
ここで```initializeApp```も一緒に```if(typeof window !== 'undefined'){}```の中に入れてしまうと、初期化しなさいと怒られてしまうので注意が必要です。

```js
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)
```

このようにfirebase SDKにはブラウザ側でしか動作しないものがありますが、その一方でファイル操作などブラウザ側では動作しないライブラリも存在しており、これらのライブラリを使用する際には実行環境を限定（ブラウザもしくはサーバ側のみで実行させる）する必要があります。

Next.jsの場合では以下の場所に記述することで、実行環境を限定することができます。

①ブラウザ側に限定
* if(typeof window !== 'undefined'){}
* useEffect

②サーバ側に限定
* if(typeof window === 'undefined'){}
* getStaticProps
* getServerSideProps

\
　


## まとめ
***
今回はFirebaseでバックエンドを構築する際に注意すべき点（コードの実行環境による影響）について説明させていただきました。firebaseを使うとバックエンドを簡単に構築できるので重宝しますが、なかなか扱いが難しい部分もありますので、次回以降もテーマとして取り上げていきたいと思います。


\
　



コード実行環境により発生しがちなエラーパターンとその対策を解説

コード実行環境による影響とその対策

Next.js+firebase構成の注意点


このところ毎日雨模様で6月を待たずに東京は早くも梅雨入りしたようです。

今回はNext.jsで**Static Generation**のページを作成する方法を紹介します。

\
　


## Next.jsのレンダリング方法
***

Next.jsで**Static Generation**を利用する場合、サイト全体に設定を入れる必要はなく、ページ毎にレンダリング方法（SG or SSR）を指定することができます。言い換えると作成するページの目的によって、SGとSSRを使い分けることができます。

SGとSSRを使い分ける際に、Next.jsでは３つの関数を提供しています。

| Function | Use case | Description |
| :--- | :--- | :--- |
| getStaticProps | Static Generation | ビルド時にデータを取得する |
| getStaticPaths | Static Generation | ビルド時にプリレンダリングする対象をパスとして特定する |
| getServerSideProps | Server Side Rendering | リクエスト毎にデータを取得する |


\
　



このうち、SGでは上2つの関数を利用します。両者ともビルド時に呼び出されます。

getStaticPropsはファイル内容やDBのデータを取得した上で、propsに格納してreturnすることで、ページコンポーネント側でpropsに指定されたデータを受け取ることができます。

getStaticPathsは表示対象のページが動的に増える場合、サーバがプリレンダリングするファイルパスを特定するために使用します。

文章だけではわかりにくいので、コード例を記載します。


\
　



## ユースケース1: 会社概要など固定ページの表示
***
+ ページファイルのパス：/pages/about.js
+ 会社概要の文面ファイル（markdown形式）のパス：/doc/about.md

```javascript:about.js
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import remark from 'remark'
import html from 'remark-html'

// /pages/docのパス
const postsDirectory = path.join(process.cwd(), 'doc')

export async function getStaticProps(){
  const filePath = path.join(postsDirectory,`about.md`)
  const fileContents = fs.readFileSync(filePath,'utf8')
  const matterResult = matter(fileContents)
  // markdownをHTMLに変換
  const processedContent = await remark().use(html).process(matterResult.content)
  const contentHtml = processedContent.toString()
  // propsにHTMLを格納
  return {
    props: {
      contentHtml,
    }
  }
}

export default function About({ contentHtml }){
  return (
    <div dangerouslySetInnerHTML={{ __html: contentHtml }} />
  )
}

```

このケースではページファイルのパスが一意であるため、getStaticPathsは使いません。

ビルド時にgetStaticPropが呼び出され、関数内で生成したcontentHtmlAboutを引数として、AboutがHTMLのレンダリングを行います。


\
　



## ユースケース2: ブログ記事など複数ページの表示
***
+ ページファイルのパス：/pages/[id].js
+ 会社概要の文面ファイル（markdown形式）のパス：/blogs/xxx.md /blogs/yyy.md

```javascript:[id].js
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import remark from 'remark'
import html from 'remark-html'

// /pages/docのパス
const postsDirectory = path.join(process.cwd(), 'blogs')

export async function getStaticPaths(){

  /// ビルド時にプリレンダリングするファイル名をparamsの値（id）に格納して返す 
  return {
    path: [ params: { id: 'xxx' }, params: { id: 'yyy'}],
    fallback: false
  }

}

export async function getStaticProps({ params }){

  const filePath = path.join(postsDirectory,`${params.id}.md`)
  const fileContents = fs.readFileSync(filePath,'utf8')
  const matterResult = matter(fileContents)

  // markdownをHTMLに変換
  const processedContent = await remark().use(html).process(matterResult.content)
  const contentHtml = processedContent.toString()

  // propsにHTMLを格納
  return {
    props: {
      contentHtml,
    }
  }

}

export default function Blog({ contentHtml }){
  return (
    <div dangerouslySetInnerHTML={{ __html: contentHtml }} />
  )

}

```

getStaticPathsでpathを以下のように指定することで、/page/xxx.jsと/page/yyy.jsがビルド時にプリレンダリングされます。
またfallback: falseを指定することで、上記以外のパス（例：/page/zzz.js）に対しては404ページがレンダリングされます。

```script
return {
    path: [ params: { id: 'xxx' }, params: { id: 'yyy'}],
    fallback: false
  }
```


\
　

## まとめ
***
最後は駆け足気味でしたが、Static Generationの設定方法を紹介させていただきました。
次回はNext.jsのAPIの紹介等をしていければと思っています。

\
　



Next.jsにおけるレンダリング方法と主な利用用途を解説

StaticGenarationの利用シーンと設定方法の紹介

Next.jsにおけるStatic Generation


\
　

### ご挨拶
***
このたび、STROLL's web siteをリリースさせていただきました！

このブログではWebに関する技術情報を中心に様々な情報発信をして行けたらと思っています。まだまだ勉強中の身ではありますが、どうか温かい目で見守っていただければと思います。

ちなみにこのサイトは**Next.js**を使って制作しております。
今回は最初の記事ということもあり、Next.jsを題材にしたいと思います。

Next.jsとはReactベースのフロントエンドフレームワークで同種のフレームワークには**create-react-app**や**Gatsby.js**などがあります。

その中でNext.jsは**Static Generation**(SG)、**Server Side Rendering**(SSR)の両方に対応したオールラウンダーなフレームワークとの位置付けです。このサイトの制作にあたり、SGとSSRに関する知見を深める目的でNext.jsを選定しました。

\
　

### SG、SSRとは
***
SG、SSRのいずれも「Server Side Rendering」の手法の一つです。Server Side RenderingとはHTMLをサーバ側で描画（レンダリング）する事を指します。

ReactなどのSingle Page ApplicationではHTMLをブラウザ側でレンダリング(Client Side Rendering:CSR)することで、ページ間の遷移が高速化しますが、サーバ側でHTMLを持たないため、クローラーエンジンに引っ掛かりにくい（SEOに弱い）という課題がありました。Server-side Renderingではサーバ側でレンダリングしたHTMLをブラウザに渡すことでこの課題を克服しています。

SGとSSRは同じServer-side Renderingの技術ですが、サーバ側でHTMLをレンダリングするタイミングに違いがあります。

+ SG: ビルド時にHTMLをレンダリング
+ SSR: ブラウザからのリクエスト発生時にHTMLをレンダリング

SGの方では予めHTMLを生成してCDNにキャッシュしておき、ブラウザからのリクエスト時にはHTMLを渡すだけなので、**リクエスト時にHTMLを生成するSSRと比べて高速です**。

一方、HTMLの内容が動的に変わる場合、毎回ビルドしてあげないとHTMLの内容が更新されません。したがって、リクエスト毎に返すページが静的であればSG、データの更新頻度が高いページを返すものであればSSRという考え方になります。ただし、Next.jsの公式を見ると、セキュリティなどの観点からSGの利用が推奨がされています。その場合、更新頻度が高いページをSGで生成するにはどうしたら良いでしょうか？そのあたりについては、また別の機会に触れていきたいと思います。

ちなみに当サイトはSGを使っており、ブログ記事を作成・更新のタイミングでビルドを行っています。


\
　


【参考】SGとSSR、CSRの分類

![SGとSSR、CSRの分類,50](/images/blog/ssg-ssr/SGvsSSR.png "SGとSSR、CSRの分類")

\
　

## まとめ
***
今回はReactベースのフロントエンドフレームワークの１つであるNext.jsとその特徴についてご紹介させていただきました。次回はNext.jsにおけるSGの使い方や利用用途について触れていきたいと思います。

\
　



Tags

Search

COLUMN

Tags

Search