Study

北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」(3)

08fes

北海道WEBコンソーシアムの特別イベント「夏祭り(アドビ特集)powered by CSS Nite」。
参加した記録その3。

Adobe AIRで作るRIAのご紹介

アドビシステムズ 西村さん

Adobe AIR紹介するから、みんなもなにか開発してね!という話

Adobe AIR

現在バージョン1.1 ・・・ ブラウザを飛び出し強化した、Web技術で作れるデスクトップアプリ

  • 無償クライアントの活用
  • どのOS・環境でも使える
    これまで開発者が吸収していたOSの違いによる対応をAIRの方がフォローしてくれる
  • Webの技術を使用できる
    HTML / CSS / Flash / PDF / ActionScript…
  • SQLiteでローカルにデータベースを作成でき、オフラインでも使用できる
AIRアプリの一例
  • デスクトップでみかんせいじんを育てる
    (縦横無尽に動き回って気持ち悪い)
  • ガイドのお姉さんと毎日株式について勉強する学習アプリ
  • キーボードを押すと女の人がエアギターでパフォーマンスする
  • リアルきれいなお姉さんが紹介するRSSリーダー
    (RSSリーダーを使ったことない人も、お姉さんが見たくてダウンロード)
  • ホットペッパーお店検索
  • 3DYoutube検索
    (サムネイルリストがWizardlyの3Dダンジョンみたいに並ぶ…うまく説明できん)

こうやってみるとお姉さんビデオ系が多いな みんな女に弱すぎだw

ブラウザアプリ(Flash、Javaアプレットなど)との違い
  • ブラウザが別途必要ない
  • OSを選ばない
  • Flash・JavaScriptの「クロスドメイン問題」がない
    (サーバー上のFlashから別ドメインの外部ファイルを読み込むのは、ちょっと難しいのです)
  • インストールが早い
AIRアプリはどうやって作れるの?

関連ツールページで開発環境を入手する

  • Adobe flex Builder3 ・・・ 本格的な開発ソフト もちろん有料だが最強
  • Flash or Dreamweaver拡張 ・・・ CS3を持っているならまずはこれで
  • Adobe AIR SDK ・・・ 無償提供されている開発ツール(誰でも使える!)
Flash CS3でAIRアプリを書き出すには

拡張機能をインストールすると、上メニューの「コマンド」に
「AIRアプリケーションを作成する」が出てくる

選択して「背景を透明にする」の設定で書き出し

Flashの動きをデスクトップで再現できるようになる

帰ってから調べた 詳しいチュートリアルはここ!↓
Flashデベロッパーセンター(ホットペッパーAPIのサンプルも手に入る)

これからのAIR

Q : もっと気軽に使ってもらわなきゃ AIRはこれからFlashやPDFみたいになるの?

A : 将来的に、AIRはOSに自動でダウンロードされるようになると思います!
たくさんのお客様に負担をかけずに使ってもらえるよ!(西村さん)

AIRギャラリーがオープン 共有公開も可能に

ワークショップ

次世代のコンテンツとして、AIRで何ができるのか、をグループでディスカッション
私とmakiesさんと前に座っていた兄さん二人でグループ

私は「リグレト」のアプリがあったら楽しんじゃないのかな、という話をする

凹み共有サイト「リグレト」 FlashならではのUIがとってもかわいい
でも とっても重い ナイスヘコミ・ナグサメみつけてもすぐ流れちゃう
↑↑じゃあ、AIRならテイストを生かしたままで軽く、ログとれるアプリが作れるんじゃないかな?

…と一生懸命話したら、兄さんたちに引かれたのか、激しく反応が鈍く凹む
兄さんたちの意見 「今のところWebとの強い差別化が感じられない」
makiesさんの意見 「セキュリティ面がどうなっているのか心配」

Hokkaido Fresh Flash

24-7 古本さん

24-7は札幌の制作会社 サイトを何回か見たことがある
SecondLifeで仮想PRオフィスを作ったことがあった たしか
携帯サイトでの送信内容がデータベースを介してPCサイトと同期する、最新のFlashコンテンツについて紹介

