ニコ動のお気に入りユーザー新着動画を見やすくウォッチできるWEBサービスを作った
ニコニコ動画では動画投稿者をお気に入りユーザーとして登録すると、そのユーザーの新着動画をニコレポとしてお知らせしてくれる機能があります。
しかし、このニコレポには「2525再生を達成しました」とか「~さんが動画をマイリスト登録しました」とかあまり知らなくていいようなお知らせがたくさん出てきて、新着動画だけをウォッチしたいという自分の要望にはあまり適しませんでした。
そこで、新着動画をウォッチするという部分だけにフォーカスして、新着動画をウォッチするためだけのWEBサービスを作りました。ニコレポについて自分と同じような不満を持っている人なら、これを使ってもらうと少し幸せになれるかもしれません。
よかったら使ってみてください。
NicoTune
http://nicotune.net/
ここから下は開発に用いた要素技術についての一言メモです。
フロント
- AngularJS・・・簡単なアプリを作るのには便利。規模が大きくなった時の話はわからない。
- Bootstrap・・・こちらも同様に簡単なアプリであれば便利に使える。凝ったもの作るときの話はわからない。
サーバ
- Nginx・・・Apacheよりも設定ファイルが簡素に書けるのが良いと思った。
- uWSGI・・・適当にググった情報で適当に動かしただけなので良し悪しがわからない。
Twitter OAuthで1度認証されたら、以降は認証画面を出さないようにするための設定
新しいWebアプリ作るたびにハマっている気がするのでメモしておく。
Twitter OAuthで1度認証されたら、以降は認証ボタンの押下を促す画面をスキップしたい。
これを実現するために2つの設定が必要。
認証URL
認証のためのURLに下記を使用する。
oauth/authenticate
こちらを指定してしまうと必ず認証画面が表示されてしまう。
oauth/authorize
Application Settings
Twitter Application Managementにて対象のアプリケーションに下記の設定を行う。
githubがハロウィン仕様になってた
いいね。
UI BootstrapのPagerが機能しなくてハマった
AngularJSでBootstrapを扱うためのライブラリ、UI Bootstrapを使ってみたんですが、サンプルコードを参考にPagerを実装してもなぜか機能してくれなくてハマってしまいました。
サンプルコードを記載しているページではちゃんと機能しているので、AngularJSとui.bootstrapのバージョンの組み合わせでうまくいかなくなったりしてるのかなぁと勝手に想像しています。
めんどうなのでちゃんと確認はしていませんが、以下のようにすることで機能できるようにはできました。
サンプルコード
Markup
<pager total-items="totalItems" ng-model="currentPage"></pager>
$scope.pageChanged = function() { console.log('Page changed to: ' + $scope.currentPage); };
Angular directives for Bootstrap
サンプルコードではこうなっているのですが、これだとpageChangedが呼ばれませんでした。
修正後のコード
Markup
<pager ng-change="pageChanged()" total-items="totalItems" ng-model="currentPage"></pager>
なので、ng-changeを明示的に記述し呼ばれるように修正。
Bootstrapファーストガイド―CSS設計の手間を大幅に削減!
- 作者: 相澤裕介
- 出版社/メーカー: カットシステム
- 発売日: 2014/11/26
- メディア: 単行本
- この商品を含むブログ (2件) を見る
Flaskでリダイレクトしたよとかいう警告が出る
こんな警告が出て解消するのに少しハマった。
'A request was sent to this URL (http://localhost/my/contributors) but a redirect was issued automatically by the routing system to "http://localhost:5000/my/contributors/". Make sure to directly send your POST-requ
est to this URL since we can't make browsers or HTTP clients redirect with form data reliably or without user interaction.
Note: this exception is only raised in debug mode'
たぶん、flask側でリダイレクトしなくて済むようにちゃんとURLを指定しろよって言ってるんだと思う。
ルーティングはこうなっているのに
@app.route('/my/contributors/', methods=['POST'])
URLはこうなっていた。
$http({ method : 'post', url : '/my/contributors', // 後ろにスラがない! data : {id: $scope.contributor.id} })
スラッシュを加えることで解消されました。