資格を取る - Googleデジタルワークショップ

learndigital.withgoogle.com

Googleデジタルワークショップとは

Google社が提供しているデジタルマーケティングの基礎を学ぶための無料のオンライン講座で、コーディングから AI に至るまで、デジタルスキルのすべてを網羅して学べるオンラインコースで、キャリアアップやビジネスの成長を目指しましょう。動画を視聴しながら学べば、きちんと理解して知識を身につけられます。
ワークショップを修了すると、Google認定資格を取得することができます。Google認定資格は、デジタルマーケティングのスキルを証明するものとして、企業から評価されやすくなります。

対象

デジタルマーケティングに関心がある人や、学生や就職活動中で今後のキャリアに活かしたい人。ワークショップは 動画の形式となっているため、初心者でも理解しやすく、デジタルマーケティングについての知識が全くない人でも挑戦しやすいです。

講座内容

・オンライン ビジネスのセキュリティの向上
・デジタル マーケティングの基礎
・プログラミングの基礎
・ビジネスをオンラインで展開
・セルフ プロモーションで自信をつける
・キャリアアップに役立つスキル
・オンラインで自身のビジネスを見つけてもらう
・機械学習の基礎
・オンライン広告でビジネスを宣伝
・仕事の生産性の向上
・顧客のニーズとオンラインでの顧客の行動を把握
・モバイルを通じてユーザーと繋がる
・ビジネスを他国に拡大
・コンテンツを通してビジネスを宣伝
・デジタル ウェルビーイングの基礎

最終試験

最終試験は全部で40問です。時間制限はありません。40問中32問（80％）正解すると合格です。最終試験で不合格になると、すぐに再試験を受けることはできず、再受験できるまでの時間がマイページでカウントされ、10時間後に再び受けられます。
再試験については以前は3回までと決まっていましたが、今は制限は無くなり、合格するまで何度でも受けれます。

新しいセレクタを使う

CSSでスタイルを適用する対象を指定するために使用するのがセレクタ（selector）です。
今まで使用してきたセレクタには以下のものがあります。

使用してきた代表的なセレクタ

classセレクタ
idセレクタ
子セレクタ
子孫セレクタ
擬似クラス

新しいCSS

ここ数年、特にMicrosoftのIEのサポートが完全に停止した2022年6月以降、CSSは非常に速いスピードで新機能が実装されています。正確には元々実装されていた機能が主要ブラウザでほぼ対応され、実際に使用出来るようになったのです。

新しいセレクタ

• 兄弟要素（jQueryのsiblingsとは違い、下の兄弟要素のみが対象）
• 隣の要素（1つ下の兄弟要素のみが対象）
• not要素 ○○以外の要素

それ以外にも

• has()　指定した子要素が存在する親要素に適用できます。
• is()　指定した要素に一致する場合に適用できます。

などどんどん新しいセレクタが出てきています。

webliker.info

ajaxとpush Stateを使ってSEOに強い無限スクロールページを作成する

SEOに適した無限スクロールの導入

FacebookやTwitter、Pinterestなどのソーシャルメディアサイトが使っている事で一躍有名になった無限スクロール（英: Infinite Scrolling）ですが、今でもシングルページを利用したウェブサイト、特にコンテンツの量が豊富なギャラリー的なサイトではよく見かけます。
しかし、よく見られるjQueryを使ったシンプルな無限スクロールはコンテンツをすべて１つのHTMLファイル上に記述しておいて、スクロールするたびに「display:block」と「display:none」を使って表示させていく、というものです。人が見る分にはこの形でも良いでしょうが、Googlebot に対してとなると話が変わってきます。

ご自身のサイトのニュース フィードやピンボードで、ユーザーの利便性を考えて無限スクロールを使用している方もいらっしゃるでしょう。しかし、Googlebot に対してとなると話が変わってきます。無限スクロールでは、クローラーがユーザーの行動（スクロールやボタンを押してさらにアイテムを読み込むなど）を常にエミュレートできるとは限らないため、フィードやギャラリー内のすべてのアイテムにアクセスできないことがあります。クローラーがアクセスできないコンテンツは、検索結果に表示されることもないでしょう。

無限スクロール ページからリンクされている個別のアイテムを検索エンジンがクロールできるようにするには、無限スクロールを分割した一連のページ群を生成するようにしましょう。

作例

felica29.cloudfree.jp

Google ウェブマスター向け公式ブログ [JA] : 検索エンジンとの相性を考慮した無限スクロールのベストプラクティス

push Stateによるブラウザの履歴の更新

push Stateとは？

push Stateとは、HTML5でサポートされるAPIです。
ページを遷移せずHTML（の一部）を変えた場合でもブラウザに履歴を残し、また一意のURLを割り当てることが可能です。
HTMLの中身が変わってもAjaxはページを遷移しないのでURLが同じままです（#以下が入れ替わるだけで一意のURLとして処理しない）。
ブラウザの戻るボタンを押しても前のコンテンツを再び表示させることはできません。本当に前のページに戻ってしまいます。なのでGoogleは、クロール・インデックスできるように特殊な仕様をサポートしてくれたわけです。しかしpushStateを使えば、Ajaxで変化させたそれぞれのコンテンツに対してユニークなURLを割り当てられるのです。
つまり検索エンジンにとってクロール・インデックスしやすくなります。

JavaScriptが切れている状態でも手動でページ遷移出来るような設定も取り入れ、検索エンジンとの相性を考慮した無限スクロールにカスタマイズしましょう。

