ソシオメディアの上野さんの記事。
丁寧に細部まで解説、考察されている非常に良い記事なので、UIデザイン関係者は必読。
この記事を読んで、当時FlasherとしてiPhone登場時にUIに感じたFlashの影響と、その経緯について書いておこうと思います。あまり懐古的にならない、将来につながる内容にしたいと思いますが、年齢的に無理かもしれません。ご了承ください。
ソシオメディアの上野さんの記事。
丁寧に細部まで解説、考察されている非常に良い記事なので、UIデザイン関係者は必読。
この記事を読んで、当時FlasherとしてiPhone登場時にUIに感じた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で使った所感メモ。
結論から言うと、アセットの共有は非常に半端で制作過程における「管理」目的での使用は難しいレベル。
以下詳細
デザイン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 アニメーション再生速度の合わせ方。 (フェンリル | デベロッパーズブログ)
なんとなくうすうすは気づいていたけれど、ここまで詳細に研究しててすごい。
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のアンインストールも躊躇してしまう。
色々試しているものの、未だ解決に至らず・・・という状況。
HTML5はFlashの3倍重かった! 描画パフォーマンスの比較 | ClockMaker Blog
Flashに比べて遅いというのは、本能的にわかっていたが、計測してもやっぱり遅かったとのこと。
バッテリー消費量やら、サイズの違いによる最適なスペックやら色々要因はあるんだが、HTML5へのシフトはすごい勢いで進んでいる気がする。ま、個人的にはそもそもブラウザじゃないだろという気もしているので、FlashでもHTML5でもどっちでも構わない気もする。
もう1ヶ月ぐらい停滞している。
facebookに投稿した映像の共有テスト。
イマイチストレージとしてfacebookを使おうという気にはあまりならないのだけれども・・。
将来的にはgoogleがfacebook,evernoteなんか全部統括した形になってくれれば便利だなと思いつつも、先日のGoogle mapsの有料化とか考えると、外国産のサービスではなく、日本でつくられたそういうサービスがあればいいなぁと思ったりもする。(時代錯誤な気もするが・・)
大きな不況になったときなど最終的に何を守るか?と考えると国レベルになってしまうんじゃないかと最近のEUの問題とか見てて感じたりする。
なんだかよく分からないですが、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立ち上げながらデバッグできないじゃないですか!
なんですかなんですか!
embedしたbitmapDataを再度使用したい時、dispose自体はnullにする動作では無いために、bitmapDataインスタンスは存在した状態になっている。つまり
ってなやり方では、しれっと何も表示されないので、以下のように例外処理を利用して判定する。
ちなみにdisposeの挙動としては
BitmapData.dispose() は、実際のビットマップデータが占めていたメモリ領域を即時に解放します(ビットマップは最大で 64MB のメモリ領域を使用します)。BitmapData.dispose() を使用した後は BitmapData オブジェクトを使用できなくなり、BitmapData オブジェクトに対して関数を呼び出すと、Flash ランタイムから例外が返されます。ただし、BitmapData.dispose() では BitmapData オブジェクト(約 128 バイト)のガベージコレクションは行われません。実際の BitmapData オブジェクトが占めていたメモリ領域は、ガベージコレクターによって BitmapData オブジェクトが回収された時点で解放されます。
な感じになっている。
ま、今更なんの話だ?っつー感じではあるのだけど・・・
もし汎用的に参照する必要があるのであればgetter化してしまえばいい。
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 での遊び方この辺を参考に。
走り書き。
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
久々Progressionネタを書いてみる。
LoadBitmapDataのcompleteの処理はL193から以下のように記述されている。
これ、
super.throwError( this, err.message );
この部分
super.throwError( this, new Error(err.message) );
にしないと動かないんじゃないかしら?と思った。
そんなこたーないかしら?
もうライブラリに手を入れないようにしようと思っているけれど、ちょっとここは直さないと動かないんじゃないかなぁ?
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を使用不可にしたのか?
致命的に解決できないバグがあるのか?は不明です。
その辺ご了承ください。
ちょくちょく変わる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のまま対応する方法を考えてみた。
flash developとか使っているとどーするのだ?という質問を時々されますけど、swfファイルをflash playerで表示して、メニューから「プロジェクタの作成」で可能なり。
AIRでもいいんだけど、AIR用に書き直ししないといけない部分とか多々あるので、簡単に済ませたいときはこんな感じで・・・。
Macはちょっと分からないけれども・・・
We use cookies to improve your experience on our site. By using our site, you consent to cookies.
Manage your cookie preferences below:
Essential cookies enable basic functions and are necessary for the proper function of the website.
These cookies are needed for adding comments on this website.
Google reCAPTCHA helps protect websites from spam and abuse by verifying user interactions through challenges.
Google Tag Manager simplifies the management of marketing tags on your website without code changes.
Statistics cookies collect information anonymously. This information helps us understand how visitors use our website.
Google Analytics is a powerful tool that tracks and analyzes website traffic for informed marketing decisions.
Service URL: policies.google.com (opens in a new window)
Marketing cookies are used to follow visitors to websites. The intention is to show ads that are relevant and engaging to the individual user.
A video-sharing platform for users to upload, view, and share videos across various genres and topics.
Service URL: www.youtube.com (opens in a new window)
You can find more information in our Cookie Policy and Privacy policy.