月別: 2013年9月

関数の登録とホーム画面作成

関数の登録とホーム画面作成

#05 よく使う関数を登録しておこう
http://dotinstall.com/lessons/google_connect_php_v2/9905
を参考に
よくつかう関数を登録しておく

functions.php を作成して
ここに書いておく

まず、DBに接続するユーザ関数

1
2
3
4
5
6
7
8
function connectDb(){
try{
    return new PPO(DBN, DB_USER, DB_PASSWORD);
}catch(PODException $e){
    echo $e->getMessage();
    exit;
}
}

接続などは try catch で接続失敗したときの処理を書く

1
2
echo $e->getMessage();
exit;

はエラーがあったときに表示して終了する処理

接続成功のときの処理は

1
return new PPO(DBN, DB_USER, DB_PASSWORD);

でDBへ接続することでPOD
オブジェクトをかえしてもらう

また htmlspecialchars() が長いので
h()
で使えるようにする

1
2
3
function h($s){
return htmlspecialchars($s,ENT_QUOTES,"UTF-8");
}

htmlspecialchars() に関しては
http://php.net/manual/ja/function.htmlspecialchars.php
を参照

ENT_QUOTES を指定すると
””の取扱いが変わる

$s は変換される文字列

ここまでできたら、
index.php を作成してホーム画面を作成

一番上のPHPソースで

1
2
require_once('config.php');
require_once('functions.php');

で設定ファイルを読み込む

その下のHTML部分は
base.html というファイルを以前作成したので
それをコピペでOK

HTMLソースは

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>ホーム画面</title>
</head>
<body>
 
 
 
</body>
</html>

　google web service 共有設定

　google web service 共有設定

#04 アプリ共通の設定をしよう
http://dotinstall.com/lessons/google_connect_php_v2/9904
を参考に
アプリ全体に共通する項目をconfig.php にまとめる

DB、クライアントID、google にもらったコードなどの設定を

definoglee(‘DSN’,’mysql:host=localhost;dbname=dotinstall_google_connect_php’);
これでDB接続設定

define(‘DB_USER’,”dbuser’);
これでDBユーザを指定

define(‘DB_PASSWORD’,a8sdfnc’);’
というようにDBパスワードを指定

define(‘CLIENT_ID’,’クライアントID’);
define(‘CLIENT_SECRET’,’クライアント secret’);
というように
google から提供された
CLient ID
Client secret
を指定する

