Tech

2016年09月16日

intensityshuttle

メモ。

http://office606.org/?p=529

こちらを参考にしたけど、FaceTimeが邪魔をして?Intensity Shuttleからの映像がこない。そもそもカメラの名前もFaceTime HD以外表示されない。試しにという事で、PhotoBoothで認識されているカメラの名前を参考に、名前指定の場所に"Blackmagic Intensity Shuttle"と書いてみたら読み込んだ。なんだそれ!と思うけど、とりあえず動いたのでメモ。

sarustar at 03:21|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2016年02月03日

swift


jsとphpとas3の野良webエンジニアがswiftについて勉強しているよ!で、デリゲートというのがなんの事がチンプンだったので、ここ数日色々テキストを色々読みまわしていました。その結果「ん?こういう事?」というのが見えたので、メモエントリー。ひょっとして間違ってるかもしれませんが、多分こういうことじゃないかなぁ。てか以外と普通の事?じゃない?これ。

どこ読んでもだいたい「デリゲートとは委譲するという意味です」みたいなこと書いてますが、これがjsなんかの発想と相性が悪い感じがします。例えばhtml+jsの場合、発想の手順は「divで箱を作って、idで名前付けて、jsで操作する」みたいな感じだと思います。

この発想の場合、divはあくまで無機能の箱なので、jsに何かを委譲するとは考えません。委譲するまでもなく、そもそもjsに全ての操作が託されています。

これがFlash/as3になると、発想が少し変わります。発想の手順は「ムービークリップシンボル(クラス)を作って、ステージに配置(インスタンス化)して、メインのタイムラインで操作する」となります。as2の場合は、配置したインスタンスにシンボル名という固有のidで命名して操作してましたが、as3になるとこの方法は一般的ではなくなり、インスタンス化したものを配列に記録したものを呼び出して操作したりしてました。懐かしい。

この発想は基本的にはhtml+jsと同じなのですが、ムービークリップシンボル自体に機能を持たせた場合、メインのタイムラインからその機能を「呼び出す」事ができるようになります。ここら辺がオブジェクト指向とかのキモだったように思うのですがあってるかな^^; とにかく、こうやってパーツを「ブラックボックス化」する事で、メインのタイムラインのソースコードがスッキリしたり、部品ごとの挙動が明快になったり、集団作業がしやすくなったりというメリットがありました。

違ったら恥ずかしいのですが、この「ブラックボックス化されているパーツを、メインのソースコードで操作する」という行為を、swiftでは「デリゲートを使って操作する」みたいに言っているように思います。flashの作業フローにデリゲートという言葉を無理やりねじ込んでみると、「インスタンスはデリゲートを使ってメインのタイムラインのソースコードで操作します」という言い方になるのかと思います。

js,as使いにとってデリゲートという言葉が難しいのは、今まで当たり前のように行っていた行為に名前がついちゃったため、なんかすごい事なのか?と思っちゃうせいじゃないかなーと思います。

もう一度Flashに戻って。Flashでは、as2まで「タイムラインアニメーションのパッケージ主体だったムービークリップ」が、as3で「コード主体のクラス」となった時に、ちょっとした発想の変換が必要でした。ステージに配置してただけの作業が「インスタンス化してステージの表示リストに追加する」みたいな言い方になったり。こういった経緯を踏まえると、as3の「インスタンス化したクラスの機能をメインのタイムラインから呼び出す」という作業の流れはむしろ自然だったため、その行為自体にデリゲートという名前がつく事は無かったのだと思います。

swiftでデリゲートという言葉が重要な意味を持つのは、swiftはflashでいう「コンポーネント」主体で設計されている言語だからなんだと思います。僕はflashではコンポーネントほとんど利用しなかったのですが、それは僕が行ったflash案件が「デザイナーさんが作ったグラフィカルなUIにアクションを追加する」という作業だったためで、これはflashエンジニアの多くが理解できるところだと思います。flash使ってた頃の僕にとってコンポーネントとは、「標準装備されてる便利なクラス(=便利だけどダサいからほとんど使うことはないムービークリップ)」みたいな認識でした。

しかしswiftに求められるのは多くの場合、「iPhoneらしいUIにサービスを落とし込む」作業で、必然的にiOS標準のUIパーツを使うことが多くなるため、コンポーネント(swiftではオブジェクトライブラリに表示されるパーツ)の出番が多くなります。そういった時に、「パーツそのものが複雑な機能を処理してて、勝手にいじられたらiPhoneぽいユーザー体験が得られなくなっちゃうから、ステージに配置したパーツそのものに個別の処理は書かないでね!viewControllerにデリゲートして、個別のことはそっちでやってね!」というメッセージを込めて、デリゲートという行為が重要視されているのだと思います。

ということで、ここまでの憶測があってるかはまだ不明なのですが、とりあえずこういう認識で勉強を進めようと思います。デリゲートにビビらない!outletはインスタンス!程度のノリで頑張ります。

16/2/3 8:50 追記
「ブラックボックス化されているパーツを、メインのソースコードで操作する」という行為は、どちらかというとoutlet/actionに関しての解釈に近いような気がしてきました。デリゲートはさらに積極的にブラックボックスを扱いたい時(FlashでいうdispatchEventしたい時に近いタイミング?)に必要になるものやもしれません。引き続き勉強します。

9:03 追記
outlet→インスタンス化
action→個別の処理(ボタン押したらXXXにジャンプする的な処理)
delegate→コンポーネントが発行するイベントを受け取るために必要な手続き(dispatchEvent的な...?)
こうか?

sarustar at 06:35|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2015年10月28日

shogi


若い子がデザインのお勉強をしているということで、サカナクションの新世界聴いてて気分が良かったので、Skypeで1時間ほど手ほどきしました。要点がコンパクトにまとまったように思うので、公開してみます。話しながら、あー普段こんなこと考えてるんだな自分。とかいう気付きもあったりするので、たまには良いなと思いました。


●●●●: 最近将棋覚えた
●●●●: 超強い人にハンデで駒減らしてもらってやるっていうの繰り返し
●●●●: そうそう、またつい最近デザインの勉強もちょっとやってる
sarustar: どっちも良いね
●●●●: スナックでイベント告知のポスターつうかフライヤーを作ったんだけどさ、やっぱ面白いね
sarustar: と思うよ
●●●●: それが白黒で作ったんだけどあまりに酷い出来だったからモノクロのデザイン勉強してるー
sarustar: ほう
●●●●: かっこよく機能的って難しい💧
sarustar: そうだな
sarustar: 見せてよw
●●●●: ぐ、ぐぬぬ・・・ちょいおまちを・・・

2211

sarustar: ふむ
●●●●: 見れた?
sarustar: うん
●●●●: おk
●●●●: 一応ソレのカラーがありまして、それを原型に白黒にって事でそういうデザインです;
sarustar: ?
sarustar: ちなみに最近僕が作った白黒のやつ見る?
●●●●: みたい!!!
●●●●: です!
sarustar: どこだっけな
sarustar: んな大したやつじゃないけど、話すポイントはあるかなと思う
●●●●: 是非!

workshop_flyer_001b

sarustar: あった
●●●●: かっけーー!
sarustar: それなりにね
sarustar: 旅先で、ワークショップやりたいねって事になって、車内で1時間くらいで作った
●●●●: まじかw
●●●●: これが1時間とかww
sarustar: 目的に合わせたアイキャッチ画像があって、コピー的な一言説明文があって、さらに引きのある画像を使用しつつ、読み物としてポイの説明入れて、参加しない人でも意味あるものにするためネット情報入れつつ、ロゴで締める。
sarustar: 美しい構成やね!w
●●●●: 素晴らしいです
sarustar: 1時間といったけど、各素材は全部、どこかで使ったやつだから、
sarustar: 構成だけ作れば良いだけだったんだけどね。
●●●●: そうねー私の場合文章だけだから構成楽だろーとか思ったけどそうはいかなかった;
sarustar: もう一個

tate_ura_ol

sarustar: ポストカードの裏面
sarustar: これ作ってあったから、さっきのはすぐ出来た、というネタばらしw
●●●●: 道具に目が行きやすくて良いね
sarustar: 最終的に見栄えのいいものを作りたいんだから、
sarustar: 文字だけってのは難しいよ
sarustar: 出来なくはないけど!
●●●●: ね;味気ないよね;
sarustar: 調味料使わずに料理するようなもんだ
●●●●: おー良いこと言いますなあ
sarustar: 多分同じようなもんだと思うわ
sarustar: 最終的にどこで勝負するかを決めて、それを中心に周りを構成していくの
sarustar: 一個目ので言うと、アイキャッチの画像で勝負する!テイストはグランジ感で!と決めたら、
sarustar: タイトルのフォントと帯、価格囲みも方向性決まってくる
●●●●: ふむふむ
sarustar: モノクロだと、まぁモノクロならではのデザインというのももちろんあるけど、
sarustar: 基本はカラーと一緒で、
sarustar: カラーと違って、色が派手なところじゃなくて、黒面積が大きい所に目が行くから、
sarustar: そこだけ気をつける って感じだと思う
●●●●: そうだねえ
sarustar: 例えば、
sarustar: 価格囲みのデザインだけど、
sarustar: 白と黒のバランスというか、
sarustar: 黒ベタに白文字にすると、もっと価格に目が行くと思う
sarustar: このくらいの面積にこのくらい黒がある程度に目立たせたい、という構成というか、
sarustar: 文脈の中で、「価格情報はこのくらいのウエイトを占めたい」というバランスで、黒のボリュームは決めるかな。
●●●●: なるほどね
sarustar: だから、文脈という意味で、本読んだり映画とか漫画見るのも、役に立つと思う
sarustar: 50%オフ 2000円 と、通常料金 4000円 が、同じウエイトでいいのかどうか、とか。原案があったならこれはこれで良いけど、考え方としてね。
sarustar: ごちゃごちゃ余計なことしてないのは良いと思う
●●●●: 原案は特になくって投げっぱなしされたので通常料金書いてたほうが親切かなと思って同じ扱いにした
sarustar: 躊躇なくフリー素材を使うというのも大事w サクッと見栄えいいもの仕上げるならね。

hoge

sarustar: ほぅら
●●●●: うわああああああ
sarustar: ちょうど昨日使ったやつだ

recruit

