April 15, 2014

Chrome ExtensionでGoogleのサービスにOAuth2認証するメモ

https://developer.chrome.com/apps/app_identity#google に書いてある通りですが、忘れそうなのでメモしておきます。

1.
開発で使用しているmanifest.jsonの"permissions"に"identity"を追加して、Chromeウェブストアにアップロードします。(2014/04/17 追記: "identity"の追記は、Chromeウェブストアへのアップロードと同時で無くて良いかもしれません。未確認ですが。)
"permissions": [
    "identity"
]

2.
Chromeウェブストア経由でインストールして、インストールディレクトリに移動します。

Macなら "~/Library/Application\ Support/Google/Chrome/Default/Extensions/" の中です。

インストールしたアプリのmanifest.jsonに"key"が追加されているので、開発で使用しているmanifest.jsonに書き足します。(2014/04/17 追記: どうもこの"key"は、ローカルで一時的に書き足す感じで、レポジトリにコミットするべきではないようです。書き足した状態でChromeウェブストアにアップしようとするとエラーになりました。)


3.
Google APIs Console でプロジェクトを作成します。
https://console.developers.google.com/project

プロジェクトを作成したら、"CREATE NEW CLIENT ID"から"Installed application"を選択、"Chrome Application"を選択、"Application ID"を入力します。

払い出された"Client ID"(最初から表示されている"Client ID"とは異なります。)を開発で使用しているmanifest.jsonに書き足します。必要なスコープも併せて書きます。
"oauth2": {
    "client_id": "xxx.apps.googleusercontent.com",
    "scopes": [
        "https://www.googleapis.com/auth/youtube"
    ]
}
試しに、適当な場所でトークンが取れるか確認してみます。
chrome.identity.getAuthToken({'interactive': true}, function (token) {
    console.log(token);
});
これで、コンソールにトークンが表示されれば、認証はOK(なはず)です。

April 12, 2014

Chrome.fmというChrome Extensionをリリースしました。

2014/04/19 追記:
名前がダメだったらしく、現在ストアから削除されています。後日、"YouFM"という名前にして、再度公開します。

2014/04/23 追記:
YouFMに名称変更して、再公開しました。
https://chrome.google.com/webstore/detail/youfm/gbpebippikipomjijplmbepmginobjbj

--

Chrome.fmという、YouTube動画を再生できるChrome Extensionをリリースしました。音楽プレイヤーのように使えます。

Chrome.fm:
https://chrome.google.com/webstore/detail/chromefm/gbpebippikipomjijplmbepmginobjbj

以下、特徴です。
  • 無料です(きっとずっと)
  • 動画の再生に、ウインドウ(タブ)を必要としません
  • シンプルなUIです
  • (手動で)再生中の動画名をTwitterにシェアできます

以下、近々実装予定の機能です。
  • 似た曲を垂れ流すラジオモード機能 (実装済み)
  • YouTubeプレイリストのインポート機能

尚、Chrome.fm内で発生したエラー情報は、品質向上を目的として、Sentryに送信されることがあります。このエラー情報に個人情報は含まれません。

開発的な部分を少し書いておくと
  • AngularJS
  • Bower
  • gulp.js
  • Jasmine
あたりを使っています。(JSライブラリはその他色々使っていますが。)

良かったら使ってみてください。アイデア等もお気軽に :)

April 5, 2014

AngularUIでsortable

AngularUIのsortableのメモです。
https://github.com/angular-ui/ui-sortable

AngularUIのsortableはjQuery UIのsortableをラッピングしています。
http://api.jqueryui.com/sortable/

以下、簡単なサンプルです。(console.log()結果がたまに間違っている気がするけど。。。)
http://jsfiddle.net/mamor/AWbRj/ このサンプルでは
  • jquery.min.js
  • jquery-ui.min.js
  • angular.min.js
  • angular-ui.min.js
を読み込んでいます。

AngularUIとjQuery UIのsortableドキュメントを見ながら、簡単に実装できそうですね。

April 3, 2014

AngularJSとAngularUIでBootstrapのModalを使う

AngularUIという、AngularJSを使ったUI開発用モジュール群があります。
http://angular-ui.github.io/
https://github.com/angular-ui

その中の"UI Bootstrap"を使うと、BootstrapのModalをAngularJSっぽく簡単に使うことができました。
http://angular-ui.github.io/bootstrap/

ソースは以下のような感じになります。
http://jsfiddle.net/mamor/4KBWj/

上記でAngularJSの他に読み込んでいるcssとjsは

Bootstrap公式のcss
https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css

ui-bootstrap-tpls.min.js
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js

です。また、Modalで使用するHTMLのテンプレートは、インラインではなく外部ファイルにすることもできました。

一つのモーダルを、ng-repeatで繰り返した全データで共用するのとか簡単に出来て楽だなーと思いました。