Ajaxメールフォームの作り方
foundation5.0.2を利用できるようにする
Cakephp2.4.2を利用したAjaxメールフォームの作り方をまとめてみようと思う。cssにはfoundation5を利用する。ある程度ボリュームのある説明になるはずなので、今回は準備編としてみた。
Cakephpのインストールはこちらを参照ください。
準備編以降の目次は以下のとおり
zurb foundationのダウンロードして展開後、パッケージのcssフォルダの中身を
app\webroot\css
にコピーします。フォルダの階層は以下のようになります。
続いて、jsフォルダの中身を
app\webroot\js
にコピーします。フォルダ階層は画像のようになります。
Cakephpのlayoutでfoundation5の読み込み設定
少し長いがコード全体を載せてみよう。Cakephpをインストールした初期の状態から
app\View\Layouts\default.ctp
を以下のように変更し、foundation5を利用できるようにした状態である。
<!DOCTYPE html>
<html>
<head>
<?php echo $this->Html->charset(); ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
<?php echo $title_for_layout; ?>
</title>
<?php
echo $this->Html->meta('icon');
echo $this->Html->css('foundation');
//echo $this->Html->css('cake.generic');
echo $this->fetch('meta');
echo $this->fetch('css');
?>
<script src="js/modernizr.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="content">
<div class="row">
<?php echo $this->Session->flash(); ?>
<?php echo $this->fetch('content'); ?>
</div>
</div>
<div id="footer">
</div>
</div>
<?php echo $this->element('sql_dump'); ?>
<?php
echo $this->Html->script(array('http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'), array('inline' => false));
//echo $this->Html->script(array('http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'), array('inline' => false));
echo $this->Html->script(array('foundation.min'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.abide.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.accordion.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.alert.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.clearing.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.dropdown.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.interchange.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.joyride.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.magellan.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.offcanvas.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.orbit.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.reveal.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.tab.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.tooltip.js'), array('inline' => false));
echo $this->Html->script(array('foundation/foundation.topbar.js'), array('inline' => false));
echo $this->fetch('script');
echo $this->Js->writeBuffer(array('inline' => 'true'));
?>
<script type="text/javascript">
$(function() {
$(document).foundation();
});
</script>
</body>
</html>
2か所ほどコメントアウトしている箇所があるが意図的に載せているのでスルーしていただきたい。
上のように変更したら、ブラウザの更新ボタンで再表示してみよう。
ここまでの作業で正確にfoundation5のjavascript関連のファイルが読み込まれているか確認してみたい。
chromeの場合は、右上の
設定 → ツール → JavaScriptコンソール
でフロント側のエラーを確認できるようになっている。読み込めていないファイルがある場合は、以下のように表示される。
javascriptファイルを読み込もうとしたが404エラーが返された(該当するファイルが存在しなかった)のファイル名が適切か確認し、間違っていたので修正した。なお、上でエラー表示されているファイル名は、foundation4のjs関連ファイルをそのままコピーして読み込もうとしたためである。
メインコンテンツの変更
上のlayoutの中で、
<?php echo $this->fetch('content'); ?>
という行があるこの部分がcakephpでメインコンテンツを表示する部分になっている。Cakephpインストール後の状態だと、
app\View\Pages\home.ctp
とファイルの内容を表示するようになっている。このファイルの内容をfoundation5らしいものに変更してみよう。再度foundation5のダウンロードしたパッケージを確認してほしい。その中のルートディレクトリに
index.html
というファイルが存在する。そのファイルの中身をコピーしてhome.ctpにペーストすればfoundation5のcssが機能しているのかを確認できる。もしくは、index.htmlをファイルごとコピーして、home.ctpとしてペーストしてもよい。
ここまでで準備編はおしまい。Model編に続く