close
プログラミング クラウド Microsoft Azure 情報処理資格 基本情報技術者 IT基礎 応用情報技術者 開発・設計方法 オブジェクト指向 内定者・新人研修 プログラミング基礎 アルゴリズム コンピュータ数学 内定者研修 新人研修 ヒューマンスキル プロジェクトマネジメント プレゼンテーション リーダーシップ 組織マネジメント ネゴシエーション ロジカルシンキング Java UI/UX HTTP JavaScript基礎 情報処理資格 ネットワークスペシャリスト ネットワーク インターネットルーティング応用 IPアドレス データベース応用 SQL応用 パフォーマンスチューニング データベース設計 ER図 概念設計(データベース) 論理設計(データベース) IT資格 Linux基礎 OS・システム基盤 セキュリティ TCP/IP OSI参照モデル データベースセキュリティ ファイアウォール 標的型攻撃 SQLインジェクション ネットワーク基本設計 CCNA Cisco プロジェクトマネジメント資格 情報処理資格プロジェクトマネージャ 情報処理安全確保支援士 人事給与 財務会計 管理会計 簿記 生産管理 在庫管理 ERP バランススコアカード 情報処理資格 ITアーキテクト 情報処理資格 ITストラテジスト 情報処理資格 ITサービスマネジメント 情報処理資格 システム監査 PMBOK® PMP® プロジェクト計画 WBS リスクコントロール ITIL ITサービスマネジメント 要求定義 要件定義 見積手法 ビジネスインダストリ 業種・業界知識 業務知識 提案力 ソフトウェアテスト基礎 情報処理資格 データベーススペシャリスト ハードウェア基礎 外部設計(基本設計) 内部設計(詳細設計) データベース基礎 SQL基礎 RDBMS 物理設計(データベース) C++ Ruby MVC基礎 Webアプリケーション開発 JavaEE Javaプログラミング応用 フレームワーク MVC応用 Spring フレームワーク ソフトウェアテスト応用 テスト手法 JUnit スマートフォンアプリ開発 Androidアプリ開発 C# 基礎 C# 応用 負荷テスト Javaプログラミング基礎 ソフトウェアテスト コーチング メンタリング HTML/CSS サーバー構築 仮想化技術 KVS (NoSQL) アジャイル スクラム ファシリテーション C言語 ITパスポート JSTQB データサイエンス 単体テスト ユニットテスト キャリアアップ インターネットルーティング基礎 パケット解析 LAN構築 データベース データサイエンティスト トレンド 障害対応 インフラ監視 HTTP/2.0 コンピュータサイエンス VPN ネットワーク物理設計 データベース障害 JavaScript モダンJS (Modern JavaScript) 応用 MVS応用 バックアップ/リカバリ 分散処理 Hadoop Hive Python AI 深層学習(DeepLearning) CentOS Linux応用 Zabbix シェルスクリプト Infrastructure as Code Windowsサーバー基礎 内部設計 Docker DevOps Windowsサーバー応用 NginX chef Ainsible ロジカルライティング R テスト自動化 Jenkins Git 継続的インテグレーション (CI) バージョン管理 Vagrant 要求分析 Redmine 継続的インテグレーション(CI) 継続的デリバリー (CD) ヒューマンリソース管理 Web API マイクロサービス コミュニケーション 業務知識/業界知識 マーケティング 語学 AWS 法務 IoT ビジネスマナー OJT 業務効率化 表計算ソフト オフィスソフト コンプライアンス フロントエンド Subversion PHP 関数型プログラミング Laravel モダンJS (Modern JavaScript) 基礎 Android Studio 機械学習 iOSアプリ開発 ぷプログラミング React 次世代高度IT人材 共創 IPA Raspberry Pi Xamarin スクリプト言語 GoF CUI VBA 資格 ビジネス文書 jQuery 研修参加レポート マネジメント OSPF テーブル設計 アンガーマネジメント クリティカル・シンキング PDU 経営改善 Pマーク 問題解決技法 サイバー攻撃 エンジニア 参加してみた エンゲージメントマネジメント 労働関連法 新人育成 ネットワーク構築 情報セキュリティマネジメント デザインパターン リファクタリング マルチスレッドプログラミング ベンダーコントロール Modern JavaScript 冗長化 VLAN インフラエンジニア チームビルディング テストケース リーダブルコード セキュリティ入門 ネットワーク入門 Node.js npm gulp ビルドツール Python入門 冗長化入門 インフラ実機演習 プロジェクト管理 Active Directory ネットワーク管理 コンテナ 正規化理論 Haskell 品質管理 OpenStack シンギュラリティ DBA中級 プロトコル UX 基本設計 FinTech トラブルシューティング 並列処理 見える化 PMO ロジカルコミュニケーション Deep Learning インデックス設計 超上流工程 BGP Excel C-CENT Selenide プライベートクラウド アセンブラ コンピュータ基礎 工数見積 CCENT 法律知識 失敗から学ぶ プロジェクト失敗事例 PDCA プログラミング入門 非エンジニア向け 4Biz DNS セルフマネジメント 片付け術 サーバーダウン サーバー タイムマネジメント GO言語 プロダクトマネジメント プロダクトマネージャ LVS ロードバランサー 負荷分散 仮想通過 犯罪心理学 情報漏えい SEカレッジ導入事例 IT研修制度を聞いてみた CentOS7 開発環境構築 数字力 財務 IT人材 UI Machine Learning Go言語 (golang) データマイニング 統計学 新人教育 やり直し数学 RDB つながる工場 モチベーション WebSocket WebWorker HTML5 CSS3 Bootstrap 微分・積分 システム設計 決断力 LAMP環境 教育研修担当者向け ルーティング Linux入門 図解術 目標設定 試験対策 インタビュー技法 Vue.js ブロックチェーン DHCP 仕掛け学 BSC 財務諸表 自己分析 RIP スタティックルート バッファオーバーフロー DoS攻撃 システム開発 Wireshark パケットキャプチャ 管理職研修 部下育成 文章力 情報システム部門向け プロジェクトリーダー プロジェクトマネージャ 塗り絵 リスク管理 法改定 会社の仕組み Chainer AI人材 会話術 テスト技法 会社規模199名まで 会社規模49名まで 会社規模99名まで アプリ開発 サーバサイドJava 営業知識 Cloud 栄養学 基本コマンド ウォーターフォールモデル ヘルスケア 論理設計 ニューラルネットワーク ハンズオン UML 顧客ヒアリング マウスで学ぶ Apache EC2 Lightsail M5Stack DevSecOps プロジェクト成果 画像認識 チャットポット コマンド レビュー 基本用語 自動構築 LPIC-1 サーバーサイドJavascript キャリア形成 ワークライフバランス インバスケット テック用語 GitHub Windows エディタ 教養 令和時代 RESTful API 物理設計 会社規模300名以上 データモデリング サーバーサイドJava Webサーバー基礎 Webサーバー応用 Watson IBMWatson Learning Topics OS モバイル コンテスト トレーニング手法 アーキテクチャ 人材モデル インフラ CI/CD Infrastructure as a Code チーム開発 制度づくり Special_Intro AI市場分析 研修ロードマップ 仕事術 デジタルトランスフォーメーション 財務分析手法 情報整理 PowerPoint 新しい研修 オンライン研修 見どころ紹介 統計分析 ディープラーニング G検定 情報処理技術者試験 販売管理 C# テスト計画 Linuxサーバー WEBサーバ構築 http/2 Postfix イーサリアム プロジェクト・メンバ 正規化 パケット実験 作業分解 トラブル調査 ネットワーク設計 Windows server 2016 ネットワーク機器 DX 管理職 最新動向 ポストコロナ時代 IoTデバイス マイコンボード センサ サーバー仮想化 仮想ルータ WAN インターネットVPN 若手エンジニア ITプロジェクト 人事面談 DX人材育成 Java基礎 ZAP 脆弱性診断 NWサービス構築 イノベーション・マネジメント ネットワークセキュリティ ストレッチ Google Cloud Platform 不動産業界 テレワーク(WFH) ドリル GCP ( Google Cloud Platform ) システム業界 PMS テレワーク ビッグデータ NoSQL OWASP CentOS8 ネットワーク技術 データ分析 デザインシンキング 保険業界 会議リーダー システムエンジニア 段取り術 プロジェクト原論 文章書き換え術 ノーコード No Code MongoDB Redis Cassandra 運用管理 Windows10 仮想マシン リモートワーク 働き方 生産性 IPSec Office セキュリティマナー ソフトウェア・レビュー ライフハック 新しい働き方 エクササイズ ビジネスモデルキャンバス 状況認識 ストレス 必須コマンド Web 今日わかる きほん 状況把握 意思決定 心の健康 IT書籍 書籍紹介 営業マン 類推法 クラス プロセス指向 PdM 共用 ウェビナーレポート 地方創生 GraphQL CSS OWASP ZAP セキュリティマネジメント 問題解決 ソフトウェア 新技術 雑談力 テスト見積もり Scala Go Rust Relay Cloud AI Kaggle ITエンジニア フレッシャーズ 経営戦略 事業戦略 マインドフルネス 基本情報技術者試験 ニューノーマル プロジェクト会議 メソドロジ 講師インタビュー システム障害 販売管理システム VMware セキュリティ事例 ケーススタディ インターネット通信 ビジネスマン 品質向上 提案 ロジック図解術 バーチャルマシン 対策事例 アスリート 国の動向 アンチパターン リモートアクセス 脳ヨガ 自律神経 整え方 組み立て方 コミュニケーション術 リーダー 新人 知っておきたいこと 対人能力 洞察力 一文作成 サッカー業界 グループワーク マネジメント手法 IT業界 Octave セキュリティ管理 IT ネットワーク機器の特徴 ネットワーク機器の仕組み 基本のキ プレゼンテーションの組み立て方 伝え力 試験合格後 時短術 作成のコツ 導入事例 メンタルマネジメント メンタルヘルスケア DXプロジェクト プログラミング教育 プログラミング的思考 子供向けプログラミング データ定義言語 DDL モダンWebアプリケーション ドキュメント作成 Docker Compose Docker Hub AR VBAエキスパート試験 Azure メディア掲載 サーバーアーキテクチャ データ操作言語 DML NewSQL ソフトウェアセキュリティ 数学 VR アパレル業界 Kubernetes Power BI Android プロダクトオーナーシップ プロダクトオーナー 内製化 情報システム部門 Z世代 クラウドネイティブ 技術教育 Windows server 2019 XSS CSRF クリックジャッキング ビジネスパーソン VPC IAM AWS Fargete ECS 問題発見力 問題分析力編 Access 流通業界 金融業界 ネットワーク設定 トラブル対応 評価 ソフトウェア品質 クレーム対応 呼吸法 戦国武将 エンジニアリング 組織論 SpreadSheet GAS ゼロトラスト Express 3D Arduino 業務分析法 業務構造 経営者 ストレングスファインダー 発注者視点 情報セキュリティ 顧客体験 エンターテインメント お笑い オンライン学習 オンライン教育 学校教育 情報化社会 スポーツ デジタル戦略 ITフェスティバル GoogleSpreadSheet GoogleAppsScript(GAS) SQL 問題分析力 メタバース NFT 資産形成 資産運用 Typescript WebXR 講師が注目する技術 プラクティス ローコード ホワイトハッカーに学ぶ Google Cloud LinuC レイヤ3スイッチ ホワイトハッカー ハッキング 脆弱性 ビジネススキル キャリア戦略 NFTアート リテンションマネジメント ゲーム制作 トラブル防止 システム外注 食事メソッド コード ソフトウェア設計 ドメイン駆動設計 人事評価制度 報告書 稟議書 契約書 Rails 業務自動化 価値 原則 睡眠 IT用語 DBA 炎上対策 2022年版 パフォーマンス パフォーマンス向上 Kubernetes入門 実践 チューニング 2020年代 2010年代 リモートアクセスVPN VPN構築 Railsの教科書 CCNA試験 ウェビナー 老後 人生設計 OSPF入門 Ruby on Rails 脆弱性対策 説明上手 説明力 システム障害報告 システム障害解決 いまさら聞けない 仕掛けから考える ネットワーク基礎 社会人 基礎知識 今日から変わる 睡眠マネジメント 仕事の成果を上げる 出るとこだけ 情報セキュリティマネジメント試験 狩野モデル 独学 若手向け 若手に受けてほしい ルーティング基礎 ルーティング実践 ネットワークエンジニア はじめての サイバー攻撃対策 2022 機械学習エンジニア 実演 AI基礎 Java開発 HTML Web基礎 JavaScriptフレームワーク Vue.js入門 明日から使える 最新テクノロジー 生産性向上 組織開発 PMBOK®第6版 リスクマネジメント 結合 副問合わせ Linux 実践演習 シェルスクリプト入門 マネジメント変革 押さえておきたい DHCPサーバー DNSサーバー VLANスイッチ レイヤ3 LAN NW技術 ローカルエリアネットワーク 知っておきたい 基本文法 Windowsプログラミング ネットワーク全体像 Git入門 GitHub入門 Pyhtonライブラリ プロジェクト QCD管理 Ruby入門 オブジェクト指向言語経験者向け PMBOK®ガイド第7版 ディープラーニング入門 グラフデータベース LinuC入門 サーバサイドJava入門 基礎編 応用編 AWS入門 AWSサービス ファイアウォール構築 Docker入門 データベース設計技術 オンプレミス オンプレ オンプレAD Windows Admin Centre データベース概念設計 Javaプログラミング 1日プログラミング特訓 AI開発 微分 線形代数 行列 統計検定 統計検定準拠 MySQL データベースメンテナンス データベース論理設計 ファイアウォール入門 副問合せ 顧客の売上アップ 売上アップ Azure入門 自分でつくる Docker実行環境 午後アルゴリズム問題 解き方のコツ FE シェルスクリプト実践 仮題で学ぶ 課題で学ぶ 現場 コミュニケーション管理 DX最新動向 DX推進人材 DX人材 Windows server Django データベース連携 インフラエンジニア最新動向 なんとなくわかるからもう一歩 アルゴリズム入門 アルゴリズム基礎 プログラム ハードウェア Javaアルゴリズム 1日特訓 現場でよく使う Rails入門 データベース障害復旧 Google Cloud Vision AI Dialogflow Cloud Functions Pythonプログラミング 社内資格制度 今日から使える 「仕掛け」から考える ITベンダー 診断ツール Webセキュリティ Webセキュリティ基礎 新任PM 新任PL テスト NW機器 独学できる Windows Admin Center プログラミング体験 Java開発者のための C#開発 RPA RPA入門 NWエンジニア NFT入門 だれにでもわかる サーバサイドJavq サーバサイドJava基礎 サーバサイドJava応用 炎上しないための AWSサーバ プログラム基礎 アセンブラ基礎 人工知能 ICT 課題解決 自律性 システム開発基礎 プロジェクト基礎 Webアプリ パターン別 アプリケーション開発 エンジニア初級 2022年からの 実用的な 発注 受け入れ Microsoft Office AI最新動向 良いSQL 悪いSQL データベース管理 インデックス Webの基本 NW管理 C#開発者のための ルータ TCP/IP通信 積分 数学基礎 NWセキュリティ 基本パターン JavaScriptでつくる DX時代 デザインシンキング入門 データ構造 PHPフレームワーク Linuxで学ぶ 速習 VLAN基礎 ゼロからはじめる jQuery入門 JavaScriptドリル Ruby on rails基礎 テストツール リレーショナルデータベース はじめて学ぶ データベースのしくみ 人生100年時代 令和 デザイン デザイン入門 現場ですぐに使える テーブル設計実践 情シス 外部設計 外部設計基礎 小規模ネットワーク Linux必須コマンド 違いを知ろう AWS CLI AWS CLI入門 CloudFormation NW設計 親子で作る メタバースプログラミング サーバー仮想化入門 DNSサーバー構築 秋冬版 IoT基礎 新人PM マネジメント研修 人を動かす 仕組みづくり イノベーション・マネジメント入門 心理的安全性 チーム チーム運営 3時間で学ぶ OS基礎 サーバー基礎 情報漏えい対策 プロジェクトマネジメント入門 組織改革 やさしいチームのつくりかた 簿記から学ぶ ビジネス基礎 データベースマネジメント 乃木坂46 乃木坂46に学ぶ マーケティング論 なっとく! LinuCレベル1 101試験 LinuCレベル1 101試験 ファイルシステム ディスク管理 データ分析基礎 一発OKを引き出す 資料作成術 プレゼン資料 クラウドサービス NW NW構築 SQL入門 目標達成マネジメント マネジメント基礎 目標管理 行動分析学 人の動かし方 組織の動かし方 科学的な Tableau MongoDB基礎 IoT実践 データ収集 データ自動収集 データ管理 技術者 SEのための 論理的思考 PM PL アルゴリズム再入門 GoFデザインパターン オブジェクト指向未経験者向け 令和版 失敗事例から学ぶ データベース構築 原価管理 業務連動 Access基本操作 クエリ活用 フォーム作成 レポート作成 実務事例で学ぶ 実務 知識活用 ネットワーク管理コマンド PCスキル 最強の習慣 ストレスフリー 作業効率化 Windows 11 webサーバ カラダとココロ ハワイアンストレッチ 身体のケア ストレス解消 パワーアップ リフレッシュ 1日で習得する ユーザ視点で考える 今知っておきたい UX向上 ユーザエクスペリエンス ユーザ体験 比べて学ぶ 仮想化 仮想マシンとコンテナ データサイエンスプログラミング データ視覚化 オリンピックコーチが伝える セルフマネジメントメソッド セルフイメージ 仮想環境 仮想環境で学ぶ セキュリティ実践 サーバーセキュリティ オンライン攻撃事例 質問技法 SE JavaScriptだけでつくる バッチ処理 テストデータ作成 ストアドプロシージャ バッチ テストデータ 実践編 デザイン力 テレワーク時代 収納術 インテリア術 サイバーセキュリティ 無線LAN Wi-FI 人事 BGP入門 ルーティングプロトコル 文系でもわかる 統計学入門 IPv6 IPv6入門 IPv4 人材育成 人が育つ仕組み 売れる仕組み マーケティング入門 セールスパーソン セールスマネージャー セキュリティ対策 計画の立て方 脱TCP HTTP/3 HTTP/3時代 AWS認定資格 Amazon Web Services 作業自動化 顧客折衝 Webサーバー自動構築 JavaScriptコーディング JavaScriptコーダーのための エンジニアのための ここが危ない テレワークセキュリティ サイバー攻撃事例 相手が理解し納得できる プレゼン 図解活用術 図解活用 Webアプリケーション Webアプリケーションセキュリティ クロスサイトスクリプティング OSコマンドインジェクション PowerPointで作る 資料デザイン 見やすい資料 IT業界人 知っておくべき 目の疲れ 眼精疲労 新習慣 習慣 栄養 運動習慣 イノベーション IMS ISO56000 イノベーション・マネジメントシステム 顧客視点 デザイン思考 Excel初級編 オブジェクト指向基礎 Javaでオブジェクト指向 Vue3 Vueアプリケーション FE試験 リーン開発 情報システム 情報システム開発 開発手法 C#プログラミング 応用情報技術者試験 AP AP試験 情報漏えい事例 心理学 E-R図 PMBOKから学ぶ 新人エンジニア 0年目エンジニア Webサービス Webサービス基礎 スコープ・ベースライン スコープ記述書 WBS辞書 ステークホルダ 3Dオブジェクト 3Dプログラミング canvas WebGL Three.js 3D描画 Pythonによる ローコードAI開発 Pandas scikit-learn Pycaret データ前処理 AIエンジニア Windows server基礎 攻撃対策 攻撃手段 マルウェア マルウェア対策 攻撃監視 Power BI Desktop BI ERD SQLマスター SQL実践 特訓講座 Google Apps Script AWSベースサービス Amazon ECS Amazon Elastic Container Service リーダーが知るべき Dockerビルド Docker応用 Docker構築 自動ビルド 伝達力 プランニング ネットワーク仮想化 ストレージ仮想化 達意の文章 書く力 GCP GCP入門 クラウドサービス基礎 伝わる文章 Cloud IAM Cloud Pub/Sub GCP応用 GCPリソース連携 TCP/IPプロトコル Webページ作成 コーディング NW全体像 NW機器の仕組み NW機器の特徴 つながりで理解できる マイクロサービスアーキテクチャ RESTfulアーキテクチャ Web API設計 Web技術 Web API実装 無線LAN基礎 体調快調生活 酸素不足 ITキャリア アプリケーション登録 システム基本設計 システム設計入門 PoC 成果定量化 プロジェクトアンチパターン 要求管理 IoT人材 心理的安全性の高め方 webサイト webサイト制作 タイムマネジメント原理原則 時間管理 時間効率化 時は金なり 時はいのち ECRSの原則 JavaScript実践 JavaScript基本コード NW基礎 サブネット分割 コンプライアンス基礎 情報管理 ハラスメント 社会人基礎 ハラスメント防止 ネットワークセキュリティ基礎 NWセキュリティ基礎 NoSQL基礎 3C分析 セールス 簿記3級 顧客理解 Scratch Scratchで学ぶ プログラミング未経験者向け クイックツアー プログラミング言語の歴史 IT入門 ITの歴史 Ciscoルータ IPv6移行 IPv6ルーティング 小規模NW いちばんやさしい HTML/CSS入門 正規形 JSP サーブレット WindowsServerでつくる IIS Microsoft DNS Server 工数 係数モデル FP法 ボトムアップ法 WBS法 1日で学ぼう PostgreSQL DBA必見 AI活用事例 Gitコマンド バージョン管理ソフト NW設定 RDBMS基礎 レビュー技法 リーディング技法 超特訓講座 Git中級 Git応用 CLI 契約 著作権 アプローチ手法 アプローチ ソフトウェア開発 ユーザ視点 UXデザイナー 最強の週間 IT基本用語 LinuC Lv.1 ロジカル ITパスポート試験 若手エンジニアのための ゼロトラストセキュリティ 派遣 業務請負 知的財産 トヨタ生産方式 リーン開発で学ぶ フロントエンド開発 新価値創造 新価値創造プロジェクト 事業開発 デジタル変革 DB リレーションシップ Tableau基礎 データ可視化 データ可視化ツール クエリ データ加工 Access活用 Webアプリケーションフレームワーク 社内プレゼン 健康 ダイナミックルーティング テスト自動化ツール Selenium フローチャート スタティックルーティング プログラミング言語 デジタルイノベーション なぜプログラムは動くのか 定量化 DXの前に知っておきたい IT技術 CSS3で学ぶ CSS基礎 Pythonを使った データ・サイエンティスト WebAPI マイクロ・サービス・アーキテクチャ RESTful 気を付けよう パソコン AWS CloudShell IaC IoT用語 トップアスリート NW管理コマンド ベンダー試験 ベンダー資格 データベース管理基礎 1日で学ぶ データベース管理者 基礎から始める メールサーバー インターネットサーバー Git実践 べからず集 ネットワーク管理プロトコル NW管理プロトコル ホスティング 10の力 Fargate AWS Fargate データ分析ツール ノーコード/ローコードで体験する Google Teachable Machine Google Colaboratory 新人PL 脆弱性診断ツール 時短テク 時短テクニック クラウドホスティング EBS EFS XAMPP TypeScriptで書く シェルスクリプトによる Webサーバー自動構築入門 Windows Serverでつくる DBセキュリティ 楽しく学ぶ TypeScriptコーディング シェルスクリプト作成 DOA Windows Server構築 TCP/IPモデル SQLの書き方 環境心理学 行動心理学 CIツール TortoiseGit MVCモデル JDBC モビリティ MaaS 移動革命 中小企業 デジタルマーケティング 量子コンピュータ 農業 農業DX リスキリング 学びなおし Gitコマンド実践 プロジェクト再生 プ譜 心構え プロダクト テックカンパニー 学習体験 スポーツIT DX実現 技術プレゼンテーション フィットネス イメージ構築 ロードマップ ファイル操作 AutoML アジャイル開発 Prometheus SIer SIerビジネス Unity キャリア設計 サバイブ戦略 資格試験 監視 主体性 思考法 哲学 コンポーネント指向 コミュニケーション戦術 自走型チーム Power Automate Power Automate for desktop SSL SSL(HTTPS)通信 HTTPS 個人情報保護法 創造的な仕事 Google Analytics アナリティクス オーラルケア スキルロードマップ ワークスタイル 組織づくり 勉強法 知的財産権 取引関連 新人向け 科目B HTTPクライアント PMBOK®第7版 システム導入プロジェクト ステートフル通信 プロジェクト戦略 統計 確率 関数 Word テクノロジー 温かいテクノロジー Salesforce バージョン管理システム  スクラム開発 AD AAD 新人指導 自律神経専門整体師 競技プログラミング アイディア タスク管 タスク管理 プロジェクト進行 モデリング技術 TCP コンテナ運用 仏教 LinuCレベル1 102試験 データ集計 パワークエリ ビジネスモデル ログ管理 社内会議運営 技術書 読書術 脳の生産性 行動力を高める 放送作家 セロトニン呼吸 自動化 幸せホルモン 手取りを増やす Webサイト構築 新NISA WAF ヨガ 若手社員 病態関連図 言語化 NISA ルーター設定 伝える技術 サーバー自動構築 営業向け 人事向け 会議 生成AI ヒアリング プログラミングの歴史 部下への目配り 部下への心配り ITエンジニアリング デザイン基礎 マクロ SNS SNS依存 イベント イベント演出論 データ基盤アーキテクチャ テレビの手法 サッカー ビジネスモデル仮説構築 セキュリティ芸人 教育 思考の言語化 日本史 歴史研究 コミュニケーション環境 チームの成果 チームワーク 人材育成計画 持続可能なチーム 自動アプリケーション登録 Google Cloudサービス GCP Cloud Pub/Sub 組織を動かす 法改訂 ICT基礎 レスポンシブ対応 持続可能なチームづくり 労働生産性向上 メンバー メンバー別コミュニケーション 成果を出す 研修 セキュリティ常識 スキル キーワード メリット 業界 分析 設計 新社会人 人的資本開示 語彙力 頻出キーワード Slim テクニック 構築 入門 導入の仕方 AI革新 Pythonドリル Spring Boot プロジェクト参画術 方法論 極意 見積もり 鍛え方 意思決定権 はじめの一歩 最新トレンド 道場 革新 未来予測 問いかけの方法論 ISMS PCI DSS ビジネス プログラマー セキュリティ認証 ダイアグラム思考 プログラミングテクニック 労働関連 dounyuu 導入 世界 探求 探究 勘所 QoS システム ネットワーク冗長化 メゾット ワークスタイル別 事例解析 仕組み 指導 初歩 大規模ネットワーク

