logo
最近の検索
2014.06.30

Web Componentsを使ってみよう!

Web Componentsを使ってみよう!

初めまして、TOPGATEの @yukinasu です。
今回はウェブアプリケーションのフロントエンド開発において革命的な技術として注目され、現在仕様策定が進んでいるWeb Componentsについて紹介します。

Web Componentsとは

Web Componentsとは、開発者がHTMLに独自の要素を定義できる仕組みです。
例えば、次のTOPGATEボタンはクリックすると「TOPGATE」というアラートが表示される簡単なボタンです。このボタンを既存のHTMLで記述すると、

TOPGATE

#!html
	<span id="tgButton">TOPGATE</span>
	<style>
	    #tgButton {
	        color: white;
	        background-color: red;
	        padding: 10px;
	        font-family: "Arial Black", arial-black;
	        display: inline-block;
	        border: 5px solid white;
	        cursor: pointer;
	    }
	</style>
	<script>
	    var tgButton = document.getElementById("tgButton");
	    tgButton.addEventListener("click", function(e) {
	        alert("TOPGATE");
	    });
	</script>
	

このようになります。
Web Conponentsを用いると、

#!html
	<tg-button>TOPGATE</tg-button>
	

HTMLに記述するのはこれだけです。HTMLがとてもスッキリしました。
Web ComponentsがUIパーツの構成要素であるHTMLマークアップ、CSS、JavaScriptをコンポーネント化し、<tg-button>要素として定義しているのです。

Web Componentsの特徴

Web Componentsには次のような特徴があります。

  • 既存のHTML、CSS、JavaScriptの知識の延長で作成できる
  • UIパーツをHTMLの独自要素として定義できる
  • UIパーツの内部構造を外から見えなくする
  • UIパーツがカプセル化されるため、内容が変更されても、外部に影響を与えない
  • 再利用性が高い

Web Componentsを構成する技術

Web Componentsは大きく分けて4つ技術から成り立っています。

  • Templates
  • Shadow DOM
  • Custom Elements
  • HTML Imports

Templates以外は2014年6月現在、まだ仕様策定中であり、W3C Editor's Draftなどで日々最新の仕様が検討されています。
Templatesに関しては2014年3月に仕様策定が完了し、正式にHTML5の仕様として追加されました。 現在の策定状況はW3C Web Components Current Statusで確認できます。

それでは、各技術を説明しながら、次のステップで<tg-button>要素を作成していきます。

  1. Templatesを用いて、<template>要素にHTMLマークアップ、スタイルを定義し、テンプレートを作成する
  2. Shadow DOMを用いて、テンプレートの内容をカプセル化する
  3. Custom Elementsを用いて、カプセル化したテンプレートを<tg-button>要素として定義する
  4. HTML Importsを用いて作成した<tg-button>要素を別ドキュメントに読み込む

Templates

Templatesは文字通りUIパーツのテンプレートです。
<template>要素にUIパーツのHTMLマークアップ、スタイルを定義します。

次のソースコードはTOPGATEボタンのHTMLマークアップ、スタイルをテンプレート化したものです。

#!html
	<template id="tgButtonTemplate">
	    <style>
	        #tgButton {
	            color: white;
	            background-color: red;
	            padding: 10px;
	            font-family: "Arial Black", arial-black;
	            display: inline-block;
	            border: 5px solid white;
	            cursor: pointer;
	        }
	    </style>
	    <span id="tgButton">TOPGATE</span>
	</template>
	

<template>要素で囲まれたコンテンツは次のような特徴を得ます。

  • コンテンツがアクティベートされるまで、自律動作せず、レンダリングされない。
  • コンテンツがアクティベートされるまで、スクリプトの実行、画像やオーディオはロードされない。
  • コンテンツはドキュメント内に存在しないものとして扱われ、メインページで行う docoment.getElementById() または querySelecor()<template>の子ノードを取得できない。
  • テンプレートは<head>,<body> または <frameset>内なら何処でも置くことができ、その中におけるコンテンツなら何を置いても構わない。

Templatesに関する詳しい仕様は次のサイトが参考になります。

Shadow DOM

Shadow DOMはDOMツリーをカプセル化し、ページの他の部分からDOMツリーを分離することができます。
既存のHTML、CSSにはスコープの概念は存在しませんでしたが、Shadow DOMを用いることでHTML、CSSにおいてもスコープが使用可能となります。

