NCMBの管理画面をGoogle Chrome機能拡張で便利にする（ファイルの種類でフィルタリング）

NCMBでは管理画面を提供していますが、時々物足りないことがあります。この機能があったらもっと便利なのに…と思いつつ、使っている方もいることでしょう。

そこで、その足りない機能を補足するGoogle Chrome機能拡張を開発しはじめました。今回は1.3（審査中）で追加したファイルストアのフィルタリング機能です。

動作について

動作は以下のようになります。機能拡張をインストールしていると、ファイルストアで 画像 、 動画 、 音声 、 テキスト というボタンが追加されます。それぞれのボタンを押すと、コンテンツのmimeTypeに合わせた検索条件が自動的に適用されます。たとえば画像の場合は image/ を含むmimeTypeのファイルのみが表示されます。

Tips

NCMBの管理画面はAngularでできており、単純にselectやinputに値を入力するだけでは検索条件に反映されませんでした。イベントオブジェクトを適用する必要があります。

// selectタグの場合
document.querySelectorAll('.sub-navigation form select:first-child option')[1].selected = true;
document.querySelector('.sub-navigation form select').dispatchEvent(new Event('change'));
// inputタグの場合（テキスト）
document.querySelector('.sub-navigation form input').value = text;
document.querySelector('.sub-navigation form input').dispatchEvent(new Event('input'));

インストール

Chrome機能拡張のページからインストールしてください。

利用法

ファイルストアの画面を開くとボタンが追加されるので、クリックします。

制限

この機能拡張は https://console.mbaas.nifcloud.com 以下でのみ動作します。また、この機能は管理画面のAPIを使っていますので、APIコール数を消費しません。また、ACLは無視して処理されます。

ファイルの拡張子は見ていないので、異なるmimeTypeが設定されていると期待した結果にならない可能性があります。

検索条件は常に追加になってしまいます。別な種類のファイルに切り替える場合には、古い条件を消してから行ってください。

コードについて

機能拡張のコードはNCMBMania/chrome-extensionにアップロードしてあります。ライセンスはMIT Licenseです。依存ライブラリとしてURL.jsを使っています（こちらもMIT Licenseです）。

まとめ

機能的にはまだ多くありませんが、徐々に機能を追加していきます。Google ChromeでmBaaSの管理画面を利用されている方はぜひお使いください。