WebXR を使って 15 行のコードで VR / AR を作ってみよう|WebXR を使ってメタバースを構築してみよう ~中編

calendar_month2022-03-22 公開
SEカレッジで登壇する講師に、得意分野の注目の技術を伺う「講師が注目する、トレンドになるテクノロジ」シリーズ。
今回は WebXR をはじめ VR / AR を使った、子ども向けプログラミング教育で先行する株式会社レベルエンター様に、メタバースで注目の WebXR について寄稿いただきました。
前編 / 中編 / 後編と分かれ、技術解説だけでなく、実行環境なしに簡単に試せるサンプルプログラムで実際にメタバースも構築できます!
この中編では WebXR を使ってたったの 15 行のコードで AR / VR を構築します!

前編の振り返り

前編記事では XR の概要や WebXR が HTML や CSS 、 JavaScrip などの一般的な Web 技術で構成されていることを解説し、 WebXR に関連する技術を紹介しました。

WebXR とは |WebXR を使ってメタバースを構築してみよう ~前編

今回の記事では WebXR の代表的なフレームワークである A-Frame を使って、コピーペーストで簡単に実装できる VR 、 AR のプログラムを紹介したいと思います。

A -Frameで基本のVRを作ってみた

15 行の HTML で動く VR サンプル

今回は A-Frame を使った簡単なサンプルとして森の VR 空間を生成し、 VR 空間に A-Frame にデフォルトで用意されている 3D モデルを表示したいと思います。

