Opauthでソーシャルログイン

俺が☆爆発☆してWEBデザイナーを目指すよ（汗）の記録ブログ。

あなた様の貴重な時間を割いてこの記事を読んで下さり恐悦至極に存じます。


●ソーシャル・ログイン
CodeIgniterで、TwitterやFacebookのアカウントでログイン（ソーシャル・ログイン）できる機能を実装しました。

→ ソーシャルログイン機能とは？ - マーケター通信 - ITmedia

$ペット探して！-Oauth


最初は、「HybridAuth」を使ってみたけど、何かうまく動かなくて、
次に、「Opauth」を使ってみたら、うまくいきました！

→ Tank_Authの日本語訳｜ペット探して！

結局、OAuth（Webサービス間の連携機能）の使い方が、よく分かっていないだけでしたが、…今もよく分かってません。（汗）

セキュリティーを確保するためにも、OAuthのプロトコールを理解しないといけないな～＞＜



ま、とりあえず、動いたから結果オーライということでｗ（・∀・）


●Tank_AuthとOAuthの連携
Tank_Authのソースコードを見てみると、ログイン時にセッションデータで、
・user_id
・username
・status
という３つの値を保存してました。

OAuthでログインしたときも、上記３つのデータをセッションデータに保存すれば、Tank_Authで、ログインチェックを行ってもOKでした。


●簡単ログイン
ログインに必要な手順が煩雑だと、ユーザーのログイン率が下がると思います。

・Tank_Auth → メールアドレスを登録してもらう。
・OAuth → いったん、ソーシャルサービスのログイン画面に飛んでもらう。
という具合に、
ちょっとステップがはさまるので、急いでいる人にとっては面倒かな？

簡易なログイン機能であれば、
ユーザー名とパスワードを決めたら、すぐにアカウントが作成できる
ぐらいがいいかな？

ブラウザーゲームで、
・進み具合を保存する
・点数の管理
とかなら、「簡単ログイン」という選択肢もあったら便利かな？


・通常のログイン → Tank_AuthでOK
・ソーシャルログイン → Opauth、HybridAuthでOK
・簡単ログイン → 特にライブラリーを使わず、CodeIgniterでベタ書き

ソーシャルログインの次は、簡単ログインも用意してみたいと思います。

いつやるか！？ → そのうちでしょｗ





Salamander （ELLEGARDEN）

Spoken words 語られた言葉
Broken hearts 傷ついた心
Instant dreams 瞬間の夢

Just let it slide ただ放っておこう
Wasting time 時間の無駄だから
Just keep it goin' and goin' このまま突っ走ろう
No one cares 誰も気にしてないさ

jQuery UI sortableでリストの並び替え

俺が☆爆発☆してWEBデザイナーを目指すよ（汗）の記録ブログ。

あなた様の貴重な時間を割いてこの記事を読んで下さり恐悦至極に存じます。

「Tank_Auth」の日本語訳は、無事完了しました。
Tank_Authの日本語訳｜ペット探して！

それから次に、「jQuery UI」の「sortable」という機能を使い、
ドラッグ＆ドロップで並び替えのできるリストを作りました。

$ペット探して！-jQuery UI ロゴ

$ペット探して！-jQuery UI sortable


途中、引っかかったポイントが２つあって、
(1) <li>タグじゃなくて、<table>タグを使う
(2) 変更された並び順を、AJAXですぐに更新する
というところで、苦戦しました～＞＜

同じようなものをまた作るときのために、自分用のメモを書いときます。


●参考
以下のサイトが参考になりました。どうもありがとうございます！

jQuery UIのsortable　PHP 保存
http://7warai.net/wp/programming/3241/

jQuery UIのsortable　AJAX　PHP 保存
http://www.ibm.com/developerworks/jp/web/library/wa-jqueryui/

javascript連携　～jquery-ui-sortable～
http://ameblo.jp/colorage/entry-11321936688.html

jQuery UI API 1.8.4 日本語リファレンス>Interactions>Sortable
http://stacktrace.jp/jquery/ui/interaction/sortable.html

jQuery UI でテーブルタグをsortableに
http://taichistereo.sblo.jp/article/39459764.html

【PHP】Ajaxによる通信（リクエスト）かどうか判定する方法
http://se-suganuma.blogspot.jp/2010/07/phpajax.html


●サンプル
今回作ったのは、CodeIgniterを使った、MVC構造のWebアプリです。

・View（表示）

<html>
:

<script src='js/jquery.min.js'></script>
<script src='js/jquery-ui-1.9.2.custom.min.js'></script>

<script type='text/javascript'> 
$(function() {
	$('#sortable tbody').sortable();
	// ソート完了時に実行
	$('#sortable tbody').bind('sortupdate', function (event, ui) {
		var sortlist = $(this).sortable('serialize');
		// ajax post
		$.post(
			'<?php echo base_url(); ?>edit/edit_category', // 送信先のURL
			{'sortlist': sortlist }, // 送信データ
			'',
			'text' // 送信データの形式
		);
		// auto reset sequential numbers
		var rows = $('#sortable tbody .number');
		for (var i = 0, rowTotal = rows.length; i < rowTotal; i += 1) {
			$($('.number')[i]).text(i + 1);
		}
	})
});
</script>

