webサイトデザインAI入門科授業用ブログ

池袋フェリカテクニカルアカデミーの求職者支援訓練の授業解説ブログです。

gitとは

f:id:yachin29:20180728033807p:plain



Gitとは？

Git（ギット）とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか？」や「リリース予定の機能追加で更新するファイルは、どれとどれか？」といったことです。
例えば、Aさんがトップページの修正を行っている間に、Bさんがアクセスページの修正を行っていたとします。お互いに修正が終わり修正内容をアップロードした場合、AさんのデータにはBさんが修正した内容分は反映されていないので、アップした内容はAさんの作業分しかアップロードされていない事になります。さらに、その後Bさんがデータをアップロードしてしまうと、今度はBさんが修正したアクセスページのみが反映されて、Aさんが修正した分は消えてしまいます。なので、このような事が起こらないように、事前にローカル上で互いのデータを見比べて、AさんとBさんのデータの差分をお互いにチェックしてからアップロードをする必要があります。
Gitはこういった場合に作業をより円滑に進められるようにつくられたツールで、システム開発の現場では一般的に使われているツールの一つです。


backlog.com





GitHubとは

Gitは通常、リモート上とローカル上を使い分けて作業を行います。GitHub（ギットハブ）とは、このリモートにあたる部分を提供しているサービスのことです。複数人での開発をサポートしてくれる便利な機能が備わっていて、現在ではエンジニアにとって欠かせないツールの一つになりました。無料でも使用する事が出来ます。


github.com


SourceTree

GitのGUIクライアントツールと呼ばれ、Gitの操作を簡単にするものです。通常Gitのコマンドはターミナル上で打ち込みますが、SourceTreeを使う事でより視覚的に、簡単に作業を行う事が出来ます。


Gitで使う用語

初めてGitを触る人にとって、解り辛さの原因の１つに用語の解り辛さが挙げられます。意味をしっかりと理解出来れば作業自体は難しくないので、まずはよく使うワードとその意味をしっかりと理解しましょう。

リポジトリ

リポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。Dreamweaverで作業する時に設定する「サイトの管理」と同じような物です。
リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。GitHubはこの「リモートリポジトリ」の場所を提供してくれるサービスです。

ステージング

gitの作業スペースには「ワーキングツリー」と「インデックス」があります。 ワーキングツリーは作業している最中のスペース、インデックスはコミットするためのファイルを登録しておくためのスペースです。 ステージングとは、「インデックスにコミットするファイルを登録する」ということです。



kray.jp




コミット

コミット(commit) ：ファイルの追加や変更の履歴をリポジトリに保存すること。GitHubではこの際に作業者が「どこどこを変更しました」など他の人に解るようにメモを残せるような機能もついています。


プッシュ

プッシュ(push) ：ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作です。

プル

github上のデータをダウンロードする操作です。



基本的な作業の手順としては

  1. 「ローカルリポジトリ」のデータを変更させて
  2. 変更したファイルをステージングして
  3. コミットしてから
  4. プッシュする

といった感じです。

ブランチ

ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。
ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。


diff機能を使ってvs codeで差分をチェック

vs codeのcompare機能を使って、ファイルの差分を簡単にチェック出来ます。


shift+control(command)+pでコマンドパレットを出し「Compare」と入力すると、下の画面のように選択できるので実行する。
f:id:yachin29:20210227122633p:plain



次に差分をチェックしたいファイルを開きます
f:id:yachin29:20210227122529p:plain

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

年表や沿革などで使うタイムラインを作ってみましょう。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

Google Fromに自動返信機能を付ける 

