Parallax the easy way

It occurred to me a while back that it would be pretty easy to make parallax sites with Edge Animate – all you’d have to do is add a little code to sync up the browser’s scrollbar and the animation timeline.

So I whipped up a demo that both demonstrates and explains how to do it. It speaks for itself, have a look:

As always, questions/comments are welcome!

5分で済む Firefox OS アプリ開発 with PhoneGap / Cordova

話題を集めているFirefox OSですが、PhoneGapを使うとアプリ開発を5分でできますよ!嘘じゃない。方法はこんな感じです。

1. PhoneGap/Cordovaアプリをつくる

上記の cordova prepare コマンドで、Firefox OS向けのWebアプリが用意されます。

(PhoneGap/Cordovaとは何か、そして初め方についてはこちらをご参照ください!)

2. Firefoxを起動
pgff-1

3. 「about:app-manager」を開く

そして「Add Packaged App」で、アップマネージャにアプリを追加します
pgff-2
Continue reading

This is how much multiple cursors rock

cursorsLet me take a moment to gush over how awesome multiple cursors are.

So I’m sitting here editing some Javascript, which was auto-generated by Photoshop, and looks like this:

And in order to stay sane, I desperately want to clean up all those single-use temp variables, so it look like this:

The only problem is, there are many dozens of lines of this stuff, all with slightly different variable names and methods being called. So I certainly don’t want to change each one manually, and hacking out a find/replace regexp would take longer than just rewriting it.

Multiple cursors to the rescue! The key is to remember that with multiple selections, if you use key shortcuts for jumping to word or line boundaries (like option+arrow keys on mac or ctrl+arrow on windows), they get applied individually for ever cursor. So you can carry out lots of parallel edits even when the target words are different lengths and in different places.

Here’s what it looks like:

multcursor

Neat huh? Remember, selecting multiple instances of the same word is ctrl+B / ⌘+B. Apart from that I’m just copy/pasting and jumping the cursor to word and line boundaries.

 

Creative Cloud 2014年 バージョンのFAQ

このブログを読んでそうな人ならもう知っていると思いますが、先日Adobeのアプリそれぞれの「2014版」アップデートがリリースされました。ので更新版についていくつかの質問をピックアップしようと思います。

appsQ: CCアプリが2つになったけど?

A: CCアプリをインストールしてもCS6が消えないと同じように、先日のCCアップデートのアプリが今までのと別にインストールされます。理由はいくつかあります:プロジェクトの途中にメジャーアップデートをしたくないユーザもいますし、万が一更新版がバグったら前バージョンを使える安心もあります。また、アップデートの内容によって別インストールが必要な場合もあります。(InDesignの.INDDファイルフォーマットが変わった、などの理由で)このため、今回のメジャーアップデートをインストールしても、以前のCCアプリが残ります。

Q: 「CC 2014」とは?CCとどう違う?

A: バージョンを区別するためのラベルです。クリエイティブクラウドの最大の特徴は、各アプリが常に少しずつ更新されることです。しかしそのプロセスがずっと続くと歴史的なバージョンを区別する必要が出てきます。例えば「Photoshop CCを学ぶ」という本があったら、それはいつ頃のPhotoshop CCを指しているかを明確にするためなど。(バージョンの区切りがないと本を書く人にとってやりづらいだろうし。)そういった区別のため、今回のメジャーアップデートに「2014」のラベルが付きます。

つまり、「Photoshop CC 2014」とは「Photoshop CCの2014年版」と言うことで、正式な製品名は相変わらずPhotoshop CCです。

Q: じゃ、来年はCC 2015が出るわけ?

Continue reading

grid-banner

マルチカーソルと遊ぶBracketsとEdge Code

Edge CodeBracketsが最新版で対応しましたマルチカーソルが楽しくてたまらない。というより、今までずっとカーソル一つでコーディング出来たのが不思議に感じる。

何ができるかと言うと、見ればわかる:

良いでしょう?使い方の基本:
➔ エリア選択は Alt+ドラッグ(Macなら ⌥ )
➔ マルチ選択は Ctrl+クリックまたはドラッグ (Macなら ⌘ )

他にも色々ある。例えば「hoge」を選択して、Ctrl+b(⌘+b)を押すと次の「hoge」も選択される。キーショットカットの説明までご参考を。

