Posted by & filed under 未分類.

正宗です。JavaScriptの開発のためにと思ってすごく今さらなんですがCoffeeScriptを導入したので、そこらへんをちょっとまとめておきたいと思います。
そうはいっても、既にO'reillyからCoffeeScriptについて本が出ています。さらにそれは作者によってオープンソースで公開されていて、さらにさらにminghaiさんがこちらに和訳したものを公開されております。 
この本を読めば、特に他に何か読む必要あるの?というくらい、CoffeeScriptについては既にまとまった記事がネットでも書籍でも存在しているので、わりかし今回自分はこの記事を書くに当たって今まで以上に消極的だったりします。
みなさんは私が今書いているこの記事のことなんか忘れて、すみやかに上記リンク先に飛んでください。
いちおう自分は、「あれ、ActionScript(以下AS3)でこう書いてたやつ、CoffeeScriptではどう書くんだっけ?」みたいな場面にさしかかったとき、本を隅々まで調べなくてもすむように、CoffeeScriptに慣れるまでのあいだ自分の備忘録的にここにまとめておくことにします。

できるだけAS3とCoffeeScriptとJavaScriptのコードをのせていますが、AS3に関しては説明を簡易にするためpackageや型指定を意図して省けるところは省いて書いています。

Read more »

Posted by & filed under 未分類.

正宗です。
今日はタイトルのとおりFlashみたいにパブリッシュしたら、自動的にCoffeeScriptやSassがコンパイルされて書き出される環境を、WebStormとCakefileを使って構築してみることにしました。
どういうことか順を追って説明しますね。

先ずは次のリンク先を読んでください。
FlashでいうパブリッシュのないHTML開発で、死なないためにやっといたらいいんじゃない的なこと。〜Ctrl+Enter Again〜
スーパー肩パッドさんがF-siteで発表した資料をまとめたものなんですが(俺もいきたかった〜!)ものすごくわかりやすくてものすごくためになります。
公開した瞬間から話題になったので もうすでに読んだ方のほうが多いと思いますが、まだ見の人がいましたらぜひ見でおねがいします。僕は百回読みました(本当は8回くらいかもしれない)。

で、僕の今回のこの記事は、上で紹介した肩パッドさんの記事にインスパイアされて書いた記事になります。上のリンク先の記事がすごすぎて、リンク先を読んだらこの記事は読まなくてもいいくらいなんです。ほんとすごい。

で、僕が最終的に何をやりたいかというと、順番に説明しますね。

  • Flashではflaファイルを作業にあてて、Ctrl+Enterでパブリッシュすることでswfファイルを作って、それをデバッグして最終的に納品ファイルにまとめている
  • あれすごいいいよね。同じようなことがHTML制作でもできないかな 
  • つまり制作はソースファイルで行って、書き出したファイルをチェック用に使い、最終的には納品ファイルとしてまとめる

こういうことがしたいのです。
あとでも説明しますが、こうすることによって得られるメリットは大きいように思えます。
何が便利なのか。
まずパブリッシュと同じような事をするためにCakefileというスクリプトを実行することになります。
このスクリプトにいろいろと処理を書いておけるので、例えばパブリッシュの際に不要ファイルを取り除く、といったことが出来るようになります。
他にもスクリプトで処理できることは色々とできるようになるので開発効率が大幅に上がるのが期待できるんですが、何よりこの記事で売りにしたいのが、CoffeeScriptやSassなどの技術が、日々の制作作業にわりかし簡単に取り入れられるようになること。です。
CoffeeScriptやSassなどはデザイナーさんも注目する、できるだけ試してみたい技術なはずですが、実際に案件に導入しようとなるとコンパイルの面倒くささが障壁となるのか、導入をためらう人も少なからずいると思います。少なくともうちのデザイナーさんはそのようです。

そこで、Flashで気軽にCtrl+Enterを押していたようなことを、HTML制作でもやってしまおう。と。そういう環境を構築しよう。と。
そういう狙いがあります。 

図にすると次のようなことになります。
 0

そしてこのようなことを実現するために、スーパー肩パッドさんの発表された資料を参考に次のように環境を構築してみました。
 1

ちょっとややこしそうだし、手順は複雑で道のりは長いように感じますが、せっかくなのでその環境を紹介したいと思います。

いちおう、記事の売りとしてはCoffeeScriptやSassを導入したいと思っていた人に、実際に業務で使える方法を構築する、というのがありますのでこの記事をきっかけに使うようになった、って人がいるととても嬉しいです。ですが、別にCoffeeScriptやSassを使いこなすのが前提なわけでもありません。
 CoffeeScriptやSassを必要としない人に向けては、そういうのを強要するわけではないので、むしろCtrl+EnterしたらCoffeeScriptやSassがあればついでにコンパイルされてたけど、無いなら無いで別にいい、そういった姿勢で読んでいただけるととても嬉しいです。

