宇都宮ウエブ制作所

正宗です。ついに出ましたね。Adobe Creative Suite6。
月額5千円（CS3以降を持ってる人は最初の一年間は月額3千円のキャンペーンもやってます）で使えるAdobe Creative Cloudという目新しいライセンス形態も話題となり、購入を検討しているクリエイターや企業も多いのではないでしょうか？
ちなみに私は悩んだあげくCreative Cloudにしました。
うちの制作所単位では、 Design & Web Premium+After Effectsあたりがあれば十分なんですが、特にAfter Effectsはそんなに最新版買ってもまだ使いこなせない機能のほうが多いですし、さらに私個人としてはFlash、FlashBuilder、Fireworks、Dreamweaver、とこの4つさえガチ最新であれば業務のほぼ全ては作業可能なため自分のAdobeIDでCreative Cloudにする必要があるのかと言われれば実はあんまりないんですよね。
なので私はWeb Premiumのアップグレードライセンスを購入して、実際により多くのAdobe製品を使いこなしているうちのデザイナのみCreative Cloudライセンスにする方法のほうが合理的なので、それに加えて自分がCreative Cloudにする必要があるのかをずっと悩んでしました。

でも、私もCreative Cloudにしちゃいました。理由としてはやっぱり新しいもの好きなので最新機能が使いこなせなくてもいつまでも最新版を追いかけていたいことと、あこがれのAdobe製品使い放題！なことと、実際問題としてAdobe製品はうちのソフトウェア資産なのでそれが何世代までアップデート出来るのかなど面倒な運用管理を考える暇があればそのぶん明確に常にソフトウェアを最新版に保てる今回のライセンス形態はかなり興味があったからだというのが大きいです。
何より、クリエイティブ系ツールのアップデートってワクワクするんですよね。自分の腕が上がったわけではないのに、何かこう、新しいもの生み出せそうで。

というわけで、 さくっとCreative Cloudを購入しましてですね。一番気になるのはやはりFlashCS6でもProgressionが使えるのか！？です。
結論から言いますと使えました。
全く、何も、問題なく、普通に、使えましたよ。

以下、ごくごく普通にインストールメモです。

---

2012/5/12追記

すいません、現時点で私の環境で少し問題が発生しました。記事の最後に追記しています。

---

この投稿の続きを読む »

正宗です。ものすごく今さらな事を知ったのでおおはしゃぎで書き留めておきます。いかに今までまともにJSDocを書いていなかったか。

私が主に JavaScriptを書くときに使っているWebStormでJSDocをきちんと書くようにすると、JavaScriptの型をなかなか強力にサポートしてくれるようになりました。コードの補完機能なんかもかなり精度が上がってくるので、結果的にコーディングも速くなるのではないでしょうか。
私は特に普段はActionScript3を書く機会が多く、ご存じのとおりActionScript3は型を明示できる言語なのでFlashBuilderやFlashDevelop、FlashCS5などのIDEに備わっている補完機能に頼り切ってコーディングしているため、今まではJavaScriptで厳密に型を明示できないことで自分のスペックの低さによってコーディングが遅くスペルミスも多いという弱点となってしまっていたのですが、WebStormがJSDocをここまでサポートしてくれていると、普段からコードにドキュメントを残すことで型の整合性をチェックできつつ補完の精度も上がっていくという、まさに一石何鳥も得たりという思いです。これには野鳥愛好家も黙っていられないんではないでしょうか。

あと毎度の事ながら前置きですがこの記事ではJSDocの書き方は扱っていません。あくまでJSDocに型情報を書いていったらどこまでWebStormが補完してくれるか、だけ実験しています。 

この投稿の続きを読む »

まさむ寝です。間違えました。正宗です。眠は春いですね。

