カテゴリー
Design Develop

Touch UIとFlashの話

ソシオメディアの上野さんの記事
丁寧に細部まで解説、考察されている非常に良い記事なので、UIデザイン関係者は必読。

この記事を読んで、当時FlasherとしてiPhone登場時にUIに感じたFlashの影響と、その経緯について書いておこうと思います。あまり懐古的にならない、将来につながる内容にしたいと思いますが、年齢的に無理かもしれません。ご了承ください。

カテゴリー
Develop Works

Shinichi Sato / 佐藤振一 ver.2018

2018-04-03 15.55.15.png

写真家、佐藤振一氏のポートフォリオサイトを制作させていただきました。

https://satoshinichi.com/

佐藤さんは建築、都市景観を中心に、8×10版や超高画素カメラで撮影した、超精緻な描写と独特な空気感を持つ作品を数多く制作されています。
今から10年前に、8×10のポジをはじめて見た時の衝撃は今でも強く覚えています。

「超精緻な迫力、質感が伝わる、オンライン上のブック」

このコンセプトの元、Adobe Flashを用いて初代サイトを制作したのが2008年
当時のHTMLでは対応が難しかった表現、機能を駆使したこのサイトは、多くの国内外写真家から問い合わせを頂くなど高い評価を頂きました。

それから10年、デバイス状況は大きく変化し、HTML技術も大きく進化しました。
東京オリンピックが開催される2020年にはFlashの終了も決まりました。
これらの状況に対応したサイト継続のために、HTML版へのリニューアルを行いました。

カテゴリー
Develop 未分類

Creative Cloud Librariesを使ってみた

Adobe Stockおよびリンクされたアセットを使用するCreative Cloud Libraries | Adobe Creative Cloudチュートリアル
Adobe製品の新機能Creative Cloud Librariesをillustratorで使った所感メモ。
結論から言うと、アセットの共有は非常に半端で制作過程における「管理」目的での使用は難しいレベル。
以下詳細

  • グラフィックアセットに関して
    • シンボルとの境界が曖昧。位置づけとしてはリンクファイル延長の概念。(個人的にはシンボル的なものを期待していただけに落胆が大きい。)
    • 変形リセットがない
    • 共通選択ができない
    • 置換がない
    • グラフィックアセット間の入れ子ができない。(入れ子アセットの変更が反映されない。更新ボタンを押しても無理。親のアセットを編集すれば反映される)
    • シンボルに共有アセットを含められない(これはリンクファイルとして考えれば今まで通り)
    • イラレ互換PDFで保存すると共有アセットのリンクが保持されず、保存後再オープンでグラフィックに変換される
  • 文字スタイルアセット
    • 再編集できない(従来の文字スタイルのようなStudy利用ができない)
  • カラーアセット(塗、線)
    • 色の変更は可能。ただしスウォッチのようなグローバルカラーを用いた一括管理はできない。

デザインFixしたガイドラインライブラリのような使い方ならいけそうですが、それでも厳格な運用ルールが必要そうな印象。
Flashのライブラリのような完全な一意性を維持して同期する形が望ましいのだけど、難しいのかしらねえ・・・。
そもそも「シンボル」自体が半端な昨日なので、そっちをなんとかしてほしかったりする。

カテゴリー
Develop 未分類

movabletypeにSyntaxHighlighterを追加

HTML上に記述されたソースコードを整形、強調表示してくれるJSライブラリSyntaxHighlighterを、MT5にインストール。
MT3の時から利用していたが、しばらくみないうちにFlash連携によるコピペの機能などが割愛され、完全JS駆動になっておりました。(スマホ展開などが理由でしょうけど)
で、MT4のプラグイン化されたものがあり、これを使うと記事作成画面のフォーマットから制御できるらしい。
SyntaxHighlighter for Movable Type | kwLog
便利そうではあるが、コード部分の指定労力が最新版SyntaxHighlighterのと大差ない感じだったので、本家の最新版をインストール。
インストールは特に悩むことも無く、JSとCSSを一式アップロード。
利用する言語のブラシJSだけを読み込み処理して、Styleも適当に。
これで終わり。
ただなぜか縦スクロールが表示されて不格好な感じになっていたので、CSSを以下のように調整。
これで縦スクロールはでなくなった。(どっかの外人がoverflow-y: hidden !important;だ!とか書いていたけど・・)