次のソースコードはTOPGATEボタンのテンプレートにShadow DOMよるカプセル化を行いました。

#!html
	<template id="tgButtonTemplate">
	    <style>
	        #tgButton {
	            color: white;
	            background-color: red;
	            padding: 10px;
	            font-family: "Arial Black", arial-black;
	            display: inline-block;
	            border: 5px solid white;
	            cursor: pointer;
	        }
	    </style>
	    <span id="tgButton">TOPGATE</span>
	</template>
	<div id="host">yukinasu</div>
	<script>
	    var host = document.getElementById("host");
	    var root = host.createShadowRoot();
	    var template = document.getElementById("tgButtonTemplate");
	    root.appendChild(document.importNode(template.content, true));
	    root.addEventListener("click", function(e) {
	        alert("TOPGATE");
	    });
	</script>
	

Shadow DOMには次のような特徴があります。

  • UIパーツのマークアップをShadow Tree(既存のDOMツリーとは別次元のDOMツリー)として作成できる
  • Shadow Treeはカプセル化され、外部のCSS、JavaScriptの影響を受けない
  • Shadow Tree内のCSS、JavaScriptも外部に影響しない

Shadow DOMに関する詳しい仕様は次のサイトが参考になります。

Custom Elements

Custom Elementsは開発者独自のHTML要素を作成することができます。
それだけではなく、他のHTML要素を継承したHTML要素の作成や既存のHTML要素を拡張することもできます。

次のソースコードはTOPGATEボタンのテンプレートにShadow DOMよるカプセル化を行い、更にCustom Elementsで独自要素として定義しています。

#!html
	<template id="tgButtonTemplate">
	    <style>
	        #tgButton {
	            color: white;
	            background-color: red;
	            padding: 10px;
	            font-family: "Arial Black", arial-black;
	            display: inline-block;
	            border: 5px solid white;
	            cursor: pointer;
	        }
	    </style>
	    <span id="tgButton">TOPGATE</span>
	</template>
	<script>
	    var TgButtonPrototype = Object.create(HTMLElement.prototype);
	    TgButtonPrototype.createdCallback = function() {
	        var template = document.getElementById("tgButtonTemplate");
	        var root = this.createShadowRoot();
	        root.appendChild(document.importNode(template.content, true));
	        root.addEventListener("click", function(e) {
	            alert("TOPGATE");
	        });
	    };
	    var TgButton = document.registerElement("tg-Button", {
	        prototype: TgButtonPrototype
	    });
	</script>
	<tg-button>yukinasu</tg-button>
	

Custom Elementsには次のような特徴があります。

  • Custom Elementsの名称には「-」(ハイフン)を含んでいる必要がある
  • 4つのタイミングでイベントが発生し、ライフサイクルコールバックメソッドと呼ばれるコールバックメソッドを設定することができる。
    • createdCallback - Custom Elementsのインスタンスが生成されたタイミング
    • attachedCallback - Custom ElementsのインスタンスがHTMLに追加されたタイミング
    • detachedCallback - Custom ElementsのインスタンスがHTMLから削除されたタイミング
    • attributeChangedCallback - インスタンスの属性が追加・削除・更新されたタイミング

Custom Elementsに関する詳しい仕様は次のサイトが参考になります。

HTML Imports

HTML Importsは別ファイルとして作成されたHTMLドキュメントを読み込み、再利用するための仕組みです。
Web Componentsでは作成したCustom Elementsをインポートするために利用されます。

例えば、上記の<tg-button>を定義したソースコードをtgButton.htmlというHTMLファイルにした場合、このファイルを読み込むためには読み込み元のHTMLに次の様に記述します。

#!html
	<link rel="import" href="tgButton.html">
	

HTML Importsには次のような特徴があります。

  • 別ドメインからコンテンツをロードする場合はCORSに対応している必要がある
  • 同じURLからのimportは、取得もパースも一度しか実行されない
  • import内のscriptは順番に実行されますが、メインドキュメントのパースはブロックしない
  • scriptは読み込まれると同時に実行されるが、CSSやマークアップは明示的に読み込み元に追加しなければならない

HTML Importsに関する詳しい仕様は次のサイトが参考になります。

ブラウザ対応について