ちなみにEdge Codeのプレビュー8の詳細はアドビジャパンのADCにあります!

Adobe Voiceへようこそ

新製品の「Adobe Voice」というiPadアプリが公開されました!

何ものかというと・・・書くより見せるほうが早いので、当ツールで作った紹介ビデオをどうぞ:

「Adobe Voice」はどういうツールかと言うと、まさに、上記のようなビデオを作るためのツールです!w 直接リンクはこちら

しかも無料。現状ではiPadのみ。UIは英語ですが、読む必要がないほど使いやすいので試してください。入手はこちら。面白いのを作ったら教えてください!

追加点: Voice一番好きなところを書き忘れた。ビデオに入れる画像やアイコンをアプリ内に検索出来るが、「利用可能」なものしか出てこない、そしてビデオで使われる画像のクリエーターへの引用が自動的に追加される。なので他の作者の著作権をちゃんとリスペクトする制作ツールである。すてきじゃないんですか?

grid-banner

Project Parfait、公開!

デザイナーがPhotoshopでカンプを作る。そしてエンジニアに渡し、HTML化やアプリ化が始まる。だがカンプ通りのデザインを実現するためには、フォントサイズ、グラデーションのRGB値、オブジェクトの高さと幅、XY座標などを、Photoshopからコードに写す手作業が必要だ。まるでコピペ大会になる。

こんな経験ない?

あるあるの方に、ちょっと面白い発表がございます。Project Parfait (プロジェクトパフェ)は、PSDから簡単にデザインの詳細を取り出す目的のWebサービスである。ブラウザベースなので、Photoshopを開く必要すらない。

絵で言うと、こんな感じ。

parfait-0

触ってみたら大体伝わると思うが、軽く機能紹介をしたいと。

初め方

  1. projectparfait.adobe.com を開く。
    参考用のデザインが出て来るが、自分のPSDで試す方が面白いので手元にあれば…
  2. 「Upload PSD」ボタンを押す。
    アドビIDのログインが出てくる。アカウントがなければ作ってください。(無料)
  3. PSDファイルをページにドラッグドロップ。
    サーバ側の処理が終わるとPSDがブラウザで表示される。

機能紹介

parfait-11.デザインのパーツをクリックするとサイズとXY座標が表示される。選択されたパーツの色、フォント情報、CSSスタイルなどが右側の「Styles」タブで表示される。「Copy CSS」「Copy Text」リンクで、当パーツのスタイルまたはテキストがクリップボードにコピーされる。
Continue reading

ビデオと同期再生するHTMLアニメーション

この間、パララックス・ビューというsupercrazy Japanese music videoを楽しみながら、組み込みビデオと同期再生するHTMLアニメーションを、ビジュアルで作れないか、と思いました。Edge Animationでやってみたらそう難しくなかったので、やり方とソースコードをシェアします。素材とデモは下記ですが、まずはチュートリアル。

※ ビデオを作ってからコードをちっと更新しました。詳細は投稿の最後に。

そしてリソースはこちら:

Continue reading

Animated HTML that syncs with video

A while back many of us saw this supercrazy Japanese music video, which shows how awesome it can be for HTML animations to play back in sync with an embedded video. But hand-coding this kind of content wouldn’t be much fun, so I thought I’d share how to visually author similar effects with Edge Animate. For the code and source see below, but first here’s the video tutorial:

Note! I made a few code updates since finishing the video – details at the end of the post.

If you want to try it out, below are some resources to get you started: Continue reading

grid-banner

Brackets + TypeScript:
どうやって?編

最近BracketsTypeScriptで遊んでいます。何でその組み合わせを選んだかは前回のブログで書いたので、早速技術的な話に飛び込もう。ちなみにBracketsだけじゃなくてEdge Codeでも通用します。そんでは!

Brackets+TypeScript+ちゃんとしたコードヒントへの近道

1.必要なパーツを揃える

  • 最新版のBrackets(最新版に依存するわけではないけどとりあえず)
  • ターミナルに「npm install -g typescript」でTypeScriptコンパイラをインストール。(Node.jsインストール済みが前提)

Continue reading

technical evangelist, Adobe Japan