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

*2015-03-15*

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

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

https://hubpix.herokuapp.com/

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

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

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

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

<!--more-->

## 使い方

![](hubpix.gif)

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

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

![](screen2.png)

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

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

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

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

![](screen3.png)

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

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

## 自分の Hubpix を作る

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

## 1. [ngs/hubpix] を Fork  する。

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

## 2. GitHub クライアント設定

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

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

![](screen4.png)

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

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

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

![](screen5.png)

以上で設定終了です。

[ngs/hubpix]: https://github.com/ngs/hubpix
[README]: https://github.com/ngs/hubpix#readme