ニンジャスレイヤー観賞用サイトを作った

ニンジャスレイヤーとは？

ブラッドレー・ボンド、フィリップ・ニンジャ・モーゼズの２名によるサイバーパンク忍者活劇である！！

NINJASLAYER-misemono

ニンジャスレイヤーの再配信用アカウント（@NJSLYR）の12/24分のTweetをスライド形式で時系列順に読む事ができます。

12/24に配信された「メリークリスマス・ネオサイタマ #1」前後のTweetを収録しています。

ニンジャスレイヤー自体を詳しく知りたい方はこの辺この辺をご覧ください。

使ったもの

Deck.js
Amazon S3
Amazon Route53
Ruby Twitter Gem

Tweetを取得し、JSON形式にする

TwitterAppに登録してアクセスキー等々を取得し、こんな感じでTweetをJSONで保存します。

TweetToJSON

require "rubygems"
require "twitter"
require "pp"
require "logger"
require "uri"
require "json"

class Ninja

  USER_ID = "NJSLYR"
  TWEET_COUNT = 200

  def initialize
    @client = Twitter::REST::Client.new do |config|
      config.consumer_key = "YOUR_CONSUMER_KEY"
      config.consumer_secret = "YOUR_CONSUMER_SECRET"
      config.access_token = "YOUR_ACCESS_TOKEN"
      config.access_token_secret = "YOUR_ACCESS_TOKEN_SECRET"
    end
  end

  def timeline
    @client.user_timeline(USER_ID, {:count => TWEET_COUNT, :include_rts => false})
  end
end


log = Logger.new("./log.log")
log.level = Logger::DEBUG


begin
  ninja = Ninja.new

  ar = []
  ninja.timeline.each do |tweet|
    ar << {:id => tweet.id, :text => URI.decode(tweet.text)}
  end

  pp ar
  File.open("./tweet.json", "w"){|f| f.write ar.to_json}

rescue => err
  log.fatal("Caught exception")
  log.fatal err.backtrace.join("n")
  p err.backtrace
end

Deck.js

deck.js

Keynoteのようなプレゼン資料をHTMLで作るためのjQueryのプラグインです。スライド方向も、プレゼン資料のように右スクロールするものか、NINJASLAYER-misemonoで使っているように下スクロールも可能です。

deck.jsでスライドを設定するのは簡単です。

<section class="slide"><h1>ページ１</h1></section>

このようにsecrionタグ使います。今回の場合、JSONを読み込んでスライド表示するので、タグ作成をjQueryでやってます。こんな感じで。

var data = [{"id":416171367596183552,"text":"◇なんたるシャドー"},...];
var currentID = "endpage"
for(var i in data){
  var id = data[i]["id"]
  $("#" + currentID).before('<section class="slide" id='+ id +'><h1>' + data[i]["text"] +'</h1></section>');
  currentID = id;
}

JSONはTweetからIDとTextを取得してます。

デプロイ編

S3

ホスティングはAmazonS3で行ってます。僕の持っている「jacoyutorius.com」というドメインのサブドメインとして運用したかったので、「ninja-misemono.jacoyutorius.com」というバケットを作成し、Cyberduckを使ってファイルを一式アップロードしました。

ディレクトリの構造ごとアップロードできるのでCyberduck便利ですねー。 S3にアップロード後、各ファイルのパーミッションをPublicにしてやる必要があるのですが、これもCyberduckだと一括でできて便利です。（S3だと１つ１つしかできないので。。。）

S3のバケットのプロパティを選択して、StaticWebsiteHostingの項の設定をします。「Enable Website Hosting」のボタンを選択してIndexとerror時に表示するHTMLファイルを指定します。今回エラー時のファイルは用意してないのですが、必須項目のなのでとりあえずの値を入力しときます。設定完了後、Endpointのアドレスを表示すると設定が正しければローカルと同様にHTMLが表示されているのが確認できると思います。

http://ninja-misemono.jacoyutorius.com.s3-website-ap-northeast-1.amazonaws.com/

Route53

「Creating Hosting Set」のボタンから、「ninja-misemono,jacoyutorius」というレコードセットを作り、CNAMEに先ほどのS3のEndpointを設定します。

これで全ての設定は終わり。 http://ninja-misemono.jacoyutorius.com/にアクセスして動作確認してみます。

OKですね！！

今後

Tweetで気軽にストーリーは読めるのがありがたいのですが、時系列順になっていないのでちょっと追いづらいなぁと思ってて、それを解消したくてこんなの作ってみました。

将来的にはエピソード毎にまとめたりしたいのですが、とりあえずこのような形で納めました。