以下が今回のソースコードを実行した結果です。

森の VR 空間

A-Frame による VR 開発では HTML 、 JavaScrip を利用しますが、今回のような簡単なサンプルであれば、主なコーディング部分は HTML のみで完結できます。

まずは、今回作成する VR サンプルのコード全体を見てみましょう。


<!DOCTYPE html>
<html>
  <head>
    <!-- A-Frameと背景モジュールのCDN -->
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component@1.3.0/dist/aframe-environment-component.min.js"></script>
  </head>
  <body>
    <!--シーン(VR空間)生成 -->
    <a-scene>
      <!-- 背景設定(森) -->
      <a-entity environment="preset:forest"></a-entity>
      <!-- 直方体作成 -->
      <a-box position="0 1 -4" scale="1 1 1" color="red"></a-box>
      <!-- 球体作成 -->
      <a-sphere position="0 3 -4" scale="1 1 1" color="blue"></a-sphere>
    </a-scene>
  </body>
</html>

上記で全てとなります。コメントを除けば 12 ~ 15 行の非常にコンパクトなソースコードとなっています。

デバッグや実行する際にはローカルの Web サーバーを立てることが望ましいですが、ここではせっかく HTML だけで完結していますので、ブラウザで HTML ファイルを開いて実行しましょう

