スマフォサイト制作

jQM

jQuery MobileでGoogle Mapを表示する

jQuery Mobileで構築しているスマフォサイト制作で、Google Mapを設置したいと考えた。しかし、apiとscriptを記述してもうまく表示されない。(描画が途中でストップしている)

そこで、jQuery Mobileを使用しGoogle Mapが表示されなかった時の対処方法を検索した。その中で、以下の記述方法が散見された。

$('#selector').bind('pageshow', function () {
    //地図を表示するスクリプトを書く
});

だが、いくら試しても表示されず諦めかけた時ふと原点に立ち返り、
「'pageshow'の正しい記述方法」を検索してみよう。
その結果、下記の記述を発見し、見事表示された。

$(document).on('pageshow', '#selector', function() {
    //地図を表示するスクリプトを書く
});

先人達の対処方法は大変貴重な物ではあるが、全て鵜呑みにするのではなく、きちんとした知識を自分の中に蓄える必要があると感じた。

お問い合わせ：データベース(1)

SQL

入力されたデータを保存するためのデータベース

  • サーバー上にデータベースを構築する
  • SQL文を記述する
  • お問い合わせ内容を格納するデータベースを作る
データベース作成
  • 有料サーバーの場合、契約内容によってデータベースの作成数が決まっているので注意する
テーブルを作成
  • テーブル名「inquiry」、フィールド数「4」

\***フィールドの設計

カラム 種別 長さ/値 デフォルト値 NULL インデックス A_I
id INT 　 なし × PRIMARY チェックを入れる
name VARCHAR 　 なし × 　 　
email VARCHAR 　 なし × 　 　
message VARCHAR 　 なし × 　 　


id

  • ユニークコード(通し番号)
  • 1件1件の問い合わせを識別する為
データ種別 意味 文字数 範囲
INT 整数 文字ではないので指定しない -2147483648〜2147483647
VARCHAR 文字列 最大文字数を指定する 0〜65,535文字


インデックス：PRIMARY

  • インデックスは「索引」の意味
  • これを設定するとデータの検索が早くなる
  • PRIMARYは1つのテーブルの中で1つのフィールドにしか設定できないインデックス
  • そのテーブルを代表するフィールド
  • 「主キー」とも呼ばれる


A_I(AUTO INCREMENT)

  • 自動的に通し番号をセットしてくれる
  • テーブルの最終レコードのコードを取得する
  • その値に1をプラスする
  • 新しいレコードのコードフィールドにその値をセットする

SQL文を記述

INSERT INTO inquiry (name, email, message) VALUES ('山田', 'yamada@gamil.com', 'はじめまして。');
  • SQLタブをクリック
  • 「INSERT INTO」がレコード追加命令
  • VALUESの左のフィールドに右の値をセットする
  • 実行する
表示で確認
  • 表示タブをクリック

お問い合わせデータをデータベースに自動保存

  1. データベースに「接続」する
  2. データベースエンジンにSQL文で命令を出す
  3. データベースから「切断」する
データベースに「接続」
$dsn = 'mysql:dsname=データベース名;host=データベースホスト名';
$user = 'ユーザー名';
$password = 'パスワード';
$dbh = new PDO($dsn, $user, $password);
$dbh -> query('SET NAMES UTF8');
  • XAMPP内では
$dsn = 'mysql:dbname=contactus;host=localhost';
$user = 'root';
$password = 'root';
$dbh = new PDO($dsn, $user, $password);
$dbh -> query('SET NAMES UTF8');
データベースエンジンにSQL文で命令を出す
$sql = 'ここにSQL文を書く';
$stmt = $dbh -> prepare($sql);
$stmt -> execute();
データベースから「切断」
$dbh = null;

入力画面の作成

《input.php》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>お問い合わせフォーム</title>
</head>
<body>
<div id="confirmation">
  <form action="check.php" method="post" id="inquiry">
    <table>
      <tr>
        <th><label for="name">お名前</label></th>
        <td><input type="text" name="name" size="20" id="name" class="text1"></td>
      </tr>
      <tr>
        <th><label for="email">メールアドレス</label></th>
        <td><input type="text" name="email" size="50" id="email" class="text2"></td>
      </tr>
      <tr>
        <th><label for="message">ご意見</label></th>
        <td><textarea name="message" cols="50" rows="5" class="text3" id="message"></textarea></td>
      </tr>
    </table>
    <input type="submit" value="確認画面へ">
  </form>