※実演が多かったのと、技術的にかなり高度な話だったためついていけず、あんまりメモとれなかった…

サンプルアプリの紹介

携帯サイトに配られたQRコードからアクセス

→画面に数秒ごとに数字が出るので、同じキーをすばやく押す
→スロットがくるくる回って数字が出てくる

上の数字は実はカウンターになっていて、
これまでにアクセスした累計数を表している
データベースで集計を取り、キリ番だった場合は携帯は当たりの画面になる

PCサイト(全面Flash)の方はリアルタイムで現在の状況を更新し続けていて
当たりが出ると画面が変化して他の人にもわかるようになっている

ASライブラリ2.0・3.0

ライブラリの普及で、前述のような高度なアプリを作りやすくなった
逆に計算が複雑になってしまったり、頼りすぎたりするので利用は計画的に

  • アニメーション: tweener / GO など
  • 3D効果: Papervision3D / Away3D など
  • タスク: Thread など
  • フレームワーク: Progression Framework
  • スライド支援: Slides
    (Flashに図形を書き込んだりできる 実際に古本さんはこれでスライドに赤丸を書き込んでいた)
ASライブラリの勉強を深めるには?

Spark Project

Flash製作者のコミュニティサイト ライブラリ共有や情報交換を行っている

最後にさっきのスロットサイトでプレゼント抽選会

会場みんなでスロットカウンターにアクセス!50番ごとのキリ番でプレゼント!
Flashは実際に動くとよくわかる 会場のみんな大興奮

…私?もちろん、またことごとく外れましたとも。


「なげーよ!いつまで続くんだよ!」って人すんません。
次で(たぶん)終わりです。第4弾に続く。

Study

北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」(2)

08fes

北海道WEBコンソーシアムの特別イベント「夏祭り(アドビ特集)powered by CSS Nite」。
参加した記録その2。

Fireworks as phoenix(おめでとう、Fireworks 10周年!)

スイッチ 鷹野さん

Fireworksが大好きな鷹野さん
「Fireworks、WEB制作に特化しててとっても便利だよ!」という話

(三年愛用している私は、使っていない機能の確認やCS4の実装内容を確認してました)

簡単に言うと「72dpiのIllustrator」という感じだが
PhotoShopよりオブジェクトを扱いやすく、Illustratorより軽量

バージョン8までの便利機能
  • アンチエイリアスの制御が可能
    「硬い線」を選択すると縁の線がドット単位に / 透過GIF素材も簡単
  • 9スライス機能
    シンボル化するときに形を保持する場所を指定 / 伸ばしても文字やかどまるが崩れない!
  • 強力なベクターマスク
    あとでいくらでもパス調整可能 / ぼかしもきれいに反映
  • ボタンシンボル / hover状態もプレビューできる
  • Flashより細かいシンボル機能 / シンボルごとに文字など一部要素を変えられる
  • サイズを指定しての画像拡大・縮小ももちろん可能
CS3の便利機能
  • モックアップ作りに便利な機能
    「共有ライブラリ」から各OS用のフォームパーツをすぐ使える
  • ページ機能を実装
    全ウェブページを1枚のファイルで管理
    ロゴ等、全ページ共通のオブジェクトも作れる
    ラピッドプロトタイピング
    各ページのナビゲーションが、クリッカブルマップでつながっているデモページを作れる

PhotoShop、Illustratorでデザイン作成 → Fireworksで仕上げ
理想的なワークフローの完成

CS4の追加予定機能
  • 9スライス機能がシンボル化しなくても可能に
  • ライブグラデーション / グラデーションハンドルを操作中もリアルタイムで色が変わる
    (CS3まではドラッグをやめないと色が変わらない)
  • 角丸の半径を「px」で指定可能 / 拡縮しても角の半径が決まっているので丸みが変わらない
  • テキストの強化 / アンチエイリアスがPs・Ilと同様に!画像テキストがガビガビしなくなった!
  • ものさしツール / カンプ用。
    ドラッグした範囲に 「┣━━━━━ 456px ━━━━━┫」というガイドセットを作ってくれる
  • スマートガイド / Flashには既にあった機能
    ドラッグ中に他のオブジェクトと揃っているか点線で教えてくれる
  • PDF出力に対応
    リンクなどはクリッカブルなまま書き出し / パスワードプロテクション / ハイライトによる注釈追加