Web Componentsはまだ仕様策定中であり、Polyfillを使用せずに利用できるブラウザが限られています。
ですが、Googleが開発しているPolymerやMozillaが開発しているX-TagなどのWeb ComponentsのフレームワークにはPolifillが含まれており、未対応のブラウザでもWeb Componentsを利用することができます。

次のサイトで現在の各ブラウザの対応状況を確認することができます。

まとめ

Web Componentsはまだまだ現場の第一線で活用できるような成熟した技術ではありませんが、数年後にはフロントエンド開発の標準技術となりうるポテンシャルを十分に秘めています。
Custom ElementsではWeb Componentsで作成したUIパーツが公開され、徐々にその数を増やしています。

今回はさわり程度しか書くことができませんでしたが、Web Componentsはとても奥が深いです。
この記事を読んで少しでもWeb Componentsに興味を持ってもらえればいいなと思います。

それでは!

ライター

TOPGATE 編集部

Related Article !

View all

クラウドの主流である SaaS とは何か?仕組みやメリットまでわかりやすく解説!

データセンターとは何か?クラウドとの違いや使い分け方法を解説!

データセンターとは何か?クラウドとの違いや使い分け方法を解説!

ビッグデータとは何か?クラウドによるデータ活用事例を紹介!

ビッグデータとは何か?7業種のクラウドによるデータ活用事例をご紹介!

アジャイル開発とウォーターフォール開発との違いとは?自社に合った開発手法の選び方まで徹底解説!

アジャイル開発とウォーターフォール開発との違いとは?自社に合った開発手法の選び方まで徹底解説!

SIer(エスアイヤー)とは何か?業務内容、種類、年収まで徹底解説!

SIer(エスアイヤー)とは何か?業務内容、種類、年収まで徹底解説!

エンジニアってどんな職種?仕事内容、種類、年収を徹底解説!

エンジニアってどんな職種?仕事内容、種類、年収を徹底解説!

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.6 (最終回)

Pulumi を Google Cloud で使ってみた

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.5

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.4

VPN接続の最小構成を例に: アーキテクチャ設計図の効果的な作り方

2023年7月新登場!Google Cloud SQLの最上位エディション「Enterprise Plus」を触ってみた

クラウドファーストとは?クラウド導入のメリットやコストを解説

効率的なデータ活用を実現!データマートの作り方を7ステップでご紹介!

クラウドとオンプレミスの減価償却と会計処理・税務処理について

クラウドとオンプレミスの減価償却と会計処理・税務処理について

コンテナ化とは?仮想化との違いやメリット、デメリット、ユースケースまで詳しく紹介!

クラウドコンピューティングとは何か?仕組みやメリットまで徹底解説!

クラウドコンピューティングとは何か?仕組みやメリットまで徹底解説!

テレワークをするなら知らなきゃ!【Googleのゼロトラスト】BeyondCorp」の特徴、メリットをご紹介!

テレワークをするなら知らなきゃ!【Googleのゼロトラスト】BeyondCorpの特徴、メリットをご紹介!

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.3

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.2

Google Cloudの新DBMS、AlloyDB for PostgreSQLを触ってみた Vol.1

データベース運用を効率化する SQL とは何か?メリットやデメリット、活用事例まで一挙に紹介!

データベース運用を効率化する SQL とは何か?メリットやデメリット、活用事例まで一挙に紹介!

失敗しないシステム/ソフトウェア開発会社の選び方!判断指標から判断基準まで一挙公開

失敗しないシステム/ソフトウェア開発会社の選び方!判断指標から判断基準まで一挙公開

藤原秀平

目前に迫る! Google Cloud Next ’17 の見どころを TOPGATE エンジニアに訊いてみた

石村真吾

第二弾! Google Cloud Next ’17 の見どころを TOPGATE エンジニアに訊いてみた

新卒エンジニアが日々の学習内容を発信する「ルーキーズブログ」

新卒エンジニアが日々の学習内容を発信する「ルーキーズブログ」を始めます!

REST とは

【GCP入門編・第14回】 Cloud Functions を使ってサーバレスアーキテクチャを体験しよう!

機械学習の勉強歴が半年の初心者が、 Kaggle で銅メダルを取得した話

機械学習の勉強歴が半年の初心者が、 Kaggle で銅メダルを取得した話

Python と Twitter API でリツイートしたユーザーの情報を取得する

Python と Twitter API でリツイートしたユーザーの情報を取得する

目前に迫る!Google I/O 2018 の見どころを TOPGATE エンジニアに訊いてみた (前編)