define(‘SITE_URL’,’http://dev.dotinstall.com/google_connect_php’);
として、サイトURLを登録
これでサイトドメインが変更したときには
ここだけ変えればよくなる

そしてエラーの出力の種類も指定
error_reporting(E_ALL & -E_NOTICE);
としておくことで
NOTICE以外すべて

session_set_cookie_params(0,/google_connect_php’);
これで、セッション範囲を指定

google web service DB設定

google web service DB設定

#03 データベースの設定をしよう
http://dotinstall.com/lessons/google_connect_php_v2/9903
を参考に
vagrant で作成した開発環境に
DBを作成し、設定する

以下はSQL文になる

1
create databasel dotinstall_google_connect_php;

これで、DBuserを作成
create database でDB作成
DB名は、もっと短くてもOK

次に、このDBへアクセスするユーザを作成

1
grant all on dotinstall_google_connect_php.* to dbusert@localhost ideintified by 'a8sdnfc';

これで、
dbusert@localhost
というユーザ
a8sdnfcというパスワードを設定

1
use dotinstall_google_connect_php;

で
使用するDBを指定
構文は
use 使用するDB名;

これで、使うDBに移動できているので

1
2
3
4
5
6
7
8
9
10
create table users(
it int not null auto_increment primary key,
google_user_id varchar(30) unique,
google_email varchar(255),
google_name varchar(255),
google_picture varchar(255),
google_access_token varchar(255),
created datetime,
modified datetime
);

でテーブル作成

1
it int not null auto_increment primary key

で自動連番と主キーの設定

取得するものとして

1
google_user_id varchar(30) unique

で一意、つまりかぶらない値として
IDを取得

1
google_email varchar(255),

でメールアドレス

1
google_name varchar(255),

で名前

1
google_picture varchar(255),

で画像

1
google_access_token varchar(255),

でアクセストークンを取得する

1
2
created datetime,
modified datetime

この２つは時間関連であとで
使うことになる

動画では、ログインして sql コマンドをうっているけど
開発環境から実際に動かす環境に
簡単に移植したいので
sql ファイルをつくり、そこから読み込む

まず、vagrant で作成したマシンを起動する
cd /media/bdec1869-7820-4557-a76e-a8b130293019/localdev
で仮想マシンディレクトリに移動

vagrant up
でマシン起動

vagrant ssh
でログインして

vim google.sql
で sql ファイルを作成
拡張子が .sql となる

内容は上記のコマンドを列挙しただけ

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
create database dotinstall_google_connect_php;
grant all on dotinstall_google_connect_php.* to dbuser@localhost identified by 'a8sdnfc';
  
use dotinstall_google_connect_php
  
create table users (
id int not null auto_increment primary key,
google_user_id varchar(30) unique,
google_email varchar(255),
google_name varchar(255),
google_picture varchar(255),
google_access_token varchar(255),
created datetime,
modified datetime
);

保存して

mysql -u root -p < google.sql で実行 mysql の root パスワードを聞かれるので これを入力 成功すると、DBが作成される 実際に成功しているか確認するには[sql] mysql -u root -p use dotinstall_google_connect_php; desc users; [/sql] で作成したDBのテーブル users の中身をみることができる

google のアプリ登録

google のアプリ登録

#02 Googleでアプリを登録しよう
http://dotinstall.com/lessons/google_connect_php_v2/9902
を参考にアプリを登録する

OAuth 関連は
facebook
twitter
と同様に、アプリ登録する必要がある

アプリ登録は
https://code.google.com/apis/console/
から行う

項目の中から
API Access を選んで

Create an OAuth 2.0 client ID …
を
クリック

次に
Product name に
プロジェクト名を入力
今回は Dotinstall

Project logo は省略可能

次の画面で
Application Type を聞かれるので
Web application
を選択

オプション設定をするので
more option をクリックし

Authorized Redirect URIsのところへ

http://dev.dotinstall.com/google_connect_php/redirect.php
とする

URLが
かぶるとダメという場合
dev.dotinstall.com
の部分を自ドメインに変更する

Authorized JavaScript Origins には
http://dev.dotinstall.com
とする

こちらもかぶるとダメなら自ドメインにする

これで
Create client ID
をクリックすると
登録される

登録情報で使うのは
Client ID
Client secret
の文字列

ubuntu12.04 usb テザリング

ubuntu12.04 usb テザリング

HTC J One でUSBテザリングすれば
はやい通信ができるので
早速実験

今回は
http://kowaimononantenai.blogspot.jp/2012/08/galaxy-s-ii-lteusbubuntu1204.html?m=1
を参考にしてみました

まず、USBテザリングするには
Android 側で設定が必要

設定 > 詳細 >
モバイルネットワーク共有 >
USBネットワーク設定 >
USBテザリング　にチェックをいれればOK

あとは、PCと Android 端末 HTC j One を
USBでつないで、テザリングを開始すれば
ネットにつながる

ネットワークの接続は、LANケーブルでつないでいるときの表示になる

今回USBテザリングを行った背景として
無線LANが不安定なのが原因

有線LANは問題ないけど無線LANがやたらと切れるので、USBテザリングにしてみた

イー・モバイルのGP06 というLTE端末もあるので
こちらも実験予定

なお、LTEのスマートフォンだと
月のパケットに制限があるので
イー・モバイルのほうをメインにする予定

webサイトにアイコンつきリスト作成

webサイトにアイコンつきリスト作成

#16 アイコン付きリストを作ろう
http://dotinstall.com/lessons/website_html/9016
を参考に
アイコンつきリストを作成

1
<div id="sidebar">

の中に

1
2
3
4
5
<ul class="submenu">
<li><a href="">menu 1</a></li>
<li><a href="">menu 2</a></li>
<li><a href="">menu 3</a></li>
</ul>

を追加する

これをCSSで設定する

1
<ul class="submenu">

なので

1
2
ul.submenu > li{
}

で設定していく

1
background:url('dotinstall.png');

というように、url(ファイル名);
とすればアイコンで表示される

ただし、このままだとアイコンが繰り返し連続表示なので

1
background:url('dotinstall.png')no-repeat;

というように
no-repeat をつければ繰り返し表示されなくなる

これだけだと、アイコンとリンクの文字がかぶるため

1
padding: 0 0 5px 20px;

というように
上０　右０　下5px 左20px の余白を設定

これで、アイコンとリンクがかぶらなくなる

webサイトにバッチの設置

webサイトにバッチの設置

#15 バッジを付けてみよう
http://dotinstall.com/lessons/website_html/9015
を参考に
画像の右上にバッチを設置

1
2
3
<div class="sample">
の中に
<span class="badge">new</span>

を作成

これをCSSで設定する

1
2
3
class="badge" なので
.badge{
}

で設定を書いていく

1
2
3
4
background:red;
color:white;
font-size:10px;
padding:2px 4px 3px;

とする

上から順番に
背景色を赤
文字の色を白
フォントサイズは１０px
余白は　上２px　左右４px　下３px
とする
padding の引数の数と、設定の変化は
http://www.htmq.com/style/padding.shtml
を参考に

これで画像の上に赤いバッジができる

このバッジを画像の右上に重ねるには
このバッジの
親要素に設定をすることになる
今回なら

1
<div class="sample">

がバッジの親要素なので

1
position:relative;

を追加する

また、バッジ側である

1
2
.badge{
}

も

1
position:absolute;

を追記する

これで後はバッジの場所を設定することができるので

1
2
.badge{
}

のほうで

1
2
top:-5px;
right:-5px;

とすると、画像の右上に重なってバッジが表示される

もし、右下にしたいのなら

1
2
bottom:-5px;
right:-5px;

というようにする

web サイトでキャプションつき画像の作成

web サイトでキャプションつき画像の作成

#14 キャプション付き画像を作ろう
http://dotinstall.com/lessons/website_html/9014
を参考にキャプションがついた画像を設置

1
2
<div class="sample">
</div>

で領域を指定して

キャプション画像をこの中に設置する

1
2
<img src="dummy.png" width="60" height="60">
<p>補足</p>

これをCSSで画像を右よりにする
div class=”sample” なので

1
2
div.sample{
}

として設定を書いていく

1
float:right;

で右寄せ
float したら width で幅を指定するのが必須なので

1
width:60;

文字と画像がくっつかないように

1
margin-left:10px;

としておく
margin-left なのは、今回画像が右だから

次に、div class=”sample”　
の中にある p の解説も設定する

1
2
3
div.sample > p{
font-size:10px;
}

として文字を小さめにする

また、わかりやすく見やすくするため
画像に枠をつける

1
2
3
4
5
div.sample>img{
padding:2px;
background:#fff;
border:1px solid #ccc;
}

まず、

1
padding:2px;

で余白をつくって

1
background:#fff;

で背景を白くして

1
border:1px solid #ccc;

で実線を引いている

ただし、この枠をつける場合、これらの指定した枠の分だけ幅を広げる必要がある

このため、
div.sample の

1
width:60px;

から
余白２px *2 + 1px *2 分の 6px 追加するため

1
width:66px;

と変更する必要がある

これで、画像に枠線をつけることができる

webサイトで画像つきリストの作成

webサイトで画像つきリストの作成

#13 画像付きリストを作ってみよう
http://dotinstall.com/lessons/website_html/9013
を参考に
画像つきリストの作成を学習

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul class="products">
<li>
<img src="dummy.png" width="60" height="60">
<p>説明</p>
</li>
 
<li>
<img src="dummy.png" width="60" height="60">
<p>説明</p>
</li>
 
<li>
<img src="dummy.png" width="60" height="60">
<p>説明</p>
</li>
</ul>

というように ul に classを指定して
li でリストを作る

li の中で画像を表示するようにするので

1
2
<img src="dummy.png" width="60" height="60">
<p>説明</p>

として、画像と説明を追加している

これで、HTML部分はできたので
CSSでレイアウト設定

ul class=”products”
としているので

1
2
ul.products{
}

という項目をつくり、そこに設定を作成
CSSでは　 .　はclass #は id という意味になる

1
margin-botttom:15px;

で下に余白設定

次に、 li 　要素の中にある
img
p
に対してもCSSを適用したいので

img に関しては

1
2
ul.products >li >img{
}

p に関しては

1
2
ul.products >li >p{
}

とする

まず、img のほうから設定

1
float:left;

で画像を左にまわりこみするようにする
食べログとかで文字の横に写真があるように
画像が左になる
また、float を指定したら width で幅指定が必須なので

1
width:60px;

としておく

pのほうは

1
margin-left:70px;

として左の画像から余白をあけるようにする

文字サイズを小さめにしたいので

1
font-size:13px;

としておく

また、レイアウト崩れ防止のため

1
2
3
ul.products >li {
oveflow:hiddem;
}

を指定しておく

このままだと区切りがわかりにくいので

1
2
margin-bottom:10px;
padding-bottom:10px;

で余白設定して

1
border-bottom:1px dotted #ccc;

で下線をつける

ただし、このままでは一番下も下線がはいってしまうので
一番下だけ設定を変える

これは
:last-child という設定を使う
意味は一番下

1
2
3
ul.products>li:last-child{
border:none;
}

これで、一番下だけ下線がなくなる

webサイトの見出しと本文作成

webサイトの見出しと本文作成

#12 見出しと本文を作ってみよう
http://dotinstall.com/lessons/website_html/9012
を参考に
ウェブサイトの見出しと本文を作成してCSSでレイアウトを決める

まずは、HTMLの編集

1
<div id="contents">

のところに

1
2
3
4
5
<h2>見出し</h2>
<p> 内容、コンテンツなどなど</p>
 
<h2>見出し</h2>
<p> 内容、コンテンツなどなど</p>

というようにコンテンツを追加して

1
<div id="sidebar">

のところに

1
2
3
4
5
<h3>見出し</h3>
<p>サイドバー </p>
 
<h3>見出し</h3>
<p>サイドバー </p>

というようにサイドバーの内容を追加しておく

これで
コンテンツとサイドバーができたので
CSSで設定していく

まず、見出しは太文字にしたいので

1
2
3
h2,h3{
font-weight:bold;
}

とする

これで、 h2 h3 両方に適用される

次に、h2 はコンテンツの見出しなので
それらしく設定していく

1
2
h2{
}

で設定をしていく

1
font-size:15px;

でフォントを15 にして

1
border-left:5px solid #ccc;

で見出しの左に線をつける

1
padding: 3px 0 3px 10px;

で余白をつける

1
margin-bottom:10px;

で下にも余白を設定

次に サイドバーの見出し h3 のスタイル

1
2
h3{
}

で設定する

内容は

1
border-bottom:1px solid #ccc;

で下線を引く

1
padding:3px 0;

で上下に余白設定

1
margin:bottom:10px;

で下にも余白設定

記事ごとに余白をつけたいので

1
2
3
p{
margin-bottom:1px;
}

とする