moccow the tech

例1

<script type="text/javascript"> var MyData = new Array(); MyData['name'] = 'moccow'; MyData['age'] = 101; MyData['mail'] = '[email protected]'; MyData['showData'] = function(){ var result = '名前：' + MyData['name'] + '\n'; result += '年齢：' + MyData['age'] + '歳\n'; result += 'メール：' + MyData['mail']; alert(result); } MyData['showData'](); </script>

連想配列に()を付けて、関数として呼び出す。が、違和感有り。

例2

<script type="text/javascript"> var MyData = new Array(); MyData.name = 'moccow'; MyData.age = 101; MyData.mail = '[email protected]'; MyData.showData = function(){ var result = '名前：' + MyData.name + '\n'; result += '年齢：' + MyData.age + '歳\n'; result += 'メール：' + MyData.mail; alert(result); } MyData.showData(); </script>

連想配列は以下の記述でも書けるのだそうな。

配列.キー

連想配列に、関数までを含め、さらに.演算子でキー指定可能にすると、それはもうほとんどオブジェクトなんだなぁ。

3 配列からオブジェクトへ

Javascriptでは変数も関数もオブジェクト。オブジェクトに割り当てられた変数はプロパティ、関数はメソッドと呼ぶのである。

<script type="text/javascript"> var n = 100; alert(n.toString()); </script>

数値もオブジェクトなので、メソッドを持っている。

4 コンストラクタ関数

コンストラクタ関数って、結局ほぼクラスじゃないか。。

コンストラクタ関数の基本形

/※ コンストラクタ関数の基本形 */ function オブジェクト名 ( …引数… ){ this.プロパティ = 初期値; ……必要なだけプロパティを用意…… this.メソッド = function( …引数… ){ ……メソッドの内容…… } ……必要なだけメソッドを用意…… }

<script type="text/javascript"> function MyDataObject(name,age,mail){ this.name = name; this.age = age; this.mail = mail; this.showData = function(){ var result = '名前：' + this.name + '\n'; result += '年齢：' + this.age + '歳\n'; result += 'メール：' + this.mail; alert(result); } } var obj1 = new MyDataObject('山田太郎',18,'taro@yamada'); var obj2 = new MyDataObject('田中花子',26,'hanako@flower'); var obj3 = new MyDataObject('鈴木イチロー',39,'ichiro@baseball'); obj1.showData(); obj2.showData(); obj3.showData(); </script>

5 オブジェクトの継承

/※ 継承を利用したコンストラクタ関数の定義 */ function 新しい関数 ( …引数… ){ オブジェクト.call ( this, …引数… ); ……以下、プロパティ・メソッドの定義を用意する…… }

<script type="text/javascript"> function MyDataObject(name,age,mail){ this.name = name; this.age = age; this.mail = mail; this.showData = function(){ var result = '名前：' + this.name + '\n'; result += '年齢：' + this.age + '歳\n'; result += 'メール：' + this.mail; alert(result); } } function MySuperDataObject(name,age,mail,tel,memo){ MyDataObject.call(this,name,age,mail); this.tel = tel; this.memo = memo; this.showData = function(){ var result = '名前：' + this.name + '\n'; result += '年齢：' + this.age + '歳\n'; result += 'メール：' + this.mail + '\n'; result += '電話：' + this.tel + '\n'; result += 'メモ：' + this.memo; alert(result); } } var obj1 = new MyDataObject('山田太郎',18,'taro@yamada'); var obj2 = new MySuperDataObject('田中花子',26,'hanako@flower','090-7777-7777','山田君の彼女です。'); obj1.showData(); obj2.showData(); </script>

‘super’ってあるから、こっちが親クラスかと思ったら逆だ。 メソッドのオーバーライドもできるんだな。

6 プロトタイプ（prototype）による拡張

関数を変数として扱う

<script type="text/javascript"> function MyDataObject(name,age,mail){ this.name = name; this.age = age; this.mail = mail; this.showData = function(){ var result = '名前：' + this.name + '\n'; result += '年齢：' + this.age + '歳\n'; result += 'メール：' + this.mail; alert(result); } } var obj1 = new MyDataObject('山田太郎',18,'taro@yamada'); MyDataObject.prototype.setName = function(){ this.name = prompt("新しい名前を入力："); } obj1.setName(); obj1.showData(); </script>

<script type="text/javascript"> String.prototype.showData = function(){ var res = '文字列：' + this; res += '\n文字数：' + this.length; alert(res); } var str = "Hello!"; str.showData(); </script>

