情報処理学会 インタラクション 2019
IPSJ Interaction 2019

2B-13
2019/3/6

Augmented Reality コンテンツ開発のためのWorkflow 編集
伊藤 千紘1,a)

高野 保真2,b)

佐久田 博司2,c)

概要：Augmented Reality（AR）コンテンツの応用範囲が，産業界における利用を中心に拡大している．
一方，閲覧用のビュアーデバイスや表示方法が多様化しているため，AR コンテンツの開発にはある程度の開発スキルが必要である．それにもかかわらず，開発を補助する環境は限定的であるのが現状である．
本研究は，ゴーグル型デバイスにおける AR コンテンツ開発を簡易化し，効率化するための開発環境を提案する．具体的には，AR オブジェクトを配置するために，Blockly の Workflow を用いて表示位置や外観などのパラメータを調整する AR 開発環境を設計し，実装する．

1. 背景
1.1 Augmented Reality
近い将来情報を現実空間の風景に重畳して視野内に表示するデバイスが一般用の情報機器として広がる可能性が高くなっている．このような環境は Augmented Reality（以下，本稿では AR と表記する）と呼ばれ，急速に日常的に使われるようになってきている．AR は，現実の対象物[印刷物上のマーカ未使用時][印刷物上のマーカ使用時]

図 1 AR によるアニメーション表示例 [8]と仮想的なオブジェクトを視野内で重ね合わせて，両者の比較や機器操作の指示を目的として利用されてきた．古く携帯型デバイスを利用するものに分けられる．

は戦闘機などで利用されているヘッドアップディスプレイ

ディスプレイゴーグルで現在商品化されたものとしてや，最近では車のナビゲーションシステムにも応用例があR
Google GlassTM や Microsoft⃝Hololens TM がある．これる．また，現代では必ずしも両者を重ね合すだけではなく，らはハンズフリーであるため，視野の一部分に情報を表示

視野内に自由に配置して案内情報など一般利用として実用しながら行動をすることができる．

的なアプリケーションや開発環境が提供され始めており，そのようなメリットの一方で，ゴーグル型の AR には課適用範囲も広がりつつある．さらに，生活情報やゲーム支題も存在する．特に，利用者側の問題としては視野を遮ら援から産業用の応用例として使われる例も出てきている．

れることによる情報欠落がもたらす危険や，現実の対象と応用例としては，現実のオブジェクトの外観からの情報AR の誤認識や混同の問題があげられる．

を補完する AR の性質から，顕微鏡下手術や遠隔医療，教つまり，仮想現実の上での行動を実際に行った作業の結育など，産業界や教育分野でも注目されている．たとえば，果に置き換えてしまう誤りの可能性を常に意識する必要が

図 1 は紙面上のマーカによって，立体的な動的オブジェクある．また，AR で提示された情報に必要以上の注目を向トを表示している例である．

けてしまう注視の問題もある．そのため，これらの問題をハードウェアの面からみると，AR は，ヘッドマウント解決するには，アプリケーションの設計・実装時に AR オ

ディスプレイや眼鏡型デバイスなどのディスプレイゴーグ

ブジェクトのサイズや位置などのパラメータを適切に調整

ルを利用する装着型と，スマートフォンやタブレットなど
12a)b)c)

青山学院大学理工学研究科理工学専攻
青山学院大学理工学部情報テクノロジー学科
c5617130@aoyama.jp
takano@it.aoyama.ac.jp
sakuta@it.aoyama.ac.jp© 2019 Information Processing Society of Japanすることが重要となる．しかし，現状では AR アプリケーションのコードを直接変更して調整する必要があるため，パラメータの調整が不十分なことが多く，アプリケーション開発の工数，利用範囲の問題が生じてしまう．また，ARで表示されるオブジェクトは CAD などで作成する必要が517

情報処理学会 インタラクション 2019
IPSJ Interaction 2019

2B-13
2019/3/6

図 2 Blockly のパネルと Workflow

あり，アニメーションなどの動的表現や，対話型の機能を実装するには特定の開発用アプリケーションに頼らざるをえない．そのため，AR アプリケーションの自由度は，開発環境に強く依存する．また，コンテンツの作成やアプリケーションの開発は開発者のスキルが必要となるため，AR アプリケーションの設計・実装の障壁となってしまっている．

1.2 ビジュアルプログラミング

図 3 マイクロサービスのための Blockly 拡張

で，入力である画像ファイルに対して，100 という閾値をテキストでプログラムを記述する代わりに，マウスなど使って二値化のマイクロサービスを利用している．Resultの操作でオブジェクトを配置してプログラムを構築するビの 4 のところにあるのが，結果の画像ファイルである．こジュアルプログラミングがコンテンツの実装コストを下げのように，マイクロサービスを Workflow のパネルとしてるのに有効であると知られている [2]．中でも，Blockly [6]実現できることで，アイコンの配置による設計，初等的なは，ウェブブラウザ上にブロックを並べることで，積み木ノウハウの習得，開発コンテンツの再編集や再利用性におを組み合わせるように直感的なプログラミングを可能とすいて利点が挙げられる．

