読者です 読者をやめる 読者になる 読者になる

めもぶろぐ

お勉強したこと、趣味なんかを適当に書いてます。。。

HTML5と共有サーバとDreamweaver

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 MySQLです。私の場合は。












それで、サーバーまででひとまず終わりです。それ以下は必要になったら設定しましょう。上記の画面で、保存を押すと次のようになります。



ほいだら、いつでもFTP接続が可能になります。とってもべんりです。。。ちなみに、DBへはdreamweaverを使って接続できないようです。使ってみたかったのですが。

セキュリティを考慮して、アクセスさせてくれないようです。そのため、ロリポップさんのサイトからMYSQLADMINでデータベースは作成していきましょう。


で、せっかくDBとPHPが使えるので、PHPを利用したDBへの接続までメモしておきます。


お試しということで、適当にすすめておきます。一応HTML5対応ということで(笑)初心者のソースなので変なところがありましたら、申し訳ないです。
file name:hogehoge.php




hogehoge




//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;
}
?>

your tasks

    //table:hogehogeにあるデータを取得
$dbh = getDb();
$stmt = $dbh->prepare('select * from hogehoge');
$stmt->execute();
//フェッチして順に出力
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
    echo $row['task']."\n
";
    echo $row['created_at']."\n
";
}
?>


簡単ではありますが、DBに接続し、出力までしてみました。出力出来たので、問題はなさそうですね。メモは以上。引き続き、簡単なアプリの作成をしていきたいと思います。



ああ、すっかりHTML5のことを忘れていました。

metaタグのところだけメモを。

一度やっていただけばわかると思いますが、このメタタグがないと、iPhoneでページを閲覧した時にとてつもなく小さく表示されてしまいます。虫以下です。


そこで、このviewportでプロパティを指定しておくと、最初から見やすいサイズで表示してくれるのです。

content=""
この中に、コンマで区切って、以下のものを入力しておきましょう。
width
height
initial-scale
minimum-scale
maximum-scale
user-scalable


width=device-width でwidthを最適化してくれます。素晴らしいですね。
user-scalable=yes
user-scalable=no のどちらかにしておきましょう。これはユーザが画面を縮小・拡大を出来るかどうか指定できるのです。拡大や縮小されては困るものアプリケーションであれば、noにしておいた方がよさそうですね。



広告を非表示にする