Flashのタイムラインアニメーションはなんとか触れるんだけどActionScript3は怖い、ましてやトゥイーンライブラリとかトゥイーンエンジンって何？という人向けに、ぜひとも一回Tween24というトゥイーンライブラリを使って試しに遊んでみてほしいと思って記事を書いてみました。
タイトルでノンプログラマー向けと書いていますが、ノンプログラマーとはつまりプログラムを書くことが得意でない人全般を指していますが、楽しくトゥイーンを作る話しですので特にWEBデザイナーさんに読んで欲しいと思っています。
以下トゥイーンライブラリを含むActionScriptクラスライブラリの事をライブラリと省略して書きます。Flashのライブラリウインドウのライブラリとは別ものとして読んでいってください。 

誤解を恐れずものすごく断定的な言い方をすれば、Flashを苦手と感じている人の多くはタイムラインアニメーションと比べるとActionScriptが難しいと感じていて、ましてやライブラリなんて難しすぎて使えないんじゃないかという印象を抱いている人は少なくないかと思います。
僕の個人的な考えとしては、タイムラインは直感的に使うのに非常に優れたものなのでそれと比べると確かにActionScriptは慣れないと難しいものではあると思います。少なくとも僕は慣れるまでは難しかったです。
さらにそのActionScriptを駆使するライブラリという奴は難しいものの親玉みたいに考えていました。
しかしながら実際のところはライブラリはほとんどが難しい事を簡単にする目的で作られたものであるため、ActionScriptの難しいところを簡単にしてくれます。

その中でも特に、Flashのモーションを制御する事に特化したライブラリ、Tween24は使いやすいことは言うまでもなく「使ってて楽しい」ライブラリでして、今までこういうActionScriptのライブラリと無縁だったノンプログラマーな方々にもこの楽しさは是非とも体験して貰いたい！と思って紹介記事を書いてみました。

最終的にTween24を深く知るようになるためにはActionScriptの知識が必要ですが、とりあえず動いて楽しいレベルくらいまではActionScriptがわからなくても体験できると思います。
この記事でもActionScriptについては出来るだけ「何故そうなるのか」の説明を省いてTween24を動かすことだけに特化して紹介してみたいと思います。
この春からWEB系クリエイターになった新人さんや、ほかにも今さらFlashをいちから勉強したくない人にもおすすめしてみたいです。

目次

1. この記事が対象としている人
2. 用意するもの
3. ブックマークしておきたいURL三傑
4. さっそくライブラリをダウンロードしよう
5. Tween24とは？
6. はじめてみよう
7. 動かすものを作ってみる
8. とりあえず動かしてみる
9. コピペサンプル3つ
10. 奥義、自動補完とメソッドチェーン
11. おまけ：自動補完がきかない！？

普通なら一番最初にくるはずの「Tween24とは？」「はじめてみよう」の前にいろいろと能書きがありますが、いきなりはじめる前に自分が昔ライブラリを使い始めるまでに敷居が高いと感じてたところをいっこずつ潰していきたいと思います。

この記事が対象としている人

Flashはあんまり得意じゃないな〜とは思っているけど、とりあえずタイムラインアニメーションくらいは触ったことある人。
他にも一回くらいはActionScript3を勉強しようと挑戦してみたけど挫折したことがある人。
もっと限定的に言うと、うちのデザイナーに説明する気持ちで書いています。

僕がノンプログラマーにTween24をおすすめしたい理由は主に3つあります。

1. ActionScript3ぽくないすっきりした書き方！
2. addEventListenerとおさらばできるかも！？
3. とにかく使ってて楽しい自動補完

理由についても後ほど説明を書きますが特に過去にActionScript3を難しいと思った人にTween24はおすすめしたいです。

この投稿の続きを読む »

「これくらいのもの、ちょちょいと見繕えばいっかー」と毎回作ってた時間よ、戻れ！
華やかさはないですが、毎回サイトデザインに登場するベテラン脇役のようなパーツ達。私が現在Fireworksの共有ライブラリに入れてるものを紹介します。

1. 指カーソル
   ロールオーバー時のデザインの上に乗せると、説明しやすい。
   

   指カーソル