/* syntaxhighlighter */
.syntaxhighlighter {
margin: -1rem 0 1rem 0 !important;
font-size: 1.4rem !important;
padding: 1rem 0;
}
カテゴリー
Develop Usability

Win8のUI

「Windows 8のUI、ユーザビリティを抑圧」:UI専門家が批判 – CNET Japan
まだ実際にWin8を触っていないので、なんとも言えないですが、書いてある内容は事前に得ていたWin8の情報から想像していた印象と同じ。
ただこれから将来どの方向性にシフトしていくか?踏まえると現在は過渡期とも言える状態なわけで、ヤコブ氏の10箇条

  1. システム状態の透過性
  2. システムと実世界の調和
  3. ユーザーコントロールの自由度
  4. 一貫性と標準化
  5. エラー防止
  6. 記憶より認知
  7. 柔軟性と効率性
  8. 美的で最小限のデザイン
  9. ユーザによるエラー認識、診断、回復を援助
  10. ヘルプとドキュメンテーション

を順守していると、ここ数年のスマホ、タブレット出現にともなう劇的な変化スピードについていけず死に絶えるしか無いんじゃないか?という印象です。
じゃあどーすればヤコブ氏に文句言われないのか?っていうと、Windowsの名前を継承しないで新しいOSとしてリリースしろってことなんでしょうけど、マーケティング的にWindows名を継承しないデメリットは計り知れないわけで、そういう部分に関しては、こういう時代の変革にはその将来のメリットも踏まえユーザがその二重性に対して納得するかしないか?なんじゃないかしら?とおもいます。
iPhoneでUIの浸透を済ませ、それをPC側にシフトしていくAppleのやり方は評価すべき戦略ですが、残念ながらMSはWindows Phoneも後発で、時間が無い。
ユーザビリティ視点で評価するとこういう結果になるのは当然だろうなと思いますけど、世の中はそれだけで成立しているわけでもなく、クジラが5000万年前にやっぱ海に戻るわって思ったように、その瞬間非効率で、無意味な行為だったとしても、遠い将来生き残るためには必要な行為だったかもしれないことってあるんじゃないかしら?と感じる勤労感謝の翌日であります。
注)ヤコブ氏の分析を否定するわけではなく、それも踏まえてね・・って話です。
あとアマゾンのWin8のサムネイルのカッコ悪さは何とかしてほしいなとも思います。
なんにしても、事務所の新しいWin8が到着しているので、それを触ってみようと思います。
(当然作業用マシンに導入するか?は要検証・・・)
Ref.
Windows 8 — Disappointing Usability for Both Novice & Power Users (Jakob Nielsen's Alertbox)
Flash critic to coach Macromedia – CNET News

カテゴリー
Develop

GIFアニメの再生速度

実は違う。クロスブラウザでの gif アニメーション再生速度の合わせ方。 (フェンリル | デベロッパーズブログ)
なんとなくうすうすは気づいていたけれど、ここまで詳細に研究しててすごい。
15年ぐらい前、YahooバナーなどがGIFアニメ全盛だった頃に、カラーパレットの調整とあわせて、尺調整もミリ秒単位で作りこんでいたけれど、その時の時間基準って曖昧だったのだろうか・・・と今更ながら不安になります。(当時はIEぐらいしか対象じゃなかったというだけかもしれないですが・・・)
あれから時代はFlashへとシフトし、今hmlt5だとかで再びGIFアニメも復権しているから、このタイミングでのこういう記事なのかもしれませんが、CSS Sorite+CSSアニメ?みたいなプレイヤーシステム必須の形ではなく、ファイルスタンドアローンでのアニメーション画像フォーマットが出てくれればいいのにとおもいます。(単純にプレイヤーがブラウザの画像レンダーに内蔵されているだけって話ですが)
自分の記憶の中ではPNGのアニメーション形式とか存在してたんですが、どーも携帯だけの対応だったり(PNGアニメ作成法)、PNGを拡張した別フォーマットAPNG(Animated Portable Network Graphics – Wikipedia)だったりしたようです。
一応ソフト(フリーソフトの活用 Paint.NET プラグイン APNG ~アニメーションPNG作成~)も存在しているようですが、未対応ブラウザが多いようであまり現実的ではない感じ。
まぁLZWの特許期間が満了した現在、新しくAPNGに取り組むっつー必要性もないということで、APNGが普及しない2つの理由、2つの望み | YATA BLOGな状況なのでしょう。
ただ個人的にはフルカラーでのアニメーション画像はやっぱ欲しいし、仕様的にさらにもう一歩踏み込んで、時間軸で変化していないピクセルの情報を割愛した変位部分だけの情報を積層させるような動画的志向をもったフォーマットができたらなぁって思ったりもしします。
ざっくり言うと最終コマを基点とした差分情報だけを保持したレイヤーを上方向(時間の若い方)に積層させていくような構造で、時間の進行とともに、上からレイヤーを除去していくようなイメージですけど・・・。(すでにそういう作り方になってるのかもしれんけど)
ということでちょっとメモ

カテゴリー
Develop 未分類

Chrome上でFlashのデバイスフォントが変更できる件

ブラウザ上で標準フォントや言語属性を検証していたところ気づいたのだけど、Chrome上のFlash PlayerはデバイスフォントがChromeの設定を継承する場合がある。
Chromeの[設定/ウェブコンテンツ/フォントサイズ/フォントをカスタマイズ]の中で[Sans Serif]で指定したフォントがFlash Playerのデバイスフォントに継承される。
ただしこの継承が発生するのはChrome専用Playerの特定のバージョンの場合っぽい。確認したPlayerは一つ。
[user]\AppData\Local\Google\Chrome\Application\21.0.1180.79\PepperFlash\pepflashplayer.dll
開発の人でDebug Playerを独自に入れている場合は従来のデバイスフォントで表示される。
ちなみにFirefoxでは継承は発生せずこれまでどおりのデバイスフォント表示。
PepperFlashってのはChrome V21からのPlayerらしいけど、海外サイトを見てるとCPU負荷や日本語入力(ニコ動?)に問題などがあるっぽい。
ちとこれから先ChromeのFlash Playerが独自の進化をしていくのかよくわからないけれど、デバイスフォントが変更になるのが開発者、ユーザにとってどういう影響を与えるのか見守りたい。

カテゴリー
Develop 未分類

asにjsを埋め込む

よく忘れて過去のリソースを探るので、こっちにメモ

ExternalInterface.call( scriptSrc);
private const scriptSrc:XML = <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%3C!%5BCDATA%5B%0A%2F%2Fscript%20code...%0A%5D%5D%3E%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />;

スタンドアロンで検証したい場合は、確かExternalInterface.availableで代替処理を入れてやれば切り分けることも一応できるとおもう。(そのJS内の処理内容によるけれど)きちんと整理してパッケージ化したいと思ったまま5年ぐらい放置・・・汗

HTMLの生成はXMLDocumentからXMLに変更になった際にできなくなった気がする。
flex – Flash as3 process XML Doctype Entities – Stack Overflow
回避策はなんとなしに頭の中にあるのだけど、整理する時間がないので、備忘録的にメモ
Adobe Flash Platform * XML 変数の初期化
とか使うと連携が楽そう

カテゴリー
Develop

Adobe SWF Investigator

Perform quick, comprehensive, analysis of SWF applications
Adobe® SWF Investigator is the only comprehensive, cross-platform, GUI-based set of tools, which enables quality engineers, developers and security researchers to quickly analyze SWF files to improve the quality and security of their applications. With SWF Investigator, you can perform both static and dynamic analysis of SWF applications with just one toolset. SWF Investigator lets you quickly inspect every aspect of a SWF file from viewing the individual bits all the way through to dynamically interacting with a running SWF.

Ref.
Adobe SWF Investigator | Flash security – Adobe Labs
Introducing Adobe SWF Investigator | Adobe Developer Connection
Via.Twitter / @otachan: AdobeがSWF解析ツールを公開と。これセキュリテ …

カテゴリー
Develop

Flash Developで2回目以降のコンパイルがエラーになる

Androidの実装環境を設定したら、Flash Developでコンパイルエラーが出るようになった。
エラーメッセージは

Error: Comparison method violates its general contract!
Build halted with errors (fcsh).

常にという訳ではなく、FDを起動して初回のコンパイルは問題なく実行できる。
そのまま修正などして再度コンパイルすると上記のエラーが発生する。
ビルドを[Debug]<>[Release]に切り替えると、エラーは発生しない。
なので、まぁ都度[Debug]<>[Release]を切り替えつつコンパイルすれば対応は出来るのだけど、面倒くさい。同じ問題は色々発生しているようで、FlashDevelop.org – View topic – Error: Comparison method violates its general contract!にその辺の情報が集まっている。
JDK1.7を入れたことに付随する問題のようだが、Androidの制作環境構築でどこがどうだったかさっぱり思い出せず、Android環境の再構築の手間を考えるとJDK1.7のアンインストールも躊躇してしまう。
色々試しているものの、未だ解決に至らず・・・という状況。

カテゴリー
Develop 未分類

優先席の近くでは携帯電話の電源をお切りください

HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
Flashに比べて遅いというのは、本能的にわかっていたが、計測してもやっぱり遅かったとのこと。
バッテリー消費量やら、サイズの違いによる最適なスペックやら色々要因はあるんだが、HTML5へのシフトはすごい勢いで進んでいる気がする。ま、個人的にはそもそもブラウザじゃないだろという気もしているので、FlashでもHTML5でもどっちでも構わない気もする。
もう1ヶ月ぐらい停滞している。

カテゴリー
Develop Movie

test


facebookに投稿した映像の共有テスト。
イマイチストレージとしてfacebookを使おうという気にはあまりならないのだけれども・・。
将来的にはgoogleがfacebook,evernoteなんか全部統括した形になってくれれば便利だなと思いつつも、先日のGoogle mapsの有料化とか考えると、外国産のサービスではなく、日本でつくられたそういうサービスがあればいいなぁと思ったりもする。(時代錯誤な気もするが・・)
大きな不況になったときなど最終的に何を守るか?と考えると国レベルになってしまうんじゃないかと最近のEUの問題とか見てて感じたりする。

カテゴリー
Develop 未分類

Photoshopでflashlog.txtを使用する?

なんだかよく分からないですが、Photoshopを起動するとflashlog.txtにいきなり。

**********Running app: C:\Program Files\Adobe\Adobe Photoshop CS5 (64 Bit)\Plug-ins\Extensions\ScriptUIFlexServer-app.xml
ScriptUI is ready.
Host logging disabled Debug tracing disabled
Finished loading style definitions

なメッセージが現れて、以降Traceできなくなる。
なんぞこれなんぞこれ?
Photoshop立ち上げながらデバッグできないじゃないですか!
なんですかなんですか!

カテゴリー
Develop

disposeしたbitmapDataの確認

embedしたbitmapDataを再度使用したい時、dispose自体はnullにする動作では無いために、bitmapDataインスタンスは存在した状態になっている。つまり

ってなやり方では、しれっと何も表示されないので、以下のように例外処理を利用して判定する。

ちなみにdisposeの挙動としては

BitmapData.dispose() は、実際のビットマップデータが占めていたメモリ領域を即時に解放します(ビットマップは最大で 64MB のメモリ領域を使用します)。BitmapData.dispose() を使用した後は BitmapData オブジェクトを使用できなくなり、BitmapData オブジェクトに対して関数を呼び出すと、Flash ランタイムから例外が返されます。ただし、BitmapData.dispose() では BitmapData オブジェクト(約 128 バイト)のガベージコレクションは行われません。実際の BitmapData オブジェクトが占めていたメモリ領域は、ガベージコレクターによって BitmapData オブジェクトが回収された時点で解放されます。

な感じになっている。
ま、今更なんの話だ?っつー感じではあるのだけど・・・
もし汎用的に参照する必要があるのであればgetter化してしまえばいい。

カテゴリー
Develop

Molehillメモ

1)MovieClipにisPlayingプロパティが追加になっているので、ProgressionのExMovieClipのisPlayingに”override”追加。
2)JSONクラスがルートクラスで追加されたので、”com.adobe.serialization.json.JSON”を使ってる場合、フルパスに書き直すか、クラスを切り替える。
新しいJSONクラスのメソッドは以下の二つ
JSON.stringify(value:Object,replacer:*=null,space:*=null):String
JSON.parse(text:String,reviver:Function=null):Object
個人的にはメソッド名を同じにしてくれておいてくれればよかったんじゃないかと思うけど。
(com.adobeなんだし・・・)
とりあえず目についたのはこの2つ。
ちょっとExternalInterface周りで少し怪しい感じがするところがあるけれど、そこはおいおい。
3D関係は、もっと詳しい人達のブログを参照してください。
Ref.馬鹿全
Molehill | ClockMaker Blog
cellfusion blog » Molehill のローレベル API で遊ぼう
環境整備は馬鹿全 – FlashDevelop + FlashPlayer11(Molehill) + Away3D 4.0 Alpha での遊び方この辺を参考に。