●●●●: そうかぁ・・・フレーム探すとか全然しなかったな・・・
●●●●: かわいいw
sarustar: 犬にフキダシ付けてなんか言わせれば良かったかなとちょっと思ったけど、まぁヨシ
●●●●: うんうん
sarustar: すっきりさせる方法として、情報に緩急をつけるって大事だよ
sarustar: ドンシャリにするというかw
●●●●: うんうん
●●●●: もういっこのイベントの方ちょっとゴチャついてるように見える?余白まだあったほうがいいかな
sarustar: 全体のウェイトが単調だから、フワッとして見えるかなぁ
sarustar: 緩急が少なくてミニマルミュージックみたい
●●●●: わかりやすい表現www
sarustar: ねw
sarustar: 興味を持ってくれれば小さい字も読んでもらえるから、まずは興味を持ってもらうことやね
●●●●: 文字ナナメってるから興味わいてくれるかなという安易な発想
sarustar: まずは意味が大事だと思うやっぱり。
●●●●: ムズいなあ(´・ω・`)

22

sarustar: イベントスケジュールのだったら、
sarustar: 「年末までのイベントスケジュールですよ!」てのがまず分かれば、
sarustar: これを見る人なら興味をもつんじゃないかな。お店に来る人が、イベントを逃さないためだというなら、「イベントスケジュールです!」というのを分からせるのが一番大事だと思う。
sarustar: そうじゃなくて、
sarustar: 例えば街中で配るチラシだったら、ヒキのあるイベントを一番目立たせるべきだと思う。
●●●●: そこで緩急かー
sarustar: ハロウィンとクリスマスを全面に打ち出して、それ以外の情報は「他にもこんなのがあるよ!」的な。
●●●●: ほうほう
sarustar: ラフ書いてみると、


hogehoge


sarustar: こんな感じかしら
●●●●: いいねええ
sarustar: かぼちゃとギャルはまぁ頑張って。
sarustar: 下の四角がその他のイベントね
●●●●: うんうん
sarustar: これはイメージとしては、あだち充のH2みたいな感じというか、
sarustar: 2人のメインキャスト、その他のキャスト って感じ?w
sarustar: 2枚看板
●●●●: なるほどですね
sarustar: うん そういう意味で、漫画とか映画とかも役に立つかも、と。
sarustar: 多分将棋も役に立つんじゃん?分かんないけど、
sarustar: ハロウィンとクリスマスを飛車角と考える的な?w
●●●●: www
●●●●: え、映画でいいです・・・w
●●●●: あー映画の内容を図解とかすると
●●●●: レイアウトうまくなりそうw
sarustar: かもね いやでも将棋でもさ
sarustar: 最初の、飛車角の存在感というか、頼もしい感じあるじゃん
●●●●: あるあるw
sarustar: 玉金銀の鉄壁感とか、桂の独特な存在感とか
sarustar: そういうのは、デザインに全然活かせると思うよ
sarustar: レイアウトをそれっぽくするってことじゃなくて、
sarustar: 飛車角の、2人のエース感てカッコイイな!と思えば、
sarustar: それが引き出しになる。と思う。

sarustar at 05:58|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2015年10月27日

intensityshuttle


出来たのでメモ

トピック的には古いのかもだけど、Intensity Shuttleを購入するにあたって

・Macbook Airで使用できるのか?(USBの電力供給的にどうなのか)
・USBカメラ的に使えるのか?(Flash ActionscriptとかゆくゆくはopenFrameworksで使用したい)

という情報がネットで見つけられなかったので試してみました。結果出来ました。
Windowsでは認識出来ていません。USBホストコントローラとの相性とか?よく分かりません。

使用機材
・Macbook Air / 13-inch Mid 2012 / OSX Yosemite 10.10.5
・Blackmagic Design Intensity Shuttle for USB3.0(Macとは付属ケーブルで接続)
・BlueRigger イーサネット対応ハイスピードHDMI ケーブル 7.6m →
コチラ
 (ケーブル長ごとに在庫があったりなかったりするようです)
・ainex HDMI変換ケーブル AMC-MHD 15cm
・Sony α7 (ILCE-7)

手順
→機材を用意
Blackmagic Design ホームページ → サポート → 商品名検索 → 左下よりDesktop Video対応OS最新版をダウンロード
 (2015.10.27現在でver10.5)
→インストール後再起動(色々インストールされます)
→カメラのhdmi出力を1080iに設定
→カメラ接続後、デバイスドライバ?自動アップデート
→Blackmagic Desktop Video Utilityを起動して接続確認 → 設定アイコンより 1080i 59.94 を選択
→Blackmagic Media Express起動
→Media Express → Preference → Project Video Formatより 1080i 59.94 を選択
→Log and Captureタブをクリック
→カメラからの映像が来てればOK

→Flashでカメラテスト(swf上で右クリック→カメラ選択→Intensity Shuttle選択)


以上です。その他試したことは、

・Macbook Proで接続 → 出来た
・Photoboothで接続 → 出来た
・Premiere Pro CC でキャプチャ → 出来なかった。
 デバイスコントロールにはちゃんと表示されてるけど信号が来ない。ちゃんと調べたら出来るかも?
・swfで接続できてるので、割とふつーにUSBカメラとして認識されてるのではなかろうか。

という感じです。接続に関してはBlackmagicDesignのサポートに電話してポイントを聞きました。
技術に強いよ!って感じの声の男性がテキパキ教えて下さいました。ありがとうございました。

sarustar at 15:11|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2014年06月15日


NIKEのつべCM、「THE LAST GAME」がめっちゃ良いので、そのことについて書いてみよう。これの良さは「お約束」の良さだと思います。僕はそういうのが大好きなのです。

まず、動画の構成をざっくりと。

シーン1.ワールドカップ開催地であるブラジルの女神像から、「サッカーに興じるキッズたち」のシーン。スターと自分を重ねオーバードライブする演出。かっこいいスター。

シーン2.プレゼン会場。クローン会社の社長が「リスクは無い方が良い」という論を展開。「リスク上等」をひっくり返す。

シーン3.クローンに敗北を喫するスター。かっこ悪いスター。

シーン4.自分たちの能力を生かせず悶々とするスター達と、彼らを招集するリーダー。

シーン5.謎めいた場所で彼らの誇りを取り戻す。試合の申し込み。選手生命を賭ける宣言。物語のスケールアップ。

シーン6.試合開始。リスクを恐れず、優勢に進めるスター。かっこいいスター。

シーン7.スーパープレイからの完璧なゴールをセーブするキーパー。クローンの逆襲。かっこわるいスター。

シーン8.メッセージ「なにより危険なのはなにも生まない無難なプレーだ」のナレーションと、「リスク上等」のテーマソング。スターの逆転勝利。かっこいいスター。

シーン9.リスク上等(RISK EVERYTHING)のテロップ。

こんな感じです。ちょっとした映画のような、基本に忠実なストーリー展開。5分半という短い動画でこれだけの波を作れるというのが素晴らしい。だけどそれはこのCMが独立して成し遂げた素晴らしさではありません。今日に至るまでの無数のストーリーの積み重ねにより、「観客が進化した」ことで、初めて成立するストーリーテリングだと思います。

分析。順番に行きます。まずシーン1。スターと自分を重ねオーバードライブする演出は、4,5月に話題になっていた
NIKE CM「リスク上等」のメインアイディア。視聴者とスターを繋げる美しい演出。視聴者はすでにこのアイディア、ビジュアルをしっている。開始30秒でイメージされるストーリー。

シーン2。シーン1を受けて。「事件は会議室で起こってるんじゃない!」から「事件はねぇ、会議室で起こってるの!」のように、価値観をひっくり返す。前作で積み上げた安定を崩す。解決した問題は見る必要がない。問題の拡大生産。クローンというのも、スーパーマンのビザロ、スパイダーマンのヴェノム、仮面ライダーブラックのシャドームーンといった過去のヒーローモノでよく出てくるアイディア=「お約束」。

シーン3。バスケットボール界にも拡大するクローン。物語のスケールアップ。

シーン4。アルマゲドンの仲間を集めるシーンと同じ。ミッションを果たすために選ばれたTHE CHOSEN ONEが揃っていく楽しさ。円卓の騎士。

シーン5。謎めいた場所。インディ・ジョーンズやトゥームレイダー等。理屈を突破するビジュアルの説得力。リアルを逸脱し純粋に物語に没入させるフィクション・マジック。一連のリーダーのビジュアルは過去のNIKE CM「シークレット・トーナメント」のホストを思い出させる。きっかり5分のアニメーションシーンで、この魔方陣が明らかになる瞬間が、ちょうど中間の2分30秒地点(冒頭10秒のタイトル部があるので、動画では2:40)

シーン6。まずは優勢に進めるスターチーム。冒頭の頃とは違う事を表すシーン。ここまでの2:30が意味のあるものであったことを表す。

シーン7。クローンの逆襲。やっぱダメかも...と思わせる。ラストへのタメ。

シーン8。テーマの再認識。全てを「リスク上等」に集約させるナレーション。大量に出てくるクローン=卑怯な手段に出る敵。ここまでクローン側は、クリーンに戦ってきていたから、価値観としては五分。卑怯な手段に出るからこそ、叩き潰す口実が得られる。戦隊モノとかで負けそうになって巨大化したり人質をとったりするのと一緒。テーマソングが流れ盛り上がる。大量の敵を翻弄するイメージは過去のNIKE CM「THE MISSION」(スターと剣道ロボが戦うやつ)にも通じるビジュアル。

シーン9。まとめ。

という感じ。過去の色々なものを踏まえていることが分かると思います。過去の様々な物語の美味しいところが、形を変えて何度も繰り返される事で「お約束」になる。その「お約束」を集めて、ぎゅっと5分にまとめる手腕。意識せずともこうしたイメージの集積が視聴者に備わっていると判断したからこその動画です。製作段階でこの絵コンテを見て、「なにこの地下迷宮。よく分かんないからカットしてよ」とか言われないんだろうな。

「たくさんのスターが出てくるNIKEのCM」というお約束がまずあって、その上に様々なストーリーの「お約束」を乗っけながらも、決して内輪受けやありきたりな物に落ち着かず、「リスク上等」のテーマをかっこ良く表現したこのCMは、豊かだし、素晴らしいと思うます。タレどっぷりだなー。

最後に、過去のNIKE CMを貼っておきますね。







sarustar at 20:25|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2014年05月01日



下に連投した2つのエントリ(
これこれ)。昨日ポストされて、ここ10時間ほどで再生数3万ほど伸びてる(夕方時点で8000くらい、現在35000弱)ホットムービー、Happy from Harajuku Tokyo - Pharrell Williams #harajukuhappytimes について、初見でなにやら嫌な鳥肌が立ち、しかしこれこそが正解なんじゃないか?という不思議な直感も働き。そのアンビバレンツな心象に動揺を覚えた僕が、信頼する友人2人にこの映像の感想を求めてみた、そのやり取りのログです。こちらもゼヒ読んでみてください。

それぞれ立場の違う両者ですが、キーワードとして共通のものが幾つか出てきたのが興味深かったです。「フォーチューンクッキー」「Kyoto ver.」とか。どちらも僕は想像してなかったので、なるほどなーという感じでした。おかげで多少心の整理がついてきたので、僕が抱いた違和感についてまとめてみます。なーんか嫌いなんだけど、嫌いと言い切れない。なんでだろう?というやつです。分かりやすくするために、まずなんで嫌いなのかを熱量上げてまとめてみると。

1.達者
海外ではやりの「Happy ダンスムービー」というのを、これ以上なく上手ーにこなした感じ。海外的なノリをトレース出来る事がオシャレであると言いたいのだろうか。正気か。恥知らずか。BECKの真帆のアメリカンスクールの友達みたいなのがいっぱいでてくる。上手に海外的HAPPYを演じてるふうにしか見えない。この海外ノリに対しての達者さに対するイラツキ。そう、あれと一緒だ。



2.オシャレ
オシャレじゃないとHappyでいられないのかお前らは。人から幸せそうに見られるのが幸せか。たまに言い訳のように挟み込まれるデブ女。職業デブ(力士の事ではなく)。業務上過失デブ。ハズシとしてのデブ。なんと言えばいいのか。パニック映画で最後まで生き残るメンバーに必ず黒人がいるような。渡辺直美好きーとか言うモデル女のような。とにかくおめーら普段着でやれ。あ、それが皆さんの普段着ですか。これは失礼しました。

3.トップダウン
ちょこちょこと挟まれるゆーめー人。Happyの動画が広まった流れって、ボトムアップだったんじゃないの?オープンソース的なフォーク感、アニソンだったHappyが公式MVを介して一人ひとりにたどり着いたのがHappyのHappyたる所以じゃないのか。自分の曲が皆のものになったその多幸感でファレルは泣いたんじゃないのか。「これはみんなの曲だよ」a.k.a BECKだ。それをなぜトップダウンに引きずり下ろすのだ。告知集客してやるフラッシュモブとかさ。モブ感どこ行った。

4....なにかを騙そうとしている...!感
これ。東京ネイティブの元同僚にも感想聞いてみた時思った。彼の発言が印象的。「BEAMSの社長がバカみたいに踊ってるのがリアル感ないしキモいし東京原宿あんなキモくない」それな。これで騙されるのは田舎者だろう。高校生の時の僕はきっと騙されていたはずだ。こういうやり方が非常に昭和臭い。その気持ち悪さ。

以上です。てか書いてて気付いたけど思ったよりこれ嫌いだったんだな俺。ただ、出てくる人物皆が皆嫌いなわけではありません。ざっと数えたところ、15組くらいは違和感なく見られる人がおりました。逆に「テメーは俺を怒らせた」的な人も同じくらいおります。

で。

しかしですよ。上記の「ムカつく理由」が、そのまま全て、「これが正解なのかも感」にもつながるのです。だからフクザツなのです。

1.達者。いいことじゃん。PRしたいのだから上手くやろう。実際これは結構な評価を得るはずです。海外にアピールしたいんだから海外の人が分かるように翻訳してあげることも必要。これが出来る人がたくさん集まっている場所なんだもん。できちゃうんだからやればいいじゃん。

2.「オシャレで何が悪いの?ファッションタウン原宿だよ?君もGAP前でスナップ撮られるんじゃないかってドキドキしたことあるでしょ?」「ごめんなさい。」

3.だってトップダウンじゃないと見ないじゃん君ら。そもそもボトムアップで誰かやってるの?それに言うほどトップダウンでもないし。やろうと思えばもっとえげつなくも出来るけど(実際もうすぐそういうの公開するし)これはあくまで原宿に縁のある人だけじゃん。ちゃんとローカリティー重視してるよ?

4.過剰にはしてるけど、嘘ではないでしょ。PRなんだから演出は必要だし、それは他のHAPPY動画でも多かれ少なかれやってるでしょ。動画ってそういうもんじゃないの?実際高校の時の君にはこれが響いてた訳でしょ?大成功じゃん。「外から見た原宿」だからこれで良いんだよ。

とまぁこんな感じで。これが必要だし、結果正しいんだと思います。純粋に嫌いだったら無視するのですが、「見せる」という立場で考えると、正直これ以上のものをひねり出せる気はしません。でも、「だからok!」と言っちゃうのにも抵抗があるのです。これ以上の言葉は今の僕にはありません。皆さんどうお考えかよろしければお聞かせ下さい。これについては今後も考えを更新していく所存です。最後に、こんな話に付き合ってくれた友人達に感謝。それぞれの立場でちゃんと意見くれるのでありがたいのです。

sarustar at 04:31|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2014年04月30日

浅野 まさる
やほー ちょっと時間ある時意見聞きたいのだけど、

原宿の魅力を世界に発信するということでこの動画らしいんだけど、これどうなんだろ。
この曲のオリジナルの盛り上がりは好きなのに、なんかこれ見て鳥肌立っちゃって、でもこれが正解なのかなという気がしなくもない、フクザツな気分。


▲▲▲▲▲
まぁ好みの問題じゃない?w
個人の感想としては、色が綺麗だし、先進国としての日本のファッションとかカルチャーとかを表現しててすごくいいと思うけども。。


浅野 まさる
この間の、あざとさの話とつながるのかな?と思った。


▲▲▲▲▲
あぁ、そういう感じか。。んー。オレはよくわからないけど、
例えばだけど、
クリエイターとかクリエイティブの現場にいる人達が、真剣にこれを善し悪しつけるとして、例えば「ヌルいよね」とか思うんだとしたら、その動画を評価するセンスとかそういうところが一般人と違うのかとかは思うな。オレはあくまでも一般人のセンスしか持ち合わせてないと思ってるから、たいして気にならないというか。むしろ、良いとさえ思う。ダセーとは思わないな、この動画。
ってか、むしろ、これなんかみんな自然に踊ってるし自然に笑顔って感じじゃない?あざといかなぁ。。
もちろん、演出意図はあるだろうけど、なんか目くじら立てるベクトルのヤツじゃないような気がするけど、どう?


浅野 まさる
目くじらというか、俺は第一印象でなぜか鳥肌が立っちゃって、でもこれが正解な感じもあって、何だこの違和感?という感じだったのね。


▲▲▲▲▲
ふむ


浅野 まさる
とりあえずは、トップダウンの感じが気持ち悪いのかも?という話に。
まとめると長くなるから、ブログに書こうかな...


▲▲▲▲▲
アハハ。うんうん。
オレ、あんま詳しくないけど、周りの文脈とかいろいろ知ってるか知ってないかで、違うのかもね。


浅野 まさる
ちなみに、この曲と、この曲の動画は知ってた?


▲▲▲▲▲
オレは少なくとも、ファレルウィリアムが動画観て泣いてるのは観た。
もちろん、その前にに曲じたい流行ってるの聞いてたけどね。
その程度。
それからどういう経緯で原宿バージョンがあるのかとかしらないけど。


浅野 まさる
おうおう あのインタビューのやつね。


▲▲▲▲▲
全世界で動画が作られてる、ってのは知ってるよ。その程度。
あとは、楽曲自体が文字どおりハッピーですごい好きだけどね。笑


浅野 まさる
ふむふむ。曲は俺も好きw


▲▲▲▲▲
あざとくていやだなぁ、って例えば思うとすれば、
趣味が悪いなぁとか、悪趣味だなぁとか、なんか企画書が透けて見えるようで、それでいて、コンテンツとして薄っぺらいなぁとか
オレ個人はそういう感じ?ニュアンス?だけど、
そういう指標で、個人の評価としては、
ちゃんと突き抜けてるとは思うな。
一定のラインを。
観てて笑顔になるし。


浅野 まさる
うんうん。突き抜けてるかどうかが評価のラインとして大事よね。


▲▲▲▲▲
演出としてはさ、別になんてことはないけど、でも、なにせカラフルなのがいいし、田舎の若者がこれみたら、やっぱり原宿っていいな、とか思うんじゃないの?わかんないけど。


浅野 まさる
思うと思う。


▲▲▲▲▲
今の記憶では、着物とか、メイドとか、原宿のGAPだったとこのあのミラーのエスカレーターとかアパレルの店員のおっさんの出で立ちとか、
相撲とかは、日本人がみても、バイアスがかかりすぎて、正当な評価ができないと思うけどね。自国だし。
キレイで、映像にバラエティ感とリズム感があって、オレは好き。
オリンピックの誘致の映像とか、そういう似て非なるものものあるけど、そういうものとちょっと違うと思う。


浅野 まさる
そのオリンピック誘致映像てのは、ググれば出てくるかな。サンプルとして見てみたい。


▲▲▲▲▲
あぁ、出てくると思うなぁ。


浅野 まさる
おk見てみる ざっくりどんなやつ?


▲▲▲▲▲
え、ホントに観てないの?


浅野 まさる
うんw

これとかかな。

TOKYO2020 FINAL Presentation FILM
www.youtube.com


▲▲▲▲▲
TOKYOの紹介VTRだよ。プレゼン時の。「TOKYOはこんな街ですよー」みたいな。文化から建物から何から。
あぁ、そうか、これこれ。
紹介VTRはまた別だ。
ごめんごめん。
これは、ちょっとエモーショナルだからハッピーとはまた違うかもなぁ。


▲▲▲▲▲

https://www.youtube.com/watch?v=HI3ErDjr4BY

2020 Olympics - Istanbul, Tokyo and Madrid Promotional Candidate Videos
www.youtube.com
Videos courtesy of the 2020 Olympic Games Candidate Cities. Cities listed in the order of drawing of lots: Istanbul, Tokyo, Madrid. Subscribe to the Olympic ...


浅野 まさる
おーサンキュウ 今さっきの動画見てる


▲▲▲▲▲
うんうん、オレちょっと夕飯食うわ。


浅野 まさる
おkサンキュウ!ありがたいわー


▲▲▲▲▲
オレも今2つ見返したけど、このファレルのヤツとはあんまり関係ないかもね。笑
サプライズでプロポーズするフラッシュモブ的なヤツとか、日本的な文脈からすれば、踊ってみた、とか、フォーチュンクッキーとかのほうが、直接的に関係するのかもね。


浅野 まさる
うんうん。フォーチュンクッキーは★★★★★との話題でも出てきた。


▲▲▲▲▲
ファレルの、この世界で流行っているヤツに乗っかって、「便乗でPRしてやれ」、みたいなところに引っかかってる、ってこと?なら、まぁそういう意味での違和感、PRを考えずにファレルの楽曲を純粋に楽しんでる動画とは違うと感じる人はいるかも。


浅野 まさる
引っかかってるポイントは、「上手にファレルっぽくやってるねー」という感じかなぁ。


▲▲▲▲▲
AKBを多少知ってる者としては、あれは、最初にスタッフがフォーチュンクッキーを真剣に踊ったサプライズ感が頂点で、あれ以上のものはなかったはずなんだけどね。


浅野 まさる
楽しそう感よりも、それっぽくやってるね!感が前に出て見えちゃう。
あーその、「二次創作の一次創作感」が無い、という言い方はアリかも。


▲▲▲▲▲


浅野 まさる
ニコニコとかだと分かりやすいんだけど、オリジナル出して、二次創作がばーって出てくるじゃん?
かっこよかったら。


▲▲▲▲▲
うんうん


浅野 まさる
そこまでは、「二次創作のネイティブ感」があるんだけど、
TOYOTAのCMに千本桜、とかは、いや良いんだけど、なんか違うくね?となるというか。
千本桜のCMは意外と好きなんだけどさw


▲▲▲▲▲
んーそうだなぁ。千本桜はまぁちょっと置いといて、
オレは純粋に、後出しでも後追いでも、海外の人があの原宿の動画みたら、
それなりに面白ガルと思うんだ。
オレらが、黒人の人が踊ってるハッピーの動画みて
面白がるのとおんなじで。
へー、こんな文化が異国にはあんのね、っていう。
それで、いんじゃね?っていう。w
その上で、コンテンツが素人素人しすぎてたら、オレはあんまりムービーとしての価値がないと思っちゃうから、


浅野 まさる
映像としてしっかりしてるよね。


▲▲▲▲▲
むしろ、作りこんであるから、その意味で、ちゃんと作品になっていると思う。
うんうん。
そういうプラス評価かな。
フォーチュンクッキーの最後のほうに便乗してる、
ダッセー感とか、
そういうのとは全然違うかも。


浅野 まさる
ちなフォーチュンクッキー、金沢市長も踊ってる模様。


▲▲▲▲▲
そうそう。かなりやったよね。でも、鼻で笑うわけじゃなくて、努力はみとめるけど、
動画として面白いのは、スタッフが踊ってるやつと、
オレが好きだったのは、サイバーエージェントのヤツかな。
顔採用したSAの社員さんたちが、リア充臭をバリバリ出しながら踊ってるのが
ある意味、アバンギャルドだと思ったよ。


浅野 まさる
ふむふむ。逆に、ダッセーというのは、どういうのがあるのかしら。俺全然見てないや。


▲▲▲▲▲
いや、ダッセーってのはホント個人の感覚で、やってるほうは真剣なんだし、いいんだけど、
あまりに便乗が遅いところとかさ。
あんなの、ジャパネットたかたと
行政でどっかの市町村と
あと、民間起業と、
5パターンくらいまでが、やったった、感として認めたい感じ?


浅野 まさる
ふむふむ。


▲▲▲▲▲
そっから先は、別にけなすわけじゃないんだけど、
町内会とかそういうのと一緒で、
赤の他人が「ムーブメント」として捉えるものじゃないというか。
サブカル好きのオレみたいなヤツが。
5パターンくらいまでが、新鮮で面白い。
感覚的で申し訳ないけどw


浅野 まさる
いやいや十分。
新鮮味が割とキモなんやねきっと。


▲▲▲▲▲
あぁそうかも。


浅野 まさる
HARAJUKUも、新鮮味はあるね。日本でしっかり作られたHAPPY動画は初だろうし。


▲▲▲▲▲
オレはそんな感じかなぁ。
これで、KYOTO,とか
HIROSHIMA
とかやりだしたら、
5パターン以上は、あんまり、って感じなんだろうな。w


浅野 まさる
w いやー★★★★★のとあわせて見るとだいぶ面白い。


▲▲▲▲▲
そうなんだ。


浅野 まさる
まさに、「Kyoto、Fukuoka」について話したよ。



sarustar at 22:30|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

浅野 まさる
やほー ちょっと時間ある時意見聞きたいのだけど、

原宿の魅力を世界に発信するということでこの動画らしいんだけど、これどうなんだろ。
この曲のオリジナルの盛り上がりは好きなのに、なんかこれ見て鳥肌立っちゃって、でもこれが正解なのかなという気がしなくもない、フクザツな気分。


★★★★★
想定している受け手が日本人じゃないんだろ


浅野 まさる
確かに。そもそも自分はターゲットじゃないわけだから、そもそも見なくていいてことかな…


★★★★★
むしろ「恥の文化」が見えるという捉え方もできるんじゃない?w


浅野 まさる
あーねw ところどころいるね。


★★★★★
日本人はHAPPYだったとしても「みなさんのおかげです」って言う人種だから、感情を表に出すのが得意じゃないんだよ。とか4chanとかで言われてるよ。絶対。
本家は感情爆発してんじゃん


浅野 まさる
してるね。ほんと人種?国柄?の差は感じる。


★★★★★
一番いいノリのやつらは花見しながら阿波踊りやってるやつらだよ


浅野 まさる
なんだろ、Happy動画やるのに原宿が一番適した街だろうというのは間違いないと思うんだけど、その寄せようとしてる感が、なんかツライというか。
あー確かに、誰が一番違和感なく見れるかってのは、チェックしてみたら良いのかも。見てみよう。


★★★★★
w別に悪意はないでしょう


浅野 まさる
「見た事あるイかしたHappy動画を上手にやろう」としてるその感じか。
力士の説得力はそれなりにある感じ。


★★★★★
力士も照れてるけどね


浅野 まさる
照れを力士力が少し上回ってるというか。


★★★★★
力士力w


浅野 まさる
ASIMOは完全にモノにしてるな。


★★★★★
あたらしいAA
なんかかわいく見えて来た。


浅野 まさる
たまに出てくる外人の馴染みっぷりは、これ俺の外人コンプの現れなのかしら。


★★★★★
いやいやこなれてますわ


浅野 まさる
あー子供、女子高生はそれなりにありだな。確かに阿波踊りはモノにしてる。
だよね。


★★★★★
でもマジメに考えるに、やっぱりサンフランシスコの光がいいんじゃない?


浅野 まさる
阿波踊り良いなぁ。


★★★★★
やっぱりじっとりしてるよね画が。


浅野 まさる
ふむ確かに。


★★★★★
あの曲にはあの光が大事なんだと思うよ


浅野 まさる
夜の映像でもアリだったから、空気感なんだろな。


★★★★★
だろうねー
やっぱり海外で撮った写真っていいもんねー


浅野 まさる
比較として、
https://www.youtube.com/watch?v=BOhhMHkClsc
これは俺、良いと思うの。

あっくん 「SHIBUYA PARTY ROCK NIGHT」
www.youtube.com
8/28(水)より、あっくん「SHIBUYA PARTY ROCK NIGHT」が遂に配信スタート!! 【iTunes】 http://umusic.ly/sprn_yt 【レコチョク】 http://umusic.ly/akkun_reco 【あっくん 「SHIBUYA PARTY ROCK NIGHT」説明】...


浅野 まさる
カバー曲で、コンセプトもオリジナルトレースしてるけど、ちゃんとモノにしてる感じがする。


★★★★★
えー
ダセーじゃん


浅野 まさる
ダメかw
Happyと同じダメ感?


★★★★★
HAPPYの各地版は公式みたいなもんなんでしょ?


浅野 まさる
だと思う。
自然発生のも別としていろいろあるぽいけどね。


★★★★★
オープンソース的な乗っかり方だよね


浅野 まさる
そそそ!
フォークしてる感じというか、マッシュアップ。


★★★★★
そーゆー意味では、受け手はドメスティックな人たちじゃなくて、国境を越えたオープンソースコミュニティなわけで
バタくさい感じはちょっと鼻につくけどええやん
あっくんはドメスティックすぎてださいよ。


浅野 まさる
ん、ごめん。オープンソース的な乗っかり方というのは、Happyがだよね。
うんうん。


★★★★★
そう
あっくんはニコ生的。
HAPPYはYouTube的って差なんじゃない?


浅野 まさる
あっくんの方は、カバー曲をリリースしました。というもので、Happyは乗っかりました。というものだから、そもそも違うか。


★★★★★
そうねー


浅野 まさる
ハラジュクHappyは、オープンソースに乗っかるんだけどリリース感があるというか、
クールジャパンのダサさって事なのかな。
トップダウンでやるものじゃねぇだろという。


★★★★★
まぁ企業主導みたいだからね。


浅野 まさる
でも多分、トップダウンでやらないと、海外オープンソースコミュニティには届きにくいんじゃないの?というか、
そこが俺のフクザツな気持ちの根っこかも。


★★★★★
まぁね。個人発のムーブメントではないよね。
つーかファレルだったらnigoが仕切ってやればいいだけなんだけどね。


浅野 まさる
なんかNIGOがやってたよね最近。


★★★★★
テリヤキボーイズとかでからんでんじゃない?


浅野 まさる

http://www.fashionsnap.com/news/2014-04-30/nigo-happy-japan/

NIGOが監督 ファレル・ウィリアムス「Happy」の日本版ビデオ公開へ
www.fashionsnap.com
 SonyMusicが、NIGO(R)(ニゴー)をディレクターに迎え、Parrell Williams(ファレル・ウィリアムス)の楽曲「Happy」の日本版ミュージックビデオを5月に公開すると発表した。今日発売の国内盤ニューアルバム「G I R L」のプローモーションを兼ねたプロジェクトで、井浦新や水原希子、ユナイテッドアローズの小木"POGGY"基史、ふなっしーなどの出演が予定されている。


浅野 まさる
これこれ。


★★★★★
やってたんだw


浅野 まさる
さすがですねw


★★★★★

VERBALや新日本プロレスのオカダ・カズチカや中邑真輔、氣志團、久保田利伸、コブクロ、スチャダラパー、「SEKAI NO OWARI」のDJ LOVE、ヒップホップグループの「TERIYAKI BOYZ」、「EXILE」兼「三代目J Soul Brothers」のNAOTO、アイドルグループの「BiS」、槇原敬之、「AMBUSH(R)(アンブッシュ)」を手がけるYOON、湘南乃風の若旦那といった、ファレルを深くリスペクトする様々なジャンルの著名人が集結するという。

まぁこちらのがオフィシャルですな
今のTOKYOでこのビデオを作る権利はNIGOにあると思うよ。


浅野 まさる
そうなのね。俺そこ知らなかったや。


★★★★★
それがあるとなったら話は別だよ!


浅野 まさる
お。


★★★★★
いや、違うな
人脈的にNIGOが仕掛けてるんだな。


浅野 まさる
というと?


★★★★★
つぎKYOTO、FUKUOKAが出るよ。
裏でNIGOが声かけてるんだろ


浅野 まさる
WORLD ORDERとか絡む感じなんでしょうか。


★★★★★
んで、個人がYoutubeに投稿する動きになってく絵を描いてるんだろ
絡むでしょうよ


浅野 まさる
あーなるほど。オープンソースを普及するリーダー的ポジションという自認があるということかしら。


★★★★★
そういうことだね。


浅野 まさる
「こういうオープンソースムーヴメントがあるんだぜ!お前ら乗っかれよ!」という?


★★★★★
そうねー。仕掛けてんだよ。
つまり、今ここでしている議論は時期尚早ということだ。


浅野 まさる
このHARAJUKU ver.で、この曲、動きに初めて触れる人って、いっぱいいるのかな。


★★★★★
いますよ。そりゃ。
24hourshappy.comの存在を知らない人もいっぱいいますよ。


浅野 まさる
曲は知ってるのかな。


★★★★★
ラジオでは流れまくってたよね。


浅野 まさる
そうなのか。そうだろな。


★★★★★
実際問題ウォールでは結構喜びとともにシェアしてる人が多かったね。


浅野 まさる
あ、マジか。俺のTLにはまだ来てないや。
まだ1万再生もいってないし、そういう意味では早い方々が多いのかなそちらのTLには。


★★★★★
ちょっと早めのリークだったんじゃない?NIGO版のリリースは5月って書いてあるし


★★★★★

http://www.fashionsnap.com/news/2014-04-30/happy-harajuku/

【動画】世界中でブーム、ファレル・ウィリアムス「Happy」原宿版PV公開
www.fashionsnap.com
 Pharrell Williams(ファレル・ウィリアムス)の楽曲「Happy」の原宿版の動画が公開され、話題を集めている。原宿のキャットストリートや竹下通り、明治神宮、ヘアサロンSHIMA(シマ)やJOL原宿などを舞台に、渋谷区長やセレクトショップ代表、ショップ店員、モデル、そして相撲力士まで、様々な出演者がダンスを披露している。


★★★★★
このURLがシェアされてたけど、あんまりなじみのないサイトだよね。
もしかしたら間違って先行リークしちゃったんじゃねーのファッションスナップさん
いや、つーかファッションスナップの時点でNIGOの息がかかってないわけないもんなw


浅野 まさる
でもそう考えると、この動画の向いてる方向は、海外のOSコミュニティというより、国内のマス層ってことなのかな。


★★★★★
そうだね。NIGOの映像に注目を集めるための撒き餌だね!
はっはっは


浅野 まさる
まじかー踊らされてんのか俺ー


★★★★★
まぁ、俺24hourshappy.com見倒したけど、このニュース見ても「別に」って感じだったからね


浅野 まさる
24hoursは俺も一時期作業用BGMだった。


★★★★★
今のトークでNIGOの存在が明らかになるにつれ、スキームに興味がでてきたけど


浅野 まさる
スキーム。プロモーションの流れみたいなことかしら。
流れというか流づくりというか。


★★★★★
「やっぱりマス動かさないとアカンねやろか?」というのは常にwebの課題だよね。


浅野 まさる
そうね。日本のマス、という方が個人的にはしっくりくる。


★★★★★
USではwebとオープンソースカルチャーだけで成功してるように見えてたけど、それをそのまま日本にローカライズできないと判断したってことだもんね。


浅野 まさる
そうね。


★★★★★
フォーチュンクッキーとかのレベルだもんね。


浅野 まさる
なにかと思ったらあkbですか(白目
金沢市長も踊ってんだよフォーチュンクッキー(白目
1億数千万の言語圏で、うち1千万人が一都市圏に集中してるという状況だと、いわゆる「マス」というのがある程度コントロールできちゃうから、「マスを動かそう」って発想が正解になるんじゃないかなーと思っている。


★★★★★
まぁビッグを狙うならね


浅野 まさる
ちなみにここまでの話、匿名で公開しても平気?ブログに書きたいなと。


★★★★★
いいよー



sarustar at 22:13|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2014年03月09日

red

FinalCutProよりもPremiere+AfterEffectsが好きで、赤魔導士よりも黒魔導士+白魔導士が好きで、十得ナイフよりサバイバルナイフが好きなタイプです。つまり、餅は餅屋というか、専業のものが好きなのです。

そんな僕なので、サイトをゼロから作る時、WordPressを使って作る事はあまり好きではありません。なんだろ、自分の書いてないコードが根幹を占めるサイトというのが、なんか気持ち悪いんだろうな。さらにそこにプラグイン乗っけるのとかほんと不安。ディレクトリ構造も嫌だ味あります。基本的に、動画はYoutube、写真はFlickrやInstagram、ブログはTumblr.などを利用し、それらの集積地としてPHP、JSを書くという方法を好みます。餅は餅屋、動画はYoutubeです。企業サイトとかだとそんなこと言ってらんないんでしょうが、幸い現在の僕のクライアントさんにはフィットするやり方です。

このやり方にはメリットがいくつかあります。まず、クライアントさん自身で、日常の更新作業が行える点。それこそWordPressの得意なとこじゃないの?という声も聞こえますが、管理画面がスマートではありません。その点上記のWebサービス達は、楽しく気軽に更新させる事に注力しており、スマホからの使い勝手やサービス間の連携もスムーズです。自分たちのサイトを自分たちでコントロールする事で、サイトに対する愛着が湧くと思っています。

次に、各webサービスは既に固有のユーザーを持っているという点。ユーザーの皆さんのweb上での行動は様々です。ユーザーさんの日々のルーチンの中に、自サイトを組み込むのは容易ではありません。しかし、日常的にInstagramを利用する方はいるし、Youtubeを利用する方もいるし、Tumblr.を利用する方もいます。人の流れができている一等地です。ブックマークからサイトにアクセスしてもらうより、各サービスでフォローしてもらう事の方が比較的簡単です。

最後に、クライアントさんのWebリテラシーの向上が見込める点。これは同時にデメリットでもあり、サイト立ち上げと同時に複数のwebサービスの使い方を覚えるという手間がかかります。が、そのコストを払うに十分な見返りがあると考えています。webサービスを利用すると、他者のコンテンツに触れる機会が増えたり、ユーザーとのコミュニケーションが自然と生まれたりします。そんな中で、自分の投稿と他者の投稿を見比べる事で、どのようなものがコンテンツになり得るのか、好まれるのかを体感として得ることが出来ます。この感覚は実際楽しんでネットに触れていないと、なかなか得られないものです。

この他にも、例えば初期コストの面で有利になったり、リスク分散になったりというメリットも存在します。サーバーの増強や時代に合わせたUIの変更等は、各サービスが巨額を投じて勝手にやってくれます。突然の仕様変更に泣くのは、デザイナー、エンジニアの仕事です。上記サービスは、比較的コンテンツ倉庫としての自覚を持って運営されているように思われます。怖いのはFacebookですね。アイツはコンテンツ倉庫ではなく公開広場なので、平気で大規模仕様変更をカマしてきます。最近はだいぶ落ち着いているようですが。

上記のメリットは、全てそのままデメリットとして捉えることも出来ます。日々の更新を自分でしなくてはいけない、webを意識する時間を増やさなければいけない、定期的に学習コストがかかるかもしれない等など。しかし、これらをデメリットとして捉える人は、ひょっとしたら自サイトを持つ準備が出来ていないのかもしれません。サイトを立ち上げるというのは、他の業務と同じく、片手間にやるべき事ではありません。(基本更新しない、パンフレットや名刺的なサイトの場合は、この限りではありません)

色々書きましたが、WordPress撲滅セヨと言いたいわけではないです。あくまで僕の好みとして。ということで、僕の作ったサイトその他のリンク集貼っておきます。お仕事緩募中です。

sarustar.net

sarustar at 17:56|PermalinkComments(1)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2013年06月06日

youtubechannelautoplay

Youtubeって再生リストの連続再生はできるけどチャンネルの連続再生は出来ないぽかったので、好きなチャンネルを次々と自動再生するサービス作りました。上のボックスにチャンネルID入れてボタン押せば使えます。

Youtube Channel Autoplay
※右上の?をクリックすると使い方が見れます。

技術的に勉強できたのは、
・ブックマークレットの作り方(外部js利用とか)
・Youtube Data API と Youtube Player API の簡単なこと
・Facebook OGP の書き方

こんなもんかしら?難しいことやったというより、簡単なことを割と丁寧に作った感じです。やー楽しかったー。我ながら結構使える感じにできたと思いますので、動画好きの方ご利用下さい。あとこれは外部プレイヤーだからだと思うんだけど、うっとおしいCMが全く流れないというのが、個人的にアツいです。流れないよね?たまたま?

今後の予定としては、シャッフル再生とよりたくさんの動画読込(現状50件まで)を実装するつもりです。デバッグ協力してくれた @playlogjp@SteveMai666 ありがとう!

13.6.7 22:07 追記
更新状況などのお知らせ用に、Twitterアカウント @VIDECTnet 作りました。

sarustar at 20:53|PermalinkComments(5)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2013年03月13日

airflash
完成間近のAIRアプリなんだけど実機テストしたらメモリ使用量が増加し続けてまともに動かない助けて!という依頼を受けて、傭兵やりました。社会人になって最初の大きなミスが、Flash Liteのメモリ使用量を無視して作ってて、多くの端末で画面真っ赤、俺(と社長)真っ青。ってやつだったので、とても人ごととは思えません。幸い今はStatsという素晴らしいモノがあるので、あの頃の自分を救うという意味でも、出来るだけスマートに作業したい所。

調べたところ、イベント割当や変数代入といった参照を消したBitmapDataをdispose()する事で、メモリの解放を促せる(ガベージコレクト対象になる)という事のようです。bitmapをremoveするだけじゃ解放されないって事です。問題の.flaファイルは山ほどのBitmapをタイムライン上でステージに配置&トゥイーン、ASは各階層の各キーフレームに書いてあるといった状態だったので、まずはASをルートに整理して、全体の見通しを良くしました。これはぜひやった方が良いと思います。全部整理は出来なくても、出来る限りやった方が良いです。

で、disposeについて。AS整理してaddEventListenerとremoveEventListenerを一括管理するようにしたので、イベント割当は確実に消せているはずです。それが出来たら、ステージに配置したBitmapにASからアクセス出来れば、基本的にはASの修正だけで済むんじゃないかなと考えました。で、以下の感じ。手元にファイルが無いので、考え方のイメージだけ持ってもらえれば。事前作業として、ライブラリに格納してあるbitmapのプロパティで、ActionScriptに書き出し、1フレーム目に書き出し、基本クラス→flash.display.BitmapData にして下さい。これをせずにステージに配置したBitmapはShapeに分解されちゃうようです。


var bitmapArr:Array=[];

addEventListener(Event.ADDED,pickupBitmap()); //ステージに配置されたらイベント

function pickupBitmap(e){
if(e.target is Bitmap){
bitmapArr.push(e.target); //bitmapだったら配列に追加
};
};

// 適当なタイミングで以下を呼び出す
function disposeBitmapData(e){
for (var i:String in bitmapArr) {
bitmapArr[i].bitmapData.dispose(); //bitmapの中のbitmapDataにアクセス
bitmapArr[i]=null; //念のため
}
bitmapArr=[]; //disposeが終わったら配列初期化
};

※タイムラインにキーフレーム打って配置 = addChild();
 そのレイヤーにキーフレーム打って削除、空白レイヤーにする = removeChild();
になるようなので、disposeする前に空っぽなフレームに飛ばすか、キーフレーム打って空白にする必要があります。

ポイントは、タイムラインに縦横無尽に配置されているBitmapを軒並み拾うために、ADDEDイベントを使う事です。そこまでに配置したbitmapを全部解放対象にしちゃうので、disposeのタイミングは注意して下さい。AIRの場合はSystem.gc();で強制的にガベージコレクタ起動出来る様ですが、基本的にタイミングはシステム任せで、大きなきっかけの時のみ呼ぶようにしました。今一ガベージコレクタって、挙動が安定しないというか、使い勝手が微妙に悪いような...弱参照とか、曖昧で信用ならんし。

タイムラインに配置したインスタンスをASで操作するとか、goto文やキーフレーム、シンボル名とイベント処理を並列させるとかなるべくやりたくないですが、とはいえFlashの柔軟なタイムラインは使いどころ間違えなければ強力ですので、毛嫌いせず柔軟に対応出来たら良いのかなと思いました。

sarustar at 02:03|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2012年08月08日

beans

作ってみたいwebサービスがあって、色々調べた結果グラフデータベースというものを扱えると捗るぽいという事が分かったので、オープンソースのグラフデータベースneo4jについてうっすら勉強しています。当方1年ほど前までは「ActionScript以外分かりません!」という状況でした。という前提で、ここ1年ほどの間に分かったことを、ちょっと書くのが恥ずかしいレベルの話までまとめておこうと思います。間違ってる所もあるかと。後から間違ってることが分かった場合随時更新するつもりですが、「間違ってるけどまぁそう思っておけば特に問題はないよ」ってのはスルーする方向。

  1. htmlは構造と内容、CSSはデザイン、jQueryは大ヒットJavaScriptライブラリ。

  2. divなりなんなりに名前つけてcssでデザイン整えたりjQueryで操作したりする。

  3. ライブラリはソースを便利にまとめたもの。機能群。

  4. WordPressはphpで作られた製品というか。ブログ向けだけどサイト作るにも便利で、そういう時はWordPressをCMSとして使う、という言い方をする。

  5. Ajaxは非同期通信。まず外観と機能をロードして、データは随時更新して内容を変える。

  6. phpはサーバー上に置いておいて、アクセスしたら動く「サーバーサイドスクリプト」

  7. phpはhtmlとかxmlとか時にはjpgとかを「書き出すための言語」 ファイルというよりプログラム。

  8. 細かくhtmlspecialchars

  9. phpはMySQLとの接続が簡単→ASからは直接データベースに接続できないので、データベース→phpでxml(or JSON)を書き出す→ASで解釈という流れを取る

  10. form action="hoge.php"でデータを渡す先を指定。action=""で自分にデータ渡して再読込。
    input name="hogege" でデータを渡し、$_REQUEST('hogege') $_POST['hogege']でデータを受け取る。

  11. phpでログイン情報とか一定期間保持したい情報はセッション使う

  12. xmlはhtmlタグみたいな構造。JSONはCSSみたいな構造。構造が違うだけで同じようなもの。

  13. CakePHPはPHPのフレームワーク。骨組み。

  14. Smartyはごちゃごちゃになりがちなビューとロジックの分離。tumblrとかブログサービスのカスタマイズみたいな。強いて言うならDreamWeaverのテンプレート使った時の操作感というか。

  15. MySQLはリレーショナルデータベースと呼ばれるデータベースの一つ。オープンソースで人気。

  16. クエリーはデータベースへの要求。

  17. リレーショナルデータベースは表みたいなデータベース。行→レコード、列→フィールド(=カラム)

  18. XAMPPは擬似サーバ。ローカルにMySQLデータベースを作ったりPHPを動かしたりできる。

  19. リレーショナルデータベースの他に、グラフデータベース、オブジェクトデータベースとか色々ある。NoSQL。

  20. Graphというのは人とかモノ同志の「繋がり関係」を表す。mixi graphとかfacebook graph api とか。

  21. neo4jはオープンソースのグラフデータベース。

  22. neo4jにアクセスしやすい言語は現状JAVAやRuby。

  23. JAVAは色んな用途があるけど、Webアプリ作る場合は「サーブレット、JSP」が大事。

  24. サーブレットはサーバーで働くJAVAプログラム。JSPはhtmlに書き出すための仕組み。

  25. サーバー上のflashプレイヤーみたいな、JAVA実行環境(=サーブレットコンテナ)をサーバーにインストールする必要がある。

  26. 有名なサーブレットコンテナはtomcat。

  27. バイトコードはJAVAプログラムを半分だけコンパイル(flashでいうパブリッシュ)した状態のコード。

  28. JAVAアプレットはhtmlに埋め込むJAVAプログラム。swfファイルみたいなもの。

  29. Eclipseは統合開発環境。JAVA書くならこれ。

  30. tomcatとかneo4jとかいけるレンタルサーバーはあまりない。Kagoya FLEX?

  31. Githubつかうとカッコイイと思います。

  32. ActionScript3はキレイな言語だと思います。

  33. デザインしながら要件定義→プログラミング意識しながらコーディング→プログラミング


ふーとりあえずこんなもんかしら。

ActionScript3に慣れてきた僕からすると、html周りのことって煩雑な印象を持ってしまいますね。単純に用語が多すぎるというか。でもこの煩雑さが世界なんだろうなと思ったりもします。日々精進でがんす。

sarustar at 21:35|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2012年07月21日

facebook

今更だけどPHPでFacebookアプリ作ったのでメモ。タイトルに日付入れたのは、Facebookアプリ制作やった人なら御存知の通り、Facebookさんがしょっちゅう仕様変更するからです。調べてやっとたどり着いた情報が使えないとか何度あったことか。制作の手順としては、まずHTMLとCSSでデザイン作って、必要ならjQueryとかあてて、最後にPHPを組み込んでいきました。facebook sdk for PHP は
コチラからダウンロードして下さい

今回のアプリの仕様は、
「良いね!押してもらって、アルバム作成して、そこに画像を複数枚投稿する」
という感じです。

ということでまず。いいね!を押さないと先に進めないようにする。

require 'facebook.php'; //facebook php sdkまでのパス。
$facebook = new Facebook(array( //2~5行目は外部化したほうがスマート。
'appId' => 'アプリID',
'secret' => 'シークレットキー',
));
$signedrequest=$facebook->getSignedRequest();

if($signedrequest['page']['liked']) {
//ここに「いいね!」してもらった時のソースを書く
}else{
//ここに「いいね!押して下さい」的なソースを書く
}
こんな感じ。いいね!を押したら勝手にリロードされるので、これで動作します。とっても良い感じ☆

次いで、アルバム作成と画像アップロード。

require 'facebook.php';
$facebook = new Facebook(array(
'appId' => 'アプリID',
'secret' => 'シークレットキー',
'fileupload'=>true
));
$user = $facebook->getUser();

//アルバム作成とアルバムID取得-------------------------------------------------------------
if($user){
try{
$album=$facebook->api('me/albums','POST',array( //アルバム作る
'name'=>'アルバム名',
'message'=>'アルバムのメッセージ。ウォールに書き出される'
));
$albumJSON=$facebook->api('me/albums','GET'); //アルバム一覧のJSONデータを取得
$albumID=$albumJSON["data"][0]["id"]; //アルバム一覧の0番目(最後に作ったアルバム)のidを取得
}catch(FacebookApiException $err){
exit($err);
}
}

//画像を4枚投稿-------------------------------------------------------------------------
$postImgArr=array('1.jpg','2.jpg','3.jpg','4.jpg'); //投稿する画像のパスの配列
$capArr=array('キャプション1','キャプション2','キャプション3','キャプション4'); //画像キャプションの配列
if($user){
for($k=0;$k<4;$k++){ //画像投稿を4回繰り返す
try{
$post=$facebook->api(
$albumID."/photos", //指定アルバムに
"POST", //投稿
array(
"source"=>"@".$postImgArr[$k], //@が大事みたい
"message"=>$capArr[$k] //画像キャプション
));
}catch(FacebookApiException $err){
exit($err);
}
}
}
こんな感じです。アルバム作成の辺りは、アルバム作って全アルバムデータ取得して...って感じなので、結構無駄がある気がします。が、動いているのでおk。しかしこの情報もいつまで有効なのだろうか...怖い...

facebookアプリはわりかし面白いこと出来そうというか、ちゃんと反応が見られるので、作っちゃえば楽しいかもと思います。必要なコード量自体はとても少なくて素晴らしいのだけど、動作が安定しなかったりsandboxモードの信頼性が低かったり、facebookさんのやんちゃぶりに振り回されて、結構気の休まらない開発になりました。

今回のサンプルで作ったもの↓
https://www.facebook.com/ladykaga.jp/app_492566150757081

sarustar at 13:51|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2012年03月20日

sphere01
↑クリックでサンプル見れます。

Papervision3DでPlaneを球状に配置する方法を試してみました。三角関数使うのかと思ってたけど、Sphereの頂点を取れば簡単に出来る様子。手順としては、まず頂点取得用のSphere(球体)を作って、for文でpositionSphere.geometry.vertices[i].x,y,zを取得すれば良い様です。参考にしたのはコチラ。Papervision3D(PV3D)で plane の球体配置

今回やりたかったのは、
1.枚数不定のPlaneを
2.球状に順不同で配置して、
3.球体ぽくなるようPlaneを傾けて、
4.各PlaneをクリックするとそのPlaneを中央表示するようにカメラが移動する
という動き。

上記のBlogにあるように、Planeの傾きを実装する時にエラーがでます。「配列の一番目のPlaneが消えてしまいました」とありますが、試したところ、球体の底に配置したPlaneが消え、球体の天に配置したPlaneを中央表示するようカメラを移動させると、なぜか全Planeが消えてしまいました。またボタンを仕込んでみると、底のPlaneはなぜか背景に透明で存在しているような、不思議な挙動をしました。カメラが軸上にくると向きがおかしくなるとか、そういう感じのエラーなのかな?と思います。せっかくLookAt関数があるのだから使いたいので、底と天の頂点にはPlaneを配置しない方向でいくことにしました。

ということでソース。そのままコピペしてるだけなのでみっともないです。あしからず。別途マテリアル用のMovieClip(CARDクラス)と、このBGインスタンスを配置するMainクラス、Papervision3DとKTween、配列のシャッフル用にExArray.asが必要です。

package
{
import flash.display.DisplayObject;
import flash.display.MovieClip;
import flash.events.MouseEvent;
import org.papervision3d.events.InteractiveScene3DEvent;
import org.papervision3d.materials.MovieMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;
import net.kawa.tween.KTween;
import net.kawa.tween.easing.*;
import net.kawa.tween.KTJob;

/**
* ...
* @author sarustar
*/
public class BG extends BasicView
{
private var cardArr:Array = [];
private var cardNum:int = 150;
private var hankei:int = 1500; //円半径
private var positionSphere:Sphere;
private var cameraSphere:Sphere;
private var shufflePositionArr:Array;

public function BG()
{
trace("BG");
super(640, 480, true, true);
camera.fov = 45;
test();
function test()
{
for (var i:int = 0; i < cardNum; i++)
{
var cardMC:MovieClip = new MovieClip();
var crd:CARD = new CARD(cardMC, i);
var cardMaterial:MovieMaterial = new MovieMaterial(cardMC, true, true, true);
cardMaterial.interactive = true;
cardMaterial.doubleSided = true;
var myCard:Plane = new Plane(cardMaterial, 320, 180, 1, 1);
myCard.extra = i;
scene.addChild(myCard);
cardArr.push(myCard);
if (i == cardNum - 1)
{
positionSetting();
startRendering();
}
myCard.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, function(e:InteractiveScene3DEvent) {
trace("CLICK", e.target.extra);
cameraMove(e.target.extra);
});
myCard.addEventListener(InteractiveScene3DEvent.OBJECT_OVER, function(e:InteractiveScene3DEvent) {
trace("OVER", e.target.extra);
});
}
}
}

public function positionSetting()
{
//(n*(n-1))+2
var seg:int = 3;
if (cardNum >= 3)
{
while ((seg * (seg - 1)) + 2 < cardNum+2)
{
trace("seg",seg);
seg++;
}
}
var positionArr:Array = [];
for (var j:int; j < (seg * (seg - 1) + 2)-2; j++)
{
positionArr.push(j+1);
}
shufflePositionArr = ExArray.shuffle(positionArr);
trace("shufflePositionArr : " + shufflePositionArr,"length",shufflePositionArr.length);
positionSphere = new Sphere(null, hankei, seg, seg);
cameraSphere = new Sphere(null, hankei + camera.focus*camera.zoom, seg, seg);
trace("seg", seg, "頂点", positionSphere.geometry.vertices.length);
for (var i:int = 0; i < cardNum; i++)
{
cardArr[i].x = positionSphere.geometry.vertices[shufflePositionArr[i]].x;
cardArr[i].y = positionSphere.geometry.vertices[shufflePositionArr[i]].y;
cardArr[i].z = positionSphere.geometry.vertices[shufflePositionArr[i]].z;
(cardArr[i] as Plane).lookAt(DisplayObject3D.ZERO);
}
}
public function cameraMove(targetID:int) {
trace("cameraMove.targetID", targetID);
var targetX:int = cameraSphere.geometry.vertices[shufflePositionArr[targetID]].x;
var targetY:int = cameraSphere.geometry.vertices[shufflePositionArr[targetID]].y;
var targetZ:int = cameraSphere.geometry.vertices[shufflePositionArr[targetID]].z;
var cameraTweenJob:KTJob = KTween.to(camera, 2, { x:targetX, y:targetY, z:targetZ }, Quad.easeOut);
}
}
}

32行目、42行目で、Planeのクリックを有効にしています。
43行目で、Planeの裏面を表示できるようにします。
34行目から61行目までで、配置用のPlaneを作って配列に収めています。その際extraにID番号を格納します。
68行目から75行目で、カードの増減に対応しています。
77行目から80行目で、天、底の頂点を除外しています。
83行目、SphereのW,Hの分割数は、計算をシンプルにするためsegで統一しました。頂点の数は、(seg*(seg-1))+2で算出できます。
84行目、カメラの位置決め用に、一回り大きいSphereを作成しました。Plane配置用の球体の半径+(camera.focus*camera.zoom)で、カメラを常に原点(Sphereの中心)に向けておけば、Planeを等倍表示できます。
91行目、lookAtです。

自作アプリに使おうと思ってここまでやってみたのですが、動き見てみたらあまり今回のアプリ向きじゃなかったので^^;これ以上は作らないかなーと思います。もしさらにやるなら、カードの枚数によって球体の半径を変えるように出来たら良いかなと。もしくは重ならないように各Planeのサイズ変えるか…メンドクサソウダナー

sarustar at 15:38|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2011年11月29日

screenshot
↑「それHTML5で出来るよ」とそそのかされた照英が泣きながらFlashで実装し直す様子

GIZMODOの「
もうとっとと世の中からFlashなんて消え去ればいい...の声を上げるキャンペーンが始動中」って記事について。HTML5 vs Flashの争いは、Web技術者、特にFlash使いの間では1年ほど前に語りつくされてるトピックなので、「それぞれ得意、不得意があるので、どっちも必要」でFAだと思っていたのだけどナー、という印象であります。余裕のよっちゃんおならプーです。

…なんてね。虚勢ですよ。実際は戦々恐々。もちろんFlashとHTML5の共存は可能でしょうが、Flashプレイヤーのシェアが仮に70%程度まで落ち込んだら、とたんにFlashの魅力は失われます。そうなってしまえば後はあっという間。かつてFlashがShockwaveを追い落としたように、いつ自分たちが過去の技術認定されるかビクビクしつつも、「でもActionScript3はJavaScriptと似てるから、最悪なんとかなるだろう…」なんて自分を奮い立たせ、ある者はJS,HTML5,CSS3の勉強をし、またある者はAIRに活路を見出したりして、コツコツとFlashのスキルを磨いている。それが、多くのFlash使いの現状ではないでしょうか。少なくとも僕はそうです。AIR楽しいですし。

Flashが今やちょっとした問題性のある技術であることに、異論はありません。僕はChromeをメインブラウザとして利用していますが、Flashが原因でタブがクラッシュすることは割と多いです。月2,3回はあるかな。またActionScript自体、JavaScriptに比べると動作は遅いと言われているようです。またこれまでFlashが担ってきた役割が、HTML5やJSで代替可能になってきたのも事実です。

今Flash不要論が盛り上がるというのは、やはりiPhoneへのFlash非搭載宣言と、Adobeがモバイル向けFlashプレイヤーのサポートを打ち切る発表をしたためだと思います。まぁ後者は、スマホのスペックも今後上がってくるので、普通のFlashプレイヤーで対応できると見越しての事…だと良いなーと思っているのですが。こういった状況の背景に、スマホの隆盛とPCの凋落、つまり「ふつーの人にとってインターネットってこの程度でいいよね」って空気があることも重要です。そんな事ないんだけどなぁ。大画面でのインターネットってめっちゃ楽しいんだけどなぁ。

で。

Flash不要を謳う方たちの殺し文句として、「それ、HTML5でも出来るよ!」ってのがあります。映像だったり、インタラクティブな操作感だったり。また、「Flashに出来てHTML5に出来ないこと、その逆」とかもよく語られます。ただ僕は、そういうのは、Flashの重要性のせいぜい半分じゃないかなーと思ったりもしています。

では、残りの半分は何か。それはFlashプレイヤーです。非常に高い普及率を誇り、下位互換性もバッチリ。OS、ブラウザに依存することもほとんど無く、ActionScriptさえ覚えれば容易に様々な事ができます。(HTML5でも出来るよってのは、実際にはHTML5とCSS3とjQueryとPHPで出来るよ!って意味だったりするのでorz) そしてなにより、Flashプレイヤーは「Adobeがほぼ単独で、仕様を決められる」というメリットがあります。僕はこれが、Flash最大の強みじゃないかなーと思っています。

考えてみてください。Flashプレイヤーがflvを導入したのが2003年。それからHTML5がマルチメディア関連タグを策定するのに、実に5年以上の年月が経っています。なぜなら、ブラウザは様々なデベロッパがリリースしているため、標準化にW3Cという合議制の業界団体が中心とならざるを得ないからです。ココらへん、以前書いたAppleとMicrosoftの関係に似ているかもしれません。たくさんの企業、団体の思惑を汲み取らねばならないW3Cの歩みは、どうしたって遅くなります。汎用的なOSでなければならないWindowsの様なものです。

またそうやってW3Cによって策定された標準仕様も、ブラウザによって挙動がマチマチだったりします。や、動けばまだいい方ですね。ブラウザ開発の手法自体が先進化しているので、IE vs Netscapeのような泥仕合はもう無いだろうと期待はしますが、現に今だって「このタグはChromeとFirefoxでは動くけどIEとSleipnirとOperaでは動きません」みたいな事がザラにあります。自分の作ったWebページがクライアントのPCで正しく表示されずに焦った経験の無いWebデザイナーはいないんじゃないでしょうか。

その点、FlashはAdobe様がサクっと仕様を決定できます。AppleがOSXを発表したように、AdobeがActionScript3を発表した時、泣いたFlash使いは多いでしょう。しかしその恩恵は多大なものでした。暴君がいなければ、新しい未来は開かれません。そしてコンピューター史におけるAppleがまさに暴君であったように、インターネット内でFlashは、強引に次のインターネット体験を提案する暴君だったのです。

暴君が切り開いた荒野を民衆が地ならしし、やがてかつての英雄に対して「クソみたいな王を引きずり下ろせ!」と叫ぶのは、歴史で何度も何度も繰り返されてきたことです。暴君は荒野が無ければ君臨できないのです。アイシールド21でドンは、「王者は定期的に虎を殺してみせねばならない」と言いましたが、まさにアレです。今インターネットでは、W3Cが長い長い合議の果てに、やっと次の数年を支える技術の標準化に漕ぎ着けました。Adobeが開拓した荒野を舗装することに成功したのです。

Flashが死んだ時、では、その次の数年はどうなるのでしょうか?今インターネットは、Appleの功績で「モバイル」分野に、豊かな荒野が発見されました。今から数年はその荒野の開拓がなされるでしょう。でも、その次は?3D、AR、そして今後出てくる新しいテクノロジーは、モバイル端末の狭いウィンドウでしか生きられないのでしょうか。クリエイターは、その作業の半分をブラウザ毎の挙動の調整に費やし続けねばならないのでしょうか。僕はそれは、ちょっと貧しい未来だと思います。

Flashができること。Flashだからできること。それは、映像やリッチなインターフェースではなく、スピーディーにWebの次を模索していくことです。Flashにとって辛い時期が続くかもしれませんが、今後のFlashにも、僕は期待したいと思います。(AIRの勉強もするけどね!)

sarustar at 03:27|PermalinkComments(2)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2011年11月07日

airflash

これまで無駄にコードが長くなる気がして使った事なかったんだけど、set/getがやたら便利ということが分かったのでメモ。調べた中ではここが分かりやすかった。

自堕落なぺぇじ Setter/Getterについて
http://d.hatena.ne.jp/corrupt/20110613/1307924410

ここに書いてあること以外だと、「変数の変化をトリガーに出来る」(って言い方でいいのかな?)のが大変便利。「処理をしたらこの変数を入れ替える」だと、うっかり別ルートで変数の中身入れ替えたりしちゃって、「なんでこうなるの?」って事がちょいちょいあったんだけど、setter内に処理を書くことで、「この変数が変化したらこの処理実行」ってことができる。変数の監視が出来るというか。stage.addEventListener(Event.EnterFrame,func)で変数変化を常時監視とかスマートじゃないから、この方法はとても良い気がする。推奨されてなかったりするのかな。当然dispatchEventと組み合わせることも出来るので、子クラスの変数が変化したことを親クラスで感知することも出来る。すばらしい。

もちろんint以外の変数の場合も使えるので、こんな感じでMovieClipにsetter設置することも可。

private var _TARGET_MC:MovieClip;
public function set TARGET_MC(movieclip:MovieClip):void{
_TARGET_MC.visible=false;//現在_TARGET_MCに格納されてるMovieClipを消して
_TARGET_MC=movieclip;//新しく_TARGET_MCにMovieClip格納して
_TARGET_MC.x=stage.stageWidth/2;//移動
_TARGET_MC.y=stage.stageHeight/2;
}

とか。変数は常に一個しか値格納しないので、処理が重複することがない。便利。ただsetterを高機能にすることが推奨されてるかは不明。別に問題ない気はするけどどど。switch文とか入れて、格納された値によって処理振り分けたりしたら、読みやすいコードが書ける気がする。うーむ。

sarustar at 17:48|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2011年11月05日

airflash

ショートカットの作成は、stage.addEventListener(KeyBoardEvent.KEY_DOWN,keyDownFunc)でキーを押した時のイベントを取得できるので、あとは押されたキーによって動作内容を振り分ければOKです。振り分けなのでswitch..caseを使います。

押されたキー内容は、keyCodeで数値として取得できます。aなら65、backspaceなら8、といった具合です。数値をいちいち調べるのは面倒なので、オブジェクトに格納しておくと便利です。


private static const SC:Object = {n0: 48, n1: 49, n2: 50, n3: 51, n4: 52, n5: 53, n6: 54, n7: 55, n8: 56, n9: 57, t0: 96, t1: 97, t2: 98, t3: 99, t4: 100, t5: 101, t6: 102, t7: 103, t8: 104, t9: 105, a: 65, b: 66, c: 67, d: 68, e: 69, f: 70, g: 71, h: 72, i: 73, j: 74, k: 75, l: 76, m: 77, n: 78, o: 79, p: 80, q: 81, r: 82, s: 83, t: 84, u: 85, v: 86, w: 87, x: 88, y: 89, z: 90, tab: 9, enter: 13, backspace: 8, left: 37, up: 38, right: 39, down: 40};

こんな感じで利用します。

stage.addEventListener(KeyBoardEvent.KEY_DOWN,function(e:KeyBoardEvent){if(e.ctrlKey==true){
switch(e.keyCode){
case SC.s:
e.shiftKey?dataExport():dataSave();//shiftKeyの有無で動作を振り分ける
break;
case SC.n1://breakせず、t1と同じ処理をさせる
case SC.t1://テンキーの1を押した場合
trace("1をプッシュしました");
break;
}
}
});


作り直し進行中ですが、車輪の再発明しまくってます。自分で作ったクラスなのに、再利用できるものが少ない… 再利用できたものと出来なかったものを比べて、良いクラスの作り方について考えたりしています。再利用しやすいのはやっぱり、「データを渡せば結果を返してくれるだけのクラス」でした。一方通行のクラスというか。使いにくいのは、ムービークリップと関連付けるような、多機能なクラスですね。ブラックボックス化する事を原則として考えればいいのかなーとか思っています。

理想は、複雑なクラスをなるべく単機能なクラス群として構成する事なんでしょうが、なかなか難しいです。また処理の振り分けのタイミングも、考える必要があるなぁと思います。振り分けてからデータ渡すのがいいのか、データ渡してから振り分けるのが良いのか。これはきっとケースバイケースなので、都度原則に立ち返って、シンプルなソースを書きたいところです。

sarustar at 03:37|PermalinkComments(2)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2011年11月01日

airflash

環境
FlashCS5.5 Professional
FlashDevelop 4.0.0 Beta

第一回という事で、AIRアプリ制作をする際にまずしなければいけない事をまとめておこうと思います。FlashDevelopとFlexSDKとか使うとか、この環境でも他に色々やり方あるようですが、とりあえず僕がやってる手順です。

  1. ディレクトリ作成
    アプリ名-バージョン推奨 ex: ./stcBoard/1.0/

  2. FlashDevelopで新規プロジェクト作成
    ActionScript3-AS3 Project (src,lib,binディレクトリ作成)

  3. flaファイル作成 Flash-ファイル-新規-AIR
    クラス Main
    ファイル-ActionScript3.0設定-ソースパスに、上記srcディレクトリ追加
    ファイル-ActionScript3.0設定-ライブラリパスに、上記libディレクトリ追加

  4. libディレクトリにAIR用ライブラリをコピー
    ./Adobe Flash CS5.5/Common/Configuration/ActionScript 3.0/AIR2.6/airglobal.swc
    ※これやらないと、NativeApplicationとかInvokeEventとかFileStreamとかインポートできません
    ※2012.1.12 追記
     TouchEvent、Multitouchもこれでインポートできます

  5. FlashDevelopのプロジェクトウィンドウのlibを開いて、airglobal.swcをライブラリに追加
    プロジェクト-プロジェクト設定-書き出し でプレーヤーをAIRに、コンパイルターゲットを他のIDEにする
    ※こうしておけば、.flaを開いてる状態なら、FlashDevelopからCtrl+Enterでプレビューできます。
    ※ツールバーの「デバッグ」を「リリース」にすると、.airを書き出さないのでコンパイルが早いです

セッティングはこんな感じです。3.でドキュメントクラスをMainにしているので、FlashDevelopでMainをいじくれば機能してくれます。InvokeEventってのは、アプリなら必須の「ファイルをダブルクリックしたら自動でアプリが立ち上がる機能」を実現するイベントで、NativeApplicationとあわせて使います。

import flash.desktop.NativeApplication;
import flash.events.InvokeEvent;

var nativeApp:NativeApplication=NativeApplication.nativeApplication;
nativeApp.addEventListener(InvokeEvent.INVOKE,function(e){
switch(e.arguments.length){
case 0:
//普通にアプリアイコンクリックで開いた場合
break;
case 1:
//関連付けた拡張子のファイルをダブルクリックで開いた場合
trace(e.arguments[0]);//開いたファイルのパス
break;
}
});
って感じです。FileStreamクラスはFileクラスと併せて使うことで、データの保存や読み込みをする事ができます。XMLの書出しなど、FileStreamクラスを使わなくても可能なのですが、FileStreamクラスだと「書出し」ではなく「上書き」が出来るようです。アプリなら欲しい機能です。

つい最近自作した
stcBoardというアプリですが、初AIRでメンテナンスのことを考える余裕がなく、脳汁ダダ漏れでグイグイ作ったので、今後を考えて一から作り直すことにしました。初回作ったときに比べて圧倒的にしんどいですw 頑張って仕上げて、機能追加に移行したいと思います。

sarustar at 18:03|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote

2011年10月25日

SAVE THE CATの法則 本当に売れる脚本術

みんな大好きフィルムアート社から、ちょうど一年ほど前に「SAVE THE CATの法則」という脚本術の本が出版されました。で、最近読んでみたんですが、第五章の「完璧なボードを作る」で紹介されているアイディアボードの作成方法がだいぶ具体的で良かったので、デスクトップアプリにしてみました。ポストイットを壁にペタペタ貼って、「んーこのシーンはもうちょい後のほうが良いかなー」とかやるのを、デスクトップで行うことができます。なんでもパソコンでやりたい人、デスクトップでもノートでもボードを確認したい人、壁がポスターで埋まってるプヲタ、シネフィル、ビレバン厨の方どうぞ。

stcBoard >>説明ページ
screenshot


やーにしてもAIRアプリ制作楽しいね!swfじゃ出来なかった事が色々出来るし、俺ツエーwwwが味わえる。しかもswf作るのと同じ環境で作れるってのが素晴らしい。これはクセになりそうです。

sarustar at 08:02|PermalinkComments(0)TrackBack(0)このエントリーをはてなブックマークに追加 mixiチェック Clip to Evernote