T.Yokoyamaのブログ: AngularJS

2013年6月8日土曜日

htmlday2013に参加しました。

今日はhtmlday2013の活動の一環として、

午前中はヒーロー島のイベントでハンズオン。

午後はAngularJSで遊ぼうというイベント。

ハンズオンの資料はそのうち、ヒーロー島さんで公開されると思います。

（恐らく…。公開されなければ、第20回の勉強会でも、ほぼ同じ内容でハンズオンする予定なのでその時に公開します。）

ハンズオンの時はMicrosoftのイベントだったので、アウェイ感がとても強かったですが

また、何かの機会に一緒にやれたらいいですね。

実際、ハンズオンはどうだったかなと思ってます。

（ASP.NETでも、AngularJSは動くので使ってみて下さい。）

チュートリアルのモジュール化以外の部分はこなしました。（※ユニットテストを除く）

午後は、AngularJS + PureでTodoサンプルを実装してみました。

ソースはまた今度公開します。

ng-bindを使った方が良いということもわかったり、angularJSを使う幅が

広がったかなーと思っています。

最後に、前回のDevfest2013の延長戦の時にやっていた、YouTubeサンプルを

もう一度眺めて終わり。

これもソースコードを公開します。

2013年3月1日金曜日

GAE/G＋AngularJSでGoogle+ SignInを利用する（１）

最近、公開されたGoogle+ SignInという、Google+アカウントを利用した認証
サービスを利用してみようと思ってがんばってみました。

Google+ SignInについては以下の記事をご覧ください。
http://googledevjp.blogspot.jp/2013/02/google-sns.html

で、本当は公開されているサンプルを動かせばいいのに、わざわざ苦戦する方向で
試してみました。

事前準備として、APIsConsoleで

Google+ APIをONにする。
ClientIDを作成する。（Web Applicationのものを作成してください。）

ClientIDは削除できないので選択を間違えると、無駄にIDが増えていくことになるので気をつけてください。（リダイレクト先は後でも変更可能です。）

ライブラリが提供されているので、実際にはHTMLだけ作成すればローカルのWebサーバを
経由するだけでGoogle+ SignInボタンは表示されます。

実際にSignInボタンを押すと、プロフィール情報が取得され、ブラウザで表示させる事が
できるようになります。

サンプルコードはgithubで公開しています。
https://github.com/tyokoyama/gplus-signin-sample

単純な例であれば、すぐ作れるようになりますが、私はAngularJSも一緒に使おうとして
だいぶはまりました。（SignIn直後にプロフィール情報を表示させる事は今も解決していません）

最初のSignIn後のリダイレクト先にAngularJSのコントローラの関数を指定できないので
以下のように強引に関数を呼び出すか、

var elem = document.getElementById('viewResult');
angular.element(elem).scope().signIn(authResult);

githubのサンプルコードのように、ボタンを配置してボタンを押した後で
プロフィール情報を取得しにいく。という事なら何とか可能でした。

実際の動きはPHPのQuickstartを見ると良いかもしれません。
（HTMLの部分はjQueryが使われています）
https://developers.google.com/+/quickstart/php

GAE/Gでも、PHPのプロジェクトからindex.htmlだけコピーするだけでも、
プロフィール情報が表示されるようになります。
（適当にAjaxでのリクエストが発生しますが、GAE/G側の実装がなければ404の応答になるだけ）

もうしばらく、いじり倒さないとだめだなと思ったのと、
生産性の低さに嘆く1日でした！

T.Yokoyamaのブログ

2013年6月8日土曜日

htmlday2013に参加しました。

2013年3月1日金曜日

GAE/G＋AngularJSでGoogle+ SignInを利用する（１）

関連するGoogle+の投稿

フォロワー