カテゴリー
Develop 未分類

ProgressionでSWFAddressのExternalChangeが発動しない件

走り書き。
Progression4 + SWFaddressでindexにQueryって駄目だったっけ?
#?id=112
みたいなの。
この形だとexternalChangeeがWebSynchronizer内のSceneId.validatePathに引っかかってgotoまで遷移しない。(Queryの場合はSceneEvent.SCENE_QUERY_CHANGEも呼ばれない)
とりあえず間にひとつシーンをかませば問題なく動作する。
#/v/?id=2
みたいなかんじ。
SWFAddress単体では動作していたような気もするのだけど、記憶が定かではない。
Ref.Asual | SWFAddress – Deep linking for Flash and Ajax
Progression – Framework for Flash

カテゴリー
Develop 未分類

LoadBitmapData

久々Progressionネタを書いてみる。
LoadBitmapDataのcompleteの処理はL193から以下のように記述されている。

これ、

super.throwError( this, err.message );

この部分

super.throwError( this, new Error(err.message) );

にしないと動かないんじゃないかしら?と思った。

そんなこたーないかしら?
もうライブラリに手を入れないようにしようと思っているけれど、ちょっとここは直さないと動かないんじゃないかなぁ?

カテゴリー
未分類

TextAreaへのStyleSheet適応