www.suzukikenichi.com

以上の内容を踏まえて、今回は検索エンジンが処理しやすい無限スクロールを作っていきましょう。

今回のポイント

• ajaxを使ったシームレスなページ遷移
• HTML5のAPIを使い、各ページにユニークなURLやタイトルを最適化する事が出来る。（ブラウザの制限のため、一部NG）
• 無限スクロールページを、JavaScript が無効でもアクセス可能な形にする。
• 各コンテンツページにはトップページに自動的に戻るリダイレクト機能を実装
• 相対パスはNGなのでルートパスを使用すること
• SPA(Single Page Application)の元となる考え方を理解する

今回の注意点

• パスは全てルートパス
• タイトルは必ずページ毎に設定する
• トップページに「トップに戻るボタン」を設置
• footerは最後のページに設置

※特にページのタイトルの最適化は非常に大事です。通常の無限スクロールは1枚のhtmlファイルに無数のコンテンツが記述されていますが、今回のようにhtmlファイルを細分化する事で、コンテンツに応じたより細かいタイトルやURLの設定が可能になります。

ajax

pikawaka.com

API

APIとは「Application Programming Interface（アプリケーション・プログラミング・インターフェイス）」の略語であり、「ある1つの機能に特化したプログラムで共有可能なもの」や「ソフトウェアの機能を共有する仕組み」のことです。よく使う機能がAPIとして用意されていれば、わざわざ一からプログラムを組む必要はありません。必要に応じてAPIを利用し、効率的に開発を進められます。

SPA(Single Page Application)

ブラウザによるページ遷移を行うことなく、単一のWebページでコンテンツの切り替えを行うことで、ユーザーのUXが向上します。JavaScriptフレームワーク（Angular、Vue.js、Reactなど）で作成される事が多いです。

github.com

<script>
		$('#container').cleverInfiniteScroll({
			contentsWrapperSelector: '#container',
			contentSelector: '.wrapper',
			nextSelector: '#next',
		});
	</script>

Javascriptによるリダイレクト

Javascriptによるリダイレクトの方法もあるので、試してみましょう。

setTimeout("redirect()", 0);
function redirect(){
    location.href='../index.html';
}

digitalidentity.co.jp

note.com

面接について考える

note.com

タイムラインをサイトに埋め込む

年表や沿革などで使うタイムラインを作ってみましょう。cssのみで作れるシンプルな物のありますが、今回は「CodyHouse Framework」というフレームワークを使ったアニメーションタイムラインを作成してみます。

Vertical Timeline

codyhouse.co

さらにCodyHouse Framework 本体のデータも必要なのでgithubからダウンロードしておきましょう。

github.com

<div class="cd-timeline js-cd-timeline">
<div class="container max-width-lg cd-timeline__container">


<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 1</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2019/10</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->




<div class="cd-timeline__block">
<div class="cd-timeline__img cd-timeline__img--picture">
<img src="img/cd-icon-picture.svg" alt="Picture">
</div> <!-- cd-timeline__img -->

<div class="cd-timeline__content text-component">
<h2>Title of section 2</h2>
<p class="color-contrast-medium"></p>
<div class="flex justify-between items-center">
<span class="cd-timeline__date">2020/03</span>
</div>
</div> <!-- cd-timeline__content -->
</div> <!-- cd-timeline__block -->


</div><!-- container -->
</div><!-- cd-timeline -->

その他のタイムライン

https://codepen.io/paulhbarker/pen/apvGdv

https://codepen.io/cjl750/pen/mXbMyo

https://codepen.io/viktorjs/pen/KQZYjo

https://codepen.io/bcarvalho/pen/RZqmZX

https://codepen.io/carrrter/pen/ELLmyX

タイムラインインフォグラフィック

www.edrawsoft.com

baigie.me

baigie.me

要素が画面に表示されたらカーテンが開くアニメーション

cgworks.jp

要素が画面に表示されたらその要素にクラス名をaddするというアニメーションです。
ここで重要なのはどうしたら要素が画面に表示するタイミングを取得出来るかです。要素が画面に表示するタイミングを取得には以下の4つの値が必要です。

1. 自分のスクロール量
2. :画面トップから対象要素のトップまで位置
3. :画面の高さ
4. :対象要素の高さ

まず、1と2を使って自身のスクロール量と対象要素の位置が同じになったタイミング（要素が画面の上端に到達したら）でaddClassします。
この時の計算式は1 = 2になります

さらに3の値を使って、addClassするタイミングを1画面分下にします。
1 = 2-3

最後に4の値を使って今度は逆に要素の高さ分addClassするタイミングを上にします。
1 = 2-3+4

さらに上記の式を応用して、要素が画面の中央に来たらaddClassというのも可能です。
その場合には対象要素の半分の高さと画面の半分の高さが必要になります。

1 = 2 - 3/2(1画面分の半分の値) + 4/2(対象要素の高さの半分の値)

jquery

$(function(){
$(window).on('scroll resize',function(){
let h =$('p').outerHeight();//対象要素の高さ

$('p').each(function(){
var elmTop=$(this).offset().top + 200;//画面topから対象要素のtopまでの距離
var winHeight=$(window).height();//1画面分の高さ
var scrTop=$(window).scrollTop();//自分がスクロールした量


//自分のスクロール量>対象要素の位置-1画面分+要素の高さ
if(scrTop > elmTop - winHeight + h){
$(this).addClass('curtain');
}else{
$(this).removeClass('curtain');
}

});
});
});

www.mgtnsn.com