HTML5を利用した簡単なページを作成しようと思ったので記録していきます。
まずは、ローカルホストに接続して・・・
というローカルの設定をいつもはするのですが、今回は共有サーバを使おうと思います。せっかくなので、使い慣れておいた方が良いし、友人に見てもらうのも簡単になるので。
で、今回はロリポップ様の共有サーバを利用させてもらうことにしました。初挑戦です。共有サーバーなので、難しい設定はありません。せっせと申し込みましょう。
ほいでほいで、登録完了しました。
ちょっと試しにMYSQLADMIN使ってみましたが、すすすすごい便利じゃないですか。。。まあそれはいいとして、
・DBの用意
・テーブルの作成
とりあえずこれだけします。
だいぶ省略していますが、次は、簡単にエディタからいじれるように設定します。いままではvimばかりを使っていたので、今回はdreamweaverを使用して、FTP接続をします。これなら、保存するたびにサーバー上のファイルを更新してくれるのでとても楽です。
サーバの設定とかは本当に忘れやすいのでメモをしておきます。
もうですね、これを見ましょう
http://kb2.adobe.com/jp/cps/228/228554.html
動画のものもあったのですが、ブラウザの履歴に残ってないので、探してみてください。これにならって設定をすすめていきましょう。
私の今回の場合は、ロリポップ共有サーバとdreamweaver cs5の組み合わせです。
まずは、サイト設定-サイト
サイト名はなんでもよいです。自分で管理するために分かりやすい名前にしましょう。また、ローカルサイトフォルダーも好きな場所にしましょう。これも、FTPを利用するときに、どの場所からアップするのか決めるだけなので、好きなところでよいのです。
＜サイト設定-サーバー＞
次は、＋ボタンを押しましょう。
サーバ名：なんでもよいです。これもわかりやすく管理しやすい名前を。
使用する接続：今回はFTPです。
FTPアドレス：これは、ロリポップさんに登録した時にメールで送られてきているものです。
参考：【FTPサーバー】ftp.xxxx.xx.jp
ユーザ名：これもメールにて
参考：【FTPアカウント】xx.jp-xxxx
パスワード：これもメールにて
参考：【FTPパスワード】xxxxxxxxxx
これで、一度テストボタンを押してください。これで問題なくいけば次へ進めます！！ちなみに、web URLはどうすればいいかわかりますよね＾＾？
うんうん、僕はよくわかっていませんでしたが、普通に考えれば、ブラウザでアクセスするときのURLですね。
今回は試しにちょこっとやってみてるだけなので、こんな感じです。
ちなみに、下の写真の詳細設定タブをおして、リモートサーバーの、
保存時にファイルをサーバーへ自動的にアップロード
をチェックすると保存するたびにアップしてくれて便利です。ですが、こまめに保存してると鬱陶しくなるかもしれませんね。これはお好みでどうぞ
テストサーバーモデルはPHP MｙSQLです。私の場合は。
それで、サーバーまででひとまず終わりです。それ以下は必要になったら設定しましょう。上記の画面で、保存を押すと次のようになります。
ほいだら、いつでもFTP接続が可能になります。とってもべんりです。。。ちなみに、DBへはdreamweaverを使って接続できないようです。使ってみたかったのですが。
セキュリティを考慮して、アクセスさせてくれないようです。そのため、ロリポップさんのサイトからMYSQLADMINでデータベースは作成していきましょう。
で、せっかくDBとPHPが使えるので、PHPを利用したDBへの接続までメモしておきます。
お試しということで、適当にすすめておきます。一応HTML5対応ということで(笑)初心者のソースなので変なところがありましたら、申し訳ないです。
file name:hogehoge.php
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,user- scalable=no,initial-scale=1.0,maximum-scale=3.0" />
<title>hogehoge</title>
</head>
<body>
<?php
//connect database 以下は、ロリポップ！ユーザ専用ページ-webツール-データベースに記載されているものを使うことになる。
//$dsn is データベース名. host is サーバー
//$usr is ユーザ名. $passwd is パスワード
function getDb() {
$dsn='mysql:dbname=LAxxxxxx-xxxxxxx;host=mysqlxxx.xxx.lolipop.jp';
$usr='LAxxxxxx';
$passwd='xxxxxxxx';
try {
$db = new PDO($dsn,$usr,$passwd);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$db->exec('SET NAMES utf8');
} catch (PDOException $e) {
die("error:{$e->getMessage()}");
}
return $db;
}
?>
<p>your tasks</p>
<?php
//table:hogehogeにあるデータを取得
$dbh = getDb();
$stmt = $dbh->prepare('select * from hogehoge');
$stmt->execute();
//フェッチして順に出力
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo $row['task']."\n<br />";
echo $row['created_at']."\n<br />";
}
?>
</body>
</html>
簡単ではありますが、DBに接続し、出力までしてみました。出力出来たので、問題はなさそうですね。メモは以上。引き続き、簡単なアプリの作成をしていきたいと思います。
ああ、すっかりHTML5のことを忘れていました。
metaタグのところだけメモを。
<meta name="viewport" content="width=device-width,user-scalabe=no,initial-scale=1.0,maximum-scale=3.0" />
一度やっていただけばわかると思いますが、このメタタグがないと、iPhoneでページを閲覧した時にとてつもなく小さく表示されてしまいます。虫以下です。
そこで、このviewportでプロパティを指定しておくと、最初から見やすいサイズで表示してくれるのです。
content=""
この中に、コンマで区切って、以下のものを入力しておきましょう。
width
height
initial-scale
minimum-scale
maximum-scale
user-scalable
width=device-width でwidthを最適化してくれます。素晴らしいですね。
user-scalable=yes
user-scalable=no のどちらかにしておきましょう。これはユーザが画面を縮小・拡大を出来るかどうか指定できるのです。拡大や縮小されては困るものアプリケーションであれば、noにしておいた方がよさそうですね。