fl.controls.TextAreaクラス。
納品物として使うことはまずないのだけど、デバッグとかでアウトプット表示に使うことは多々あります。で、そのアウトプットテキストの中にシーン遷移のリンクを入れたりしたい時に、StyleSheetを適応すると便利だろと。
で、以前はTextAreaに”stylesheet”というプロパテイがあった気がするのですが、今見てみると無い。(そのかわり”textField”というプロパティが追加されて、コンポーネント内部のtextFieldが直接参照できるようになっている。
で、textField.stylesheetとしてOKか?と言われるとそんなことは無く、

Error: Error #2009: このメソッドは、スタイルシートを使用するテキストフィールドに対しては使用できません。
at flash.text::TextField/setTextFormat()
at fl.controls::TextArea/drawTextFormat()
at fl.controls::TextArea/draw()
at fl.core::UIComponent/callLaterDispatcher()

こんなエラーが戻って来ます。
基本的にtextFieldで管理するんだから、styleSheet等使うんじゃない!ゴルァ!と言う感じの対応ですが、かろうじて”drawTextFormat”が”protected”なので、extendsで対応することにします。

こんな感じでとりあえず使えるようになります。
ただそもそもAdobeが何故StyleSheetを使用不可にしたのか?
致命的に解決できないバグがあるのか?は不明です。
その辺ご了承ください。

カテゴリー
Develop

Google Analyticsの新しいやつとProgression

ちょくちょく変わるGoogle Analytics。
ga.jsになったのは去年の12月。久しぶりに見たらまたちょっと埋め込みコードが変わっているっぽい。(headの中に入れるようになっていた)
まぁ昔のやつでも動作するし、特に問題は無いのだけど、Getting Started with the Asynchronous Snippet – Google Analytics – Google Codeこの辺のやつにチラッとProgressionで対応できるように。
Progression純正のやつは”WebSynchronizer”になるのだけど、この中で定義されているのは
pageTracker._trackPageview
urchinTracker
の2タイプ。
新しいやつはswcコンポーネントから”GATracker”生成してやれということなのですが、”WebSynchronizer”の中に手を入れる必要があるので面倒だなと・・。
“GATracker”を使うメリットはそれなりにあるので、一応それのProgression連動クラスは作ってはいるけれど、使う必要が無い場合に純正のProgressionのまま対応する方法を考えてみた。

カテゴリー
Develop 未分類

flash developからprojector(.exe)形式の書き出し

flash developとか使っているとどーするのだ?という質問を時々されますけど、swfファイルをflash playerで表示して、メニューから「プロジェクタの作成」で可能なり。
AIRでもいいんだけど、AIR用に書き直ししないといけない部分とか多々あるので、簡単に済ませたいときはこんな感じで・・・。
Macはちょっと分からないけれども・・・