サンプルコードの解説

HTML の構成を見ていきます。

A-Frame の HTML は大きく分けて 3 つの構成に分類できます。

  • CDN でライブラリを呼び出し
  • シーン( VR 空間)の生成
  • VR 空間へのオブジェクト配置

CDN でライブラリを呼び出し

VR 空間生成機能の取得には、 JavaScript ライブラリを利用します。

今回のソースコードで呼び出しているライブラリは 2 種類あります。

一つ目は A-Frame で CDN から呼び出します。


<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

もう一つは、背景空間の生成をサポートするライブラリ aframe-environment-component を同じく CDN で呼び出します。


<script src="https://unpkg.com/aframe-environment-component@1.3.0/dist/aframe-environment-component.min.js"></script>

基本的に A-Frame 本体を CDN で呼び出すことで前準備は終了です。

後は、 A-Frame によって定義された機能を呼び出してコーディングを行います。

シーン( VR 空間)生成


<a-scene></a-scene>

A-Frame では VR 空間のことをシーンといい、 VR 空間内のプロパティなどは <a-scene> タグで設定を行います。

VR 空間上エンティティ(後述)の追加は、 <a-scene> タグ内で行います。

VR 空間へのオブジェクト配置

A-Frame は主にゲーム開発等で使用されているエンティティコンポーネントシステムアーキテクチャを備えたフレームワークです。

