2018-02-17

Search Consoleの設定

サーチコンソールとはGoogle 検索結果でのサイトのパフォーマンスを監視、管理できる Google の無料サービスのことです。自分のサイトが Google 検索結果に表示されるようにするために Search Console に登録する必要はありませんが、登録していただくとサイトが Google にどのように認識されるかを確認し、検索結果でのサイトのパフォーマンスを最適化できるようになります。

Search Console - ホーム

サーチコンソールで判ることは
・ページのクリック数
・クリック率や掲載順位
・クエリ（ユーザーが検索時に入力する単語）
などです。

liskul.com

careerhack.en-japan.com

2018-02-16

jQueryでのcookieの指定

jQueryプラグイン

jQueryでのcookieのコントロールにはプラグインを使用するのが便利です。

github.com

<script>
  $(function(){
 if($.cookie("access")){
    $('.box').css({display:'none'});
    } else {
     $('.box').delay(2000).fadeOut(2000);
    };
     $(window).load(function(){
		$.cookie("access",$('body').addClass('access'));
  });
  });
 </script>

2018-02-15

カラースキーム｜色彩計画

Webサイト制作

色のもつ心理的・生理的・物理的な性質を利用して、まとまりのある雰囲気を作るなど、目的に合った配色を行うための設計。

サイト制作において配色は非常に大事で配色次第で、そのサイトのイメージが決まってしまうと言っても過言ではありません。そのサイトの目的、ターゲットユーザーなどを考えて、サイトの配色を考えてみましょう。また、既存サイトの配色なども参考にしてみましょう。

www.hp-stylelink.com

photoshopvip.net

2018-02-09

スマホで見た時にjQueryを無効・有効にする（ユーザーエージェントで判別する方法）

jQuery

前回の授業では

if($(window).innerWidth() <= 767){
  
  };

のようにwindowの横幅を基準に条件分岐させるパターンをやりました。

今回のやり方はユーザーエージェントでスマホかPCか判別してやる方法です。

ユーザーエージェント

ユーザーエージェント（UserAgent）とはウェブサイトに訪問する際「Google Chromeからアクセスしています」「iPhoneからアクセスしています」などのどんな環境でアクセスしているのかの利用者の情報のことを言います。
ウェブサイトにアクセスする際にはこのユーザーエージェントを必ず送ることになっています。

今回のパターンはPC・タブレットであればjQueryを有効に。スマホ（iPhone・Android）であればjQueryを無効にします。
「!」エクスクラメーションマーク (exclamation mark)とは、Javascriptでは否定の意味で使われます。

if(!navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}

逆にPC・タブレットであればjQueryを無効に。スマホ（iPhone・Android）であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|Android)/)){
$(function(){
//ここにjQueryの記述
});
}

また、PCであればjQueryを無効に。スマホ（iPhone・Android）とタブレット（iPad）であればjQueryを有効の場合

if(navigator.userAgent.match(/(iPhone|iPad|Android)/)){
$(function(){
//ここにjQueryの記述
});
}

このように「|」で区切って自身でユーザーエージェントを追加する事も出来ます。

2018-02-09

iPhoneの仕様に対応したresize設定

iPhoneとandroidではresizeイベントの定義が若干違く、iPhoneでのresizeは横だろうが縦だろうがスクロールするとrisize判定がされてしまうので、iPhone用に横幅のみresize判定が取れる様にします。

横幅のみに対応したresizeイベントの記述

$(function(){  
var windowWidth = $(window).width();

$(window).on('load resize', function(){
  var ww = $(window).width();
  if(windowWidth != ww) {
    if($(window).innerWidth() < 768 ){
    //スマホの時の状態
    $('#gnav').hide();//SPの時はnavを非表示にしておく
  }else{
    //タブレット・PCの時の状態
    $('#gnav').show();//SP以外の時はnavを表示しておく
    $('#hum').find('span').removeClass('click');
  };
   windowWidth = ww;
  };
});
  $('#hum').on('click',function(){
    $(this).find('span').toggleClass('click');
    $('#gnav:not(:animated)').slideToggle(100);
});
});

サンプル

RWD-ハンバーガーメニュー

2018-01-29

Googleフォームに自動返信機能を付ける

Webサイト制作

Googleフォームに自動返信機能を付ける

作ったフォームをカスタマイズして、フォームを記入してくれた人に自動でメール返信が出来る機能を追加します。
自動返信機能を付ける事でフォームを利用したユーザーにタスクの進行状況を伝える事が出来るので、結果としてユーザビリティの向上に繋がります。

1 お問い合わせフォームとリンクさせた「スプレットシート」の、「ツール」メニューから「スクリプトエディタ...」を選んでスクリプトエディタを起動する。
f:id:yachin29:20150403144259j:plain

2 「無題のプロジェクト」をクリックし、プロジェクト名をつけて「OK」をクリック。

3 エディタ内のfunction myFunction(){}を削除し、以下のスクリプトに差し替える。

function autoreply() {


 var title = "お問い合わせありがとうございます。"; 
 var body
 = "お問い合わせありがとうございます。\n"

 var footer
 = "------------------------------------------------------------\n\n"
 + "お問い合わせいただきましてありがとうございます。\n"
 + "内容を確認させて頂き、\n"
 + "こちらよりご連絡させていただきますので、\n"
 + "よろしくお願いいたします。\n\n"
 var name = 'お名前';
 var mail = 'メールアドレス';
　　var address = "";
 
 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(); 
 body += "■"+col_name+"\n";
 body += col_value + "\n\n";
 if ( col_name === name ) {
 body = col_value+" 様\n\n"+body;
 }
 if ( col_name === mail ) {
 address = col_value;
 }
 }
 body += footer;
 

 GmailApp.sendEmail(address,title,body);
}