2012年2月27日月曜日

ニコニコ動画の世界とクリエイター達の話

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
Youtubeとならんで人気の動画投稿サイトのニコニコ動画。
昔からちょくちょく見ていたのですが、動画の中にはプロレベルなんじゃないか?
と思うほどクオリティーの高い作品もあります。

有名な作品であり、現時点で合計の視聴者数で2位の【東方】Bad Apple!! PV【影絵】
(1位は震災被災者への応援メッセージの動画なので実質1位というとこでしょうか)
私も昔から知っていました。影絵での動きの表現、なめらかさ、シーンの繋ぎ方などなど。
素人目にもすばらしい作品であることがわかります。

ーー
ーー

そしてここから最近知った話で、この作品には元ネタがありました。
絵コンテでこういうPVを作ってほしいという動画からこの影絵ができたそうです。
その元ネタがこちら

ーー
ーー

まず最初に見たときはこれはひどいと笑いました。
この絵コンテから影絵のPVができたのが信じられません。
影絵の動画再整数の10分の1なので知らない人も多いのではないかと思います。

次に、動画には登録タグがついていて、視聴者が好きにタグを登録することができます。
そのタグにはしばしば視聴者の感想が書かれていることもあります。
この動画のタグには、以下のようなものがついています。

ニコニコムービーメーカー うp主は幸せ者 東方 鬼発注の人 原点にして底辺 字コンテ 全ての元凶の元凶 どうしてああなった これはヒドイ 墓石or名簿 【編集】


「字コンテ」「どうしてああなった」「これはヒドイ」と言いたくなります。
最終的にこの人には「鬼発注の人」というニックネームが付けられています。
表現もユニークです、確かに・・・。

なぜ発注なのか?
どうやら、この 絵 コンテの人は「Bad Apple!! feat. nomico」という歌が気に入って
ただUP主がPVを見たいという理由だけで誰か作ってくれーと
無茶振りのような絵コンテの動画を投げたとこから来ているようです。
しかし、この絵コンテがなければあの影絵のPVはできなかったわけで
PVの企画には長けているんだなと思わせます。

そしてニコニコ動画には百科事典機能として、タグに関するWikiみたいな感じで
詳細ページを作ってタグに関する説明を投稿できる機能あります。
「鬼発注の人」は他にどんな絵コンテを作ったのか気になりますよね?
そして、百科事典で調べると2作品目もあるようで・・・・・。

で、結局何を感じて何を言いたかったのか

ニコニコ動画はクリエイターの集まる場であり、作品を生み出す場であり
視聴者が多くの作品を見ることができる場であり、そういう世界を作り出している。

ここでは、視聴者の知りたい情報を導くような機能がたくさん使われていて
少しでも長くサイトに滞在さようとします。それがクリエイターにとっては好都合で
自分の作品を見てもらう機会を増やしてくれます。そしてクリエイターが集まる場になり
さらに多くの作品が生まれ、視聴者がさらに多くなりと、いい感じのスパイラルになっています。

影絵の例で役割的なものを貼ってみると

歌、曲:「Bad Apple!! feat. nomico」

絵コンテの人:PV企画

影絵の人:PV作成

ニコニコ動画:公開、広告、宣伝

こう見るとクリエイターが連携して作品が作りあげているのがわかります。

私はWEBサイトを作成していきたい側なのでやはりニコニコ動画というサイトの機能に目がいきます。一部のユーザーの著作権の侵害を誘発しているとも言われていますが、情報の発信を共有して何かものを生み出すというシステムは非常に興味深いと感じました。
「情報の発信」、「データ共有」、「人の連携」といったキーワード。
これらで何かサイトを作って、いろんな機能の実装しつつ勉強していきたいですね。

2012年2月20日月曜日

単語4択テスト学習サイトを作ってみた

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
学生をすぎると暗記するということをおそろかにしがち
暗記力というものは使わないと落ちていくのではないだろうか
ぐぐればなんでもわかるネットですが、覚えておくと作業効率良いですよね
と思いつつ作ってみました。

単語4択テスト学習http://tangotest-yontaku.heroku.com/














サイトの説明は以下

登録した単語リストを共有。単語4択テストで学習できるサイトです。

このサイトの4択テストの特徴は以下です。
回答モードは2種類。単語→意味。意味→単語
問題抽出では「間違えたもの」「まだやってないもの」など間違ったものは集中的にテスト
テスト履歴の管理、各リストの達成度もわかる
他の誰かが登録したリストで学習


今回挑戦した内容について
①flashとのデータ連携
flashの練習がてらテストのアプリ部分とデータの連携してみました。
html5が使えるようになったとはいえ、使いやすさや資料の多さから
ブラウザでアニメーションをするのはまだまだflashがよさそうですね。
特にFMSなどでデータをリモートで共有するのが簡単にできるということで
リアルタイムチャットやライブストリームなどができるのが魅力的です。