目前に迫る!Google I/O 2018 の見どころを TOPGATE エンジニアに訊いてみた (前編)

マイコンで CO2 を計測し、サーバーに計測値を投げるシステムを作る

マイコンで CO2 を計測し、サーバーに計測値を投げるシステムを作る

失敗する確率を大幅に減らすために開発依頼の仕方とフェーズごとのチェックポイント

失敗する確率を大幅に減らすために開発依頼の仕方とフェーズごとのチェックポイント

ITシステム開発における自社開発と委託開発の違いと開発の流れについて一挙公開!

ITシステム開発における自社開発と委託開発の違いと開発の流れについて一挙公開!

優れた開発チームが成功の鍵!ITシステム開発のチーム編成方法と新規メンバーの調達方法とは?

優れた開発チームが成功の鍵!ITシステム開発のチーム編成方法と新規メンバーの調達方法とは?

企業のクラウド化が加速中!クラウド導入のメリットとは?

企業のクラウド化が加速中!クラウド導入のメリットとは?

ランニングコスト削減も可能?開発者が知っておきたいインフラ設計のポイント10選

ランニングコスト削減も可能?開発者が知っておきたいインフラ設計のポイント10選

【徹底解説】ウィズコロナにおけるニューノーマルとクラウド

【徹底解説】ウィズコロナにおけるニューノーマルとクラウド

次世代BIツール「Looker」の概要と導入時の注意点をご紹介!

次世代BIツール「Looker」の概要と導入時の注意点をご紹介!

政府が提唱するクラウド・バイ・デフォルト原則とは?企業における導入メリット6選

政府が提唱するクラウド・バイ・デフォルト原則とは?企業における導入メリット6選

クラウドエンジニアとは何か?仕事内容・必要スキル・資格・将来性を徹底解説!

クラウドエンジニアとは何か?仕事内容・必要スキル・資格・将来性を徹底解説!

クラウドで自社にあったカスタマイズは可能か?オンプレ利用者の悩みを解決!

デジタルトランスフォーメーション(DX)とは?概要と5つの事例をご紹介!

デジタルトランスフォーメーション(DX)とは?概要と5つの事例をご紹介!

クラウドベンダーから自社に最適な提案を引き出す!RFP(提案依頼書)の作成方法とは?

クラウドベンダーから自社に最適な提案を引き出す!RFP(提案依頼書)の作成方法とは?

クラウドネイティブ・アプリケーションとは?メリット、活用例、開発方法まで徹底解説!

クラウドネイティブ・アプリケーションとは?メリット、活用例、開発方法まで徹底解説!

【IoTとは?】ビッグデータ、クラウドとの違いや関係性まで一挙紹介

データ分析の歴史から紐解く!データウェアハウスとデータマートの違いを徹底解説

データ分析の歴史から紐解く!データウェアハウスとデータマートの違いを徹底解説

データレイクとデータウェアハウス(DWH)の違いとは?

データの定義からデータレイクとデータウェアハウス(DWH)の違いをわかりやすく解説!

データ分析基盤の一つであるデータマート概要と設計ポイントをご紹介!

データ分析基盤の一つであるデータマート概要と設計ポイントをご紹介!

クラウドアプリケーション開発とは?普及背景やメリットを解説!

クラウドアプリケーション開発とは?普及背景やメリットを解説!

マネージドサービスとフルマネージドサービスの違いとは?メリット・デメリットまで徹底解説!

マネージドサービスとフルマネージドサービスの違いとは?メリット・デメリットまで徹底解説!

ハイブリッドクラウドにした際のネットワーク構成と注意すべきポイントとは?

ハイブリッドクラウドにした際のネットワーク構成と注意すべきポイントとは?

クラウド化の社内合意を得るためには?説得するための5つのポイントをご紹介!

クラウド化の社内合意を得るためには?説得するための5つのポイントをご紹介!

クラウドインテグレーターとは何か?役割やメリット、会社の選び方まで徹底解説!

クラウドインテグレーターとは何か?役割やメリット、会社の選び方まで徹底解説!

【知らないとマズイ】2025年の崖とは?DXの推進にはクラウド化が必要不可欠!

【知らないとマズイ】2025年の崖とは?DXの推進にはクラウド化が必要不可欠!

【片山さんまだ】オンプレミス、クラウド開発における違いとそれぞれの特徴とは?