エンティティとはオブジェクトの情報を格納するコンテナです。エンティティにアタッチ(情報を取り付け)するオブジェクトの形状、大きさ、位置、色といった情報をコンポーネントと言います。

<a-scene> の中にエンティティの <a-entity> を配置すると、 VR 空間にエンティティに定義されたオブジェクトを生成できます。

今回のサンプルでは 3 つのエンティティを配置しています。

<a-entity>

<a-entity environment="preset:forest"></a-entity>

<a-entity> はコンポーネントを格納し、外観や動作、機能を提供します。

<a-entity> 自体には外観、動作、機能はなく、オブジェクトの情報を格納するコンテナオブジェクトとしてコンポーネントをアタッチし、オブジェクトをVR空間に適用できます。
今回はコンポーネントとして aframe-environment-component をアタッチし、森の背景を VR 空間に適用しています。

<a-box>

<a-box position="0 1 -4" scale="1 1 1" color="red"></a-box>

<a-box> は直方体の形状を VR 空間に配置するタグです。

付与できる属性として VR 空間上での座標を設定する「 position 」、直方体の大きさを設定する「 scale 」、直方体の色を設定する「 color 」があります。

「 position 」、「 scale 」属性は「 “x y z” 」の各軸ごとに値を設定できます。

「 color 」属性は「 red 」、「 blue 」といった基本色のプロパティがある他、 ‘#FFFF00’ などの CSS のカラーコードに対応しています。

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