る．Blockly は Google が開発しているビジュアルプログラミング用の JavaScript ライブラリであり，ビジュアルプログラミングができるオープンソースライブラリの中でも利用実績 [7][9] と拡張性が高いのが特徴である．

2. 提案手法
本研究では AR コンテンツ開発を簡易化するために，Blockly の Workflow を利用して AR コンテンツのパラ

Blockly によるプログラムの例を図 2 に示す．ここで，メータを調整可能な開発環境を提案し，実装する．Blockly

繰り返し（repeat），代入（set），各種の命令（print）な上で AR コンテンツの構成モジュールを適切に配置し，ARどのパネルを組み合せてプログラムを構成している．本稿

コンテンツで用いるオブジェクトの大きさ，位置などをパでは，このような Blockly のプログラムを Workflow とラメータとして与えることができる．このことにより，パ呼ぶ．ここで，Workflow の各パネルの入出力は，三角やラメータ調整の部分をコンテンツの実装から切り離すこと台形などの凹凸が明示されているため，適切なパネルでなができる．また，マイクロサービスとして AR コンテンツいと組み合せられないようになっている．そのため，プロのモジュールを開発することができるため，既存のマイクグラム初心者であっても組み合せ可能な演算を直感的に判

ロサービスのための Blockly 拡張を利用できる．

断することができるという利点がある．

Blockly をマイクロサービスのために拡張することで，プログラム記述より大きな粒度で，サービスを組み合せることが有効であることが分かっている [1]．ここでいうマイクロサービスとは，各サービスが独立して動作するアーキテクチャー，かつ協調して動作する小規模で自律的な本研究の Blockly による AR コンテンツ開発環境を用いれば，コンテンツのパラメータ調整が容易になるため，実験により注視と AR の関係を探ることも可能になる．

3. 実装
システムの概観を図 4 に示す．

サービスのことを言う．全体的には大規模開発であったと( 1 ) ユーザがパラメータを選定してブラウザ上の Blocklyしても少人数のチームで全員が１つのサービス全てを把握でプログラミングする．Blockly の Workflow を実行できるようにモジュール化されている．モジュールとしてすることにより，サーバ上でパラメータを記述したサービスを扱うことで各サービスの開発者や運用者の把握ファイルが生成される．

すべき部分を限定的にし，生産者の理解力を高めることが( 2 ) そのファイルをウェブブラウザを通じてダウンロードでき，結果として生産性の向上を望むことができる．図 3

し，Unity を通して AR コンテンツにパラメータを組にマイクロサービスを Blockly で記述した例を示す．ここみ込む© 2019 Information Processing Society of Japan518

情報処理学会 インタラクション 2019
IPSJ Interaction 2019

2B-13
2019/3/6

図 4 システムの概念図( 3 ) パラメータが組み込まれた AR コンテンツを Hololens
図 5に送り込む

Blockly による設定の一例

これにより，たとえプロのように熟練していなくとも，比較的専門知識なく AR コンテンツのパラメータを容易に調整できるようになる．なお，現状では，(2) の作業におけるダウンロードの作業は，ウェブブラウザに対する手作業が必要となっている．
図 6 出力ローカルファイル

3.1 Blockly
本研究ではマイクロサービスのための拡張を加えたBlockly に対して，新たに AR パネルを実装した．このパネルは，Unity 上のコンテンツの設定に用いるパラメータ設定ファイルを作成する．このパネルにユーザが Blockly内で引数を与えると，Blockly のサーバ側で 1 つのテキストファイルを出力される．このテキストファイルは，Blockly上のダウンロードボタンによりダウンロードすることが可能となる．マイクロサービスとして構築されたコンテンツ

図 7 Unity のコンテンツ作成画面であるため，ビジュアルプログラミングフレームワークとして Workflow システムへの操作を簡易化し，直感的な UIことにより，そのローカルファイルを読み込み Unity 内ので利用できるコンテンツの構築をしている．

パラメータを変更し，それをもとにコンテンツを起動させ実際に Blockly 内でパラメータを設定している画面が図

5，ダウンロードするパラメータ設定ファイルの中身が図 6る．これにより Unity 側で手作業で position や rotationの変更をする必要がなくなっている．

である．この例では，作成する AR コンテンツに位置のパUnity 側でコンテンツを起動している画面が図 7 であラメータ（position_x，position_y，position_z）と回る．なお，ここではわかりやすさのため点と点のつなぎ方転のパラメータ（rotation_x，rotation_y，rotation_z）を面の中心どうしのつなぎとしている．にそれぞれ，1 から 6 の値を与えている．そのため，たとえば，Unity 上のコンテンツでは，AR により道案内をするコンテンツで案内の矢印の位置をこれらのパラメータで設定することを想定している．

