Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Avatar for Atsushi Nakatsugawa Atsushi Nakatsugawa PRO
February 19, 2018
Technology
3.1k
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コーディングエージェントとCodeRabbitでループエンジニアリング
Avatar for Atsushi Nakatsugawa moongift
PRO
0
22
AIコーディングの次。コードレビューと理解負荷を解消して組織の開発生産性を高める
Avatar for Atsushi Nakatsugawa moongift
PRO
2
2.9k
AI駆動開発は個人技からチーム戦へ：組織でAIを使いこなすための実践設計
Avatar for Atsushi Nakatsugawa moongift
PRO
0
670
AI時代の開発生産性は、個人技からチーム設計へ
Avatar for Atsushi Nakatsugawa moongift
PRO
6
3.9k
コーディングだけ速くとも意味がない。自動レビューによる開発の高速化
Avatar for Atsushi Nakatsugawa moongift
PRO
0
120
AI 支援研究開発におけるコードレビューの役割と限界
Avatar for Atsushi Nakatsugawa moongift
PRO
0
190
個人AIからチームAIへ：開発における品質と生産性の再設計
Avatar for Atsushi Nakatsugawa moongift
PRO
0
530
AI活用の格差をなくす：チーム全体のAI開発生産性を底上げする方法
Avatar for Atsushi Nakatsugawa moongift
PRO
1
770
CodeRabbit 2026年04月アップデート
Avatar for Atsushi Nakatsugawa moongift
PRO
0
110

Other Decks in Technology

See All in Technology
なぜ「決定性」が 決定的に重要なのか？ Durable Execution 基盤の数理的理解 #serverlessjp / ServerlessDays Tokyo 2026
Avatar for y_taka_23 ytaka23
0
260
映像変換サーバーなしで端末内でHLSを生成してライブ配信
Avatar for HikaruSato hikarusato
0
120
AIエージェントを最高のパートナーに育てる方法｜評価と判断軸を育てる5つのステップ
Avatar for 青木 晃一｜AI・Copilot活用 koichiaoki
1
140
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
12k
株式会社シーエーシー　エンジニア向け会社紹介資料
Avatar for 株式会社シーエーシー cac
0
57k
積み重なった技術負債への挑戦 〜初手としての全社ゴト化〜
Avatar for PERSOL CAREER Dev | techtekt techtekt
PRO
0
1.3k
例外の正しい扱い方 そのエラー try-catchして大丈夫？
Avatar for Watanabe Jin jinwatanabe
3
510
顧客に向き合う開発組織へ。リアーキテクチャとフィーチャーチーム化で挑む組織改革
Avatar for セーフィー safie
0
2k
iOSDC Japan 2026 day1 TrackC 10:50
Avatar for feedtailor feedtailor
1
160
Claude Codeを「使うほど育つ」AI秘書にするノウハウ
Avatar for みのるん minorun365
PRO
30
26k
ADKで始める業務改善 - AIエージェント開発時の考えと設計
Avatar for Kazuki Hara harappa80
2
160
AgentCore Runtime上にAgentic Coding基盤を構築・展開する際の設計ポイントと限界点 / Design considerations and limitations when building an agentic coding platform on AgentCore Runtime
Avatar for Har1101 har1101
4
210

Featured

See All Featured
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.4k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
1.9k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
310
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
409
67k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.6k
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.3k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
430
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
5
660
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
540

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で！