オンプレミス、クラウド開発における違いとそれぞれの特徴とは?

【実例つき】クラウド移行で失敗する原因と解決策を紹介

【実例つき】クラウド移行で失敗する原因と解決策を紹介

クラウド移行は費用対効果が重要!ROIで効果を見える化しよう!

クラウド移行は費用対効果が重要!ROIで効果を見える化しよう!

【知って納得!】クラウドの高額請求を避けるための5つの確認項目とは?

【知って納得!】クラウドの高額請求を避けるための5つの確認項目とは?

【あなたは知っている?】AI(人工知能)の仕組み、作り方、活用事例まで徹底解説!

エンジニア教育における課題と効果を出すために大切なポイントとは?

データの活用で生産性向上!「BIツール」と「DWH」や「ETL」との違いとは?

【徹底解説!】人工知能(AI)の機械学習と深層学習の違いとは?

【徹底解説!】人工知能(AI)の機械学習と深層学習の違いとは?

レンタルサーバーとクラウドの違いとは?あらゆる観点から徹底比較!

レンタルサーバーとクラウドの違いとは?あらゆる観点から徹底比較!

【万が一に備えよう】クラウドの高額請求が届いたときの対処法とは?

【万が一に備えよう】クラウドの高額請求が届いたときの対処法とは?

クラウドCoEとは?社内のクラウド推進に必要な考え方を理解しよう!

クラウド導入を成功させるための鍵!クラウドアーキテクトを徹底解説!

クラウド導入を成功させるための鍵!クラウドアーキテクトを徹底解説!

クラウドサービス安全利用には理解必須!情報セキュリティマネジメントガイドラインとは?

クラウドサービス安全利用には理解必須!情報セキュリティマネジメントガイドラインとは?

【会社のセキュリティを強化しよう!】専用線と VPN の違いとは?

専用線と VPN の違いとは?違いを理解して会社のセキュリティを強化しよう!

機械学習の仕組みとは?学習方法や活用事例まで徹底解説!

機械学習の仕組みとは?学習方法や活用事例まで徹底解説!

オンプレよりも安全?クラウドがBCP対策に選ばれる理由とは

オンプレよりも安全?クラウドがBCP対策に選ばれる理由とは

「 Society 5.0」とは何か?新しい社会を支える IT 技術を一挙にご紹介!

「 Society 5.0」とは何か?新しい社会を支える IT 技術を一挙にご紹介!

Cloud IoT Core を使用してセンサー情報を Cloud Storage にストリーミングしてみた!

Cloud IoT Core を使用してセンサー情報を Cloud Storage にストリーミングしてみた!

Flutter とは何か?メリット、デメリット、採用しているプロダクト(アプリ)まで一挙にご紹介!

Flutter とは何か?メリット、デメリット、採用しているプロダクト(アプリ)まで一挙にご紹介!

BI ツールとは何か?メリット、デメリット、活用事例まで、一挙に紹介!

BI ツールとは何か?メリット、デメリット、活用事例まで、一挙に紹介!

負荷分散の重要性とは?ロードバランサーのメリット、デメリット、選び方を徹底解説!

負荷分散の重要性とは?ロードバランサーのメリット、デメリット、選び方を徹底解説!

移行コストがボトルネック?コストを抑えながらオンプレからクラウドに DWH を移行する方法とは?

移行コストがボトルネック?コストを抑えながらオンプレからクラウドに DWH を移行する方法とは?

データウェアハウス( DWH )とデータベースとの違いとは?5つのポイントを理解して最適なサービスを選択しよう!

データウェアハウス( DWH )とデータベースとの違いとは?5つのポイントを理解して最適なサービスを選択しよう!

テレワーク導入には必須!テレワークセキュリティガイドラインとは何か?

【古いシステムからの脱却を!】レガシーシステムが抱える5つの課題とは?

【古いシステムからの脱却を!】レガシーシステムが抱える5つの課題とは?

効率的なデータ活用を実現!分析したデータを有効活用するためのテクニックを4ステップで紹介

効率的なデータ活用を実現!分析したデータを有効活用するためのテクニックを4ステップで紹介

システム担当者必見!オンプレミスからクラウドデータベースへの移行で注意すべき11のポイントとは?

システム担当者必見!オンプレミスからクラウドデータベースへの移行で注意すべき11のポイントとは?

