SSブログ

FreeHand から iPad に向けてパブリッシュ! [FreeHandで行こう!]

【 FreeHandで行こう!】その56 <番外編:FreeHand から iPad に向けてパブリッシュ!>

このシリーズでは、FreeHand の優位性を紹介しています。
FreeHand の情報を求めている方や、Illustrator ユーザーの方にも、お役に立てれば幸いです。

現在、 番外編としてざっくばらんに話を進めています。
初めてお越しの方は、FreeHand をご理解頂くために 総集編か カテゴリーTOP もご覧頂ければ幸いです。

     → FreeHand _総集編はこちら    → FreeHand _カテゴリーTOPはこちら

***


もっぱら、FreeHand からは Flash 形式へのパブリッシュを行って来ましたが、iPad や iPhone では Flash が表示出来ないということもあって、HTML5 への対応も迫られていました。
勿論、HTML5 も現在勉強中なのですが、HTML5自体が開発途上の技術であり、ブラウザ対応にも難があることに加え、私のプライマリーアプリケーションである FreeHand は当然ながら HTML5には対応していないため、制作手法からの再構築を迫られることになり(しかも、まだめぼしいアプリケーションも無いし)、なかなか気の進むものではありませんでした。

そんな折りに、FreeHand で こんなコンテンツを作ってみました。
ASPECT_WEB.jpg

縦横2m強(6000px)、72dpi換算の面積で言えば ほぼ3畳ほどの広さになり、そこに VGAサイズ相当の画像を敷き詰めてあります。
このコンテンツを FreeHand から HTML(5ではありません、4です。)に書き出すと →こんな感じになります。

PC でご覧頂く場合は iframe 越しに表示するように設定してあり、マス目単位にページとして表示します。
(ご参考:当ブログ中段に iframe だけを表示するようにしてみました。<ボタンを追加しています>)

iPad や android デバイスでは、上の画像のような全体表示(縮小表示)からマス目単位の拡大表示までシームレスにズーム出来、縦横自在にスクロールしながらご覧頂けます。
Javascript 変数も FreeHand 内に記述出来るので、画面の余白部分をクリックするとスライドして順番に表示するように設計しました。面白い仕掛けとしては、一番右端にたどり着くと、次は左端に一気にワープします。

操作の状況を YouTube でご覧下さい


タッチデバイスでは、ピンチズーム操作以外にも、ダブルタップでちょうど良いサイズに拡大表示されます。


YouTube も表示出来、パノラマ画像も動きます。PC や android 環境では Flash も動く訳で、もうこれでええやんという気になってしまいました。勿論、HTML5でなければ実現出来ない機能は追々取り込んで行くにせよ、FreeHand からの HTML パブリッシュで、iPad ともこんなに相性のいいコンテンツが作成出来るんですね。改めて驚いてしまいました。
(注:さすがに、今回作成したコンテンツは大きすぎたようで、iPad や android デバイスの貧弱なメモリ容量には負担が大きいようです。YouTubeが、たまに表示出来ない場合があるのはご容赦下さい。今回のコンテンツは100マスですから、実際の仕事に使う場合は半分の50マス(7×7=49)程度に押さえるのが無難ですね。)


FreeHand からの HTML パブリッシュには幾つかのバグ(こちら参照)があるため、これまで積極的には使用してきませんでしたが、幾つかの点(下記参照)に注意して作成すれば全く問題なく使えることも今回再確認できました。

ていうか、FreeHand でなければ、こんなコンテンツ、なかなか作れないんじゃないでしょうか?

縦×横 6000px ですよ! ちょっと常識はずれですよね。他の HTMLアプリでは、とても作る気になれないサイズです(縦方向だけならアリでしょうけれども)。でも、iPad の拡大縮小自在なタッチパネルインターフェースでは、縦横のスライドも自由自在なので、この非常識なサイズのコンテンツが、なかなか良い感じで使えるんですよね。

PC上でも、iframe に表示させ Javascript で制御することで、使い勝手は格段に良くなりました。
iframe 部分だけを表示させるとこんな感じになります。 全体表示はこちらから
ボタンでもいいですけど、先ずは枠内の余白部分をクリックしてください。右端までいくと....

  *iPad では iframeを上手く表示出来ない場合があるようです。ご容赦下さい。iPadの方はこちら

*スクロールバーはズレるから使わない方がいいんですが、見ている場所が分かるように付けておきました。
**スクロールバーでズラシても、移動すると位置調整するようにプログラム修正しました。 20120215
*表示しない場合は別ウインドウでお試しください。ウインドウサイズをマスのサイズに合わせてください。