<a-sphere>

<a-sphere position="0 3 -4" scale="1 1 1" color="blue"></a-sphere>

<a-sphere> は球体の形状を VR 空間に配置するタグです。

<a-box> と <a-sphere> はどちらも 3D モデルの基本的な形を提供する、 <a-entity> のジオメトリコンポーネントのプロパティであるため、「 position 」、「 scale 」といった属性を共通で利用できます。

以下のように宣言すると、エンティティから球体も呼び出せます。


<a-entity geometry="primitive: sphere; radius: 2"></a-entity>

DOM ( Document Object Model ) との併用

今回紹介したエンティティは DOM API と併用可能で、 id などを設定すると、 getElementByID()querySelector() などのメソッドで DOM を取得できます。

また、コンポーネントごとの属性は setAttribute() メソッドによって定義、更新が可能なため、クリックイベントなどで、色や座標の変更などが行えます。

A-Frame と AR.js で基本の AR を作ってみた

A-Frame の応用で作れる AR サンプル

AR.js は A-Frame や Three.js といった 3D コンピュータグラフィックスのレンダリングを担うフレームワークと組み合わせることで、簡単に WebAR コンテンツを構築できます。

AR.js Documentation

今回は A-Frame と組み合わせて、直方体の 3D モデルを AR で表示したいと思います。

