今ではスマホアプリとして利用頻度が上がったサービスですが、WEBサイト上でも重要な役割を持ちます。
特に、店舗系HPではお店への地図を表示する際に利用されることが多いです。

地図を表示し、WEBサイトに埋め込む

HP内に地図を表示するにはHTMLファイルに地図の埋め込み処理をする必要があります。

では小松市役所をGOOGLEマップで表示し、埋め込んでみましょう。
手順は以下の通りです。

1. Googleで「小松市役所」を検索
2. 画像1　色枠の『地図』タブをクリック
3. 画像2　色枠の『小松市役所』をクリック
4. 画像3　色枠の『共有』をクリック
5. 画像4　色枠の『地図を埋め込む』タブをクリック後、『HTMLをコピー』をクリック
6. コピーした内容をテキストエディタに貼り付け

完成したページは以下のようになります。
ページ例

GOOGLEマップと同じように、埋め込み表示が可能なのがYOUTUBEです。
会社紹介動画をYOUTUBEにUPし、その動画をHP内に貼り付けたりと用途は様々です。

YOUTUBEの動画をWEBサイトに埋め込む

では以下の手順を行い、動画をWEBサイトに表示してみましょう。
表示する動画は、米津玄師 の「Lemon」にします。

1. Googleで「米津玄師 Lemon」を検索し、YOUTUBE動画を表示
2. 画像1　色枠の『共有』をクリック
3. 画像2　色枠の『埋め込む』をクリック
4. 画像3　色枠の『コピー』をクリック
5. コピーした内容をテキストエディタに貼り付け

完成したページは以下のようになります。
http://school.qomolangma.jp/data_20190108/youtube.html

PHPを利用して特定のチャンネルの動画を取得し一覧にする

GoogleのサービスではAPIと呼ばれるソフトウェアの機能を共有する仕組みをWEB上に公開しています。
その仕組みを利用し、好きなチャンネルの動画を一覧にしてみます。
以下のコードをテキストエディタに貼り付けます。
※APIキーを取得する必要があるので、以下のWEBページを参考にしてやってみましょう。
YouTube Data API v3 で、特定チャンネルの最新の動画IDを取得するには？ │ スーパーハリネズミ

<?php
$part = 'snippet';
$channelId = 'UCUCeZaZeJbEYAAzvMgrKOPQ';
$key_id = 'XXXXX';/*APIキーを取得して代入*/
$type = 'video';
$url = 'https://www.googleapis.com/youtube/v3/search?part='.$part.'&channelId='.$channelId.'&type='.$type.'&order=date&key='.$key_id;
$json_str = @file_get_contents($url);
$json = json_decode($json_str,true);
$item = $json['items'];

foreach($item as $key => $val){
	$link = 'https://www.youtube.com/watch?v='.$val['id']['videoId'];
	$id =
	$title = $val['snippet']['title'];
	$description = $val['snippet']['description'];
	$img = $val['snippet']['thumbnails']['high']['url'];
$html = <<< EOM
<div>
<a href="{$link}" target="_blank"><img src="{$img}"></a>
<h2><a href="{$link}" target="_blank">{$title}</a></h2>
<p>{$description}</p>
</div>
<hr>
EOM;
	echo $html;
}
?>

完成したページは以下のようになります。
http://school.qomolangma.jp/data_20190108/youtube2.php

自分が所持するWEBサイトのアクセスを解析するツールになります。
どんな人が見に来て、どのページを見たのかを詳細に知ることができます。
ほぼ全てのWEBサイトがこのサービスを導入していると言ってもいいでしょう。

解析コードをWEBサイトに埋め込む

アクセス解析を行うには、ページ内に解析コードを埋め込む必要があります。

現在、塾生の皆さんはWEBサイトを所持してない方の方が多いと思うので、以下の手順で先程用意したページに設置して見せます。
この先、サイトを持つことがあったら参考にしてください。

1. Googleアナリティクスページへ
2. 画像1　『無料で利用する』ボタンをクリック
3. 画像2　『登録』ボタンをクリック
4. 画像3　各入力枠に情報を入力し『トラッキングIDを取得』ボタンをクリック
5. 同意内容を確認し『同意』ボタンをクリック
6. 画像4　色枠のトラッキングコードをコピーし、HTMLの内の最初の要素として貼り付け

というのが流れなわけですが、文字の説明で理解するにはとても難しいと言えます。
講義内にて詳しく手順を見せ、どのように解析データを確認するかまで説明します。

Googleドキュメントというサービスでは、複数のマイクロソフトOfficeと似たサービスが無料で使えます。
あくまで似たようなものなので、完全に同じ機能が使えるわけではありませんが、WEBブラウザ上で利用ができ、他者との共有も簡単なので重宝されているようです。

