HOKYPOKY.BLOG

iTunesが新しすぎる!

iPod nanoが新しくなった!
classicも、touchも新しくなっていよいよiPhone買ったボクの形見が狭くなってきた。

で、新しいiPodがでたら必ずあるのがiTunesのバージョンアップ。知ってました?

今回のバージョンアップの目玉はiTunesのビジュアライザが増えた事。
もう一つはGenius機能。

ビジュアライザはとにかく見てもらいたい。
iTunesのバージョンアップめんどい人は「ムービー作ったんで上のSoundをOnにして」見てもらいたい。

すげーきれい!

こういうことをFlashでやりたいね。
もうね、インターフェイスとか、データベース設計とか、ユーザビリティとか、そういう理論はどうでもよくて

「美しい」

これだけで素晴らしいと。

————————————————– 8<

あとはGenius。WEB屋的にかなりグッときた。

これはiTunes Music Storeを使ったおすすめや、自分の再生数、ジャンルなどをもとに今聞いている曲に近いプレイリストをつくってくれる機能。
いままでのパーティーシャッフルとかだと、たまに気分じゃない曲がでてきて次へ、次へと飛ばしていたものですがこの回数が減った。

単純に「今の気分」をミックスしてくれるアルゴリズムが素敵。

「みんながだいたいそうしていることはきっとそう」という理論。
つまり、「これ聞いてる人はこれ聞いてます。だからきっとあなたもこれが好きです。」ということ。
つまり、「あなたの趣味や思考なんてものは広い目で見れば大体わかるよ。」ということ。
まさに天才。

この考え方は結構浸透してきていて、amazonとかでも採用されてるね。
まあ統計学の基本っちゃ基本なのか。コンビニのレジ的な話。

みんなインターネットなにしてる?

みんなパソコンつけてインターネットでなにしてるかすごく気になる。

