ニコ動のお気に入りユーザー新着動画を見やすくウォッチできるWEBサービスを作った

f:id:hogesuke_1:20141124164310p:plain
NicoTune


ニコニコ動画では動画投稿者をお気に入りユーザーとして登録すると、そのユーザーの新着動画をニコレポとしてお知らせしてくれる機能があります。

しかし、このニコレポには「2525再生を達成しました」とか「~さんが動画をマイリスト登録しました」とかあまり知らなくていいようなお知らせがたくさん出てきて、新着動画だけをウォッチしたいという自分の要望にはあまり適しませんでした。

そこで、新着動画をウォッチするという部分だけにフォーカスして、新着動画をウォッチするためだけのWEBサービスを作りました。ニコレポについて自分と同じような不満を持っている人なら、これを使ってもらうと少し幸せになれるかもしれません。

よかったら使ってみてください。

NicoTune
http://nicotune.net/



ここから下は開発に用いた要素技術についての一言メモです。

フロント
  • AngularJS・・・簡単なアプリを作るのには便利。規模が大きくなった時の話はわからない。
  • Bootstrap・・・こちらも同様に簡単なアプリであれば便利に使える。凝ったもの作るときの話はわからない。
API
  • Python・・・初めて触ったけれども取っ付きやすかった。これからも触りたいと思える。
  • Flask・・・RESTAPIを実装する際にはとても良いと思う。
バッチ
  • Golang・・・辛かった。今まで経験したどの言語にも似通ってなくてただただ辛かった。流行ってる理由がわからない。
  • MySQL・・・普通の簡単な使い方しかしてないので何とも言い難い。
サーバ
  • Nginx・・・Apacheよりも設定ファイルが簡素に書けるのが良いと思った。
  • uWSGI・・・適当にググった情報で適当に動かしただけなので良し悪しがわからない。

Twitter OAuthで1度認証されたら、以降は認証画面を出さないようにするための設定

新しいWebアプリ作るたびにハマっている気がするのでメモしておく。

Twitter OAuthで1度認証されたら、以降は認証ボタンの押下を促す画面をスキップしたい。
これを実現するために2つの設定が必要。

認証URL

認証のためのURLに下記を使用する。

oauth/authenticate

こちらを指定してしまうと必ず認証画面が表示されてしまう。

oauth/authorize

Application Settings

Twitter Application Managementにて対象のアプリケーションに下記の設定を行う。
f:id:hogesuke_1:20141103233512p:plain

UI BootstrapのPagerが機能しなくてハマった

AngularJSでBootstrapを扱うためのライブラリ、UI Bootstrapを使ってみたんですが、サンプルコードを参考にPagerを実装してもなぜか機能してくれなくてハマってしまいました。

サンプルコードを記載しているページではちゃんと機能しているので、AngularJSとui.bootstrapのバージョンの組み合わせでうまくいかなくなったりしてるのかなぁと勝手に想像しています。

めんどうなのでちゃんと確認はしていませんが、以下のようにすることで機能できるようにはできました。

サンプルコード

Markup

<pager total-items="totalItems" ng-model="currentPage"></pager>

JavaScript

$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設計の手間を大幅に削減!

Bootstrapファーストガイド―CSS設計の手間を大幅に削減!

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}
})

スラッシュを加えることで解消されました。

go getで導入したパッケージをIntelliJ IDEAに認識させるための設定

IntelliJでデフォルト設定のままgolangの開発を行っていると、"go get"で取得したパッケージを認識できなくて、名前解決できないよーと警告表示されるかと思います。

これを解消にするには、"go get"で取得したパッケージが置かれる場所をIntelliJに教えてあげれば良いです。

設定手順

0. IntelliJはパッケージの場所が分からないので解決できない

f:id:hogesuke_1:20140921165124p:plain

1. プロジェクトのツリーからModuleを選択しF4キー押下でProject Structureウィンドウを表示する

f:id:hogesuke_1:20140921165543p:plain

2. PlatformSettings → SDKs を選択する

3. SourcePathに環境変数"GOPATH"に設定しているパス配下のsrcディレクトリを追加する

f:id:hogesuke_1:20140921165126p:plain
取得したパッケージはGOPATHの配下に置かれている。


これで解決できるようになり警告も表示されないはず。
ちゃんと補完もできるようになるのでいい感じです。

はてブから2chまとめサイトエントリーを削除するchrome拡張

1年前に作ってずっと更新していなかったchrome拡張を久しぶりに更新しました。
せっかくなのでブログで紹介しときます。

対象ページ

削除対象サイト数

今カウントしてみたら、985サイトあった。
まだ生き残っているのはどれくらいあるのだろうか…。