<table id='sortable'>
	<thead>
		<tr>
			<th>No.</th>
			<th>カテゴリー名</th>
			<th>並び順</th>
		</tr>
	</thead>
	<?php if(isset($category_list)): ?>
	<tbody>
	<?php $cnt = 0; ?>
	<?php foreach($category_list as $val): ?>
		<?php $cnt++; ?>
		<tr id="seq_<?php echo $val['id']; ?>">
			<td class='number'><?php echo $cnt; ?></td>
			<td nowrap><?php echo $val['name']; ?></td>
			<td><?php echo $val['sort']; ?></td>
		<tr>
	<?php endforeach; ?>
	</tbody>
	<?php endif; ?>
</table>

:
</html>


↑jQuery UIの公式サイトで、sortableを使えるようにしたjsファイルをダウンロードしておきます。
今回は、一応IE6もサポートしている「jquery-ui-1.9.2.custom.min.js」というファイルを作成しました。
（最新バージョンの1.10だと、IE6はサポート対象外らしいです。）


・Controller（リクエストの管理）
/codeigniter/application/controllers/edit.php


<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Edit extends CI_Controller
{
	function __construct()
	{
		parent::__construct();
		$this->load->library('tank_auth');
		$this->load->model('Category');

		// login check
		if (!$this->tank_auth->is_logged_in()) {
			redirect('/auth/login/');
		}
	}

	function edit_category()
	{
		// ajax
		if (
			// jQuery が送信するヘッダーのチェック
			isset($_SERVER['HTTP_X_REQUESTED_WITH'])
			AND 'XMLHttpRequest' === $_SERVER['HTTP_X_REQUESTED_WITH']
			AND isset($_POST['sortlist'])
		) {
			$sortlist = $this->input->post('sortlist');
			$this->Category->category_list_sort($sortlist);
		}

		// data bind
		$user_id = $this->tank_auth->get_user_id();
		$data['category_list'] = $this->Category->category_list($user_id);

		// view
		$this->load->view('edit_category', $data);
	}
}



・Model（データの更新）
/codeignter/application/models/category.php


<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Category extends CI_Model
{
	function __construct()
	{
		parent::__construct();
	}

	// ajax update [t_category]
	function category_list_sort($sortlist = '')
	{		
		// sortlist → seq[]=3&seq[]=1&seq[]=2 ... こんなかんじのデータ
		$seq = explode('&', (string) $sortlist);
		
		$sort = 0;
		foreach ($seq as $val) {
			$sort++;
			$id = (int) str_replace('seq[]=', '', $val);
			
			// check
			$sql = 'SELECT * FROM `t_category` WHERE `id` = ? AND `sort` = ?';
			$param = array($id, $sort);
			$query = $this->db->query($sql, $param);
			$row = $query->row_array();
			$cnt = count($row);
			
			// update
			if ($cnt == 0) {
				$sql = 'UPDATE `t_category` SET
					`sort`		= ? ,
					`update_at`	= ?
				WHERE
					`id`		= ? ';
				$param = array($sort, date('Y-m-d H:i:s'), $id);
				$this->db->query($sql, $param);
			}
		}
	}
}


↑データベース（MySQL）に、
「id」「name」「sort」「update_at」などのカラムがある
「t_category」というテーブルを用意しておきます。


こんなかんじで、jQuery UI sortableを使った、ドラッグ＆ドロップで並び替えができるリストが用意できました。

次は、リキッドレイアウトで、カラムの幅や数が変わるリストを作る予定です。





にんげんっていいな （ガガガDX）

もぐらが見ていた　運動会

びりっ子元気だ　一等賞

夕焼け小焼けで　また明日　また明日


Tank_Authの日本語訳

俺が☆爆発☆してWEBデザイナーを目指すよ（汗）の記録ブログ。

あなた様の貴重な時間を割いてこの記事を読んで下さり恐悦至極に存じます。

最近、日常の細々としたこと（他の人の手伝いとか）に結構な時間を費やしており、自分のWeb制作活動に時間を割り当てられていませんでした。

そろそろ、軸足を他人の手伝いから、自分の課題に戻そうと思います。


●CSSフレームワーク
CSSフレームワークは結局、Twitter Bootstrapに落ち着きました。

Yahoo! Pureも試してみたけど、レスポンシブデザインの挙動が、自分の想像していたものと、若干違っていたので、今回は却下。

Bootstrapを利用することで、Webデザインがかなり楽になりました！

良かった！！！（・∀・）


●ログイン認証
OpenIDやOAuthの仕組みを利用して、各種ソーシャルサービスのアカウントでログインできるWebサイトを作ろうと計画しました。

OpenIDでシングルサインオン - ペット探して！

とりあえず、
・Twitter
・Facebook
・Yahoo!
・Google
あたりのアカウントで、ログインできるようになればOKです。

