ソシオメディアの上野さんの記事。
丁寧に細部まで解説、考察されている非常に良い記事なので、UIデザイン関係者は必読。
この記事を読んで、当時FlasherとしてiPhone登場時にUIに感じたFlashの影響と、その経緯について書いておこうと思います。あまり懐古的にならない、将来につながる内容にしたいと思いますが、年齢的に無理かもしれません。ご了承ください。
タグ: flash
写真家、佐藤振一氏のポートフォリオサイトを制作させていただきました。
佐藤さんは建築、都市景観を中心に、8×10版や超高画素カメラで撮影した、超精緻な描写と独特な空気感を持つ作品を数多く制作されています。
今から10年前に、8×10のポジをはじめて見た時の衝撃は今でも強く覚えています。
「超精緻な迫力、質感が伝わる、オンライン上のブック」
このコンセプトの元、Adobe Flashを用いて初代サイトを制作したのが2008年。
当時のHTMLでは対応が難しかった表現、機能を駆使したこのサイトは、多くの国内外写真家から問い合わせを頂くなど高い評価を頂きました。
それから10年、デバイス状況は大きく変化し、HTML技術も大きく進化しました。
東京オリンピックが開催される2020年にはFlashの終了も決まりました。
これらの状況に対応したサイト継続のために、HTML版へのリニューアルを行いました。
Adobe Stockおよびリンクされたアセットを使用するCreative Cloud Libraries | Adobe Creative Cloudチュートリアル
Adobe製品の新機能Creative Cloud Librariesをillustratorで使った所感メモ。
結論から言うと、アセットの共有は非常に半端で制作過程における「管理」目的での使用は難しいレベル。
以下詳細
- グラフィックアセットに関して
- シンボルとの境界が曖昧。位置づけとしてはリンクファイル延長の概念。（個人的にはシンボル的なものを期待していただけに落胆が大きい。）
- 変形リセットがない
- 共通選択ができない
- 置換がない
- グラフィックアセット間の入れ子ができない。（入れ子アセットの変更が反映されない。更新ボタンを押しても無理。親のアセットを編集すれば反映される）
- シンボルに共有アセットを含められない（これはリンクファイルとして考えれば今まで通り）
- イラレ互換PDFで保存すると共有アセットのリンクが保持されず、保存後再オープンでグラフィックに変換される
- 文字スタイルアセット
- 再編集できない(従来の文字スタイルのようなStudy利用ができない）
- カラーアセット（塗、線）
- 色の変更は可能。ただしスウォッチのようなグローバルカラーを用いた一括管理はできない。
デザインFixしたガイドラインライブラリのような使い方ならいけそうですが、それでも厳格な運用ルールが必要そうな印象。
Flashのライブラリのような完全な一意性を維持して同期する形が望ましいのだけど、難しいのかしらねえ・・・。
そもそも「シンボル」自体が半端な昨日なので、そっちをなんとかしてほしかったりする。
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;
}
「Windows 8のUI、ユーザビリティを抑圧」：UI専門家が批判 – CNET Japan
まだ実際にWin8を触っていないので、なんとも言えないですが、書いてある内容は事前に得ていたWin8の情報から想像していた印象と同じ。
ただこれから将来どの方向性にシフトしていくか？踏まえると現在は過渡期とも言える状態なわけで、ヤコブ氏の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
カテゴリー
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な状況なのでしょう。
ただ個人的にはフルカラーでのアニメーション画像はやっぱ欲しいし、仕様的にさらにもう一歩踏み込んで、時間軸で変化していないピクセルの情報を割愛した変位部分だけの情報を積層させるような動画的志向をもったフォーマットができたらなぁって思ったりもしします。
ざっくり言うと最終コマを基点とした差分情報だけを保持したレイヤーを上方向（時間の若い方）に積層させていくような構造で、時間の進行とともに、上からレイヤーを除去していくようなイメージですけど・・・。（すでにそういう作り方になってるのかもしれんけど）
ということでちょっとメモ
ブラウザ上で標準フォントや言語属性を検証していたところ気づいたのだけど、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が独自の進化をしていくのかよくわからないけれど、デバイスフォントが変更になるのが開発者、ユーザにとってどういう影響を与えるのか見守りたい。
よく忘れて過去のリソースを探るので、こっちにメモ
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 変数の初期化
とか使うと連携が楽そう
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解析ツールを公開と。これセキュリテ …
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のアンインストールも躊躇してしまう。
色々試しているものの、未だ解決に至らず・・・という状況。