Hubpix - GitHub リポジトリ内の画像マネージャー

03/13-15、同僚たちと行った開発合宿で、GitHub リポジトリ内の画像マネージャー Hubpix を作りました。

https://hubpix.herokuapp.com/

GitHub のリポジトリに Web 画面から直接画像をアップロードすることができます。

以下の様な用途に利用することを想定して開発しました。

  • GitHub で静的サイトのコンテンツを管理していて、その更新と共に、Git に不慣れな方に、資材の追加をお願いする。　
  • モバイルからの写真アップロード機能で、素材の受け渡しが iPhone 直接できる。
  • 何でもいいので、画像保管庫として使う。

ソースコードは ngs/hubpix で公開しています。

使い方

GitHub で OAuth 認証を行って頂くと、Organization, Repository, Branch, Directory の順で選択します。

画面上部のテキストフィールでフィルタリングできます。

Directory まで選択すると、画像アップロード画面がでてきます。

既に、該当ディレクトリに画像資材がある場合は、それが画面に表示されます。

この画面では、以下のソースから画像を取り込むことができます。

  • Drag & Drop
  • OS のファイル選択
  • iOS のカメラロール
  • クリップボード上のビットマップ

画像を選択すると、コミットボタンとコミットメッセージの欄がでてくるので、何か書いて、コミットボタンをクリックします。

アップロードにすると、画像一覧に追加した画像が表示されます。

自分の Hubpix を作る

前途の私が公開しているアプリケーションを使って頂いて問題ありませんが、もし、カスタマイズや、自分のクライアント ID を使うことを希望する場合は、自身でも簡単に Heroku で環境を構築できます。

1. ngs/hubpix を Fork する。

(コードを改変しない場合には不要)

2. GitHub クライアント設定

GitHub の設定画面で新規アプリケーションを設定します。

OAuth Callback URL は https://[APPNAME].herokuapp.com/oauth/calbacks と設定します。

3. Heroku アプリケーション設定

README にある、Heroku ボタンを押下し、アプリケーション設定を開始します。

GitHub の Client ID / Secret を Env の値に埋めます。

以上で設定終了です。

comments powered by Disqus