macromedia消滅でなくなるかと思われたが(当時は普通にハラハラした)、
ImageReadyと入れ替わりに、しっかり残ったFireworks

Fireworksは今後も役割を与えられて生き残っていくよ!

昼休み

メンチカツパンをかじっていたら、@makiesさんが来場
おとなりに移動

以降、makiesさんの話も参照してね

>> わすれないように. – アドビ特集 夏祭り ・・・他

仕事の関係の営業さんに会う WEBコンの会員だったようだ
部下の人を連れられていたので名刺を交換する 宜しくお願いします…


そして午後の部…

ふとプロジェクタの画面をみると、そこにはなつかしのみかん星人が!!

午後はいったい何が起こるのだろう、
と思わせぶりに第三回へ続く。

Study

北海道WEBコン FESTA 2008 「夏祭り!アドビ特集」(1)

08fes

北海道WEBコンソーシアムの特別イベント「夏祭り(アドビ特集)powered by CSS Nite」。
こういう勉強会にもっと出よう!と参加してきました。

講演の内容をメモしてきたので、4回にわたってレポートです。

開場

開演した直後は席もまばら。あれー?と不安になる。
じゃんけんも抽選もことごとく外れる。

Adobeクリエイティブツール最前線! ~アメリカ直送の最新動向ご紹介~

アドビ システムズ 西村さん

以下走り書きママ(間違いがあるかもしれません)