普段使っているPHPフレームワークの「CodeIgniter」で、OpenIDやOAuthを利用するために、「HybridAuth」というライブラリーを試してみました。

$ペット探して！-HybridAuth


$ペット探して！-HybridAuth


だけど、何かうまく動かなくて、とりあえず導入を断念＞＜

＝ソーシャルログインは、後回しだな～。


●Tank_Auth
しょーがないので、自前のログインシステムを用意。

「CodeIgniter」＋「Tank_Auth」の組み合わせで、Tank_Authの日本語訳をやってます。

地味で面倒くさい作業だけど、手抜きしないで正確にやろう。





Bossa with Eri （コモエスタ八重樫）

あなたにだけは　聞かせてあげる

私の夢は　小説家なの


YahooのCSSフレームワーク「Pure」

俺が☆爆発☆してWEBデザイナーを目指すよ（汗）の記録ブログ。

あなた様の貴重な時間を割いてこの記事を読んで下さり恐悦至極に存じます。

自分の弱点であるWebデザインを克服するために、CSSフレームワークの使い方を調べています。

CSSフレームワークのお勉強｜ペット探して！

$ペット探して！-100%pure


Twitter Bootstrapを使ってみて、スゴイ便利なのは分かったけど、うーん、何か、イマイチ！？

＝大雑把で、大味のWebデザインになってしまい、繊細さが足りない…。

・Bootstrapは、大まかなレイアウトを決めるのに使う。
・細部は、自分でCSSを書いて、追加しないとダメ。


●レスポンシブデザイン
Bootstrapを使ってみて、感動したのは、レスポンシブデザインが簡単に実現できること！

ASCII.jp：レスポンシブWebデザインとは
レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。
ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。


$ペット探して！-レスポンシブデザイン


＝ブラウザーの画面を伸び縮みさせると、メニューやコンテンツの配置が、ビュンビュン変わります。


●いろいろなCSSフレームワーク
CSSフレームワークは、Twitter Bootstrap以外にも、いろいろありました。

非デザイナにオススメのCSSフレームワーク6選

レスポンシブWebデザインの現状と、CSSフレームワーク「Foundation 4」によるサイト制作手法

・Twitter Bootstrap
　http://twitter.github.io/bootstrap/
・Boot Metro
　http://aozora.github.io/bootmetro/
・Pure
　http://purecss.io/
・HTML KickStart
　http://www.99lime.com/
・GroundworkCSS
　http://groundwork.sidereel.com/
・Foundation
　http://foundation.zurb.com/
・Skeleton
　http://www.getskeleton.com/
・Kube
　http://imperavi.com/kube/
・960 Grid System
　http://960.gs/

乱立してるな～ｗｗｗ


●Pure
たくさんの選択肢がある中で、Yahooで開発されたCSSフレームワーク「Pure」が、良さげに思えました。

$ペット探して！-Yahoo Pure


Pureの特徴として、JavaScript、jQueryは使わないで、CSSのみで構成されている、ということ。

ちょっとPureを試してみよう☆（・∀・）

Pure を使って 5分でレスポンシブな Blog テンプレートを作る | WWW WATCH





よろこびのうた （ジ・エキセントリック・オペラ）

Wem der große Wurf gelungen,
Eines Freundes Freund zu sein,
Wer ein holdes Weib errungen,
Mische seinen Jubel ein!

ひとりの友の友となるという
大きな成功を勝ち取った者
心優しき妻を得た者は
彼の歓声に声を合わせよ

CSSフレームワークのお勉強

俺が☆爆発☆してWEBデザイナーを目指すよ（汗）の記録ブログ。

あなた様の貴重な時間を割いてこの記事を読んで下さり恐悦至極に存じます。

いやー、早いもので、2013年も折り返し地点を過ぎましたね！

残り半分も疾走していきたいと思います！


●CSS
自分の欠点は、「デザイン」。
何とかして克服したいです。

Webデザインに必要なCSSを、ドットインストールの入門講座で復習してみました。

CSS入門 (全20回) - ドットインストール
ドットインストールの教材は、短い動画です。
1回の講座が2～3分なので、集中して取り組めば、1日で終わります。

CSSの仕組みや使い方は理解できるんだけど、
CSSで自由自在にレイアウトできるレベルには達していない。

→「知っている」から「できる」までの間には、大きなギャップがあるんだなー＞＜

デザインの見本となるWebサイトを見ながら、コツコツとCSSのテクニックを学ぶことが必要なんだろうけど、時間かかるよなー。

…てなわけで、もう一つ別の方法で、CSSによるWebデザインに取り組んでみます。


●CSSフレームワーク
定番のWebデザインを手軽に実現する方法として、「CSSフレームワーク」という便利なツールが提供されてます。

有名なCSSフレームワークに、「Twitter Bootstrap」というのがあります。

Twitter Bootstrap

$ペット探して！-Twitter Bootstrap


とりあえず、ドットインストールで、Twitter Bootstrapの使い方を勉強してみます。

Twitter Bootstrap入門 (全18回) - ドットインストール




サンライズ （スペクトラム）

汚れていないその手で

時代のページを開け