google web service DB設定

google web service DB設定

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

以下はSQL文になる

create databasel dotinstall_google_connect_php;

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

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

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

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

use dotinstall_google_connect_php;


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

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

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
);

でテーブル作成

it int not null auto_increment primary key

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

取得するものとして

google_user_id varchar(30) unique

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

google_email varchar(255),

でメールアドレス

google_name varchar(255),

で名前

google_picture varchar(255),

で画像

google_access_token varchar(255),

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

created datetime,
modified datetime

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

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

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

vagrant up
でマシン起動

vagrant ssh
でログインして

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

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

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
を参考に
アイコンつきリストを作成

<div id="sidebar">

の中に

<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で設定する

<ul class="submenu">

なので

ul.submenu > li{
}

で設定していく

background:url('dotinstall.png');

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

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

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

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

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

padding: 0 0 5px 20px;

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

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

webサイトにバッチの設置

webサイトにバッチの設置

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

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

を作成

これをCSSで設定する

class="badge" なので
.badge{
}

で設定を書いていく

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

とする

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

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

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

<div class="sample">

がバッジの親要素なので

position:relative;

を追加する

また、バッジ側である

.badge{
}

position:absolute;

を追記する

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

.badge{
}

のほうで

top:-5px;
right:-5px;

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

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

bottom:-5px;
right:-5px;

というようにする

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

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

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

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

で領域を指定して

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

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

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

div.sample{
}

として設定を書いていく

float:right;

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

width:60;

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

margin-left:10px;

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

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

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

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

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

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

まず、

padding:2px;

で余白をつくって

background:#fff;

で背景を白くして

border:1px solid #ccc;

で実線を引いている

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

このため、
div.sample の

width:60px;

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

width:66px;

と変更する必要がある

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

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

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

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


<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 の中で画像を表示するようにするので

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

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

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

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

ul.products{
}

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

margin-botttom:15px;

で下に余白設定

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

img に関しては

ul.products >li >img{
}

p に関しては

ul.products >li >p{
}

とする

まず、img のほうから設定

float:left;

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

width:60px;

としておく

pのほうは

margin-left:70px;

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

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

font-size:13px;

としておく

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

ul.products >li {
oveflow:hiddem;
}

を指定しておく

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

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

で余白設定して

border-bottom:1px dotted #ccc;

で下線をつける

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

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

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

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

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

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

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

まずは、HTMLの編集

<div id="contents">

のところに

<h2>見出し</h2>
<p> 内容、コンテンツなどなど</p>

<h2>見出し</h2>
<p> 内容、コンテンツなどなど</p>

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

<div id="sidebar">

のところに

<h3>見出し</h3>
<p>サイドバー </p>

<h3>見出し</h3>
<p>サイドバー </p>

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

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

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

h2,h3{
font-weight:bold;
}

とする

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

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

h2{
}

で設定をしていく

font-size:15px;

でフォントを15 にして

border-left:5px solid #ccc;

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

padding: 3px 0 3px 10px;

で余白をつける

margin-bottom:10px;

で下にも余白を設定

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

h3{
}

で設定する

内容は

border-bottom:1px solid #ccc;

で下線を引く

padding:3px 0;

で上下に余白設定

margin:bottom:10px;

で下にも余白設定

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

p{
margin-bottom:1px;
}

とする

webサイトのメニュー作成

webサイトのメニュー作成

#11 メニューを作ってみよう
http://dotinstall.com/lessons/website_html/9011
を参考に
ウェブサイトのメニュー項目の設定を学習

HTMLではメニューはリストで表現される

このため、スタイルを決めるには
ul
li
この2つをCSS対象にする

#menu ul>li{
}

という項目を作り設定していく

#menu は
id=”menu” という意味で
CSSで#は id という意味

ul > li は ul の中の li という意味

そして、以下が設定とその意味

float:left は横並びにする

width:100px で幅固定

font-size:13pxでフォントサイズ指定

text-align:center:

で中央揃えにする

padding:4px

で余白を4px

background:#ccc

で背景色を灰色にする

margin-right:10px

で右側との余白を10pxに指定

border-radius:4pxv

で角を丸くする

text-shadow:0 1px 0 #fff

で白い影がテキストにつくようになる

このままだと
#menu に対して
#contents
#sidebar
が回り込んでしまうため

#menuへ

overflow:hidden;

を追加する

さらにメニューの上にマウスオーバー
つまりマウスをのっけたときに色を変えるようにする

#menu ul >li.hover{
}

.hover でマウスオーバーしたときの処理になる
色を変えるには

background:#ddd;

とすることで、マウスオーバーしたときに
背景の色が変わるようになる

またリンクを aタグで作成すると下線がつくけど
これを消すことができる
これは

text-decoration: none;

を指定すればOK

今回は #menu の 中にあるので

#menu ul >li >a{
text-decoration:none;
}

となる

また、文字の上だけじゃなく
枠でもマウスオーバーで色が変わるようにするには

display:block;

を追加する

ヘッダーとフッターの作成

ヘッダーとフッターの作成

#10 ヘッダーとフッターを作ろう
http://dotinstall.com/lessons/website_html/9010
を参考に
ウェブサイトのヘッダーとフッターの作成を学習

まずはヘッダーの作成
これは

<div id="header"></div>

のところに書く

ほとんどの場合 h1 で見出しをつける

今回は、画像を入れるので

<h1>
<img src="dummy.png" height="100" width="600"></h1>

とする

フッター部分を作成するには

<div id="footer"></div>

へコードを追記する

これも、ほとんどの場合は copyright となるので

<div id="footer">
Copyright 2013 wp.developapp.net
</div>

というように
Copyright とドメインやサイト名を書く

<div id="menu"></div>

ここはメニューをつくる部分
メニューの作り方はリスト形式なので
ul と li でメニューを作成

<ul>
<li><a href="">ホーム</a></li>
<li><a href="">製品情報</a></li>
<li><a href="">企業情報</a></li>
</ul>

aタグで囲んでおけば、それぞれのリンクになる

ここまでできたらCSSでレイアウトを変えていく

まず、body 部分で文字の標準の大きさを指定

font-size:14px;

次に
footer の文字サイズも変更するので

#footer{
font-size:12px;
}

とする

また、色を変えるため

color:#ccc;

として

文字を中央寄せにするために
text-align:center;
を指定

border-top:1px solid #ccc;

として線を引く

padding:10px 0 20px;

で余白設定