②Boostrapの使用
以下公式

CSSのテンプレートライブラリの一つ。いい感じのレイアウトやフォーム、ボタンなどが
タグのclassをちょちょいといじるだけで表示できる。
railsだとgemでそれぽいものがあったのですが、windowsだとインストールがうまくいかない感じでした。なので、ライブラリを直接コピペして使ってました。
自分の力ではデザインはほんとアレなので非常に助かりますね。


③各種アカウントの対応
いまさらながらomni_outhを使ってtwitterやfacebookなどの
アカウントを使ってログインして使用できる機能をつけてみました。

④権限機能
Cancanというgemを使って簡単に権限付与ができるのでやってみました。
多少複雑な条件の権限も指定できるようで、一般とログインユーザーを区別して
createできる場合はリンクを表示させたり、updateできない場合は表示を消したり
createやupdateのアクション実行も制限できるので便利です。

⑤CSVファイルの扱い
ダウンロードとアップロードの両方を実装してみました。
csvはruby1.9だとそのままto_csvで使えるみたいですね。

今回の目的はflashをある程度使えるようにすることでした。
リアルタイムチャットをやろうとしてflashが扱いやすいことがわかり
しかし、flash未経験という壁があったので、とりあえずできたのでOKかな。

次こそはリアルタイムチャットぽいものを。

2012年2月6日月曜日

rails OmniAuthを使った認証について

このエントリーをブックマークに追加 このエントリーを含むはてなブックマーク
久しぶりにOmniAuthを使って認証機能を実装しようとしたら
エラーがいくつかでて少し方法が変わっていたのでメモ。
Rails3.1.3 ruby1.9.2 OS:WIN

認証はtwitter,facebook,google,mixi,openid,yahooの6つ試してみました。


基本は以下のURLの流れとは変わらなかったけど違っていた部分だけをメモ。
http://ja.asciicasts.com/episodes/241-simple-omniauth

●gemファイル
gem "omniauth",'~> 1.0.0.rc2'
gem 'omniauth-twitter'
gem 'omniauth-facebook'
gem 'omniauth-openid'


●omniauth.rbの作成部分

config/initializer/omniauth.rbを作成し以下を記述

require 'omniauth-openid'
require 'openid/store/filesystem'
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :twitter, 'CONSUMER_KEY', 'CONSUMER_SECRET'
  provider :facebook, "App ID","App Secret", {:client_options => {:ssl => {:verify => false}}}

   # generic openid
   provider :open_id, :store => OpenID::Store::Filesystem.new('/tmp')
   provider :open_id, :name => 'google', :identifier => 'https://www.google.com/accounts/o8/id'
   provider :open_id, :name => 'yahoo', :identifier => 'yahoo.co.jp'
   provider :open_id, :name => 'mixi', :identifier => 'mixi.jp'
end


●ログインリンク部分
    <!--login auth -->

    <div id="user_nav">
      <% if current_user %>
        Welcome, <%= current_user.name %>!    <%= link_to "Sign Out", signout_path %>
        <%= link_to "Mypage", :controller=>'articles',:action=>'mypage' %>
      <% else %>
        <%= link_to "Sign in with Twitter", "/auth/twitter" %>
        <%= link_to "Sign in with Facebook", "/auth/facebook" %>
        <%= link_to "Sign in with Google", "/auth/open_id?openid_url=https://www.google.com/accounts/o8/id" %>
        <%= link_to "Sign in with Yahoo", "/auth/open_id?openid_url=yahoo.co.jp" %>    
         <%= link_to "Sign in with Mixi", "/auth/open_id?openid_url=mixi.jp" %>
        <%= link_to "Sign in with OpenID", "/auth/open_id" %>
      <% end %>
    </div>


以上で、大体のログインがうまくいった。
ただ、OpenSSLあたりがうまくいかずfacebookはコールバックでエラーと
mixlでサーバーログにエラーがでてる。

omniauth.rbの作成部分が怪しい感じでぐぐってみて以下いろいろ試したが
うまくいってくれない。

OpenID.fetcher.ca_file = "/etc/ssl/certs/ca-certificates.crt"
 provider :facebook, "App ID","App Secret", {:client_options => {:ssl => {:ca_path =>"/etc/ssl/certs"}}}
 provider :facebook, "App ID","App Secret", {:client_options => {:ssl => {:ca_file =>"/etc/ssl/certs/cacerts.pem"}}}

とりあえず、environment.rbに以下を記述

require 'openssl'
OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE

facebookはエラーはなくなったが、しっくりこない。あまりよろしくないのかもしれない。