</div>
</body>
</html>

入力されたデータの確認

《check.php》

<?php
//フォームデータが空の場合は処理終了
if(empty($_POST)) {
  echo '処理終了';
  exit;
}
require_once 'Encode.php';

//セッションの開始
session_start();
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認画面</title>
<style>
section {
  width: 500px;
  margin: auto;
  text-align: center;
}
table {
  text-align: left;
  border: none;
}
td {
  width: 300px;
  padding: 3px;
}
td.subButtom {
  column-span: 2;
  text-align: right;
}
</style>
</head>
<body>
<section>
<h1>確認画面</h1>
<p>内容を確認してください。</p>
<?php
//入力値のチェック
if(empty($_POST['name'])) {
  echo 'お名前を入力してください。';
  exit;
}
if(empty($_POST['email'])) {
  echo 'メールアドレスを入力して下さい。';
  exit;
}
if(empty($_POST['message'])) {
  echo 'メッセージを入力してください。';
  exit;
}

//入力値の取得・加工
$name = e($_POST['name']);
$email = e($_POST['email']);
$message = e($_POST['message']);

$_SESSION['name'] = $name;
$_SESSION['email'] = $email;
$_SESSION['message'] = $message;
?>
<form method="post" action="thanks.php">
<table>
<tr>
<td>お名前</td>
<td><?php echo $name; ?></td>
</tr>
<tr>
<td>メールアドレス</td>
<td><?php echo $email; ?></td>
</tr>
<tr>
<td>メッセージ</td>
<td><?php echo nl2br($message); ?></td>
</tr>
<tr>
<td class="subButtom">
<input type="submit" name="sub1" value="送信する">
</td>
</tr>
</table>
</form>
</section>
</body>
</html>

thanksページに自動保存機能を追加

《thanks.php》




    
    
  



    
  

  




      
      
    
  
    
      
        

  

    

  
    

    
      
    
      

  

  SQLを使う‐基本



  
  

  

    
    SQL
    
  



  

  




    


    

  
    


    
SQLは何のため？

    

    

  • phpMyAdminのマウス操作だけで作ることが出来るSQLには限界がある
    • 

  • PHP+MySQLを使ったWebシステムを構築するには、SQLの知識が必須
    • 






    
phpMyAdminを利用する

    







    
データを取得して表示する

    


    
localhostでデータベース一覧を表示する

    

    

  • 作成したデータベースをクリックして画面上部の[SQL]タブをクリックする
    • 

  • 空のテキストエリアにSQL命令を入力する
    • 




    

  • ページ下部にデータベースの一覧が表示されれば、正しくSQL命令は実行出来ている
    • 







    
テーブルの内容を全て表示する

    

    

  • 以下のように入力し、実行する
    • 

SELECT * FROM schedule;












    
データを挿入する

    
INSERT INTO schedule (sdate, stime) VALUES ('2013-10-31', '19:00:00');










    
INSERT文

    

    

  • 作ったテーブルにデータを挿入するには「INSERT」構文を使う
    • 

INSERT テーブル名(フィールド名1, フィールド名2...) VALUES (値1,値2...);



    

  • 「SET」を使った書式は下記になる
    • 

INSERT テーブル名 SET フィールド名1=値, フィールド名2=値...;








    
データを更新する

    
UPDATE schedule SET title='WINGS納涼会', stime='19:30:00' WHERE sid=7;








    
UPDATE文

    




    
    
  



    
  

  




      
      
    
  
    
      
        

  

    

  
    

    
      
    
      

  

  phpMyAdminを使う



  
  

  

    
    SQL
    
  



  

  




    


    

  
    


    
phpMyAdminにログインする

    

    

  • XAMPPを起動してMySQLの[Admin]ボタンをクリックする
    • 

  • ログイン画面で設定したユーザー名、パスワードを入力し、[実行]ボタンをクリックする
    • 












    