Flash Palyer10について
  • コミュ機能強化 / 外部ライブラリを使いやすくする
  • カスタムフィルタ / 有志制作のフィルタを読み込める ほぼ1KB以下
  • リッチテキスト強化 / 多言語・日本語組版に対応可能になった
    (カタログ・ケータイ小説にも使える?)
  • 3D効果(写真をX軸 / Z軸を中心に縦回転されることが簡単になった)
  • RTMFP(リアルタイム・メディアフロー・プロトコル)対応
    UDPベースのセキュアなプロトコルも可能になった…みたい 私にはまだよくわかんない(・ω・`
  • 音を認識して動画表現するのが簡単になる
Fireworks CS4 PublicBeta

午後のプログラムと同内容なので割愛

Dreamweaver CS4 PublicBeta
  • 関連ファイル(画像・CSSJavascript)を上部ツールバーに一覧表示
  • レンダリングエンジンにSafari・Google Cromeの「Webkit」を搭載
    (質問への解答:Safariと全く同結果ではないが、かなりリアルに近いプレビューとなる)
  • jQueryなどの外部ライブラリもコードヒントに対応

なお、このときのデモ画面は、メニューがすべて日本語になってた(現在の配布版は英語)。

アドビ夏祭りでの初公開だそうです。

おまけの話

North Kingdom

スウェーデンの地方にある制作会社 世界レベルの案件を次々とこなす凄い会社
田舎でもクォリティで世界にアピールできるという話 / 北海道の会社でも?

休憩中

20080906121422

看板の誤字に気づくwww

Webサイト制作の「今」とともに進化するDreamweaver CS4

アンカーテクノロジー 神森さん

西村さんの話に追加

プレビュー画面で要素にカーソルを置くと、おなじみの「アンカーアイコン」が出て
クリックで関連CSSがその場でポップアップされる(=画面を遷移しない)

ライブビュー
  • これまでのプレビュー画像は普通のHTMLページだったが、JavaScriptのDHTML効果もプレビューされる
    (ロールオーバー、hoverアクションがあればそれも再生される)
  • ライブコード / コードビューを出しておくと、実際にJavaScriptでHTMLが書き換わるところも確認できる
  • アクション中にF6キーを押すと、その瞬間の状態で停止できる
    (hover状態ならカーソルを離しても解除するまでhoverのまま)
バージョン管理システム「Subversion」の実装
  • ファイルのバージョンNo.・差分情報を管理
  • 修正箇所をコメントで記録できる
  • ファイル単位だけでなくディレクトリのバージョン管理も可能

↑直し・手戻り・多人数制作を支援

バージョン復元の例:
ファイルを右クリック → バージョンコントロール → 改定履歴
履歴一覧から戻したいバージョンを選択 → 閉じる
再度右クリック → 最新バージョン取得 → 前のバージョンに復元できる

CSS Selector Specificity (つづりあってたっけ)
  • セレクタの記述順による加点状態を一覧表示
  • 逆引きも可 / 重要度を指定すると、それに合ったセレクタ記述順をガイド

まとめ:間違いのない制作で現場もクライアントもハッピーになろう
(という神森さんは法被を着ている)


走り書きをそのまま文字にしているだけなのだが。
まだ午前のプログラムが終わらない。

(2)に続く。

Work

制作:JAPAZINE(WordPress2.6)

japazine

日本の今の事情を海外に伝える、
情報ブログの構築をしました。

JAPAZINE – Introduction of Japanese lifestyle.

更新頻度が高い、ブログ的な使い方ならWordPressが最適ですね。

左メニューに、たくさんの国旗があるのがわかると思います。
このブログは常時、世界各国の言語に翻訳して配信されているのです。
RSSもすべて翻訳されるので、どの国の人でも楽しく日本を知ることができるようになっています。

このプラグインは管理人さんのご友人の作で、Googleのサービスに負荷をかけすぎないよう翻訳版のデータを保管するのに、ずいぶん苦心されたようです。

私は基本的にこの翻訳プラグインと、管理人さんの希望
(後々の広告掲載や、右側にYoutube動画を貼ることを考慮してほしい)
に追随する形でしたが、「サイトを見る人のほとんどが日本人ではない」ということを念頭に置いて制作をしました。

日本の国旗をイメージさせるモチーフを目立つ位置に置き、視覚的に情報が伝わるように、記事の部分に多数のシンボルアイコンを使用しました。
日付が日めくりカレンダーになっているのも、日付表記が言語によって異なるためです。海外サイトでよく見かける演出ですよね。

日本と違い、回線が弱い国もありますから、画像が全く読み込めなかったときの表示や、CSSオフ、印刷用スタイルシートなども考慮してます。

HTML要素のlang指定(どの言語でもjpになってしまう)をどうするか、取った方がいいか迷ったのですが、他言語ページもちゃんと表示されているようなので残しました。
他言語は難しいですね。文字コードの問題が大きいです。もっと勉強が必要みたいです。

余談ですが、このページの「QRコード」は、非常に大きくなっています。
日本独特のケータイ文化の産物である、QRコードに興味を持ってもらうためでもありますが、管理人さんが使っているiPhoneでは、このくらい大きくないと読めないのだそうです(笑)

WordPress・MovableTypeは、iPod touch・iPhoneでの更新にも対応しています。
まだ発展途上ですが、専用デザインの管理画面も用意されていますから、iPhoneを愛用している人は試してみてはいかがでしょうか。

Life

さよならはとつぜんに

20080831003217s

毎日私のお仕事を手伝い、楽しいときも苦しいときもいつも一緒だった中古くんが、昨日突然壊れてしまいました。

Windowsを起動せず、リカバリを試そうにもCDドライブも認識できません。

OSが使えないと、パソコンに入った経理書類、お仕事一切のデータを出すこともできません。

真っ青になりましたが、幸い、HDDは無事でした。
今、新しいパソコン=アウトレットくんに以前の設定を復旧しているところです。
アウトレットくんは、DELLから派遣された、中古くんと同型の後継機。
流石はCoreDuo、さくさくとよく働きますが、駆動音がちょっとうるさいかな。

移行できない一部のアプリケーションはもとに戻りませんが、土日をはさんだのと、たまたま二週間前にノートパソコンを買っていたのは不幸中の幸いでした。

かなーり痛い出費になってしまったので、来月からまた頑張って働きますです…;;

壊れた中古くん、マザーボードの交換で復活するかもしれませんね。
愛着があるので、いつか再利用したいです。