株式会社アルバステラ » jQuery http://albastella.co.jp WEBサイト製作・販売・サポート Wed, 03 Oct 2018 07:11:11 +0000 ja hourly 1 https://wordpress.org/?v=3.8.41 fullcalendarに複数のgoogleカレンダーを表示する http://albastella.co.jp/2016/01/05/fullcalendar%e3%81%ab%e8%a4%87%e6%95%b0%e3%81%aegoogle%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b/ http://albastella.co.jp/2016/01/05/fullcalendar%e3%81%ab%e8%a4%87%e6%95%b0%e3%81%aegoogle%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b/#comments Tue, 05 Jan 2016 08:24:07 +0000 http://albastella.co.jp/?p=209 あけましておめでとうございます。
本年もよろしくお願い申し上げます。

サイト内にカレンダーを表示させる方法はいくつかあると思いますが、
fullcalender.jsがデザイン変更も簡単で、よく利用しております。
http://fullcalendar.io/
googleカレンダーの内容をそのまま表示させたりできるので非常に便利です。

今回、複数のgoogoleカレンダーをこのfullcalenderに表示させたかったのですが、
Google API v3を使用して複数とりこむ方法がわからず苦戦。。
本家サイトの解説を参考に設定できました。

まずは基本設定
【heder内】

<link rel='stylesheet' href='css/fullcalendar.css' type='text/css' media='all' />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src='js/moment.min.js'></script>
<script type='text/javascript' src='js/fullcalendar.min.js'></script>
<script type='text/javascript' src='js/gcal.js'></script>

【body内】
カレンダーを表示させたい位置に書く

<div class="calendar1"></div>

【オプション設定】
Google APIの取得方法は割愛します。
googleカレンダーを複数読み込むための設定をここでします。
（html内に設置）

<script>
$(document).ready(function() {
	
　　　　　$('.calendar1').fullCalendar(
		{

			// API キーを設定する
			googleCalendarApiKey: 'ここに取得したAPIキー',
		
			 eventSources: [
            {
				//スケジュール1
                googleCalendarId: 'カレンダーID１',
		className: 'calendar_1'
				
            },
            {
				//スケジュール２
                googleCalendarId: 'カレンダーID２',
                className: 'calendar_2'
            }
        ],
			},
		});
		
	});
	
</script>

カレンダーIDは、表示させたいgoogleカレンダー（共有で一般公開設定必須）の「カレンダー設定」→「カレンダーのアドレス」で確認できます。
「 className:」でclass指定することで、cssでのデザイン設定もできます。

]]> http://albastella.co.jp/2016/01/05/fullcalendar%e3%81%ab%e8%a4%87%e6%95%b0%e3%81%aegoogle%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%99%e3%82%8b/feed/ 0 javascriptからphpへフォームデータを渡す http://albastella.co.jp/2015/12/14/javascript%e3%81%8b%e3%82%89php%e3%81%b8%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e6%b8%a1%e3%81%99/ http://albastella.co.jp/2015/12/14/javascript%e3%81%8b%e3%82%89php%e3%81%b8%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e6%b8%a1%e3%81%99/#comments Mon, 14 Dec 2015 07:06:37 +0000 http://albastella.co.jp/?p=203 ページ遷移なしのメールフォームを設置する案件で、
javascriptからphpへフォームデータを渡す必要があり、そのときの覚書。
結局これは使わなかったのやけど。。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8" />
    <title>example</title>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(document).ready(function()
    {
		
        $('#send').click(function()
        {
            //postメソッドで送るデータを定義 var data = {パラメータ名 : 値};
           var data = {
		namae : $('#namae').val(),
		email : $('#email').val(),
		ask : $('#ask').val()
	};

            $.ajax({
                type: "post",
                url: "send.php",
                data: data,
                //Ajax通信が成功した場合
                success: function(data, dataType)
                {
                //PHPから返ってきたデータの表示
                alert(data);
			    //送信完了後フォームの内容をリセット
				document.forms[0].elements[0].value="";
				document.forms[0].elements[1].value="";
			    document.forms[0].elements[2].value="";
                },
               //Ajax通信が失敗した場合のメッセージ
                error: function()
                {
                alert('メールの送信が失敗しました。');
                }
            });
            return false;
        });
    });
    </script>
</head>
<body>
<form id="contactForm" name="contactForm" method="post" >
<ul>
<li><input type="text" id="namae" name="namae" placeholder="名前"></li>
<li><input type="email" id="email" name="email" placeholder="E-mail" ></li>
<li><textarea name="ask" id="ask" placeholder="お問い合わせ内容" ></textarea></li>
</ul>
<p class="more"><input id="send" type="submit" value="送る"></p>
</form>
</body>
</html>

php

<?php
header("Content-type: text/plain; charset=UTF-8");
$sender_name = $_POST['namae'];
$sender_mail_address = $_POST['email'];
$contact_body = $_POST['ask'];

//空白チェック
    $errorflag = 0;
	if ($sender_name == null) {
		$error_name = "お名前が未入力です";
		$errorflag = 1;
	}else{$error_name = "";}
	if ($sender_mail_address == null) {
		$error_mail = "メールアドレスが未入力です";
		$errorflag = 1;
	}else{$error_mail = "";}
	if ($contact_body == null) {
		$error_ask = "お問い合わせ内容が未入力です";
		$errorflag = 1;
	}else{$error_ask = "";}
	
if ($errorflag == 1)
{
    if($error_name != ""){ echo $error_name."\n";}
	if($error_mail != ""){ echo $error_mail."\n";}
	if($error_ask != ""){ echo $error_ask."\n";}
    
}
else
{
   //ここにメール送信の設定
   
   echo "送信が完了しました";
}
?>

ざっくり言うと、javascriptからpost値をphpに渡して、エラーがなければ送信して、結果をjavascriptに返すってことをしています。

phpのエラーチェックとかは適当に書いてますが、send.phpに直接アクセスされて空メールが送信されるのを防止する意味合いぐらいで設定してます。
今回は未完成のままになってしまいますが。
javascriptでフォームの未入力などをチェック。→入力に誤りがない状態でphpに値を送信。→送信完了後フォームをリセットというのが最終予定でした。

]]> http://albastella.co.jp/2015/12/14/javascript%e3%81%8b%e3%82%89php%e3%81%b8%e3%83%95%e3%82%a9%e3%83%bc%e3%83%a0%e3%83%87%e3%83%bc%e3%82%bf%e3%82%92%e6%b8%a1%e3%81%99/feed/ 0