株式会社アルバステラ » albastella 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 WPの記事内でphpを使う[ショートコード] http://albastella.co.jp/2015/12/14/wp%e3%81%ae%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%ab%e3%81%a7php%e3%82%92%e4%bd%bf%e3%81%86%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89/ http://albastella.co.jp/2015/12/14/wp%e3%81%ae%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%ab%e3%81%a7php%e3%82%92%e4%bd%bf%e3%81%86%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89/#comments Mon, 14 Dec 2015 05:07:01 +0000 http://albastella.co.jp/?p=197 wordpressの記事内でphpを使いたいってことはよくあるのだけれど、プラグイン「Exec-PHP」を使うのはセキュリティー上よくないってことがよく言われていたし、phpを記事内で使用するのはあきらめていました。

ただ、今回どうしても必要な状況でどうしようかと思案していたところ、ショートコードで読み込む方法を発見！
今後も役立ちそうなのでメモ残しておかなければ。

まず、ワードプレスのテーマ内、
fanctions.php内にショートコードの設定を記述

function Include_my_php($params = array()) {
    extract(shortcode_atts(array(
        'file' => 'default'
    ), $params));
    ob_start();
   include(get_theme_root() . '/' . get_template() . "/shortcode/$file.php");
    return ob_get_clean();
}
add_shortcode('onphp', 'Include_my_php');

今回はテーマフォルダーの中にshortcodeというフォルダーを作ってそこに読み込むphpを配置。
shortcode/exeample.php
というファイルを読み込んでくれたら成功！

ちなみに、子テーマで使用する場合は

include(get_theme_root() . '/' . get_template() . "/shortcode/$file.php");

の部分を

include(STYLESHEETPATH . "/shortcode/$file.php");

に置き換えます。

記事内でのショートコードの記述は。

[onphp file='example']

でOK。
これでexample.phpの内容が表示されます。

]]> http://albastella.co.jp/2015/12/14/wp%e3%81%ae%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%ab%e3%81%a7php%e3%82%92%e4%bd%bf%e3%81%86%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%b3%e3%83%bc%e3%83%89/feed/ 0 記事内にソースコードを表示させるプラグイン http://albastella.co.jp/2014/05/01/%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%ab%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/ http://albastella.co.jp/2014/05/01/%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%ab%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/#comments Thu, 01 May 2014 04:23:03 +0000 http://albastella.co.jp/?p=182 <?php echo 'hello world!'; ?>

今まで、製作するにあたって調べたこととかよく使うけど忘れがちなことを残しておきたいと思いながらずるずる今まできていたのですが、今日から始めることにしました。（中途半端に終わる予感もするが。。。）

さて第一弾、ブログ記事内にソースコードを書き込んでいるのをよく目にするのだけど、「あれは皆さんどうしているのだろうか？」と思い調べてみたら、wordpressのプラグインがありました。

参考プラグイン

SyntaxHighlighter Evolvedというプラグインが使えそう。
ダウンロード先はこちら。
プラグインを有効にして、設定のSyntaxHighlighter Evolvedで細かい設定ができる。
現在バージョン3.x と 2.x　から選べるようになってるみたいだけど、3.xは長い行の折り返しができないらしいので、2.xのほうが今のとこ使いやすそう。

使い方は、記事投稿画面でhtmlの時は[html]～[/html]、cssは[css]～[/css]、phpは[php]～[/php]、javascriptは[JavaScript]～[/JavaScript]でそれぞれ囲うだけ。　

]]> http://albastella.co.jp/2014/05/01/%e8%a8%98%e4%ba%8b%e5%86%85%e3%81%ab%e3%82%bd%e3%83%bc%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%89%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%82%8b%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3/feed/ 0 行く年 http://albastella.co.jp/2013/12/28/%e8%a1%8c%e3%81%8f%e5%b9%b4/ http://albastella.co.jp/2013/12/28/%e8%a1%8c%e3%81%8f%e5%b9%b4/#comments Sat, 28 Dec 2013 02:47:51 +0000 http://sakusei.heteml.jp/afnet/?p=174

１２月は、バタバタしておりましたが、何とか仕事納め。

今年一年振り返って、いろいろありました。
いいことも、悪いことも。。。

まぁ、気持ち切り替えて新年からスタートを楽しみにします。

来年は、いい年でありますように

]]> http://albastella.co.jp/2013/12/28/%e8%a1%8c%e3%81%8f%e5%b9%b4/feed/ 0 年末年始お休みのお知らせ http://albastella.co.jp/2013/12/27/176/ http://albastella.co.jp/2013/12/27/176/#comments Fri, 27 Dec 2013 02:51:50 +0000 http://sakusei.heteml.jp/afnet/?p=176 下記の期間お休みをいただきます。
2013/12/28～2014/1/6
ご了承いただけますようよろしくお願いいたします。

]]> http://albastella.co.jp/2013/12/27/176/feed/ 0