$http.jsonpができなかった俺はしぶしぶherokuデビューを決意しました。 #Heroku

金曜の夜中に「軍勢RPG 蒼の三国志」に戦いを挑んだ話

週末のお勉強に、itunes APIを試してみた。AngularJSの$http.jsonpでRSSのデータを拾って、そのアプリのアイコンを並べるところまではさくっとできた。

app.js


var app = angular.module('app',['ngResource']);

app.controller('mainController', ['$scope','$http', function(
    $scope,
    $http
    ){

    $scope.idList=[];

    $scope.getList = function(){
    $http.jsonp('https://itunes.apple.com/jp/rss/topgrossingapplications/limit=10/json?callback=JSON_CALLBACK').
        success(function(data, status, headers, config) {
            console.log(data);

            $scope.items=data.feed.entry;

            data.feed.entry.forEach(function(e){

                var myId = e["id"].attributes["im:id"];
                var myTitle = e["im:name"].label;
                var myIcon = e["im:image"][0].label;

                $scope.idList.push({"myTitle":myTitle,"myIcon":myIcon});
            });

        }).

        error(function(data, status, headers, config) {
            console.log("error");
        });
    };

    $scope.getList();

}]);

で、アイコン並べるだけじゃなくて、形にしてみようと安易に思いついたのが「キーボードに見立てた」タイピングゲームっぽい何か。
とりあえずキーを26個並べるのに、APIのlimitを変えるとエラーが出るようになった・・・
トライアンドエラーしてるうちに、売り上げランキング（limit=25以上）の時にだけ発生していると判明。コンソールで見ると、SyntaxError: Unexpected EOFとなってて、jsonの該当箇所は「軍勢RPG 蒼の三国志」のアイコンのあたり。構文的に間違っているようにはみえないけど、このアプリの入っていないランキングだとエラーは出ない。ちなみに他の国のランキングでも、同じエラーが出たり出なかったり。本当に特定部分の構文エラーなのかわからないけど、結局3時過ぎまで解決法を探して力尽きた。

試されるPHP

疲れたけど釈然としないので、phpでデータ取得してみることにした。


<?php

// header("content-type: application/json");

$data = file_get_contents("php://input");

$itunes_url = "https://itunes.apple.com/jp/rss/".$data."/limit=25/json";

$response = file_get_contents($itunes_url);

echo($response);


?>

これをこんなかんじでAngularJSと連携する。

app.factory('getRankingFactory',function($q,$rootScope,$http){

    return{

        query: function(query){

            var deferred = $q.defer();

            $http(
            {
        method : 'POST',
        url : 'public/getrank.php',
        data : query
    }
                ).
            success(function(data, status, headers, config) {
                console.log("success");
                deferred.resolve(data);


            }).
            error(function(data, status, headers, config) {
                console.log("error",status,headers,config);

            });

            return deferred.promise;

        }

    };

});

これでエラーは出ない。
原因はわからないけど（誰か教えてください）、体力的な理由で良しとした。
が、レスポンスが遅い。$http.jsonpと比べて、体感で数倍遅い。環境（vagrant + CentOS)のせいか知りたくなったので、phpが動く無料ホスティングとしてherokuを使ってみることにした。

herokuデビュー！

Qiitaやブログ等で懇切丁寧なチュートが山ほどあるので、問題なくデプロイできました。ただ静的ファイルを置いて、index.phpで呼んでくるだけですが。速度は、気持ち早めかなという感じでした（一時間ごとに起こすアドオンを入れていないので、最初のアクセスは除く）。

というわけで、herokuには興味がありつつも敬遠していたのですが、ひょんなことから一歩踏み出すことが出来ました。

とりあえずここまで。