favicon（ファビコン）は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon（フェイバリット・アイコン：お気に入りアイコン）という英語の語句を縮約したものである。
モダンブラウザーでは通常のPNGやGIF形式でも表示出来ますが、IEでは今のところ「.icoファイル」でないと表示出来ないので、PNGなどで作った画像を「.ico」ファイルにジェネレーターなどで変換しましょう。
Photoshopからそのまま「.icoファイル」に書き出せるプラグインなどもありますが、「.icoファイル」の特性であるマルチアイコン化（複数のサイズの画像を１つのicoファイルで持つ事が出来る）をするには、やはりネット上にあるジェネレーターを使うのが便利です。
現在はpng画像で作成しています。サイズは32x32pxです
<link rel="shortcut icon" href="favicon.png">
Git（ギット）とは、バージョン管理を行うためのツールのことです。複数人でプログラミングやコーディングを行う場合、ソースコードを効率的に管理・運用する必要があります。「誰がどのファイルのどの部分を修正したのか？」や「リリース予定の機能追加で更新するファイルは、どれとどれか？」といったことです。
例えば、Aさんがトップページの修正を行っている間に、Bさんがアクセスページの修正を行っていたとします。お互いに修正が終わり修正内容をアップロードした場合、AさんのデータにはBさんが修正した内容分は反映されていないので、アップした内容はAさんの作業分しかアップロードされていない事になります。さらに、その後Bさんがデータをアップロードしてしまうと、今度はBさんが修正したアクセスページのみが反映されて、Aさんが修正した分は消えてしまいます。なので、このような事が起こらないように、事前にローカル上で互いのデータを見比べて、AさんとBさんのデータの差分をお互いにチェックしてからアップロードをする必要があります。
Gitはこういった場合に作業をより円滑に進められるようにつくられたツールで、システム開発の現場では一般的に使われているツールの一つです。
Gitは通常、リモート上とローカル上を使い分けて作業を行います。GitHub（ギットハブ）とは、このリモートにあたる部分を提供しているサービスのことです。複数人での開発をサポートしてくれる便利な機能が備わっていて、現在ではエンジニアにとって欠かせないツールの一つになりました。無料でも使用する事が出来ます。
GitのGUIクライアントツールと呼ばれ、Gitの操作を簡単にするものです。通常Gitのコマンドはターミナル上で打ち込みますが、SourceTreeを使う事でより視覚的に、簡単に作業を行う事が出来ます。
初めてGitを触る人にとって、解り辛さの原因の１つに用語の解り辛さが挙げられます。意味をしっかりと理解出来れば作業自体は難しくないので、まずはよく使うワードとその意味をしっかりと理解しましょう。
リポジトリとは、ファイルやディレクトリの状態を保存する場所です。変更履歴を管理したいディレクトリなどをリポジトリの管理下に置くことで、そのディレクトリ内のファイルなどの変更履歴を記録することができます。Dreamweaverで作業する時に設定する「サイトの管理」と同じような物です。
リポジトリは自分のマシン内にある「ローカルリポジトリ」とサーバなどネットワーク上にある「リモートリポジトリ」の2箇所にあります。基本的にローカルリポジトリで作業を行い、その作業内容をリモートポジトリへプッシュする流れで行います。GitHubはこの「リモートリポジトリ」の場所を提供してくれるサービスです。
gitの作業スペースには「ワーキングツリー」と「インデックス」があります。 ワーキングツリーは作業している最中のスペース、インデックスはコミットするためのファイルを登録しておくためのスペースです。 ステージングとは、「インデックスにコミットするファイルを登録する」ということです。
コミット(commit) ：ファイルの追加や変更の履歴をリポジトリに保存すること。GitHubではこの際に作業者が「どこどこを変更しました」など他の人に解るようにメモを残せるような機能もついています。
プッシュ(push) ：ファイルの追加や変更の履歴をリモートリポジトリにアップロードするための操作です。
github上のデータをダウンロードする操作です。
基本的な作業の手順としては
といった感じです。
ソフトウェアの開発では、現在リリースしてるバージョンのメンテナンスをしながら新たな機能追加やバグ修正を行うことがあります。このような、並行して行われる複数のバージョン管理を行うために、Gitにはブランチ（branch）という機能があります。
ブランチは履歴の流れを分岐して記録していくものです。分岐したブランチは他のブランチの影響を受けないため、同じリポジトリ内でそれぞれの開発を行っていくことができます。
gitのバージョン確認
git --version
gitの初期化
git init
gitのユーザー登録
git config --global user.name "Sample" git config --global user.email sample@example.com
ユーザーへの自動返信メールと同じメールが管理者にも送られます。
※iPhoneでは「var sendername」に設定した値は無効になります。
function sendMailGoogleForm() {
Logger.log('sendMailGoogleForm() debug start');
//------------------------------------------------------------
// 設定エリアここから
//------------------------------------------------------------
// 件名、本文、フッター
var subject = "[お問い合わせありがとうございます。]";
var body
= "お問い合わせありがとうございます。\n\n"
+"------------------------------------------------------------\n";
var footer
= "------------------------------------------------------------\n\n"
+"後ほど担当者よりご連絡させていただきます。";
// 入力カラム名の指定
var NAME_COL_NAME = 'お名前';
var MAIL_COL_NAME = 'メールアドレス';
// メール送信先
var admin = "管理者のメールアドレス"; // 管理者（必須）
var sendername = "株式会社ふぇりか";//送信者名（必須）
var cc = ""; // Cc:
var bcc = admin; // Bcc:
var reply = admin; // Reply-To:
var to = ""; // To: （入力者のアドレスが自動で入ります）
//------------------------------------------------------------
// 設定エリアここまで
//------------------------------------------------------------
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;
// 送信先オプション
var options = {name: sendername};
if ( cc ) options.cc = cc;
if ( bcc ) options.bcc = bcc;
if ( reply ) options.replyTo = reply;
// メール送信
if ( to ) {
MailApp.sendEmail(to, subject, body, options);
}else{
MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
}
}catch(e){
MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
}
}$name = htmlspecialchars($_POST["onamae"],ENT_QUOTES);
今回のお問い合わせフォームはphpを使い、
の3つを作成します。
https://codepen.io/yachin29/pen/ZEBNENN
万が一、確認画面からアクセスしてしまった際にそのままではpostで値が送られていない為エラーになってしまうので、それを回避するために値が空だったら入力画面にリダイレクトさせる処理を行います。
issetを使う事で変数がセットされているか確認する事が出来ます。
あたまに「!」を付ける事で逆の意味になるので、以下の記述で「$_POST['name']」に値がセットされていなかったら、という意味になります。
!(isset($_POST['name']))
//$_POST["name"]の値が空だったらLocationで指定しているファイルに強制移動（リダイレクト）させる
if(!(isset($_POST['name']))){
header('Location:index.html');
exit;
}
NG $name = $_POST["onamae"]; OK $name = htmlspecialchars($_POST["onamae"],ENT_QUOTES);
<button type="button" onclick=history.back()>戻る</button>
サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへ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を付ける
Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する。
name属性は階層の深い所にあるので「entry.」で検索し、「name="entry.00001234"」のようなname属性の値を取得しましょう。
※複数項目の場合「name="entry.00001234_sentinel"」のようになっているので「entry.00001234」の部分だけ取ってきます。また複数項目は順番が後回しになっているので「entry.」の順番にも気をつけましょう。
複数の項目が選ばれるようにするにはcheckboxを使用しますが、google formでは複数項目の扱い方が複雑なので、こちらで配列の中身を文字列に変換しておきます。
$aaa = implode("、", $_POST["配列名"]);
入力画面の作成
input.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>お問合せフォーム｜入力画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>入力画面</h1> <ul class="step"> <li data-num="01" class="current">入力画面</li> <li data-num="02">確認画面</li> <li data-num="03">完了画面</li> </ul> <form action="#" method="post"> <dl> <dt>お名前<span>必須</span></dt> <dd><input type="text" required name="" autocomplete="name"><span>例:山田 太郎</span></dd> <dt>メールアドレス<span>必須</span></dt> <dd><input type="email" required name="" autocomplete="email"><span>例:abc@xxx.com</span></dd> <dt>お問い合わせ項目<span>必須</span></dt> <dd class="row-2"> <label for="item-1"> <input type="radio" name="item" id="item-1" value="サービスについて" required checked>サービスについて </label> <label for="item-2"> <input type="radio" name="item" id="item-2" value="採用について" required>採用について </label> <label for="item-3"> <input type="radio" name="item" id="item-3" value="資料請求" required>資料請求 </label> <label for="item-4"> <input type="radio" name="item" id="item-4" value="その他" required>その他 </label> </dd> <dt>興味のある項目<span>複数選択可</span></dt> <dd class="row-2"> <label for="check-1"> <input type="checkbox" name="interest" id="check-1" value="web3">web3 </label> <label for="check-2"> <input type="checkbox" name="interest" id="check-2" value="プログラミング">プログラミング </label> <label for="check-3"> <input type="checkbox" name="interest" id="check-3" value="サイト制作">サイト制作 </label> <label for="check-4"> <input type="checkbox" name="interest" id="check-4" value="動画編集">動画編集 </label> </dd> <dt>お問い合わせ内容<span>必須</span></dt> <dd> <textarea required></textarea> <span>例:何か気になることやご質問、ご不明な点などあればご記入ください。</span> </dd> </dl> <div class="policy-box"> <div class="policy-inner"> <h2>プライバシーポリシー</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, esse sapiente voluptate, vitae quibusdam quidem, distinctio aut modi aspernatur ipsam iure mollitia doloribus natus corrupti alias blanditiis accusantium. Praesentium, voluptates!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, esse sapiente voluptate, vitae quibusdam quidem, distinctio aut modi aspernatur ipsam iure mollitia doloribus natus corrupti alias blanditiis accusantium. Praesentium, voluptates!</p> </div><!-- /.policy-inner --> <label for="policy" class="policy-btn"> <input type="checkbox" id="policy" required> プライバシーポリシーの内容を確認し同意します。<span>必須</span> </label> </div><!-- /.policy-box --> <div class="form-btn"> <input type="submit" value="内容を確認"> <input type="reset" value="内容をリセット"> </div> </form> </body> </html>
確認画面
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>お問合せフォーム｜確認画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>確認画面</h1> <ul class="step"> <li data-num="01">入力画面</li> <li data-num="02" class="current">確認画面</li> <li data-num="03">完了画面</li> </ul> <form action="#" method="post"> <dl> <dt>お名前<span>必須</span></dt> <dd></dd> <dt>メールアドレス<span>必須</span></dt> <dd></dd> <dt>お問い合わせ項目<span>必須</span></dt> <dd class="row-2"> </dd> <dt>興味のある項目<span>複数選択可</span></dt> <dd class="row-2"> </dd> <dt>お問い合わせ内容<span>必須</span></dt> <dd> </dd> </dl> <div class="form-btn"> <input type="submit" value="送信"> <input type="button" value="入力画面に戻る"> </div> </form> </body> </html>
完了画面の作成
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>お問合せフォーム｜完了画面</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>完了画面</h1> <ul class="step"> <li data-num="01">入力画面</li> <li data-num="02">確認画面</li> <li data-num="03" class="current">完了画面</li> </ul> <div class="thanks-txt"> <h2>お問い合わせありがとうございました。</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui, sunt. Officiis optio culpa voluptate veniam quidem ea modi quas nemo. Quae dignissimos accusamus, ratione autem officiis ut enim aut debitis?</p> </div> <div class="question"> <h2>よくある質問</h2> <details open> <summary> <h3 data-icon="Q">ポイントの利用は出来ますか？Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, velit.</h3> </summary> <div class="answer"> <p data-icon="A">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, obcaecati inventore delectus nam, a aliquam repellendus nihil praesentium reprehenderit in dolorem assumenda voluptatum architecto nisi quidem sint totam rem facere.</p> </div> </details> <details> <summary> <h3 data-icon="Q">営業時間を知りたいのですが？</h3> </summary> <div class="answer"> <p data-icon="A">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, obcaecati inventore delectus nam, a aliquam repellendus nihil praesentium reprehenderit in dolorem assumenda voluptatum architecto nisi quidem sint totam rem facere.</p> </div> </details> <details> <summary> <h3 data-icon="Q">未成年ですが、申し込みは可能ですか?</h3> </summary> <div class="answer"> <p data-icon="A">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, obcaecati inventore delectus nam, a aliquam repellendus nihil praesentium reprehenderit in dolorem assumenda voluptatum architecto nisi quidem sint totam rem facere.</p> </div> </details> </div><!-- /.question --> </body> </html>
style.css
@charset "utf-8"; :root{ --color_1:#2d4b51;/* 濃い目の色 */ --color_2:#e0e8e8;/* 薄い色 */ } html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;} h1{ text-align: center; padding: 50px 0 20px; } .step{ display: flex; max-width: 600px; margin: 80px auto 120px; justify-content: space-between; } .step>li{ color: var(--color_1); } .step>li::before{ display: block; content: attr(data-num); width: 40px; height: 40px; border-radius: 50%; background-color: var(--color_1); color: #FFF; text-align: center; line-height: 40px; font-size: 18px; margin: 0 auto 6px; } .step>li.current::before{ background-color: #FFF; color: var(--color_1); border: 2px solid var(--color_1); } form{ max-width: 800px; margin: 0 auto 100px; } form>dl{ display: flex; flex-wrap: wrap; border: 1px solid var(--color_1); } form dt{ width: 30%; background-color: var(--color_2); border-right: 1px solid var(--color_1); padding: 20px; } form dt>span{ font-size: 13px; background-color: var(--color_1); padding: 4px; color: #FFF; margin-left: 10px; } form dd{ width: 70%; padding: 20px; } form dt:nth-of-type(n+2),form dd:nth-of-type(n+2){ border-top: 1px solid var(--color_1); } [type="text"],[type="email"]{ border: 1px solid var(--color_1); padding: 4px; width: 50%; } dd>span{ display: block; font-size: 14px; margin-top: 4px; } [type="radio"],[type="checkbox"]{ transform: scale(1.8); accent-color: var(--color_1); margin-right: 14px; } .row-2>label{ display: inline-block; width: 40%; margin-bottom: 10px; } textarea{ border: 1px solid var(--color_1); width: 80%; height: 160px; } .policy-box{ width: 70%; margin: 100px auto; } .policy-inner{ padding: 50px 20px; height: 200px; overflow: scroll; border: 1px solid var(--color_1); margin-bottom: 40px; } .policy-inner>h2{ margin-bottom: 100px; text-align: center; } .policy-inner>p{ margin-bottom: 50px; line-height: 3; font-size: 20px; } .policy-btn{ background-color: var(--color_2); padding: 14px; } .policy-btn:hover{ background-color: #c2c9ca; } .policy-btn>span{ font-size: 13px; background-color: var(--color_1); padding: 4px; color: #FFF; margin-left: 10px; } .form-btn{ margin-top: 100px; text-align: center; } [type="submit"]{ background-color: var(--color_1); color: #FFF; padding: 20px 80px; margin-right: 40px; } [type="reset"],[type="button"]{ background-color: #e8bbbb; padding: 20px 20px; } /* 完了画面 */ .thanks-txt{ max-width: 600px; margin: 100px auto; padding: 10px; } .thanks-txt>h2{ margin-bottom: 30px; } /* アコーディオン部分 */ .question{ width: 70%; margin: 100px auto; } details{ margin-bottom: 50px; } summary{ list-style: none;/* 黒い三角を消す */ background-color: var(--color_1); color: #FFF; padding: 20px 60px; font-size: 22px; cursor: pointer; } summary>h3{ font-size: 26px; } summary>h3::before{ display: inline-block; content: attr(data-icon); text-decoration: none; margin: 0 0.4em 0 -1.3em; } summary:hover>h3{ text-decoration: underline; } .question>h2{ text-align: center; padding: 50px 0 30px; } .answer{ background-color: var(--color_2); padding: 20px 60px; } .answer>p{ font-size: 18px; line-height: 2; } .answer>p::before{ display: inline-block; content: attr(data-icon); font-size: 30px; line-height: 1; color: crimson; font-weight: bold; margin: 0 0.5em 0 -1.3em; }
EFO（Entry Form Optimisation）は「入力フォーム最適化」の略で、入力フォームをユーザーにとって使いやすく入力しやすい形に最適化し、入力して内容を送信できるように改善を行う施策のことを指します。
対面でのサービスが難しくなった今日「お問い合わせフォーム」の価値はこれまで以上に重要になりました。
ユーザーにとって、ストレスのかからないフォームを作る事が求められます。
例
企業側は多くの情報を取りたがりますが、目標が達成出来る必要最低限の項目のみでOK
適切なtype指定をする事で入力時のストレスが緩和されます
HTMLのautocomplete属性を指定する事で、ブラウザへ設定した情報を利用したオートコンプリート機能（入力内容の自動補完）が利用できるようになります。