データベースを使う

    

    

  • 新規データベースを作成する
    • 

  • 「mydb」というデータベース名、照合順序を「utf_general_ci」にする
    • 

  • [作成]ボタンをクリックする
    • 







    
データベースユーザーを作成する

    

    

  • サイドメニューにある作成したデータベース[mydb]リンクをクリックする
    • 

  • ナビゲーションバーの[特権]をクリックし、[ユーザーを追加する]リンクをクリックする
    • 

  • 登録フォームが表示されたら適宜入力し、[ユーザーを追加する]ボタンをクリックする
    • 





    
作成したユーザーで再ログインする

    

    

  • ここで、一旦サイドメニューのログアウトボタンをクリックしphpMyAdminからログアウトする
    • 

  • 新規作成したユーザーで再ログインする
    • 









    
テーブルを作成

    

    

  • 新しいテーブルを作る
    • 

  • サイドメニューの[mydb]リンクをクリックし、データベースの操作画面を表示する
    • 

  • [テーブルを作成]欄から、名前に「schedule」、カラム数に「5」と入力し[実行]ボタンをクリックする
    • 




フィールドの詳細を設定する



    

  • フィールド(テーブルの列項目)を設定する画面が表示されるので、以下のように入力する
    • 

  • 入力が完了したら、[保存する]ボタンをクリックする
    • 








    

    カラム
    種別
    長さ/値
    デフォルト値
    NULL
    インデックス
    A_I
    

    

    sid
    INT
    　
    なし
    ×
    PRIMARY
    チェックを入れる
    

    

    title
    VARCHAR
    100
    無題
    ×
    　
    　
    

    

    sdate
    DATE
    　
    なし
    ×
    　
    　
    

    

    stime
    TIME
    　
    なし
    ×
    　
    　
    

    

    memo
    TEXT
    　
    なし
    ×
    　
    　
    





フィールドの型



VARCHAR
文字数を指定する必要がある文章で、例えば桁数の決まったコードなどを格納する時などに使う。




TINYINT
SMALLINT
BIGINT		
INTと同様に整数のフィールドですが、上限と下限によっていくつか準備されている。TINYINTは「-128から127」、SMALLINTは「-32768から32767」、BIGINTの場合は「兆」を超えた桁数という非常に大きな桁数を扱える。




FLOAT
DOUBLE		
少数を扱う型でDOUBLEの方が大きなデータを扱うことが出来る。




DATE
DATETIME		
日付または日付と時間を扱うことが出来る。




BLOB
「バイナリデータ」と呼ばれる、コンピュータ用のデータをそのまま取り込むことが出来る。







    
テーブルの構造を確認する

    

    

  • scheduleテーブルの[構造]リンクをクリックする
    • 




    

  • 入力した内容が正しいか確認する
    • 







    
新規のデータを登録する

    

    

  • scheduleテーブルの[挿入]リンクをクリックする
    • 




    

  • 図のようにデータを入力したら[実行]ボタンをクリックする
    • 




    

  • 成功メッセージが確認できたら、テーブル一覧画面からscheduleテーブルの[表示]リンクをクリックする
    • 




    

  • 入力された内容が反映されている事を確認する
    • 




    

  • 同様に以下のデータ5件を[挿入]で登録する
    • 




    

    title
    sdate
    stime
    memo
    

    

    WINGS会議
    2013-10-02
    17:00:00
    配布資料の用意
    

    

    PHP10講習会
    2013-10-17
    10:00:00
    PPT資料の予備データ持参
    

    

    新規メンバー面接
    2013-10-17
    14:00:00
    応募資料のコピー
    

    

    B企画の打ち上げ
    2013-10-25
    18:00:00
    四谷駅に集合
    

    

    佐藤さんと打ち合わせ
    2013-10-31
    15:00:00
    203会議室
    







    
既存のデータを編集する

    

    

  • データの一覧から変更したいデータの上をクリックする
    • 

  • カーソルが表示され変更可能な状態になるので変更する
    • 

  • 上記手順で変更可能な状態にならなかった場合は、変更したいデータの[編集]リンクをクリックして編集フォームから変更する
    • 










    