以下がプログラムの実行結果です。

マーカーを写すと赤いブロックが表示される
    デモの再現方法

  1. このあと紹介するサンプルコードをコピーして html ファイルを作成
  2. カメラ内蔵の PC で作成した html ファイルをブラウザで開く
  3. ブラウザからカメラアクセスのパーミッションが求められるので、許可 ボタンを押す → ブラウザにカメラに写っているものが表示される
  4. このあと記事で紹介する hiro マーカーをスマートフォンなどに保存して表示し、 3. のカメラフレームに写るように入れる
  5. カメラフレームの中に赤いブロックが表示される

AR.js と A-Frame を組み合わせれば、 VR サンプルと同様、数行の HTML コーディングで AR コンテンツを構築できます。

それでは、ソースコードを見てみましょう。


<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" charset="utf-8" />
    <!-- A-FrameとAR.jsのCDN -->
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
  </head>
  <body>
    <!-- シーン生成、AR.js呼び出し -->
    <a-scene embedded arjs>
      <!-- マーカートラッキング設定 -->
      <!-- hiroマーカーに反応し、タグ内の3dモデルを表示 -->
      <a-marker preset="hiro">
        <!-- 直方体呼び出し -->
        <a-box position="0 0 0" scale="1 1 1" color="red"></a-box
      ></a-marker>
    </a-scene>
  </body>