function sendMailGoogleForm() {
 Logger.log('sendMailGoogleForm() debug start');

 //------------------------------------------------------------
 // 設定エリアここから
 //------------------------------------------------------------

 
 // 件名、本文、フッター
 var subject = "[メールの件名]"; 
 var body
 = "お問い合わせありがとうございます。\n\n"
 + "---------------------------------------\n";
 var footer
 = "---------------------------------------\n\n"
 + "お問い合わせありがとうございます。\n"
 + "内容を確認させて頂き、後日担当より\n"
 + "ご入力頂きましたメールアドレス宛に返信致しますので\n"
 + "よろしくお願いいたします。\n"
 + "\n"
 + "株式会社ふぇりか\n\n"


 // 入力カラム名の指定
 var NAME_COL_NAME = 'お名前';
 var MAIL_COL_NAME = 'メールアドレス';


 // メール送信先
 var admin_name ="クライアントの名前";//送信メールの名前 
 var admin = "クライアントのメールアドレス"; // 先程作成したアドレスに書換
 var bcc = admin;// bccがいらない場合は、adminを""に書換
 var reply = admin;
 var to = ""; // To: （入力者のアドレスが自動で入ります）

 

 // 送信先オプション
 var options = {};
 if ( admin_name ) options.name = admin_name;
 if ( bcc ) options.bcc = bcc;
 if ( reply ) options.replyTo = reply;
 
 
 //------------------------------------------------------------
 // 設定エリアここまで
 //------------------------------------------------------------

 try{
 // スプレッドシートの操作
 var sheet = SpreadsheetApp.getActiveSheet();
 var rows = sheet.getLastRow();
 var cols = sheet.getLastColumn();
 var rg = sheet.getDataRange();
 Logger.log("rows="+rows+" cols="+cols);

 // メール件名・本文作成と送信先メールアドレス取得
 for (var i = 1; i <= cols; i++ ) {
 var col_name = rg.getCell(1, i).getValue(); // カラム名
 var col_value = rg.getCell(rows, i).getValue(); // 入力値
 
////////////タイムスタンプを消す////////////////
if (col_name === "タイムスタンプ"){
  continue;
}
////////////////上記を入れる////////////

 body += "【"+col_name+"】\n";
 body += col_value + "\n\n";
 if ( col_name === NAME_COL_NAME ) {
 body = col_value+" 様\n\n"+body;
 }
 if ( col_name === MAIL_COL_NAME ) {
 to = col_value;
 }
 }
 body += footer;


 // メール送信
 if ( to ) {
 /* メールを送信 */
 GmailApp.sendEmail(
 to, //toアドレス
 subject, //表題
 body,　//本文
 {
 from: admin,　//fromアドレス
 name: admin_name　//差出人
 }
 ); 
}else{
 MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
 }
 }catch(e){
 MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
 } 
}

EFO - 入力フォーム最適化

webサイト制作

EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。
対面でのサービスが難しくなった今日「お問い合わせフォーム」の価値はこれまで以上に重要になりました。
ユーザーにとって、ストレスのかからないフォームを作る事が求められます。


例

問い合わせ時に必要な項目のみに限定する

企業側は多くの情報を取りたがりますが、目標が達成出来る必要最低限の項目のみでOK

スマホでタップしやすいデザインに

スマートフォンで問い合わせするユーザーも多いです

入力内容に合わせてtype属性を指定する

適切なtype指定をする事で入力時のストレスが緩和されます


自動補完機能を使えるようにする

HTMLのautocomplete属性を指定する事で、ブラウザへ設定した情報を利用したオートコンプリート機能（入力内容の自動補完）が利用できるようになります。




pulpxstyle.com



ics.media




作例
https://codepen.io/yachin29/pen/ZEBNENN

Googleフォームに自作のCSSをあてカスタマイズする

webサイト制作

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。

しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作る事が出来るため、唯一のデメリットも無くなります。

Googleフォームを作成する

www.google.com


HTMLで同じ項目のフォームを作成する

Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する

name属性は階層の深い所にあるので「entry.」で検索し、name属性の値を取得しましょう。この時name属性が「name="entry.00001234_sentinel"」のようになっている項目は「entry.00001234」の部分だけ取ってきます。

「input type="hiddin"」を使ってgoogleにデータを送信する
<!-- まとめて値をgoogle formに送る -->
<input type="hidden" name="" value="<?php echo $name ?>">
<input type="hidden" name="" value="<?php echo $email ?>">
<input type="hidden" name="" value="<?php echo $item ?>">
<input type="hidden" name="" value="<?php echo $message ?>">