既存のデータを削除する

    

    

  • データの一覧から削除したいデータの[削除]ボタンをクリックする
    • 










    
    
  



    
  

  




      
      
    
  
    
      
        

  

    

  
    

    
      
    
      

  

  WordPress実習(4)：テキストP250 〜 P305



  
  

  

    
    WP
    
  



  

  




    


    

  
    


    
固定ページを1段組レイアウトにする

    


    
page.phpを用意する

    

    

  • 編集中のテーマ「sample」フォルダにpage.phpファイルを何も記述せずにアップロードする
    • 

《page.php》


<?php get_header(); ?>

<!-- コンテンツ -->
<div id="content" class="page">

<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div class="post">
<h2><a href="<?php the_permalink(); ?>
<?php the_title(); ?></a></h2>

<?php the_content(); ?>
</div>

<?php endwhile; endif;?>

</div>

<?php get_footer(); ?>

《style.css》


/* 固定ページ */
div#content.page {
  width:100%;
}








    
ナビゲーションバーを作成する

    


    
register_nav_menus()

    

    

  • カスタムメニューの機能を有効にする
    • 






    
＜?php wp_nav_menu(); ?＞

    

    

  • カスタムメニューを出力する
    • 



《functions.php》


//カスタムメニュー
register_nav_menus(array('navigation' => 'ナビゲーションバー'));

《header.php》


<!-- ナビゲーションバー -->
<div id="nav">
<?php wp_nav_menu(array('theme_location' => 'navigation')); ?>
</div>



《style.css》


/* ナビゲーションバー */
div#header {
  margin-bottom: 0;
}
div#nav ul {
  background-color: #000000;
  padding: 8px 0;
  margin: 0 0 20px;
}
div#nav li a {
  font-size: 0.75em;
  color: #FFFFFF;
  text-decoration: none;
}
div#nav li a:hover {
  color: #FFAA00;
}
div#nav li {
  display: inline;
  list-style-type: none;
  border-right: 1px #FFFFFF solid;
  padding-left: 15px;
  padding-right: 15px;
}








    
トップページをビジネスサイト風のページにする

    


    
ビジネスサイト風のページ専用のテンプレートを用意する

    

    

  • 編集中のテーマ「sample」フォルダにbusiness.phpファイルを何も記述せずにアップロードする
    • 

《header.php》


<?php if(!(is_page('ビジネス風のページ'))): ?>
<p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200"></p>
<?php endif;?>

《business.php》


<?php
/*
Template Name: ビジネスサイト風テンプレート
*/
?>
<?php get_header(); ?>

<!-- content -->
<div id="topcontent">

<?php if(have_posts()): while(have_posts()): the_post(); ?>

<p><img src="<?php bloginfo('template_url'); ?>/topimage.jpg" alt="*" width="760" height="370"></p>

<?php the_content(); ?>


<?php endwhile; endif; ?>

</div>

<?php get_footer(); ?>

《style.css》


/* ナビゲーションバー */
div#nav {
  clear: both;
  width:100%;
}

…略…
/* トップページ */
div#topcontent p {
  text-align: center;
  font-size: 0.875em;
  line-height: 1.5;
  margin: 0 0 20px;
}




固定ページにだけに出力する



    

  • 固定ページにだけ表示したい内容は＜?php if(is_page()): ?＞〜＜?php endif; ?＞の中に記述する
    • 




条件分岐の結果を逆にする



    

  • ＜?php if(): ?＞〜＜?php endif; ?＞で記述するPHPの条件分岐では「!(エクスクラメーション)」を付ける事で結果を逆にする事が出来る
    • 

  • ＜?php if(!(is_page())): ?＞と指定すれば固定ページ以外のページを生成する時に条件が成立する
    • 








    
管理画面でヘッダー画像を変更できるようにする

    


    
add_custom_image_header()

    

    

  • カスタムヘッダーの機能を有効にする
    • 






    
＜?php header_image(); ?＞

    

    

  • カスタムヘッダーのヘッダー画像を出力する
    • 






    
＜?php if(get_header_image()): ?＞〜＜?php endif; ?＞

    

    

  • ヘッダー画像がある場合は中身を出力する
    • 



《function.php》