2. ちっこい矢印
   自分の気に入った大きさ＆角度のものをイン。サブ扱いのメニュー（例：プライバシーポリシーなど）に使用。
   

   ちっこい矢印

この投稿の続きを読む »

丸坊主なのに寝癖が付く男、正宗です。前回の記事「Actionscript3erが覚えるJavascriptでのクラス開発まとめ」でjavascriptをActionscript3ライクに書く方法をまとめてみたので、今度は練習がてらHTML5をさわってみました。

WebGL版です。

画像クリックすると別ウインドウで開きます。
うまく動かない場合はWebGLを使わない素のCanvasレンダリングも作ってみましたのでこちらのリンク先を参照してください。
スクロールで3D空間をうねうね動く的なことがやりたいんだろうな、って思ってもらえたらうれしいです。ちなみに背景には旅行の思い出の写真をあしらって、ナイスな感じに仕上げました。
ソースは適当にほじくって見てみてください。

今回は、はじめてHTML5を触ってみた中でわかったことを書きたいと思います。
この投稿の続きを読む »

カレーうどんが好きです。今日のお昼はカレーうどんでした。正宗です。
今日はJavascriptでクラス開発をしてみたいと思います。
冒頭のカレーうどんは関係ないですね。何かいわなきゃと思ってつい好物を出してみました。
ご存じのとおり、Actionscriptはもともとバージョン1の頃はJavascriptとほぼ同じ言語であり、つまりAS1の頃のクラス開発がそのまま使える形となっています。

そこでJavascriptでクラスを作ったりするときに「あれ？ASだとこうやるやり方、JSだとどうやるんだっけ」ってのを減らせるように、完全に個人的な備忘録を作ってみました。自己流なうえにオレオレ規約ばっかりで恥ずかしい限りですがせっかく作って公開したのでなんらかのお役にたてばうれしいです。

Javascriptでのクラスの作り方は本当にたくさんの方法がありますが、その中で僕が一番馴染んでいる書き方だけを勝手に選んでのせています。
さっきふと思い立ってやった方法をそのままばんばんのせている感じです。
あと、JSとの類似性を浮き上がらせるためにASにはあえて型を宣言しないで書いています。
ASやJSの綺麗なコードの書き方ではなく、あくまでもASに似せたやり方でJSを書いていく方法を探った記事ですのでご了承ください。
あと、技術書でも何でもなくあくまで個人の備忘録ですので恥ずかしながら盛大に間違えている箇所がたくさんあるかと思います。その場合間違いは常に正していきたいのでご指摘頂けると大変嬉しいです。
ほんと僕のブログ間違いもおおいんで前置きも長々となってしまってすいません。
この投稿の続きを読む »

机の上が散らかっている人は、頭の中も散らかっている。— 佐藤可士和 談

机の上も絶賛散乱中、典型的ダメなデザイナーの宇都宮頼子です。
今回から始まった【ダメデザイナー救済！】は、基本ズボラな私が、いつかみんなに「こいつデキる・・・！」と言わせたい、そんな思いを胸にコツコツ溜まってきた小技をご紹介していくコーナーです。

twitterのタイムラインで流れてくる「ココとココの頭位置が微妙に違うのは意図的！？」「この端数は何だ？？」などなど、コーダー＆プログラマさん達の深夜のつぶやきは耳が痛い、耳が痛いよぅ。

今回はFireworksのシンボルをつかって、コーダー＆プログラマさんもニッコリ間違いなしのステキな素材作りを学びましょう！

この投稿の続きを読む »

普段の仕事で「あ、これはブログに書き留めておこう」と思ったことの半分以上は、仕事の忙しさを理由になかなか書くことが出来なくて、それだけにこうして休日の夜中でもちょっとでも時間に空きがあればブログを書けることがどんなに嬉しいか。
妻の高校の頃のジャージがやけに似合う男、正宗です。
今日は、ActionScript3のExternalInterfaceを使ってJavaScriptと連携する際の、普段から気をつけていることをまとめてみたいと思います。
サンプルのソースはこちら、githubに置いてみました。
この投稿の続きを読む »

