さくっと作ってみよう

APIは素晴らしいです。
デザインができなくても、アイデアさえあればサクッと面白い(?)サイトを作れます。

先日こんなブログ記事が掲載されていたのでインスパイアされて僕も挑戦してみました。

まだまだ駆け出しJavaScriptコーダーでjQueryが無ければ何もできないひよっこの僕ですが、仕事で嫌々JSを触っていたおかげで少しずつ理解が深まっていき、JavaScriptと様々なAPIを使ってページを作って遊ぶのが楽しくなってきました。

今回僕が作ったのは、Foursquare APIをGoogle Maps APIをマッシュアップしたページで、今まで僕がどんな店に行ったことがあるのか丸わかりの個人情報ダダ洩れページです。

最初はサクッとページを作ることに主眼を当てていたので、FoursquareのAPIページで見つけたPhotos APIを使ってFoursquareにアップロードした画像一覧を取得するスクリプトを書いてみました。
そのAPIで取得したJSONがこちら。長いのでリンク先で確認。
そのJSONをあれやこれやして画像を表示させるコードがこれだ!!!

fs.photo = function() {
  $.ajax({
    type: "GET",
    cache: true,
    url: "APIで取得したJSONのURL",
    dataType: "jsonp",
    beforeSend: function() {
      $('body').prepend('<div id="text">foursquareと通信中…</div>');
    },
    success: function(json) {
      if (json.response.photos) {
        var items = json.response.photos.items;
        $('#text').hide();
        $('#foursquare').css('overflow-y','scroll').html('<ul></ul>');
        $(items).each(function(i) {
          var obj =  items[i].sizes.items[1];
          var url = items[i].url;
          var images =obj.url;
          var width = obj.width;
          var height = obj.height;
          $('#foursquare ul').append('<li><a href="'+url+'"><img src="'+images+'" width="'+width+'" height="'+height+'" /></a></li>');
        });
        $("#foursquare li a").fancybox();
      }
    },
    error: function() {
      $('body').html('<p>JSONの読み込みに失敗しました。</p>');
    }
  })
};

上記コードの処理の流れは他に何もAjax通信が発生していない状態でAjax通信が行われる前に「foursquareと通信中」という一文を表示し、通信が成功したらまずは通信中に表示させていた文言を隠して、div#foursquareのCSSにoverflow: scroll;を追加して、その中にul要素を置くようになっています。
そして画像の数でループさせて、先ほど作った空のul要素にリンクと画像のデータを持ったli要素を追加しています。
最後にリンクをクリックした際にfancyboxのモーダルウインドウを表示させるために、実行させています。

以上のコードはスタンドアロンの画像表示ページ用に書いたJSなんですけど、2コンテンツを追加した際に無駄なコードが出来てしまいました。

大体ここまで作るのに1時間程度。
そこからアイデアが湧いて現在の方になりました。が、飽きっぽい性格なのでもっと色々と自動化してクオリティを上げようと思っていたのですが、ランチの店決め担当者を決めるWebアプリを作ってみようと思って最近そっちに気がいってしまってて結局このfoursquare遊びはこれで終わりそうです。

ランチの店決めアプリはまだモックアップ段階ですが、突き詰めていけばローカルストレージであれやこれやしたり、jQuery Mobileを使いそうなのでワクワクしています。
こうやって遊びながら勉強できるというのが面白いな~と感じています。
一人でやってても虚しいので、僕が書いたコードに対してアドバイスなり批判なり、さらにアイデアをいただけると物凄くありがたいのでよろしくお願いします。

Sassを使ってみました。 ( ΘェΘ)ノ

隣の席に座っている次回から長期連載を予定している(!)最低の珍獣

「Sassが、ただただ便利です!」
「Sass最高です!」
「Sassのない制作なんてありえません!!」
「Sassがあればご飯三杯は、いけます!!」
「Sassとビールがあれば、僕の人生はそれだけでいいです!!」

と毎日、言っているので、ついに私もマインドコントロール(?)され、導入する事にしましたw
続きを読む Sassを使ってみました。 ( ΘェΘ)ノ

北斗の拳に感情移入しすぎた男

世間一般では北斗の拳はただの世紀末的ギャグ漫画ということになっていて、泣ける漫画ではないらしいのですが、僕は異常に感情移入してしまっているのかボロボロ泣くことができます。

ザックリ思い出しただけでも、バットの育ての親が殺された時、マミヤが唯一の肉親である弟を殺されたけど村人の前では気丈に振舞っていたのに両親の墓の前で泣いた時、レイが死ぬ時、シュウが死ぬ時…etc

基本的にいいキャラが死ぬ時は悲しいです。
(あと、誰かが倒される≒殺される時に流れるBGMが良いんです。。)

北斗の拳には悪者もいるのですが、雑魚以外根っからの悪人というのは少ないです。ラオウとかサウザーとか世に混乱をもたらす元凶ですが、元々悪いヤツではなかったのに成長の過程でひねくれてしまって残念なことになりました。
僕が認める根っからの悪人はジャギとアミバ。この二人だけはただのクズです。

ジャギで思い出すのはCR北斗の拳だったかのCMでケンシロウが「俺の名を言ってみろ」と言ってるんですが、それはケンシロウを騙ったジャギのセリフで、確かにケンシロウはジャギを倒す直前にジャギに対して言っているのですが、あの使われ方は納得いきません。
ちなみにCR北斗の拳とか新しい北斗の拳の絵は苦手で映画版とかは全然観ていません。
北斗無双をちょっと欲しいなと思いつつも僕の北斗の拳じゃないので購入には至らず…。

漫画版かアニメ版かどっちが好きかと言うと甲乙つけがたいです。
漫画は安定感があるのと、アニメ化されなかったカイオウを倒した後の話が蛇足ながらハマった話があったので好きです。
アニメ版は原作になかったどうでもいいエピソードが挿入されていて、序盤によく差し込まれていたのでシンと戦うあたりのところはあまり好きではありません。あと作画している人(プロダクション)が何個かあるみたいで回によって全然絵が違って、たまに崩壊しているときがあります。そこらへんがマイナスポイントなのですが、前述したとおりBGM等の音楽が好きなのでアニメ版もなかなかいいなと思います。

好きなキャラベスト3と好きな女性キャラベスト3とか好きな技ベスト3とか色々発表したかったのですが、前置きが長くなり過ぎるので割愛させていただきます。
画像で察してくださいね。。

続きを読む 北斗の拳に感情移入しすぎた男

ファーストデイ

今日は2月1日ですね。
毎月1日といえば映画サービスデーで、その割引制度を実施している映画館では1000円(800円引き)で映画を観られる素晴らしい日です!!
とはいえ僕は基本的にレイトショー割引で映画を観るのでそんなにお得感は無いのですがね。

今日は映画の日(12月1日)にちなんだ映画サービスデーということで、梅田の映画館批判と昨年観た映画のベスト1・ワースト1について語る2本立てでいかせていただきたいと思います。
続きを読む ファーストデイ