Tweet

国内初というBaas「appiaries （アピアリーズ）」でキャンペーンをやっていたので課題を達成するのに便乗して、空の写真を集めるウェブサービス「Sky Photo(α)」をリリースしました。

使っている技術などについて書いてみたいと思います。

今回、Sky Photoを作成するのに使ったのはPerlのDancerというフレームワークでController部分は1ファイルでゴリっと作成しました。ゴリッと作成したい時には非常に便利。appiariesとのOAuth2にはNet::OAuth2を使ってGoogle OAuth2をやってみたでも使ったNet::OAuth2を使ってサクッと(本当はサクッとじゃない。後述します。)実装出来ました。

キャンペーンの課題として、OAuthのエンドポイントのURL作成とファイルをアップロードしてそのURLを貼るというのがあったので、ユーザからアップロードされた写真をアピアリーズに保存するということもやってみました。これはLWPを使って単純にアップロードしただけです。コードはこんな感じです。

my $ua = LWP::UserAgent->new;
my $response = $ua->request(POST(
    "https://api-datastore.appiaries.com/bin/_sandbox/sky_photo/photos/_new?get=true&access_token=$application_token",
    Content_Type => 'form-data',
    Content => {
        _type => 'image/jpeg',
        _filename => $filename,
        _file => [ $filepath ],
    },  
));

すごい簡単ですね。

写真を短冊状に並べるのにjquery.vgrid.jsを使いました。非常に使いやすくて便利なので、同じように画像を並べるようなサービスではどんどん使っていきたい感じ。

デザインについては、BootswatchからBootswatch: Ceruleanを使っています。

ハマった点

まずは、OAuthでのこと。全くリファレンスを読まずに実装していたらOAuthでInvalid ClientIDが連発。。。結局、アプリのClient TypeがPublicになっていたのに認証方法として認可コードグラントを利用していたというオチ。Client TypeをConfidentialに変更してあっさり成功。

次に、ファイルのアップロードについて、今度はリファレンスを読んでみるとファイルをアップロードする際に認証したユーザのアクセストークンが必要とのこと。ただ、どのユーザにも属さないようなデータでの利用がしたかったので探してみると他のドキュメントにアクセスレベルについてありました。アクセスレベルをALLにすると参照以外についてはアプリケーショントークンでの認証が行えるとのことだったので、上記のコードでファイルをアップロードすることが出来ました。

Sky Photoについて

空の写真を個人的に集めたかったので作ってみたんですが、せっかくサービスとしてリリースしたのはいいんですが、ログイン認証にまだ利用者が多いとは言えないアピアリーズのみということで、少しでも多くの人に利用してもらえるようにTwitter, FacebookでのOAuthもつけようかと思います。また、スマホから気軽にアップロードができるようにクライアントアプリについても作成予定です。

関連記事