前編の続きです。
この投稿の続きを読む »

最初ぼくPixelBenderのこと「pixel bLender」と勘違いしていました。
証拠
証拠その2
僕、得意げになって何か言ってますね…。終始間違いの多い男です。
僕たちの失敗。こんばんは。森田童子です。嘘です。正宗です。

さてさて、今さらながらPixelBenderについて勉強してみました。PixelBenderって登場したの確か3年以上も前ですよねえ。
普段から情報共有が 盛んなFlashにおいて、僕が今まで3年もPixelBenderを使っていなかった理由はひとえに「PixelBenderが何をするものなのかわかりにくい！」からでした。
PixelBenderを使うとどうなるのか、Flashのどんな場面で使えるのか、どうやって使うのか、いやいやそれ以前の問題でただひたすら「PixelBenderが何をするものなのかわかりにくい！」のでした。
もちろん、Adobeの告知不足とかそういった事が言いたいわけではなくて、僕のスペックではPixelBenderはわかりにくいからとっつきにくかった。というお話です。

で、勉強してみてわかった結果は、「PixelBender、かなり使える」ということです。
簡単に言うとFlashの処理能力が別次元で向上します。
おおげさですがおおげさでない表現として「Flashの処理速度という概念を無かったことに出来る」ほどのパフォーマンスです。
「別次元」とか「処理速度という考え方を無かったことに」というのは、太字にしたのは煽りでもなんでもなく実際に本当に処理方法が違うからです。これに関しても出来るだけ簡単に説明します。
いったんサンプルを見てください。

ウエブカメラがあれば接続の許可を求められると思いますので許可してください。
ウエブカメラがない、あっても許可しなかった場合は、僕が今年の夏にバラ園にいったときの思い出の写真がかわりに表示されることになると思うので、そういった悲しい事故がないよう、是非ともウエブカメラを使って遊んで頂くことを強くおすすめします。

マウスをうごかしてもらうとわかると思うんですが、昔からよくある、水面の波紋のような画像処理を効果に加えたサンプルです。
DisplacementMapFilterとかで手垢がつきまくっているので、アンテナの高い人には今さらなサンプルです。
ここで見て貰いたいのは、処理のほとんどをPixelBenderにまかせたことによる処理速度の安定です。

サンプルのソースコードはこちら。
https://github.com/masamunet/blog_samples_pixelbender_practice

ソースコードをみてもらってもわかるように、基本的に僕はなにもしていません。処理のほとんどを外部のPixelBenderファイルに頼っています。
具体的にはこちらのソースをほとんどの部分で使用しています。
僕がやったことと言えば、もともとDisplacementMapFilterで処理していた部分もShaderJobを用いてPixelBenderで行うように変更したくらいですが、そのPixelBenderもこちらの記事を参考にしてあります。
このように、PixelBenderの概念を一旦理解したら、あとは自分でオリジナルなPixelBender処理を書くもよし、海外にあるいろいろなPixelBenderのファイルを（ライセンスに従って）使いこなすも良し、いずれにせよ処理速度という表現の枷からかなり自由に解き放たれるPixelBenderは是非是非習得すべき楽しい技術だと思います。

ちなみにPixelBenderの習得にあたって参考にした本はこちら。

この本の第9章にPixelBenderについて書かれています。
だからこの本以上のことはこのブログに書かれていないのでこの本を読んだ方はあんまり期待できる記事ではないと思いますが、PixelBenderについて僕なりに理解したことをまとめてみました。

PixelBenderはそんなに敷居の高い技術ではないです。
実験レベルならすぐにはじめられて、効果は非常に高い（なにせ処理速度が別次元になるので）技術なので、ぜひともわかりやすく説明出来るようにまとめられたらと思います！
この投稿の続きを読む »