たとえばYouTube](http://youtube.com” target=”_blank)やニコニコ動画をみたり、あとは[mixiをやったりしてるのは大体わかるけどみんながみんなやってる訳じゃないと思う。そういう人たちは何をしているのだろう?

どんなサイトが好まれているのか知りたいし、実はあんまインターネットとかやってないのかな。

たとえばdeliciousとかRSSリーダーなんて言葉を知らないんじゃないかな。
こないだGoogleで出来た新しいサービスのGoogleストリートビューなんかはご存知だろうか?

こういった感覚を失ってしまっている自分が悲しいな。

最近見たすごいサイトってなんだろう?
みんなはどんなサイトをみてインターネットしてるんだろう?

とかいってても仕方ないからとりあえずボクに出来る事を考えた。

逆に面白いサイトを紹介しようかなと。
「WEB屋だからすごく感じる」という感覚を捨てる為に、みんなに見てもらって面白いとか思ってもらえるようなもの。もちろん、WEB屋視点をふまえつつ紹介できたらいいと思います。

ということで今回紹介するのはこのサイト。最初は入りやすいとこから。

http://knots.main.jp/rensai.html

絵がかわいいし、実はこの人音楽もやってたりで多彩です。
このブログの上で流れてる動画のsoundをonにすると曲が聴けます。
ってかこのブログはSoundをonにするとカラーになって音がでます。

WEB屋視点でいうと、「Contents Is King」という言葉があって、結局はどんだけデザインや技術すごかろうがコンテンツが一番だよ。ってことです。

ではまたちょっとずつ紹介しようと思います。

Launching “Progression 3″ in Apple Store, Ginzaいってきた

これで、全てが変わる
この惑星ベジータの運命
このオレの運命
カカロットの運命
そして、貴様の運命も!

というわけで行ってきた

以前紹介したProgression3がβから正式リリースされた。
それを記念してLaunching “Progression 3″ in Apple Store, Ginzaというイベントがあったので会社から許可をもらってRe:designYくんと行ってきた。

セミナーへ行くのは初めてだったのでどんな感じなのかを知れたのが一番の収穫かな。
あとは知っている制作会社の人、知っているブログ書いている人などがどんな人なのかが分かったのも面白かった。

Progression?

Progression

まず本題のProgressionについてから書いてみる。基本的にはべた褒めです。

Progressionとは、Flashのフレームワークである。つまり図工キットみたいなものといっていた。
色々な機能が詰まっていて、これを使う事で簡単にFlashのサイトを構築できるし、上級者であってもいつもやっている煩わしい作業というのを一気に効率化してくれる。
かといってこれらが制作の仕様を縛るものではなくとても汎用性高く作られているというから人気なわけだ。

Progressionの素晴らしさを語るときに出てきた話が実績。
Progressionをリリースしてから週1のペースで制作実績の報告があるらしい。個人で作ったものとしてはかなりの実績数である。
しかもそれらが大規模サイトや、ハイレベルなサイトで取り入れられている事が世界的にもこのフレームワークの優れていることを物語っていると言っていた。
個人プロジェクトだったのをオープンソース化し、Version3となって日本が世界に誇るFlashフレームワークになろうとしている。

では実際にどのような機能があるかというと、

  • バージョン判別やクロスブラウザ対応など(SWFObject)
  • パーマリンク(SWFAdress)
  • コンテキストメニュー
  • ショートカット
  • JSFL

これらの機能をいれるとするとそれなりにめんどくさい作業が発生するのだが、とても簡単に、むしろ無意識に近いのレベルでこれらの機能が付いてくる。

SWFAdressとの親和性が高いので

  • 各ページがGoogleAnalyticsに対応
  • パーマリンク時のイベント管理
  • ページの遷移に対するイベント管理

など、Progressionで構築したサイトはデフォルトでとても煩わしいものを全て取り入れてくれている。
簡単だし、ユーザビリティ高いし、解析などアフターサービスもばっちり。
「Progressionを使ったから」という理由だけでこれだけの特典が付いてくるとなれば使わない理由が思いつかない程だ。

もっと推してみよう。JSFLとあるが、これはなんとコンパネまであってProgressionにまつわる設定なんかはFlashCS3のソフトで簡単に設定できるということなのだ。
実際にインストールみるとシーンエディタなどが追加されていてとても分かりやすく設定できた。
また、Progressionのバージョンが変わると、Progressionで作成したプロジェクトのバージョンアップまで自動でやってくれる。

「どんだけ簡単なんだよ!?」って言いたくなるが、undefined.のむらけん様が言うには
「とりあえず、インストールしたらコンパネの作成するボタンをただ押してみてくれ。」と
「するとこれはただ者じゃない事はわかる」と。
ボクも少し触ったりしてみたけどほんと、簡単。作成するととりあえずサイトとなる枠や構造ができていて、あとは「コンテンツ」だけ作ればいいんだよね。

あとは1→10designの長井様が言っていたのは、「表現に集中できる」ということ。
これを聞いたときに、Progressionはなんて素晴らしいんだと思った。

イベント感想

題目は以下 SCRATCHBRAIN.BLOG v2様より引用

 1. 制作者taka:nium様の話
 2. Adobe 西村様の話
 3. Web Designing編集部 馬場様の話
 4. BeInteractive!様の話
 5. trick7様の話
 6. 龍球インク松竹様の話
 7. [対談] Adobe 西村様 × 1→10 design長井
 8. Progression 3 ロゴ制作者 藤永様の話
 9. 制作者taka:nium様 機能ツアー
 10. [対談] 制作者taka:nium様 × undefinedむらけん

1. 制作者taka:nium様の話

とても丁寧な説明だったのが印象的。
めちゃくちゃ練習したんだろうなー。と関心した。

2. Adobe 西村様の話

女性。Adobeだからすごいのか彼女がすごいのかとにかく「できる」人でした。
会場にいた誰よりもトークが上手でした。テキパキしてた。
自分にないものを持ってる人は素敵です。

3. Web Designing編集部 馬場様の話

フラフラしてた。(すいませんw)
独特の雰囲気をもった人でした。Flash以外にもCodeやDesignの話などWEB全て把握していないといけなく、トレンドを発信していく人の目にProgressionを始めFlashのActionScript3.0によりライブラリ周りの重要さを語っていました。

4. BeInteractive!様の話

きた!って感じがしました。偉大なる父。
Spark Projectの管理者。
日本のFlashコミュニティや技術トレンドはここから発信されているでしょう。
しかもこの記事を見たときにかなり感激。一つ一つのプロジェクトを見守ってくれている。
ボクみたいにHTML,CSS,JavascriptばかりやっていてこれからFlashをやろうとしている人にとってProgressionとそうめんの絡みはとても期待しています。
いずれボクもコミットできるようにガンバリマス。

5. trick7様の話

ブログいつも見てます。
とても楽しいブログを書いてくれます。そしてとても楽しい人でした。
思ったよりも若くて正直嫉妬します。しかもモチベーションが高すぎる。
trick7とは将来的に自分が独立してつくりたい7人のユニット名らしい。

  1. 英語が出来る人(まずこれで視野が世界にあることにモチベーションの高さを伺える)
  2. 数学・物理ができる人 (理系の人ですね。物作りにはかかせない役割だと思います)
  3. お金の管理できる人 (Flasherを始めクリエイターはお金の管理が苦手と。わかるw)
  4. 仕事とってこれる人 (プロとしてこれがないと始まらない)
  5. Progression使える人 (ここがクリエイター部分ですね。)
  6. 場を和ませる可愛い子 (必須です)
  7. 見守るボク (ここがポイント!w)

さらにサーバーサイドとデザイナがいるので、最初に7人から削られるのは7番の自分だなと言ってましたw
(ウチの会社の話だけど結構そろってるなと。1,2とサーバーサイドができる西垣さんはさすがだ思いました。)

6番は永遠の課題です。男社会なのかな・・・
いや、かわいい子いるんだけど、男女比がね・・・

6. 龍球インク松竹様の話

沖縄から。サイトのトップがすばらしい。
ボクもこんな感じの日記をMixiでかいた事がある。
みんな????って反応だった凹○

7. [対談] Adobe 西村様 × 1→10 design長井

制作会社の人の話を聴けるチャンスだなと思いかなり集中して聞いた。
自分の作ったフレームワークとProgressionの違いを元にProgressionの説明をしてくれた。
最終的な結論は「自分で作ったものは糞」だということ。
この感覚わかる。ボクはjQueryに出会って同じ気持ちになった。

でもこれがあったから自分の本当にやりたいことが見えたんだよね。
いい意味での挫折でした。

先も書いたけど「表現に集中できる」という言葉はクリエイターが技術を身につける際に見失いがちなポイントであると思うのでここを大切にしていることに感銘をうけた。

また「会場のスピーカーパソコンの音がでない」というハプニングがあり、すぐに西村さんが自分のマイクをパソコンのスピーカーにあてたときに「できる!」って思いました。
あとは、随所にAdobe製品の話を織り交ぜる。FlashDevelopの話(ProgressionのASDocがしっかりしているのでFlashDevelopで開発するときのコードヒントがすごく便利!的な話)がでてきたときにすぐにFlexの話に持っていったりするあたりはさすがだと思った。
Flexにもこの機能を取り入れて欲しいとしっかりと要望として言われちゃってたけど。

8. Progression 3 ロゴ制作者 藤永様の話

短い時間だったけどロゴに込められた意味。裏テーマなどを言われたときに、とても関心してしまった。

「日本」というテーマに作成されたロゴは

  • 白銀比
  • 進行を意味する矢印
  • キーフレームを意識したポイント(日の丸ともかけている)
  • 黒子的な存在という意味での墨色
  • 隠されたPの字
  • フォントはソリッドなゴシック体に長体をかけてバランスを取っている。
  • (首を傾けるとProgression御殿になるという裏テーマもw)

これだけの意味をあの型値に込めるクオリティ。理論と感覚の総合でセンスを問われるのだと感じた。

9. 制作者taka:nium様 機能ツアー

これがメイン。冒頭で少し説明したし、公式見た方がボクの文章より素晴らしいと思うので割愛。
しかしほんとに分かりやすく説明してくれた。

10. [対談] 制作者taka:nium様 × undefinedむらけん

自己紹介を3回。完璧に覚えた!w

amanaを制作されたむらけん様の話。
Progressionのシーンという概念とシーンのイベント管理が素晴らしく、それが全て。

実際にamanaやundefinedのサイトをみてこれらがめんどくさいんだけど大切かがわかった。

ちなみにプレゼン用のSWFが格好良すぎた。
undefinedで使っていたエフェクトでページが切り替わるんだけど、最高。

http://yugop.com](http://yugop.com” target=”_blank)の文字がランダムにでるエフェクトもそうだし、[http://www.roxik.com/の3DもそうだけどFlasherは自分エフェクト持っておくといいなと思った。
アーティストやスポーツでもそうだけど、特色ってやつですね。
「何色にも染まらない」アプローチはデザイナにはよくある話なんだけど、「自分色に染まる」ことはアーティストとしては必要不可欠な要素であってもいいと思いました。

とにかく長くなりましたが

長くなりましたが、色々まとめると以下の3点でかなり有意義なイベントに参加できたと思います。

  1. Progressionが分かった。
  2. イベントというものがどんな感じか分かった。
  3. 他の制作会社の雰囲気や考えていること、モチベーションなどが分かった。

まず、いわずもがなProgressionは勉強したいと思います。というかFlashの他の事をやりたいのでProgressionでさくっと乗り越えたいと思います。
贅沢かもしれないけど、こういう気持ちにさせてくれるフレームワークは最高だと思います。
外の制作会社と一緒にやったりするときにProgressionが共通言語になるかもしれない。
会社でも作業の分担がとても楽になると思います。

イベントもまた機会があったらいってみたいと思います。
こんな素晴らしい会に参加しない手はないね。
みんなのプレゼンの資料がかっこ良かったし、物を作る事、発表する事のエンドまでしっかりと作っているのは「さすがプロ」だと思います。

あとは他の制作会社が分かったという事。
みんなモチベーションたけーっす。
ウチの会社で「精神と時の部屋」が欲しいっていうとほとんどが変態扱いします。
でも実は一線で戦っている人たちはみんな精神と時の部屋にこもりたくて仕方なくて、みんながみんな見えない頂点に向かって日々仕事してんだなーってのはグッと来ました。
そしてみんなドラゴンボール世代なんだなとw
自分もみんなと肩を並べて戦っていけるように頑張ろうと思いました。
自分のめざしている姿が間違っていないことが分かったことだけでもこのイベントにきて良かったと思えた。

よーし、「明日から」頑張るぞー。

那須をもっと楽しむタウン情報サイト|Nasunavi

会社の同期、Yくんこと渡辺祐樹くんが独立して立ち上げた会社Re:designのお仕事を手伝わせていただきました。
Yくんはおとなしそうな風貌からは想像できないほどアクティブです。
たとえばこの上で流れてる動画。このベースがYくんです。バンドやってCDだしてます。
そういう姿にかなりインスパイアされてきた自分ですがこうやって一緒に物をつくれたことが嬉しいです。

那須をもっと楽しむタウン情報サイト|Nasunavi

Link : http://www.nasunavi.info/

Nasunavi

ボクがやったのはサイトの肝となる地図のところ。
あとはブログから地図を投稿できるようにMovableTypeを拡張しました。
その他技術的なところのサポートは結構できたんじゃないかな。綺麗なサイトになってよかった。

Credit:
Planning / Design / HTML Coding / Movabletype : Yuki Watanabe (Re:design)
Director : Isamu Masuko (Re:design)
GoogleMap&Movabletype Development : Kotaro Imai (HOKYPOKY.)
HTML Coding : Daisuke Iso (Re:design)

このサイトは那須のポータルなんだけど、Yくんがいろいろ営業回ってる姿を想像すると涙で画面が滲みます。結構な数取ってきてることにびっくり。
みなさんも今年は那須にいってみよう!Nasunaviをみて面白そうな旅行計画たてよう!

Nasunaviをよろしくお願いします。

共感覚

CDATA[[http://www.myspace.com/80kidz

justiceみたい。最近はこういうタイトなリズムが好き。又は変拍子。

裏拍が嫌いな訳ではないけど、表拍の曲の方が好きかな。
歩いていくようなリズム。

基本的に2で割れるリズムが好き。
崩しやアクセントでいれてくる3連とかはアリだけど。

だからシャッフルとかレゲエはあんまし好きじゃないな。

あとはこないだ話してて自分は奇数、偶数だと偶数の方が好きみたい。
本能的には偶数好き。というか気持ちいい。でも奇数の良さもすごく分かる。
ボクの中では偶数が男で奇数が女。偶数は寒色で、奇数が暖色。

どんどん話がそれるけど、ボクは数字に色がみえる。

0が黒
1が白
2が黄色
3が緑
4が水色
5が赤
6が黄緑
7がオレンジ
8が青
9が緑

0,1はなんとなく黒,白ってわかるとおもうよね。
2が黄色なのは4が水色、3が緑だからもう少し青が抜けて黄色。イレギュラーではある。
3が緑なのは「み」どりだから。ちょうど2と4を混ぜた色。
4が水色なのは「し」という音の響きから。
5は赤。これはなんでだろ。なんとなく。
6は2×3なので黄色と緑 -> 黄緑。
7は2+5なので黄色と赤 -> オレンジ。
8は水色+水色なので濃水色 -> 青。
9は3×3なので3よりも濃い緑。

10とかはシマウマ模様にみえる。
きっとこれは1と0が隣り合ってるからシマに見える。
]]>

Quicksilverのショートカットでアプリを選びつつ開く

会社の人がQuicksilver使いだした。
WEB制作現場ではHTMLを開きたいアプリがシチュエーションによって違う。

たとえばSafariで開いたり、Firefoxで開いたり。
あとは編集用にDreamweaverで開いたり、エディタで開いたり。

DockやFinderに登録してドラッグ&ドロップすればいいんだけど、デュアルディスプレイとかにしているとDockが遠かったりでなかなか不便。

そういうときにQuicksilverを使えばショートカット一発でお望みのアプリから開く事ができる。

作業の概要は以下の通り

  • Quicksilverの環境設定でアドバンス機能が使えるようにする
  • CatalogタブにてProxy Objectsのチェックを入れる(9/2追記)
  • トリガーを登録
  • トリガーにショートカット割当

ま、これだけなんだけどね。

環境設定でアドバンス機能を使えるようにするには以下のスクリーンショットのようにEnable advanced featuresにチェックをいれてQuicksilverを再起動。

環境設定の右上のタブからCatalogを選択し、Proxy Objectsにチェックをいれる。(9/2追記)

トリガーを設定。環境設定の右上のタブからTriggersを選択。

下にある+ボタンから新しいトリガーを追加
今回はSafariで選択するショートカットを作成する。

Finder Selection
Open with
Safari

このFinder Selectionというのが出てこないひとはEnable advanced featuresができてない。のでもう一度頭から挑戦してね。

Trigger列の所をクリックすると下のようなウィンドウが横からにょきっとはえてくる。
ここでHotKeyを割り当てれば完了です。
ボクはShift+Ctrlであててます。他のショートカットとなかなか被らないし、結構押しやすいので気に入ってます。SafariなのでS。

あとはScopeタグを開いてEnabled in selected applications:からFinderを登録しておくとFinder以外では効かなくなるのでさらに便利。

ショートカットあてたいアプリの分登録しておくといいですよ。
アプリケーションの頭文字で統一するとショートカットも覚えやすい。

関係ないけどハイスタとハスキンが懐かしくていい。

やりたかったことできてないこと

  • 料理したい。(ビーフシチューを作ればと言われた)
  • ドライブいきたい。(つれてってもらう約束はした)
  • 髪きりたい。(だいたい思ってから2週間以内にはいつも切ってる)
  • ダイヤモンドほしい。(大分先の話)
  • ジャズバー行ってみたい。(絶賛先延ばし中)
  • こんなとこか。括弧の中が言い訳っぽくなってるけど。

    土日は基本的に寝てた。友人と酒飲んだりダーツしたりした。
    ダーツのパーティーゲームがめちゃおもろかった。
    あとは仕事の話とか結婚の話になった。いや、まじ年とってるぜ、俺。
    今の会社いればそんなこと感じないんだけどね。冷静に考えれば25だよ。

    そして、先週は全然元気なかったな。頭の中がごちゃごちゃしてて最悪だった。
    今週からはそういうのなくしていきたいね。

    とりあえず目の前にあるものを一つ一つクリアしたい。
    やりたい事だけをやれるようになりたい。