あと、いままでCoffeeScriptやSassの導入をしぶっていた人って、コンパイルのたびにコマンドを打たないといけないイメージがあって面倒だと思っていた人も多いはずです。僕もそうです。
今回のねらいのひとつに、WebStormでCakefileを使って処理を自動化する、というのもありますので、この環境を構築するとコマンドは打たなくてもよくなります。 

記事を通して、OSは主にMacを対象として書いています。ですができるだけWindowsでの方法も書いてみたいと思います。
ただWindowsは実際に僕も未検証な部分が多いのでその点はご理解ください。
一個一個はすでに検索すればWebにある情報ばかりなので、つまづいても検索してみると対処方法が必ず見つかると思います。 

あと、内容がプロジェクトの環境を構築するという重大な作業の話しですので、実際に導入する際は完全に自己責任でおねがいします。
実際に僕もこれが完成形ではなくここが出発点で、ここからトライアンドエラーを繰り返して開発効率を高めていこう、という主旨です。 

Read more »

Posted by & filed under 未分類.

FlashとActionScriptをこよなく愛する私が、つまりはFlashすきすきおっさんがXCodeとObjective-Cについて入門しようとしたときにどうしてもつまずいた点を挙げていきたいと思います。実際にはFlashぜんぜん関係ない記事になっていますが。
FlashやActionScriptと比べてあれがないこれがあるとかいうのはナンセンスなのですが、自分が今学習中の開発スタイルでXCodeだとどうやって開発していったらいいのか、同じようにできるところは同じように、同じようにはできないところは違う方法を探りながらやっています。
とにかくXCodeとObj-Cについて初心者以前であり独学ですので盛大に間違えている可能性があります。
さらにどっちかというと人に説明すると言うよりは 自分がつまずいたところをあとで見直すように、完全に自分向けの個人的な覚え書きのつもりで書いています。
それでもいちおうもしかしたら誰かの役に立てれば幸いですので、わかりにくい箇所や間違っている箇所がありましたらご指摘いただけると嬉しいです。

Read more »

Posted by & filed under ワークスタイル.

デザイン&ディレクション担当の頼子です。今回は毛色を変えた話題をひとつ。
私達は夫婦ともにフリーランスで、自宅で作業をしています。
最近よく「子育てしながら、自宅で仕事ってできるの?」と聞かれるので、私なりに感じたことやその方法について書いてみたいと思います。

Read more »

Posted by & filed under 未分類.

FlashでiPhoneアプリ作るの楽しすぎ。
正宗です。

前回の記事でFlashでiPhoneアプリ作ったときのこと書いたのですが、実際の作り方はあえて書きませんでした。
記事内で紹介したリンク先のほうが、両方ともすごくわかりやすくてあえて僕が書く必要がなかったからです。
ところが今度はFlashBuilderでiPhoneアプリを作ろうと思ったとき、ちょっといろいろ壁にぶち当たったことがあったので手順を最初から書いておきたいと思います。
壁というか、とっかかりが最初見えなかったんですね。

例によって例のごとく、なにぶん自己流で「たぶんこうなんだろうな」という状態で書いていますので、間違えている部分やあとあと使えないことがわかってくる部分があったりするかと思います。
その際はご指摘お待ちしていますのでどうぞよろしくお願いします。

Read more »

Posted by & filed under 未分類.

Flashは神。
正宗です。

Flash CS6を使ってFlashから簡単にiPhoneアプリを作る事ができましたので 、今回ハマったポイントなどを書いていこうかと思います。
簡単にiPhoneアプリを作る事ができたと言いましたが、 簡単というより、こう、普通に、普通にFlashを作ったらそれがそのままiPhoneアプリとして書き出された、という感じです。
なのでFlashに関して言えば特別なにか書くところがないくらい自然にiPhoneアプリを作る事ができました。これは凄い感覚でした。

ちなみにはじめて作ったアプリはこちらになります。
iDropCam
iPhoneのカメラを通じてカラーのRGB値を割り出そうというアプリです。
仕掛けは単純なアプリですが使いやすいよう工夫してこしらえましたので、今月(2012/07)いっぱいは無料なのでよかったら使ってみてください。 

Read more »

Posted by & filed under 未分類.

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

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

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

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


2012/5/12追記

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


Read more »

Posted by & filed under 未分類.

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

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

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

Read more »

Posted by & filed under 未分類.

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

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はおすすめしたいです。

Read more »

Posted by & filed under 未分類.

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

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

    指カーソル

    指カーソル

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

    自分の気に入った大きさ&比率のものをイン

    ちっこい矢印

  3. Read more »