Googleドキュメントの利用

Googleドキュメント
上記のリンクから利用ができます。
難しい説明は省いて、要するに『Word』と同じです。
文章を扱う為のサービスになります。

上の画像のように、最初からこのようなテンプレートが用意されていたり、無料にしては豪勢なサービスといえます。

Googleスプレッドシートの利用

Googleスプレッドシート
上記のリンクから利用ができます。
難しい説明は省いて、要するに『Excel』と同じです。
データを扱う為のサービスになります。

上の画像のように、最初からこのようなテンプレートが用意されています。
何より、クラウド上の共有により、データの確認や情報共有の速度に関しては『Excel』よりも上なのではないかと言われているぐらいです。

例えば、当塾内でプロジェクトを企画したとして、そのプロジェクトのスケジュール管理はこのスプレッドシート上で行えば情報が共有しやすくなるということです。

Googleスライドの利用

Googleスライド
上記のリンクから利用ができます。
難しい説明は省いて、要するに『PowerPoint』と同じです。
プレゼン資料を扱う為のサービスになります。

上の画像のように、最初からこのようなテンプレートが用意されています。

上記サービス群の利点

ドキュメント、スプレッドシート、スライドと紹介しましたが、これらはまず無料である点で何よりの魅力でしょう。
office製品ほどの機能の充実はなくとも、我々のような簡易的な利用者には十分ですし、塾生になった時点でGoogleアカウントを取得しているので、すぐ利用できるという点もあります。

これらのサービスが利用できる状態であれば、データの共有もできますし、受け渡しから閲覧までに時間がかかりません。
さらに言うと、スマホアプリを入れなくともブラウザで確認できるので、スマホでの閲覧までもスピーディーだと言えます。

今後、受講していくうえで利用していくサービスになりますので、日ごろから触れていくようにしましょう。

Dropboxから知名度が広まったクラウド型オンラインストレージサービスは、Googleにも備わっています。
主な用途として他人とフォルダを共有してファイルを渡しあう、見せ合う事ができるというのがあります。
無料で15GB使えるので、それだけで十分といえます。

Googleドライブ

Googleドライブ
上記のリンクから利用ができます。

画像を見てもらうとわかるとおり、フォルダを操作する感覚で扱う事が出来ます。
便利な機能として、指定したフォルダを他人と共有機能があるので
「このフォルダはAの人と、こっちのフォルダはBの人と」といった感じで人によって共有するフォルダを使い分けることができます。

このサービスは便利であるとともに、一つ間違えると自分の個人情報が一瞬で世界中に広まる事もありえるので、扱いには気をつけましょう。

今回の講義をまとめると、以下のようになります。

• Googleのサービスは無料である（例外あり）
• コピペするだけでグーグルのサービスをWEBページに表示できる
• APIを利用すれば、WEB上の情報が大量に取得でき、情報サイトなどを構成することができる
• クラウドで共有できるサービスを利用することにより、情報共有の精度が格段に上がる
• すでにGoogleアカウントを取得しているので、説明したサービスはすべて利用可

個人情報をあまり表に出さない程度でGoogleのサービスを利用してみましょう。
使い方が理解できると、これが無料なのかと感嘆することになります。
そして、無料でありながら利益を上げる手法に舌を巻くことでしょう。
WEB上のサービスというのは無料なのが主ですが、なんで無料なのかを考えると、新しい利益手法が生まれるのかもしれません。

基礎としてHTMLとCSSは必須となりますので、できるかぎり触れましょう。
学習サイトをピックアップしたので、以下のリンクから自分に合ったものを使って自主学習しましょう。

HTML & CSS | プログラミングの入門なら基礎から学べるProgate[プロゲート]
HTML/CSS入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
HTML入門 (全15回) – プログラミングならドットインストール
CSS入門 (全17回) – プログラミングならドットインストール
実践！ウェブサイトを作ろう (全16回) – プログラミングならドットインストール

STEP UP!!

はじめてのJavaScript (全11回) – プログラミングならドットインストール
JavaScript入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
JavaScript | プログラミングの入門なら基礎から学べるProgate[プロゲート]
Bootstrap 4入門 (全22回) – プログラミングならドットインストール

さらにSTEP UP!!

PHP入門編のレッスン一覧 | プログラミング学習サービス【paizaラーニング】
PHP | プログラミングの入門なら基礎から学べるProgate[プロゲート]
PHP入門 (全30回) – プログラミングならドットインストール
理想はすべてのレッスンをやることです。
今は目で見て手で触れる時間を増やすときなので、時間が許す限りやってみましょう。