4. 関連研究Web 上で，ビジュアルなアプリケーション開発環境を実現した例としては WAD(web application descriptor)[3]が，挙げられる．WAD は，MVC モデルを拡張したモデル

3.2 Unity
3.1 節の Blockly によって作成されたパラメータ設定として Web アプリケーションをオンラインで実装する環境を WASTmenu として提供しているが，範囲が Web

ファイルは，ユーザが入れた設定，すなわち引数を 1 行に上に限定されるため，ローカルアプリケーションに適用すまとめたものである．この設定ファイルを使うコンテンツる本研究に応用することは難しい．

を Unity で作成する．AR による道案内コンテンツというBlockly については初等教育用の簡易型，対話型プログものを想定し，Unity では「矢印が目標の方向に伸びていラミング環境として研究が進められており，例えば Turbak

くコンテンツ」を想定して作成した．このコンテンツは先らは Blockly が初心者をプログラミングに導入するため述のローカルファイルを手作業で Unity の Assets に置くに使用されている例を挙げている [9]．また，Marron ら© 2019 Information Processing Society of Japan519

情報処理学会 インタラクション 2019
IPSJ Interaction 2019は JavaScript と Blockly による分散型制御，および対話型ユーザインターフェイスを開発するためのアプローチを挙げている [7]．これらの研究が一般のプログラムを対象

2B-13
2019/3/6[6][7]としているのに対して，本研究では，AR コンテンツの開発用途で Blockly を用いる点で異なっている．

AR の産業用での応用例としては例えば，Vuforia Engine*1 を 用いることで，CAD などで作成した物体をマークを[8]つけて AR オブジェクトを配置し，それをスマートフォンなどで重畳表示させることにより，危険な機械や手術などにおけるトレーニングとして AR を使うことができる．
過去の注視に関連する研究は，例えば三浦の研究では通[9]Neil Fraser: Ten things we’ve learned from Blockly, 2015
IEEE Blocks and Beyond Workshop, 49–50, 2015.
Assaf Marron, Gera Weiss and Guy Wiener: A Decentralized Approach for Programming Interactive Applications with JavaScript and Blockly, the 2nd edition onProgramming systems, languages and applications basedon actors, agents, and decentralized control abstractions,
59–70, 2012.
Michael E. Porter and James E. Heppelmann: Why Every Organization Needs an Augmented Reality Strategy,Harvard Business Review 95, No.6, 46–57, 2017.
Franklyn Turbak, David Wolber and Paul MedlockWalton: The Design of Naming Features in App Inventor
2，IEEE Symposium on Visual Languages and HumanCentric Computing, 129–132, 2014.

行車両の多い街中の探索歩行における注視傾向の研究として，空間認知においての危険回避と目的地への最適パスの探索の注視の関連を調査し [4]，また Young らの研究ではスマートフォンの AR によって注視の傾向による広告性能の効果がどのくらい変わるかの研究がされている [5]．今後，これらの研究を参考に，提案システムを利用することで，AR における注視など生活空間でのゴーグル型デバイスによる AR との共存性について研究していく予定である．

5. おわりに本研究では，マイクロサービス拡張の Blockly と Unityを用いて，簡易に AR アプリケーションのパラメータを調整するための開発環境を提案した．Web 上で動作するのBlockly 内でパラメータを調整できるため，直感的に ARアプリケーションを作成することができる．今後の課題点として，Blockly 上で作成したパラメータファイルあるいはコードの自動取り込みとローカルアプリケーションへの自動適用が挙げられる．
謝辞 本研究は内閣府の総合科学技術・イノベーション会議の戦略的イノベーション創造プログラム（SIP）「革新的構造材料」（管理法人：JST）の支援により実施した．
参考文献
[1]

[2]

[3]

[4]

[5]

*1

佐久田博司, 長谷川大, 源聡: マイクロサービスによるMaterials Integration 入門, ブルームソフト, ISBN:978-49910266-0-7, 2017.
松澤芳昭, 酒井三四郎: ビジュアル型言語とテキスト記述型言語の併用によるプログラミング入門教育の試みと成果, 研究報告コンピュータと教育 (CE), Vol.2013-CE-119,
No.2, 1–11, 2013.
田井秀樹, 根路銘崇, 安部麻里, 堀雅洋: モデルに基づく
Web アプリケーション開発支援環境, 情報処理学会論文誌, Vol.44, No. 6, 1498–1508, 2003.
三浦金作: 車両通行の多い街路空間での探索歩行時の注視傾向について, 日本建築学会計画系論文集, Vol.81, No.722,959–969, 2016.
Young-geun Kim and Won-jung Kim: Implementation ofAugmented Reality System for Smartphone Advertisements, ” International Journal of Multimedia and Ubiquitous Engineering, Vol.9, No.2, 385–392, 2014.
https://vuforia.com/engine© 2019 Information Processing Society of Japan520