政府が提唱する「デジタル・ガバメント実行計画」とは?民間企業への影響まで徹底解説!

政府が提唱する「デジタル・ガバメント実行計画」とは?民間企業への影響まで徹底解説!

API 活用の最前線に迫る! Apigee の3大活用パターン、国内事例、最新情報まで徹底解説!

Looker で次世代のデータ活用を実現!データの民主化における課題と解決法とは?

Looker で次世代のデータ活用を実現!データの民主化における課題と解決法とは?

図解】Google データポータルとは?機能、導入方法、使い方まで徹底解説!

【図解】Google データポータルとは?機能、導入方法、使い方まで徹底解説!

クラウドサーバーとは何か?導入時のポイントや選び方まで徹底解説!

クラウドサーバーとは何か?導入時のポイントや選び方まで徹底解説!

社内のコラボレーションを加速する Googleグループとは?概要、できること、実際の作り方まで徹底解説!

情報漏えいが起こる原因とは?過去事例や防ぐための方法まで徹底解説!

成功する DXの進め方とは?具体的な手順を9ステップでわかりやすく解説!

Chrome OS で動くビデオ会議システム? Google の最新 AI を搭載した Series One を徹底解説!

【経営者必見!】IT 化が進まないことによるリスクとは?進まない理由や推進するための方法まで徹底解説!

【経営者必見!】IT 化が進まないことによるリスクとは?進まない理由や推進するための方法まで徹底解説!

システム導入に反対する現場を説得するには?ステークホルダーマネジメントと大切な3つのポイントを徹底解説!

システム導入に反対する現場を説得するには?ステークホルダーマネジメントと大切な3つのポイントを徹底解説!

【 IT に強い人材を育てる!】「社員の IT リテラシーを向上させる3つの方法」と「 IT リテラシーが低いことによる5つのリスク」とは?

【 IT に強い人材を育てる!】「社員の IT リテラシーを向上させる3つの方法」と「 IT リテラシーが低いことによる5つのリスク」とは?

IT モダナイゼーションとは?種類、メリット、実現するためのポイントまで徹底解説!

IT モダナイゼーションとは?種類、メリット、実現するためのポイントまで徹底解説!

複数プロジェクト構成の Cloud Monitoring がより使いやすくなりました

複数プロジェクト構成の Cloud Monitoring がより使いやすくなりました

Cloud Run 2020 年のアップデートおさらい

Cloud Run 2020 年のアップデートおさらい

「 Lift & Shift 」 とは?クラウド移行の手順を5ステップで解説!

Lift & Shift とは?クラウド移行の手順を5ステップで解説!

スプレッドシートの定期作業を GAS で自動化する

スプレッドシートの定期作業を GAS で自動化する

Cloud SDK のインストールについて

Cloud SDK のインストールについて

iOS アプリと Android アプリを同時に開発!Flutter とは??

iOS アプリと Android アプリを同時に開発!Flutter とは??

Cloud SDK から VM へ安全に接続する方法

Cloud SDK から VM へ安全に接続する方法

データマネジメントとは何か?成功させるための3つのポイントと具体的な進め方を5ステップで解説!

データドリブン経営とは?実現に向けた4ステップや成功事例まで徹底解説!

Excel作業の属人化を回避する方法とは?組織全体のデータ活用が課題解決の鍵!

Cloud Spanner vs Cloud SQL

Cloud Spanner vs Cloud SQL

データ活用に欠かせないデータクレンジングとは?具体的な方法を4ステップで解説!

BYODとは?導入時のメリットとデメリットや導入時に押さえておきたいポイントを徹底解説

効率的なデータ保護を実現! DLP の概要、機能、メリット、活用事例まで一挙に紹介!

効率的なデータ保護を実現! DLP の概要、機能、メリット、活用事例まで一挙に紹介!

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの3日目

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの3日目

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの2日目

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの2日目

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの1日目

【実況ツイートまとめ】 Google Cloud Next '18 トップゲートエンジニアの1日目

画像

GCP Live November 2014

画像

Managed VMs with Docker

画像

GAE Managed VMs誕生までの歴史を振り返る

画像

GAE ModulesをSimpleに使う

画像

Android Wearアプリケーション開発入門

画像

TypeScriptの型定義ファイルを共有しよう!

画像

Google Cloud Platform Live Report

画像

yeomanを用いてWeb開発を楽にする

画像

Topgate Golang勉強会 Report No.1