Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wikitudeを使ったMonaca ARアプリについて

Avatar for Atsushi Nakatsugawa Atsushi Nakatsugawa PRO
February 19, 2018
Technology
3k
0

Wikitudeを使ったMonaca ARアプリについて

Monaca UG OSAKA #2 ~AR/VR特集！~ - connpass - https://monacaug.connpass.com/event/77859/

の発表資料です

Avatar for Atsushi Nakatsugawa

Atsushi Nakatsugawa PRO

February 19, 2018

More Decks by Atsushi Nakatsugawa

See All by Atsushi Nakatsugawa
AI時代の開発生産性は、個人技からチーム設計へ
Avatar for Atsushi Nakatsugawa moongift
PRO
5
2.6k
コーディングだけ速くとも意味がない。自動レビューによる開発の高速化
Avatar for Atsushi Nakatsugawa moongift
PRO
0
81
AI 支援研究開発におけるコードレビューの役割と限界
Avatar for Atsushi Nakatsugawa moongift
PRO
0
150
個人AIからチームAIへ：開発における品質と生産性の再設計
Avatar for Atsushi Nakatsugawa moongift
PRO
0
450
AI活用の格差をなくす：チーム全体のAI開発生産性を底上げする方法
Avatar for Atsushi Nakatsugawa moongift
PRO
1
620
CodeRabbit 2026年04月アップデート
Avatar for Atsushi Nakatsugawa moongift
PRO
0
89
AI時代のIssue駆動開発のススメ
Avatar for Atsushi Nakatsugawa moongift
PRO
0
530
プロダクト開発の品質を守るAIコードレビュー：事例に見る導入ポイント
Avatar for Atsushi Nakatsugawa moongift
PRO
1
9.3k
AIで急増した生産量の荒波をCodeRabbitで乗りこなそう
Avatar for Atsushi Nakatsugawa moongift
PRO
1
97

Other Decks in Technology

See All in Technology
AI Agent を本番環境へ―― Microsoft Foundry × Azure Serverless で作る Enterprise-Ready な基盤
Avatar for Tatsuro Shibamura shibayan
PRO
1
310
VPCセキュリティ対応の最新事情
Avatar for nagisa_53 nagisa53
1
320
SoccerMaster: A Vision Foundation Model for Soccer Understanding
Avatar for Kazuyuki Miyazawa kzykmyzw
0
180
OpenTelemetryにおけるGoのゼロコード・コンパイル時計装について #fukuokago
Avatar for quiver quiver
0
300
システム監視入門
Avatar for gr1m0h grimoh
1
470
「守りたい体験」を渡すだけで E2E を生成させられるようになった話
Avatar for May hinac0
2
1.1k
キャリアLT会#3
Avatar for Beli beli68
2
260
穢れた技術選定について
Avatar for watany watany
20
6.2k
ダッシュボード"開発"について 〜使われるダッシュボードのつくりかた〜
Avatar for きみちゃん kimichan
0
220
41歳でAWSが好きすぎてITエンジニアになったおっさんの話
Avatar for Yuuki Yamashita yama3133
1
770
セキュリティ研修【MIXI 26新卒技術研修】
Avatar for MIXI ENGINEERS mixi_engineers
PRO
2
180
書籍セキュアAPIについて
Avatar for RiiiM(りむ) riiimparm
0
320

Featured

See All Featured
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
274
21k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
118
120k
Side Projects
Avatar for Sacha Greif sachag
455
43k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.1k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
260
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.5k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
64
56k
Design in an AI World
Avatar for tapps tapps
1
270
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.3k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.1k
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
190

Transcript

  1. PAGE DAY 2018/02/16 X / 12 # MOONGIFT #MONACA_UG Wikitudeを使ったAR

    Monaca アプリについて

  2. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 自己紹介

    @goofmint fb.me/goofmint 中津川 篤司 MOONGIFT 代表取締役 オープンソース・ソフトウェアを毎日紹介 https://www.moongift.jp/ Monaca UG メンバー ニフクラ mobile backend エバンジェリスト

  3. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 Wikitude

    ? 商用ARエンジン Cordova に強い = Monaca に強い
 その他 Unity / Titanium / Xamarin / iOS / Android 日本ではグレープシティ社が販売、サポート

  4. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 対応しているARの種類

    インスタントトラッキング 物体認識 画像認識 ロケーション

  5. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 画像認識

    画像ターゲットを登録 その画像ターゲットをカメラで写す マーカー（3Dモデル/HTML/テキスト/動画など）を表示 データはアプリ内部、またはクラウド認識

  6. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 ロケーション

    位置情報を指定 デバイスをその方向に向ける マーカー（3Dモデル/HTML/テキスト/動画など）を表示 データはローカル認識のみ

  7. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 物体認識

    動画からターゲットを生成 オブジェクトを認識してマーカーを表示 ローカルまたはクラウドのみ

  8. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16

  9. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 インスタントトラッキング

  10. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 デモ

    http://www.wikitude.com/external/doc/samples/fire_truck/ http://docs.grapecity.com/help/wikitude/wikitude-sdk-ios/targetimages.html

  11. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 マーカーレスARについて

    ARKit (iOS) / AR Core (Android) が統合されています 元々はSLAM (Simultaneous localization and mapping) を開発 SMART = ARKit / AR Core / SLAM を統合

  12. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 認識オブジェクトについて

    FBX をWikitude 3D Encoderで変換 Wikitude Studio (クラウド) でトラッカーを作成

  13. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 Monacaでの使い方

    1 app.wikitudePlugin = cordova.require( “com.wikitude.phonegap.WikitudePlugin.WikitudePlugin" ); app.wikitudePlugin.isDeviceSupported( app.onDeviceSupported, app.onDeviceNotSupported, [“2d_tracking"] ); app.receivedEvent('deviceready');

  14. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 Monacaでの使い方

    2 onDeviceSupported: function() { app.wikitudePlugin.loadARchitectWorld( app.onARExperienceLoadedSuccessful, app.onARExperienceLoadError, “www/ar.html", [ “2d_tracking"], {“camera_position": "back"} ); },

  15. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 <!DOCTYPE

    html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=“Content-Type" content="text/html; charset=UTF-8"> <script src="https://wikitude.com/libs/architect.js"></script> <script src="js/ade.js"></script> <script src="js/ar.js"></script> </head> <body> </body> </html> Monacaでの使い方 3

  16. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 //

    作成したWTCファイルをトラッカーに設定 var tracker = new AR.ClientTracker("assets/tracker.wtc"); // 表示する3Dモデルを指定 var modelDragon = new AR.Model("assets/dragon_floating.wt3", { // 表示する大きさの指定 scale: { x: 0.0007, y: 0.0007, z: 0.0007 }, // 表示位置の調整 translate: { x: 0.0, y: 0.0, z: 0.0 }, // 3Dオブジェクトの角度調整 rotate: { roll: 25, tilt: -100.0, } }); // 2つの情報を設定 var trackable = new AR.Trackable2DObject( tracker, "*", { drawables: { cam: [modelDragon] }, } ); Monacaでの使い方 4

  17. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16

  18. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 コード

    https://github.com/goofmint/Wikitude2DTrackingDemo

  19. PAGE X / 18 # MOONGIFT #MONACA_UG DAY 2018/02/16 まとめ

    WikitudeはJavaScriptでARが実現できます (要Cordovaプラグ イン) 最新版では ARKit / AR Core も利用できます 表示できるのは 3D / 画像 / HTML / 動画 お値段は…Webで！