</html>

コード全体はコンパクトで VR のサンプルとそれほどコードに差はありません。

続いて、 AR 実装にあたって追加した要素を解説します。

サンプルコードの解説

今回のサンプルでは A-Frame の HTML と AR.js のマーカートラッキングを組み合わせて AR を構築しています。

A-Frame 部分は VR サンプルの解説と被る部分があるので一部割愛しますが、 AR の構築は以下の工程で行っています。

  1. CDN でライブラリを呼び出し
  2. AR の読み込み設定
  3. マーカー設定
  4. 表示コンテンツ設定

CDN でライブラリを呼び出し

今回呼び出しているライブラリは 2 種類です。

1 つは A-Frame 本体。


<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>

そして AR.js 本体です。


<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>

注意点として 2022 年 3 月現在 A-Frame の最新バージョンの 1.3.0 で AR.js を読み込むとエラーが出る不具合が確認されています(今回はバージョン 1.2.0 を利用しています)。

AR に関しても VR と同様、 CDN からファイルを呼び出すだけで、初期化せずとも、後は HTML のコーディングのみで AR を構築できます。

AR の読み込み設定

HTML が読み込まれたときに、 AR 画面が表示される設定を行っています。

AR の表示設定は A-Frame の <a-scene> で行います。


<a-scene embedded arjs></a-scene>

<a-scene> のプロパティに arjs と入力するだけで、 AR 画面の表示設定は完了です。

同時に embedded を設定すると、 A-Frame が AR 画面を自動的に Web ページのレイアウト内にグラフィックキャンバス要素として埋め込んでくれます。

マーカー設定

AR で読み込むマーカーを設定します。

AR.js のマーカートラッキングでは、デフォルトで用意されているマーカーや専用のツールで自作したマーカーを使って AR コンテンツの表示ができます。

labelマーカー作成ツール
AR.js Marker Training

今回のサンプルではデフォルトで用意されている hiro マーカーを使ってマーカートラッキングを構築します。


<a-marker preset="hiro"></a-marker>

マーカーの設定は <a-marker> で行います。

preset プロパティに hiro と設定することでデフォルトの hiro マーカーが設定されます。

<a-marker> 内に A-Frame のエンティティを配置することで、そのマーカーを読み取った時に、エンティティによって定義されたオブジェクトを表示することができます。

hiro マーカー

表示コンテンツ設定

最後に AR で表示させたいコンテンツの設定です。

<a-marker> 内に表示させたいコンテンツを配置します。今回は A-Frame の <a-box> を利用します。

box の形状などを操作する属性は AR でも有効なので、色や大きさを好みに設定できます。


<a-box position="0 0 0" scale="1 1 1" color="red"></a-box>

まとめ

A-Frame 、AR.js を利用すれば、たったの 10 数行で VR 、 AR を構築することができます。ブラウザさえあれば実行できますので、ぜひ読者の皆さまも体験・改造してみてください。上司や周囲になかなかインパクトを与えられると思います。

次回後編記事では A-Frame を使った教育向けビジュアルコーディングサービス BLOCKVROCK を使って簡易的なメタバースを体験したいと思います。

info_outline後編はこちら

BLOCKVROCK を使ってノーコードでメタバースを作ってみよう|WebXR を使ってメタバースを構築してみよう ~後編

免除修了試験 Q & A

タグ一覧