//カスタムヘッダー
add_custom_image_header('', 'admin_header_style');

function admin_header_style() {
?>
<style type="text/css">
#headimg {
  width: 760px!important;
}
</style>
<?php
}

define('NO_HEADER_TEXT', true);

define('HEADER_IMAGE', '%s/default_header.jpg');

define('HEADER_IMAGE_WIDTH', 760);

define('HEADER_IMAGE_HEIGHT', 200);

?>



《header.php》


<!-- ヘッダー -->
<div id="header">
…略…

<?php if(!(is_page('ビジネスサイト風のページ'))): ?>
<?php if(get_header_image()): ?>
<p id="image"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT ?>"></p>
<?php endif; ?>
<?php endif; ?>
</div>








    
管理画面で背景画像を変更できるようにする

    


    
add_custom_background()

    

    

  • カスタム背景の機能を有効にする
    • 

《function.php》


…略…
define('HEADER_IMAGE_HEIGHT', 200);

//カスタム背景
add_custom_background();

?>

《header.php》


…略…
<link rel="alternate" type="application/rss+xml" title="RSSフィード" href="<?php bloginfo('rss2_url'); ?>">

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>> //WordPress3.3以降はこの指定が必要

《style.css》


/* コンテンツの背景 */
div.post, p.feed, #comments {
  background-color: #FFFFFF;
}




WordPress3.3.x以降でカスタム背景を表示する方法



    

  • WordPress 3.3以降では、背景画像を表示する設定が「custom-background」というクラス名を持つ＜body＞に対してのみ適用されるようになった
    • 

  • その為、WordPress 3.3以降では、＜body＜?php body_class(); ?＞＞と指定することにより背景画像が挿入される
    • 






    
    
  



    
  

  




      
      
    
  
    
      
        

  

    

  
    

    
      
    
      

  

  習得度確認試験4



  
  

  

    
    訓練
    
  



  

  




    


    

  
    


    
問題

    


    
Q1 XAMPPパッケージに含まれていないものはどれか

    

    

  1. Apache
    2. 

  2. MySQL
    3. 

  3. Java
    4. 

  4. PHP
    5. 






    
Q2 PHPの特徴として正しいものはどれか

    

    

  1. Windows環境でのみ動作
    2. 

  2. コンパイラ型言語
    3. 

  3. クライアントPCで動作
    4. 

  4. オブジェクト指向言語
    5. 






    
Q3 PHPの変数名として、使用可能な名前は次のうちどれか

    

    

  1. #class
    2. 

  2. $12data
    3. 

  3. $_file
    4. 

  4. HENSUU!
    5. 






    
Q4 PHPの文法の特徴として正しいものはどれか

    

    

  1. 大文字と小文字は区別しない
    2. 

  2. 全角と半角は区別しない
    3. 

  3. コマンドは自由に大体合っていれば動作する
    4. 

  4. コマンドは日本語でも英語でも動作する
    5. 

  5. 全て正しくない
    6. 






    
Q5 PHPにおけるインデントとは何を指すか

    

    

  1. 改行
    2. 

  2. 処理の終了
    3. 

  3. 重み付け
    4. 

  4. カンマ区切り
    5. 

  5. 数文字分のスペース
    6. 






    
Q6 1行コメントを記述する為に必要とされる記号はどれか

    

    

  1. / (スラッシュ)
    2. 

  2. \ (エンマーク)
    3. 

  3. * (アスタリスク)
    4. 

  4. // (ダブルスラッシュ)
    5. 

  5. 1から4以外
    6. 






    
Q7 下記を実行するとブラウザに出力される値はどれか

    
<?php
  $x = "PHPは、";
  $y = 1;
  $z = "番楽しい";
  print $x . $y . $z . "です！";



    

  1. PHPは、番楽しい1です！
    2. 

  2. PHPは、1番楽しいです！
    3. 

  3. 1番楽しいPHPは、です！
    4. 

  4. $x$y$zです！
    5. 






    
Q8 下記を実行するとブラウザに出力される値はどれか

    
<?php
  $a = 3;
  $b = 6;
  $c = $a++;
  $d = ++$b;
  $e = $c + $d;

  print '変数の値は' . $e . 'です。';



    

  1. 変数の値は12です。
    2. 

  2. 変数の値は10です。
    3. 

  3. 変数の値は11です。
    4. 

  4. 変数の値は$eです。
    5. 






    
