2015/07/12

X動画Sの視聴履歴を管理するChrome拡張機能『XHISTORYS』

Labels: , ,
※ Google先生、この記事はアダルト系じゃないですよ！ホントです、ごめんなさい。
※ 読んでくださる皆様、X動画SはGoogle先生対策です。お手数ですが、某動画サイトだと読み替えてください。

X動画Sの視聴履歴を管理するChrome拡張機能『XHISTORYS』のアルファ版をリリースした。




つくったもの


XHISTORYS

X動画Sの視聴履歴をライフログとして残し、お気に入り管理やオススメ動画を紹介してくれるChrome Extensions。
とりあえず「視聴履歴を保存する」ところまではできたので、アルファ版としてリリースした。

実装済みの機能

  • 視聴動画の保存
  • 動画のお気に入り管理
  • 視聴履歴のインポート・エクスポート
 

追加予定の機能

  • タイトルやタグのキーワード検索
  • ライフログとしての視聴カレンダー
  • 視聴履歴からオススメ動画の表示

使い方


1. GitHubから「XHISTORYS-x.x.x.zip」をダウンロード


2. zipファイルを解凍し、任意の場所に保存


3. Chromeのハンバーガー（「三」みたいなの）から、［その他のツール］→［拡張機能］をクリック
4. ［デベロッパーモード］にチェックを入れる

5. ［パッケージ化されていない拡張機能を読み込む］をクリックし、先ほどのフォルダを指定する

6. X動画Sでお楽しみ

7. ブラウザ上部の「X」というアイコンをクリック → 履歴画面が表示される



※Extensionsを拡張機能一覧から削除すると履歴がすべて消える。
   もし履歴をとっておきたい場合は、エクスポート機能を使ってほしい。



動機


キッカケとなったのは、オカズ探しの旅にあまりにも時間がかかるのでオススメ動画を表示してくれたら便利だなぁ…と思ったところから。

また、X動画Sの公式機能にはいくつかの不満があった。
  • 視聴履歴が残らない
  • Favoriteした動画を探しにくい
  • 動画が消えるとタイトルすら消えてしまう
  • などなど

これらの不満も解消するために、視聴履歴を残そうと思った。



技術的なところ


現在は、3月末に会社をやめて以降、絶賛ニート中だ。

前職はSIerでC# と大手ベンダーのフレームワークを使っていた。
でもWeb系のエンジニア（できればフロントエンジニア）に転職したいので、HTML・CSS、JavaScript、MV*フレームワークの勉強がてらこの拡張機能をつくった。

使っているモノ

  • TypeScript （JavaScriptのすごいやつ）
  • Vue.js （MVVMフレームワーク）
  • BootStrap （Webサイトをイマドキな感じにするヤツ）
  • Indexed Database API （ローカルデータベース）

この他にも開発を楽にするためにnpm、bower、gulpを使っている。

Vue.jsは単に学習コストが低いとどっかでみたので。
今では日本語サイトもでき、開発が本当に楽になった。

AngularJSとおなじMVVMで双方向データバインディングのフレームワークなので、応用できるかなと思っている。

困ったこと・困っていること

Indexed Database API（IndexedDB）の登録、検索などはすべて非同期で行われる。
そのため、「検索→データ加工→登録」という手順がめっちょ面倒くさい。

今はコールバックや遅延処理（setTimeout）などを使って誤魔化しているが、後々なんとかしたい。

また、Jasmineでテストを書こうと思っても、非同期なのでうまくできなかった。
その結果、テストコードなしという最悪な状態になっている。


他にも、IndexedDBはNoSQLベースなため、複雑な条件での検索や集計が難しい。
今後追加を考えているキーワード検索やタグクラウド、カレンダーなど、どのように実装すればよいか悩んでいる。


何かアドバイスがあれば教えてください。



さいごに


構想10ヶ月、開発2週間、自身初となるアプリ開発ということで、行き当たりばったりなコーディングをしているため、現状ひどいことになっている。
近々、リファクタリングしたい。

Vue.jsもコンポーネント機能を使えば、もっとキレイに書けると思う。
ContentScriptとBackgroundの通信も、できれば1往復に収めたい。

修正したいところ、追加したい機能はまだまだある。



その他


野良Extensionsなため、ブラウザ起動時に毎回「無効にします？」と聞かれるがすべて「キャンセル」でOK

IndexedDBは「C:\Users\{ユーザ名}\AppData\Local\Google\Chrome\User Data\Default\IndexedDB」に保存される

野良Extensionsだが、変な処理は入れていない。安心して使ってほしい。
ソースもGitHubに公開しているので、心配な方は一度確認してから拡張機能に追加してほしい。

アップデート情報を伝える手段がないので、Twitterなり、GitHubなり、当ブログなりを参照してほしい。


以上

written by @bc_rikko
時刻:
Labels: , ,

0 件のコメント :

コメントを投稿

登録: コメントの投稿 ( Atom )