プロトタイプ。元のオブジェクトも変更できてしてしまうのか。 利点より怖さを感じるな。 継承にはcallとprototypeの二つのパターンがあるが、いずれにしろクラス的なものをつくるのはコンストラクタ関数なのだな。

7 プロパティ・メソッドのアクセス制限

<script type="text/javascript"> function MyDataObject(name,age,mail){ var name = name; this.age = age; this.mail = mail; function setName(str){ name = str; } function getName(){ return name; } this.showData = function(){ var result = '名前：' + getName() + '\n'; result += '年齢：' + this.age + '歳\n'; result += 'メール：' + this.mail; alert(result); } } var obj1 = new MyDataObject('山田太郎',18,'taro@yamada'); obj1.showData(); </script>

<script type="text/javascript"> window.fbAsyncInit = function() { FB.init({ appId : "<%= @app['id'] %>", // App ID channelUrl : "<%= url_no_scheme('/channel.html') %>", // Channel File status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML });

　JavaScript SDK の初期設定部分（非同期）。 　・appId ：ココのやつ。 　・channelUrl："//localhost:5000/channel.html"。クロスドメイン関連のうようだが。※ 2 　・xfbml は「いいね!」ボタンの設置と関係あるんだろう。※ 3 　

// Listen to the auth.login which will be called when the user logs in // using the Login button FB.Event.subscribe('auth.login', function(response) { // We want to reload the page now so Ruby can read the cookie that the // Javascript SDK sat. But we don't want to use // window.location.reload() because if this is in a canvas there was a // post made to this page and a reload will trigger a message to the // user asking if they want to send data again. window.location = window.location; }); FB.Canvas.setAutoGrow(); };

　FB.Event.subscribe は任意のイベント発生を知らせ、その時の処理を記述できる（この場合はログイン時の処理）。 　この window.location = window.location; の意味がわからないなぁ。。 ※ 4 　FB.Canas.setAutoGrow()は、表示設定の命令。 　

　javascript もそんなに慣れていないから愚直に読む。 　

// Load the SDK Asynchronously (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>

　なんか見慣れない書き方だなぁと調べてみると、即時関数というものらしい。関数定義と実行を同時に書く方法のようだ。

//　即時関数の書き方 (function(){ 処理 })(); //

　最初の ( function ( ) { 処理 } ) が定義部分で、そのすぐ後に ( ) を付けて、定義した関数をすぐに呼び出している。スコープのこともあるみたいだが、今は深入りしないことにする。 　

var js, fjs = d.getElementsByTagName(s)[0];

　この書き方も最初分からなかったが、ログを出力したら、js はただ変数の宣言をしてるだけで、fjs のみ変数の初期化（値の代入）をしているということだった。 　

js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js"; fjs.parentNode.insertBefore(js, fjs);

　新しい <script> </script> エレメントを作成し、それを変数 js に代入。それに id 属性と src 属性を指定している。そして、その変数 js を fjs の前に挿入。

<script id="facebook-jssdk" src="//connect.facebook.net/en_US/all.js"> <script src="/javascripts/jquery-1.7.1.min.js" type="text/javascript">

　Firebug で確認すると、<head></head>の最初の<script></script>（jqueryの読み込み）の前に、新しい<script></script>が追加され、その属性も javascript で指定したものになっている。※ 5

<!-- These are Open Graph tags. They add meta data to your --> <!-- site that facebook uses when your content is shared --> <!-- over facebook. You should fill these tags in with --> <!-- your data. To learn more about Open Graph, visit --> <!-- 'https://developers.facebook.com/docs/opengraph/' --> <meta property="og:title" content="<%= @app['name'] %>" /> <meta property="og:type" content="website" /> <meta property="og:url" content="<%= url %>" /> <meta property="og:image" content="<%= url('/logo.png') %>" /> <meta property="og:site_name" content="<%= @app['name'] %>" /> <meta property="og:description" content="My First App" /> <meta property="fb:app_id" content="<%= @app['name'] %>" />

　ここもOGP関連だ。とりあえず、OGP については、あとでココを読んでみることにして、今は先に進む（行数的には戻るのだが、、）。 　

<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

　４行目は文字コード。５行目はスマホ対応か。。 　

<title><%= @app['name'] %></title>

　これは erb テンプレートでの ruby コード html 埋め込み記法。 　

<link rel="stylesheet" href="stylesheets/screen.css" media="Screen" type="text/css" /> <link rel="stylesheet" href="stylesheets/mobile.css" media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" type="text/css" /> <!--[if IEMobile]> <link rel="stylesheet" href="mobile.css" media="screen" type="text/css" /> <![endif]-->

　ここもスマホ（だけじゃないけど）対応。。さらにIE対応。。 　スマホやらIE対応は、なかなかのストレス感だな、、

　このあと javascript が続くが、それは次回。

② Koala :: Facebook :: API オブジェクトについて（Graph）

　Public Data と Private Data を扱う場合で初期化の方法が異なる。今回は後者。

# first, initialize a Graph API with your token @graph = Koala::Facebook::API.new(your_oauth_token) # 1.2beta and beyond

@graph = Koala::Facebook::API.new(access_token)

　OAuth オブジェクトから取得した access_token を用いて API オブジェクトの生成（ @graph ）。このオブジェクトのメソッドを基に、erb 側で必要となるオブジェクトを生成する。 　

As well as details about individual public stories:

# http://graph.facebook.com/7204941866_117111188317384 @graph.get_object("7204941866_117111188317384") # remember this ID # => {"name"=>"Bare Escentuals Cosmetics", # "message"=>"We've just launched the Bare Escentuals "Mom & Me" application!", # "likes"=>3, # .... # }

@app = @graph.get_object(ENV["FACEBOOK_APP_ID"])

　アプリのIDを渡して、アプリの属性を取得する（ここはpublicなんだな）。取得したのは以下のHashオブジェクトだった。

@app：{ "id"=>"XXXXXXXXXXXX", "name"=>"アプリの名前", "category"=>"Education", "link"=>"http://www.facebook.com/apps/application.php?id=XXXXXXXXXXXX", "icon_url"=>"http://xxxxxxxxxxxxxxxxxxxxxxxxxxx", "logo_url"=>"http://xxxxxxxxxxxxxxxxxxxxxxxxxxx", "daily_active_users"=>"数字（文字列）", "weekly_active_users"=>"数字（文字列）", "monthly_active_users"=>"数字（文字列）", "daily_active_users_rank"=>数値, "monthly_active_users_rank"=>数値 }

“me” is a very useful shortcut Facebook provides to getting the current user:

# http://graph.facebook.com/me?access_token=#{your_oauth_token} @graph.get_object("me") # => {"name"=>"Alex Koppel", ....}

　便利なショートカットだと言っている。。※ 1

@user = @graph.get_object("me")

　オブジェクトの中身は以下。

@user:{ "id"=>"XXXXXXXXXXXXXXXXXXX", "name"=>"文字列", "first_name"=>"文字列", "last_name"=>"文字列", "link"=>"文字列（URL）", "username"=>"文字列", "hometown"=>{ "id"=>"XXXXXXXXXXXXXXXXX", "name"=>"文字列（出身地）" }, "location"=>{ "id"=>"XXXXXXXXXXXXXXXXX", "name"=>"文字列（住んでいる場所）" }, "bio"=>"文字列（自己紹介）", "quotes"=>"文字列（好きな言葉）", "work"=>[ { "employer"=>{ "id"=>"XXXXXXXXXXXXX", "name"=>"文字列（組織名）" }, "location"=>{ "id"=>"XXXXXXXXXXXXX", "name"=>"文字列（勤務地）" }, "position"=>{ "id"=>"XXXXXXXXXXXXX", "name"=>"文字列（役職）" }, "start_date"=>"文字列（日付）", "projects"=>[ { "id"=>"XXXXXXXXXXXXX", "name"=>"文字列（プロジェクト名）", "start_date"=>"文字列（日付）" } ] } ], "inspirational_people"=>[ { "id"=>"XXXXXXXXXXXXX", "name"=>"文字列（尊敬する人）" } ], "education"=>[ { "school"=>{ "id"=>"XXXXXXXXXXXXX", "name"=>"文字列（学校名）" }, "type"=>"文字列（学校区分）" }, { "school"=>{ "id"=>"XXXXXXXXXXXXX", "name"=>"文字列（学校名）" }, "year"=>{ "id"=>"XXXXXXXXXXXXX", "name"=>"2010" }, "concentration"=>[ { "id"=>"XXXXXXXXXXXXX", "name"=>"文字列（学部）" } ], "type"=>"文字列（学校区分）" } ], "gender"=>"male", "timezone"=>9, "locale"=>"ja_JP", "languages"=>[ { "id"=>"208998719126251", "name"=>"Japanese" } ], "verified"=>true, "updated_time"=>"文字列（日付）" }

　Facebookページの“基本データ”にほぼ該当。 　また、get_objectメソッドの第二引数は“基本データ”以外の項目を指定することで、そのオブジェクトを取得できる。

@friends = @graph.get_connections('me', 'friends') @photos = @graph.get_connections('me', 'photos') @likes = @graph.get_connections('me', 'likes').first(4)

　これはもう書き出さない。。 　

② Koala :: Facebook :: API オブジェクトについて（REST） ※ 2

# for other data you can always run fql @friends_using_app = @graph.fql_query("SELECT uid, name, is_app_user, pic_square FROM user WHERE uid in (SELECT uid2 FROM friend WHERE uid1 = me()) AND is_app_user = 1")

　Koala の REST API で FQL をたたいている。FQL についてドキュメント（日本語）を読んでみる。

Facebook Query Language, or FQL, enables you to use a SQL-style interface to query the data exposed by the Graph API.

　SQL言語はあまり詳しくないのだけど。。

Queries are of the form SELECT [fields] FROM [table] WHERE [conditions]. For any query that takes a uid, you can pass me() to return the logged-in user. For example:

SELECT name FROM user WHERE uid = me()

　fields, table はなんとなく分かるが、conditions が分からなかったので、ココも併せて読んでみると、検索条件ということである。 　で、uid をログインユーザーにする場合は、uid = me ( ) にするとよい。また、以下のようにして、サブクエリを指定することができる。

SELECT uid, name, pic_square FROM user WHERE uid = me() OR uid IN (SELECT uid2 FROM friend WHERE uid1 = me())

　まず、サブクエリである ( ) 内の、SELECT uid2 FROM friend WHERE uid1 = me ( ) という命令で、ユーザの全友達IDリストを取得している。そのIDリストを IN のあとに記述し検索条件に指定している。IN についてはココを読んだ。 　

If your application uses Koala and the Facebook JavaScript SDK ( formerly Facebook Connect ), you can use the OAuth class to parse the cookies: ※ 2

# parses and returns a hash including the token and the user id # NOTE: this method can only be called once per session, as the OAuth code # Facebook supplies can only be redeemed once. Your application must handle # cross-request storage of this information; you can no longer call this method # multiple times. @oauth.get_user_info_from_cookies(cookies) # 具体的にはこんなハッシュだった。 #（なんか公式Wikiとは違うが、acces_tokenがとれればとりあえずは良いのでしょう） # # { # "algorithm" => "文字列", # "code" => "文字列", # "issued_at" => 数値, # "user_id" => "文字列", # "access_token" => "文字列", 　← これがaccess_tokenとなるのだな # "expires" => "文字列" # }

　こっち（ Cookie Parsing ? ）にも説明が。※ 3 　

Now we can use @oauth to generate the URL for the authentication code. url_for_oauth_code takes a hash, which can include the :permissions you want (either as an array or a comma-separated string,) and a :callback URL (in case you want to point the callback to a specific address in your domain.)

@oauth.url_for_oauth_code(:permissions => "publish_stream") # => "https://graph.facebook.com/oauth/authorize?client_id=#{app_id}&redirect_uri=#{callback_url}&scope=publish_stream" # you can provide your own token to protect against cross-site request forgery (CSRF) # this is highly recommended # see "https://developers.facebook.com/docs/howtos/login/server-side-login/"

　※ 4 　これは、ログインフォームの URL だと思われる。:permissions はアクセスできる範囲。 　参考：Graph API Explorer 　

@oauth.get_access_token(code) # => #{access_token}

　アクセストークンを取得するんだろう。※ 5 　

　以下は、サンプルソース内の該当箇所。

@authenticator ||= Koala::Facebook::OAuth.new(ENV["FACEBOOK_APP_ID"], ENV["FACEBOOK_SECRET"], url("/auth/facebook/callback"))

authenticator.get_user_info_from_cookies(request.cookies)['access_token']

redirect authenticator.url_for_oauth_code(:permissions => FACEBOOK_SCOPE)

session[:access_token] = authenticator.get_access_token(params[:code])

　※ 6

［今回の宿題］ ※ 1. OAuth について調べる。 ※ 2. ここでの Javascript SDK との関係を調べる。 ※ 3. Cookie や Session について調べないといけないなぁ。。 ※ 4. cross-site request forgery ( CSRF ) ? ※ 5. ※ 3とともに、トークンについても調べないと。 ※ 6. この prams [ :code ] はどっから来るのかなぁ。

③ helpers メソッド

def access_token session[:access_token] || access_token_from_cookie # access_token_from_cookieはhelpers内定義のメソッド end

論理演算子 || の左側、session [ :access_token ] にはまだ値が入っていないため、右の条件を評価することになる。この access_token_from_cookie もまた helpers メソッドなのでそちらへ。 　

# allow for javascript authentication def access_token_from_cookie authenticator.get_user_info_from_cookies(request.cookies)['access_token'] # authenticatorはhelpers内定義のメソッド rescue => err warn err.message end

authenticator がまた helpers メソッド。 　

def authenticator @authenticator ||= Koala::Facebook::OAuth.new(ENV["FACEBOOK_APP_ID"], ENV["FACEBOOK_SECRET"], url("/auth/facebook/callback")) end

ここも左側の変数（ @authenticator ）に値はないため、右の条件を評価することになる。この右側のメソッドの引数にある url ( " /auth/facebook/callback " ) もまた helpers メソッド。 　

def url(path = '') "#{scheme}://#{host}#{path}" end

ここで access_token から始まった、一連の処理が終わる。

②' get　' / ' に戻る

@graph = Koala::Facebook::API.new(access_token) # access_token

この時点では、ユーザからアカウントとパスワードを取得していないので、エラーになる。

④ error 処理

# the facebook session expired! reset ours and restart the process error(Koala::Facebook::APIError) do session[:access_token] = nil redirect "/auth/facebook" end

　ここで、redirect により " / auth / facebook " にルートが変更。 　sinatra のエラー処理については、ココ。また、koala のはココ。

①' get の前に処理されるのが before っぽい。それが、configure との違いか。

before do ー省略ー end

⑤ get　' / auth / facebook '

# Allows for direct oauth authentication get "/auth/facebook" do session[:access_token] = nil redirect authenticator.url_for_oauth_code(:permissions => FACEBOOK_SCOPE) # ログイン画面のURLをredirect end

ここで redirect しているのは、ログイン画面の URL。

そして、ここでアカウントとパスワードを入れると、ルートが ' / auth / facebook /callback 'になる。

⑥ get　' / auth / facebook / callback  '

get '/auth/facebook/callback' do session[:access_token] = authenticator.get_access_token(params[:code]) redirect '/' end

request.env["SERVER_SOFTWARE"]=>thin 1.2.11 codename Bat-Shit Crazy request.env["SERVER_NAME"]=>localhost request.env["rack.input"]=> request.env["rack.version"]=>[1, 0] request.env["rack.errors"]=> request.env["rack.multithread"]=> request.env["rack.multiprocess"]=> request.env["rack.run_once"]=> request.env["REQUEST_METHOD"]=>GET request.env["REQUEST_PATH"]=>/ request.env["PATH_INFO"]=>/ request.env["REQUEST_URI"]=>/ request.env["HTTP_VERSION"]=>HTTP/1.1 request.env["HTTP_HOST"]=>localhost:5000 ##### it is used. ##### request.env["HTTP_USER_AGENT"]=> request.env["HTTP_ACCEPT"]=> request.env["HTTP_ACCEPT_LANGUAGE"]=>ja,en-us;q=0.7,en;q=0.3 request.env["HTTP_ACCEPT_ENCODING"]=> request.env["HTTP_COOKIE"]=> request.env["HTTP_CONNECTION"]=> request.env["HTTP_CACHE_CONTROL"]=> request.env["GATEWAY_INTERFACE"]=> request.env["SERVER_PORT"]=>5000 request.env["QUERY_STRING"]=> request.env["SERVER_PROTOCOL"]=>HTTP/1.1 request.env["rack.url_scheme"]=>http request.env["SCRIPT_NAME"]=> request.env["REMOTE_ADDR"]=> request.env["async.callback"]=> request.env["async.close"]=> request.env["rack.session"]=>{ "session_id"=>"", "access_token"=>"" } request.env["rack.session.options"]=>{ :key=>"rack.session", :path=>"/", :domain=>nil, :expire_after=>nil, :secure=>false, :httponly=>true, :defer=>false, :renew=>false, :sidbits=>128, :secure_random=>SecureRandom, :secret=>nil, :coder=>, :id=>"" } request.env["rack.request.query_string"]=> request.env["rack.request.query_hash"]=>{} request.env["rack.request.cookie_hash"]=>{ "fbsr_xxxxxxx"=>"", "rack.session"=>"" } request.env["rack.request.cookie_string"]=> request.env["rack.session.unpacked_cookie_data"]=>{ "session_id"=>"", "access_token"=>"" }

Built-in Settings :environment - configuration/deployment environment

A symbol specifying the deployment environment; typically set to one of :development, :test, or :production. The :environment defaults to the value of the RACK_ENV environment variable ( ENV ['RACK_ENV'] ), or :development when no RACK_ENV environment variable is set. The environment can be set explicitly:

set :environment, :production

Sinatra公式ドキュメントより ※ 3

request.envについては次回