Q9 下記を実行するとブラウザに出力される値はどれか

    
<?php
  $x = 10;
  $y = 2;

  $a = $x + $y;
  $b = $x - $y;
  $c = $x * $y;
  $d = $x / $y;
  $e = $x % $y;

  print "$a" + $b + $c + $d + $e;



    

  1. $a82050
    2. 

  2. 45
    3. 

  3. $a33
    4. 

  4. $a38
    5. 






    
Q10 エスケープシーケンスの表記方法ではないものはどれか

    

    

  1. \t (水平タブ)
    2. 

  2. \n (改行タブ)
    3. 

  3. \" (ダブルクォート)
    4. 

  4. \$ (ドルマーク)
    5. 

  5. 1から4全てエスケープシーケンス
    6. 








    
練習問題

    


    
定数の記述で正しいものはどれか

    

    

  1. final FILENAME = "mondai.txt";
    2. 

  2. const FILENAME = "mondai.txt";
    3. 

  3. const(FILENAME = "mondai.txt");
    4. 

  4. define("FILENAME", "mondai.txt");
    5. 






    
PHP01

    

    

  • 変数「$a」に「1000」を代入し、変数「$a」の値を画面に表示しなさい
    • 






    
PHP02

    

    

  • 変数「$greeting」に「おはよう」を代入し、「$greeting」の値を画面に表示しなさい
    • 

  • そのあと、その変数「$greeting」に「こんにちは」を代入し、「$greeting」の値を画面に表示しなさい
    • 






    
PHP03

    

    

  • 変数「$x」に「100」を代入し、更にその「$x」を「$y」に代入し、「$y」の値を画面に表示しなさい
    • 






    
PHP04

    

    

  • 定数値「7」の定数「DAYS_IN_WEEK」を宣言し、「DAYS_IN_WEEK」の値を画面に表示しなさい
    • 






    
PHP05

    

    

  • 変数「$syosu」に「1.4142」を代入し、変数「$syosu」の値を画面に表示しなさい
    • 






    
PHP06

    

    

  • 変数$aと$bに100を代入し、さらに変数$aと$bをかけた値を変数$cに代入して、変数$cの値を画面に表示しなさい
    • 






    
PHP07

    

    

  • 変数$xに'好きな果物は'を、変数$yに'りんごです。'を代入して、さらに変数$xと変数$yを連結した文字列を、複合演算子を利用して変数$xに代入して、変数$xの値を画面に表示しなさい
    • 






    
習得度確認試験：解答

    
Q1：3、Q2：4、Q3：3、Q4：5、Q5：5、

Q6：4、Q7：2、Q8：2、Q9：2、Q10：5



Q8の補足説明


<?php
  $a = 3;
  $b = 6;
  $c = $a++;  //(1)
  $d = ++$b;  //(2)
  $e = $c + $d;

  print '変数の値は' . $e . 'です。';



    

  • (1)の値は変数に代入してから1加算するので「3」、(2)の値は1加算してから変数に代入するので「7」になる
    • 






    
練習問題：解答

    

    

  • 定数の記述方法
    • 

define('定数名', '値');

define('BIRTHDAY', '9月15日です。');
print BIRTHDAY; //定数BIRTHDAYを表示する






    
PHP01

    
<?php
$a = 1000;
print $a;






    
PHP02

    
<?php
$greeting = 'おはよう.<br>'."\n";
print $greeting;
$greeting = 'こんにちは';
print $greeting;






    
PHP03

    
<?php
$x = 100;
$y = $x;
print $y;






    
PHP04

    
<?php
define('DAYS_IN_WEEK','7');
print DAYS_IN_WEEK;






    
PHP05

    
<?php
$syosu = 1.4142;
print $syosu;






    
PHP06

    
<?php
$a = 100;
$b = 100;
$c = $a * $b;
print $c;






    
PHP07

    
<?php
$x = '好きな果物は、';
$y = 'りんご';
//print $x.$y;
$x .= $y;
print $x;