twitter上ではもう宣伝していますが、SelfieGirlをリリースしました。

SelfieGirlは、twitter上で話題になっている#グラドル自画撮り部のハッシュタグを元に検索して、スマートフォンで見やすいように整形したWebサービスです。Androidアプリはちょこちょこ出ているようなので、Androidじゃなくて別の方法でやってみようかなと思っていました。

SelfieGirlを作っている技術は以下になります。

Ruby on Rails

Ruby製フルスタックフレームワーク

AngularJS

JavaScript MVCフレームワーク

ionic framework

AngularJSを前提にしたスマートフォン用に最適化されたhtml5フレームワーク

heroku

Ruby on Railsを簡単にデプロイできるPaaS。様々な言語をサポートしている。

oauth.io

OAuth Provider。面倒なOAuthの実装がすごく簡単になる。

GehirnDNS

DNS管理が楽。herokuでルートドメイン定義をするのに使える。

ionicはこの前、モバイルアプリ向けUIフレームワークionicがSassで作られている＆AngularJSに最適化されていて俺得すぎるという記事を読んで気になっていたので調査をしていました。AngularJSも勉強できそうだし、スマートフォンに最適化されたサイトを作るのに便利そうだし、という理由で選びました。実際のところ、ionicはAngularJSをつかったjQuery Mobileみたいなものだと思います。サンプルを見てみればわかると思います。

SelfieGirlでは、AngularJSを使っていますが、ほとんどionicで拡張されたものを使うので、そこまで難しいことはありませんでした。そのかわり、ionicでちょっと難しいことをやろうとすると大変でした。あまりサンプルコードがないので。今後はionicのサンプルコードもブログに書いていこうと思います。

Railsを使った理由は、特にありませんが（笑）、herokuにデプロイするのが楽だからですかね。SelfieGirlではRailsの役割はCoffeeScript, Sass, Slimのコンパイル環境という感じです(Slimはhtmlを簡単に書くためのライブラリ)。今のところは特にデータベースも使っていません。

DNS管理はGehirnDNSを使っています。herokuはサブドメイン(www.seiflegirl.netみたいなの)を使うのは簡単なのですが、ルートドメイン(selfiegirl.net)を使おうとしたら、対応しているDNSサービスを使わなければなりません。仕事のときに色々調査したのですが、GehirnDNSならばherokuでルートドメインを使うことができます。2ドメインまでは無料で使えます（私は有料にしているけど）。

Gehirn DNS、ホスト名無しのドメインにエイリアス機能をサポート

GehirnDNSとherokuの相性はかなりいいと思います。

今回すごく楽だなーと思ったのは、OAuth.ioです。
OAuth.ioを使うとfacebookやtwitterなど、80ものプラットフォームへのOAuthログインが無茶苦茶簡単になります。OAuthって実は実装するのが結構面倒なのですが、OAuth.ioはJavaScriptのライブラリを使って2つメソッドを呼ぶだけで完了します。
ただし、OAuth時に使うconsumer key, consumer secretをOAuth.ioに預けることになるので、セキュリティ的にやや不安が残ります。しかし、セキュリティにはすごく気を遣ってる！というふうに書いてあったので、信用して使ってみることにしました。
OAuth.ioを使うには有料・無料のプランがあり、無料プランはOAuthユーザー数が月間1,000人、アプリ数2つまでなどの制限がありますが、とりあえず小さく始めるには無料プランで十分じゃないかなと思います。1,000人超えるサービスならうまくマネタイズすることもできるんじゃないかなと。

今回はOAuth.ioを使った部分だけ紹介しようと思います。
AngularJSのコントローラーも使いますが。

1. OAuthの結果のキャッシュを有効にします。

   (function() {
     "use strict";
     var config = {
       oauthd_url: 'https://oauth.io',
       oauthd_api: '/api',
       version: 'web-0.1.5',
       options: {cache: true}
     };
   ...
   

2. AngularJSのルーティングの設定をしておきます。

   angular.module('Hoge', ['ionic', 'Hoge.controllers']).config(
     function($stateProvider, $urlRouterProvider){
       $stateProvider
         .state('top', {
           url: '/',
           templateUrl: '/home/top',
           controller: 'TopCtrl'
         })
         .state('cards', {
           url: '/home/cards',
           templateUrl: '/home/cards',
           controller: 'CardsCtrl'
         })
       $urlRouterProvider.otherwise('/');
     }
   );
   

3. ボタンをクリックしたらtwitterにOAuth認証するようにします。
   ng-click=”twitterLogin()”はAngularJSでのclickイベント設定です。今回はわかりやすくhtml(erb)にしておきます。

   <button ng-click="twitterLogin()">
   Twitter Login
   </button>
   

   そして、ng-clickのイベントを定義します。このコントローラーをTopCtrlとします。
   基本的にはOAuth.initializeメソッドとOAuth.redirectメソッドかOAuth.popupメソッドを呼ぶという2つだけ！

   OAuth.initialize("OAuth.ioのpublic key");
   angular.module('Hoge.controllers', [])
     .controller('TopCtrl', function($scope){
       $scope.twitterLogin = function() {
         // twitter認証後に#/home/cardsにリダイレクトする
         OAuth.redirect('twitter', "#/home/cards");
       };
     })
     .controller('CardsCtrl', function($scope, $rootScope) {
       // 後で説明する
     });
   

   クリックすると早速twitter認証ができます。簡単。

4. リダイレクト後にアクセスされるurlに適したコントローラーを定義します。
   それがCardsCtrlとします。

     .controller('CardsCtrl', function($scope, $rootScope) {
       OAuth.callback('twitter', function(error, success) {
         // エラーの場合はalertをあげる
         if (error) return alert(error);
         // コールバックの結果を保存しておく
         $rootScope.twitter = success;
       });
       if ($rootScope.twitter == undefined) {
         OAuth.redirect('twitter', '#/home/cards');
       } else {
         var params = {
           q: 'テスト'
         };
         var queries = [];
         for(key in params) {
           queries.push(key + '=' + encodeURIComponent(params[key]));
         }
         // コールバックで受け取ったオブジェクトからAPIをコールする
         $rootScope.twitter.get('/1.1/search/tweets.json?' + queries.join('&')).done(function(json){
           // twitterの検索結果をここで処理
         });
       }
     });
   

   twitter apiを呼び出すのは、コールバックで受け取ったオブジェクトになります。OAuthで受け取ったトークンを保存して自分でなんとかして…とかしなくてもよいです。これがとても楽です。APIを読んだあとの処理もdoneで処理すればいいのでわかりやすいです。

5. 最初のところでキャッシュをtrueにしたと思うのですが、こうしておくと、#/home/cardsを開いた状態でページを更新すると、

       if ($rootScope.twitter == undefined) {
         OAuth.redirect('twitter', '#/home/cards');
       } else {
         // ...
       }
   

   のところで認証結果のキャッシュが使われるので、毎回ログインを求められることがありません。

以上のように、twitter認証からAPIの呼び出しまで簡単にJavaScriptで行うことができます。OAuth.ioの無料枠の制限はやや厳しいですが（1,000ユーザーまで、2アプリまで）、とりあえず試しにやってみるには十分だと思うし、ユーザーが増えてきたら課金してもいいと思います。有料でも月に2000円くらいからです。個人でもまぁなんとか払える額かなぁと。

Tweet