さて、FreeHand から HTML パブリッシュする際の、幾つかの注意点を記しておきましょう。

・HTMLセットアップから、レイアウトは「レイヤーで配置」を選びます。

・同じく、パブリッシュする画像形式は PNG形式にします。(背景を透明に出来ますから)
 デフォルトは swf だったと思います。swfでは iPad で表示しません。jpg や gif は画質に難があります。
 但し、旧いバージョンのブラウザには、透明PNGに対応していないものもあったようです。

・複数使い回す画像(ボタンなど)は、WEB用に保存したものを外部リンクします。

・オブジェクトは、グループ単位で画像に自動変換されます。上手くグループ分けしてください。

・マスクの中の画像が上手く変換出来ない場合がありますが、グループ化すれば大丈夫です。

・TEXTで表示させる場合はグループにしてはいけません。TEXTボックスのままにします。

・TEXTボックスは少し大きめに作ります。フォントによって表示領域に収まらない場合が想定されるからです。

・読み込み順は下からです。先に表示させたいものは、レイヤー順で下に送ります。

・リンクに Javascript 変数を記述出来ます。例)javascript:void(0);" onClick="--------------; という感じ

・メールリンクは、mailto:---------、別ウインドウは、---" target="_blank というように記述する。

・パブリッシュした html は Dreamweaber の「Word HTML のクリーンアップ」で「ソースフォーマットの適用」を実行するとソースが見やすくなります。

・Javascript プログラムは、Dreamweaber で head 部分に追加してください。

・YouTube は、Dreamweaber でダミー画像と入れ替えて iframeセットに書き換えます。

以上です。


パブリッシュ時、FreeHand でレイヤーを非表示にするとその部分は HTML に書き出されませんから、ボタンなどをレイヤー分けしておけばデバイスに合わせて表示させることも消すことも簡単に出来ます。上の iframe ではボタンを書き出してみました。

ただ、画像ファイル名については自動で割り振られるため、レイアウト変更の度にファイル名が入れ替わってしまう事があり、ブラウザのキャッシュが生きていると画像が入れ替わって表示される場合があります。実使用にあたっては、更新の度にディレクトリ名を変更するなどの対策が必要になる場合があります。

ともあれ、いままで FLASH サイト一辺倒でやってきた弊社サイトも、これをきっかけに HTML版に置き換えてみることにしました。




追記:20120305
下記のコンテンツでは、マウスドラッグ操作にも対応させました。iPad風の操作をお試し下さい。
 
 *ドラッグは、枠内で行ってください。ドラッグ中にマウスが枠外に出た場合は、戻って枠内をクリックします。

 
最初は左方向 ← にドラッグするとページが繰れます。その後は、上下左右にドラッグ可能。クリックにも対応(右半分・左半分に反応)。
端まで行ってドラッグ出来ない場合、クリックすれば次の段の左端に移動します。
*表示しない場合は別ウインドウでお試しください。ウインドウサイズをマスのサイズに合わせてください。


*****


やはり、FreeHand の神通力には凄いものがありますね。
8年も前のアプリケーションなのに、現代の iPad 向けに FreeHand ならではのコンテンツが作れてしまうとは!
これは実務に充分使えそうです。早速、クライアントへのプレゼンテーションに iPad 引っさげて行きます。
やっぱり、まだまだ FreeHand で行けますねぇ!





***

シリーズを続けています。 初めてお越しの方は、総集編か、カテゴリーTOPからご覧下さい。
   →総集編 では、FreeHand の真の実力をご覧頂けます。
   →続・総集編 は、総集編の続編です。総集編と合わせてご覧下さい。
   →FreeHand _カテゴリーTOP はこちら
   →FreeHand_使い方 TOP はこちら
   →FreeHand_INDEX はこちら
   →付録編 では、ざっくばらんな情報をご覧いただけます。
   →Tips編 小ネタ集です。
   →FreeHand VS CS4 では、最新版の Illustrator CS4 と比較しています。どうよ。
   →FreeHand VS CS5 では、最新版の Illustrator CS5 と比較しています。どうよ。どうよ。
   →FreeHand_入門編 Illustrator の作業が、FreeHand ではこんな感じ。
   →FreeHand_番外編 実践的に使える裏技テクニックほか、様々な情報を提供しています。

***



   →FreeHand カテゴリー 一覧はこちら