以上で動かすことは可能ですが、Googleフォームは「送信ボタン」を押すとGoogleフォームのサンクスページに飛んでしまう為、自作のサンクスページにリンク先を変更させます。


f:id:yachin29:20190830132103p:plain


万が一、確認画面からアクセスしてしまった際にそのままではpostで値が送られていない為エラーになってしまうので、それを回避するために値が空だったら入力画面にリダイレクトさせる処理を行います。

isset関数

issetを使う事で変数がセットされているか確認する事が出来ます。
あたまに「!」を付ける事で逆の意味になるので、以下の記述で「$_POST['name']」に値がセットされていなかったら、という意味になります。

!(isset($_POST['name']))
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる
if(!(isset($_POST['name']))){
 header('Location:index.html');
 exit;
}


サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへajaxでページ遷移させましょう。

$(function(){
$('#g-form').submit(function (event) {
var formData = $('#g-form').serialize();
$.ajax({
  url: "google FormのURL",
  data: formData,
  type: "POST",
  dataType: "xml",
  statusCode: {
    0: function(){
      window.location.href = "thanks.html";
      },
    200: function(){
     //失敗したときの処理
      }
    }
  });
//googleformへのページ遷移をキャンセル
event.preventDefault();
});
});

※formタグに#g-formを付ける




これでCSSだけでGoogleフォームが自由にカスタマイズ出来るようになります。スニペットなどを使ってリッチなフォームを作ってみましょう。

copypet.jp

srcsetを使ってimg要素を切り替える

webサイト制作

img要素を画面幅によって切り替えたい場合、以前はJavascript等でwindow幅によって画像のファイル名を変える、などの方法が取られていましたが、html5.1,で策定された「srcset」を使う事で手間のかかるCSSやJavaScriptを必要とせず、htmlのみでデバイスによって適切なimgが表示させられます。

srcsetとは

  • srcsetはHTML5で策定された新属性
  • この要素はブラウザのスクリーン要件(幅、高さ、ピクセル密度)に応じて、異なる画像を読み込む事ができる
  • IEでは使うことが出来ない(http://caniuse.com/#search=srcset)

picture要素

picture要素を使うと、画面解像度や画面幅、画像形式等に基づいて、開発者が任意の画像を出し分けることが可能です。
pictureタグは複数のsourceタグと一つのimgタグで構成されます。sourceタグには3つの属性を指定します。

  • media属性(メディアクエリ)
  • srcset属性
  • sizes属性
srcset属性

画像ファイルのパスと横幅は、imgタグのsrcset属性に記述します。「画像ファイルの横幅」は、「画像をウェブページ上で表示する際の横幅」では無く画像自体の横幅です。


sizes属性

表示する画像の横幅はsizes属性に記述します。メディアクエリーと組み合わせて複数の横幅を指定可能です。
例：ディスプレイ1200px以下の時は画面幅、それ以外では1200pxで画像を表示したい場合は次のように記述します。

sizes="(max-width:1280px) 100vw, 1280px"
レスポンシブイメージのソース

今回の仕様はPC画像とSP画像の２つを用意して

  • デバイスの横幅が1200px以上の場合は1200px幅のpc用画像を画面中央に表示
  • デバイスの横幅が1200px~641pxの間は1200px幅のpc用画像を画面画面一杯にフルードで表示。
  • デバイスの横幅が640px以下の場合は640px幅のsp用画像を画面一杯にフルードで表示。

※imgにフルードイメージの設定を必ず指定

<body>
<picture>
<source media="(min-width:1200px)" srcset="img/pc.jpg 1200w" sizes="1200px">
<source media="(min-width:641px)" srcset="img/pc.jpg 1200w" sizes="100vw">
<source media="(max-width:640px)" srcset="img/sp.jpg 640w" sizes="100vw">
<img src="img/sp.jpg" alt="">
</picture>
</body>

レスポンシブイメージは便利な機能ですがIE11では非対応なので、IE対応必須という要件ではポリフィルを用います。


ics.media