Web・ITのブログ記事
Animator vs. Animation by *alanbecker on deviantART
面白い動画を見つけたのでご紹介です。
flashによるアニメーターとアニメーションによるバトルを描いた動画です。最近知りましたが、けっこう前の動画なのですね。
flashを使っている人から見ると、その細部のこだわりがかなりツボなんじゃないかと思います。
もちろん、予備知識がなくてもかなり楽しめるとは思いますよ。
こちらの動画が掲載されているdeviantARTというサイト、初めて知りました。
クリエイターの作品発表や交流を目的とするサイトのようです。
興味ある方がいましたらぜひ。
このblog上にはまったく書いておりませんが、それなりにWeb制作の仕事を請け負ったりしています。
わたし一人がやっているのではなく、他の人と協力し合ってという形でですが。
Flash関係の仕事が最も多いです。
既存のFlashをカスタマイズしたり、画像と文言を組み合わせたイメージムービーを制作したり等々。
そんな仕事をしていて、携帯向けFlash制作の需要というものを頻繁に感じます。
待ち受け画面であったり、ゲームであったり、需要は多々あります。
そういった背景もあり、携帯用Flashの制作を勉強してみようかなという気になりました。
仕事でもプライベートでも、これまでPC上で動作するものしか作ったことがありません。
本屋で携帯用Flashの本を立ち読みしたことぐらいはありますが、ほぼ知識ゼロに等しいです。
勉強を開始したのは三日前です。
この三日間で覚えたことを、備忘録の意味合いも込め、ちょっとまとめてみます。
初心者丸出しな内容です。
//携帯上のFlashプレイヤーについて
PCの場合は現在最新のFlash playerが9です(マイナーバージョンは除く)。
携帯の場合はどうなのだろうというところから調べ始めました。
FlashLiteというものが使われているのですね。Flash Playerを搭載しているPDA端末もあるようですが。
FlashLiteには以下のバージョンがあるそうです。
Flash Lite 1.0
Flash Lite 1.1
Flash Lite 2.0
Flash Lite 2.1
Flash Lite 3.0
それぞれ使用できるActionScript(flash開発用言語)のバージョンが異なります。
また、PC版と異なり、使用するプレイヤーは機種毎に固定の様子です。PCでは後からアップデート可能ですからね(OSによって対応していないバージョンもありますが)。
どのプレイヤーが最も普及しているのか統計情報はわからないですが、どのバージョンもまだまだ第一線で使われている様子です。
参考までにPC向けFlashPlayerの普及率はこちらです。
Flashに関わらず、アプリケーションを制作するときにはユーザーのプラットフォーム(動作環境)が重要になります。
理想で言えば全動作環境に対応するべきです(たとえばWindows向けソフトであれば3.1以降全部など)。
でも、そんなことは開発工数的にかなり厳しいわけで、最新バージョンの二世代前ぐらいまでを許容することが多いように思います。
IEであれば5以降、FlashであればFlash Player7以降といったところでしょうか。
つまり、FlashLiteの場合最新バージョンが3.0のため、1.0まで許容するべきということになります(全部って話ですね)。
3.0の2世代前なら2.0ではと思う方もいるかもしれないですね。
バージョンは"A.B"という記述でAをメジャーバージョン、Bをマイナーバージョンと呼び、今回の話での世代という表現はメジャーバージョン側で判断しています。
メジャーバージョンは大きな区分でのバージョン、マイナーバージョンは小さな区分でのバージョンです。
大規模変更がされた場合にはメジャーバージョンの数字を上げ、小規模な変更の際にはマイナーバージョンの数値を上げます。
話を元に戻しましょう。
Flash Lite 1.1以前はFlashPlayer4を元としたActionScriptとなっています(FlashPlayer4のときはActionScriptという名称ではなかったかもしれないです。記憶定かではないです)。
そのため開発上使える機能はかなり限定されますが、PCとは異なる携帯専用機能が用意されています。FSCommandというものです。FSCommandとFSCommand2があり、例えば情報として外部電源とバッテリーのどちらで動いているかを取得したり、機種IDを取得したりといった機能があります。
FSCommandとFSCommand2で合わせて40程度の関数がありますが(FSCommandはLaunchの1つのみのためFSCommand2ばかり)、対応しているかどうかが機種毎に異なっています。
そのため、開発する際にはFlash Liteのバージョンと同時に使用可能なFSCommand及びFSCommand2の関数を気にする必要があります。
また、機種のディスプレイサイズも気にする必要があります。開発したflashを壁紙として使用するか、呼び出し画面として使用するか、メール受信時に使用するか等でまた表示可能サイズが異なることにも注意が必要です。
"入力として上下左右4方向使用可能か上下2方向のみか""容量の上限"等といったことも重要な項目ですね。
//制作したFlashの動作環境について
制作物については動作確認をする必要があります。これはPCでも同様です。
ここでもユーザー環境の多種多様振りが問題となってきます。
いわゆるクロスブラウザチェックですね(携帯用Flashでこの呼び名が使われているかは不明)。しんどい作業です。
一つの環境だけでテストすれば終わりというわけにはいきません(たとえばPCの場合WindowsXPのIE6のFlashPlayerのバージョン7.0であったり)。
PC向けWebサイト制作において、大抵の制作者の方が、少なくともWindowsとMacといったOSにおいて、IEやFireFoxやSafariといったブラウザでの確認はしているのではないでしょうか。
Flash制作でも過去のバージョンのFlashPlayerを引っ張り出してきてテストしたりします。
参考までに過去のFlashPlayerのダウンロードはこちらです。
携帯の場合、これがPCとは違った意味で困難です。
PCでのクロスブラウザチェックの場合、ソフトウェアの違いを気にすることが主かと思います。
MacintoshとWindowsの違いはハードウェア的な違いというよりソフトウェア的な違いかなと。
まあ、グラフィックボードに依存した発色可能な色数とか、ディスプレイサイズは気にするとしても、動作確認までせずに統計上気にする程度で留めることが多いように思います。
印刷が正常に行われるかまでを含めればプリンタ毎の差異(プリンタドライバの差異)をチェックする必要もあるでしょうか。
携帯の場合、ハードウェアの違いが非常に気になります。メーカー依存、機種依存している部分が多そうですので。
知人に動作確認協力してもらうとしても、せいぜい数種類でしょう。どうやって動作確認をするのだろうと考えていたところ、Adobe Device Central CS3というソフトがあることを知りました。
Adobe - Adobe CS3： Device Central
こちらにて各機種毎の動作確認をすることが可能です。
実際に使用してみたところ"対応している機種の種類が古い！"と嘆いていたのですが、Adobeのサイトから機種情報ダウンロード可能でした。随時更新されている模様です。
Adobe Device Central CS3のツールバーの"デバイス"→"デバイスアップデートを確認"にて該当ページに移動します。
こちらのソフトを使うことによってデバイス毎の確認はかなり効率よく行えそうです。
実際にどこまで忠実に機種仕様が再現されているのかは気にする必要があるかもしれないですが。
とりあえず現在学習した内容はだいたい以上の通りです。
試しに簡単なアニメーションや時計など制作してみています。
将来的にはこれで仕事をしたり、また、青春B上で配布したりなどということを考えています。
まだ学習開始三日間なので超未定ですが。
以下、参考リンクです。
記事中にリンクしたものも含まれています。
携帯でフラッシュ！「Flash Lite」 - ［Flash］All About
ネクストシステム：技術情報 - 携帯Flash作成講座 -
Wikipedia Adobe Flash Lite
Wikipedia ActionScript
Adobe - Flash Player Version Penetration
テスト用のアーカイブ版 Flash Player の提供について
Adobe - Adobe CS3： Device Central
個人的に好きなサイトを見つけたのでご紹介です。
いまさら紹介する必要もないぐらい有名かもしれないですが。
雑誌表紙ジェネレータ MagMyPic
画像ファイルをアップすると、その画像を有名雑誌のデザインにはめ込んでくれるサイトです。
つまり、自分の写真や絵が有名雑誌の表紙を飾ったかのような妄想をさせてくれます。
幕末古写真ジェネレーター -写真を江戸〜明治期の古写真ぽくします-
こちらは写真を昔っぽい感じにしてくれます(セピアにするというかぼけさせるというか)。。
どちらのサイトも技術的に新しいとかではないでしょうが、こういうアイディア面白いです。
ちなみに、ジェネレータという単語はいくつかの分野で使われるものですが、これらは
「定型的な入力を元にして出力を自動生成するプログラム」
といったものでしょうか。
ネット上でけっこう前からやたらと流行っていますよね。
2000年ぐらいからなんだかなんだ言ってあったような……。
せっかくなのでジェネレータ繋がりで役に立つ記事にリンクしておきます。
ウェブデザインに使える16のジェネレーターツール - DesignWalker
疲れ気味のときはウッーウッーウマウマ(ﾟ∀ﾟ)で元気出しています。
ええ、ニコニコ動画よく見ていますよ。
なにが好きって、ニコニコ動画にこめられた「表現欲求」が大好きです。
多くの方々が、それぞれの形で自己表現を行っている。
その自己表現の形に問題ある要素が多々含まれていることは確かだとしても、今後に対して解決しないといけない問題山積みだとしても、個人的に表現で満たされている場は大好きです。
願わくば、将来的に、表現欲求が損なわれないような形で問題解決していってくれればと……。
そんなニコニコ動画でございますが、わたしも仕事等ありますので、なかなか見る時間がなかったりいたします。
そんなとき、話題の動画を知るために以下のサイトを利用しています。
ニコニコ動画の各種ランキングが見やすくデータベース化されているサイトです。
有名なので今さらの紹介ですけれど、もしよろしければご利用してみてはいかがでしょうか。
話題の動画だけがよいわけじゃもちろんないですけれどね。
YouTubeやニコニコ動画の例を挙げるまでもなく、インターネット上で動画を見ることが本当に当たり前になってきましたね。
そこには著作権や情報格差等、様々な問題が多分に含まれておりますが、インフラ(基盤環境)の発展を強く実感させられる毎日です。
動画との触れ合いがここまで一般的になって嬉しいことの一つに、海外の映像が身近になったということがあります。
日本にいれば日本の映像作品などは入手しやすいですが、海外ものはそれが難しいですからね。
海外作品が日本作品より素晴らしいと断言するつもりはないですが、日本作品にないセンスに満ち溢れているのは事実かなと。
というわけでネット上某所で話題になっている二つの動画のご紹介です。
「海外作品に触れられることが素晴らしい」という前振りの割りに、作者が日本人だったりするかもしれないけれど。
とにかく、色々なセンスや環境に触れられるようになってきたなってことですね。
まずは、黒板を使ったアニメーションです。
センスに感嘆でございます。
そしてもう一つ、スペインにあるらしい「El Caminito del Rey」 という道の映像です。
高所恐怖症の人は見ているだけで涙目です。
わたしは涙目です。
ネット上で日本国外の方が描いたらしい「ネットの世界地図」というものを目にしました。
誰が描いたのかとか、この地図を制作するに当たってのデータソースに信頼性はあるのかとか、ただの主観地図じゃないかとか、そんな理屈は横に置いておきましょう。
単純に見ていてなんだか面白いです（ネット社会への興味がある程度ないと理解できない部分多いでしょうが）。
ある物事を誰かに伝えたいときには図示というのは非常に有効な方法です。
直感的にわかりますので。
「プレゼンテーションでは文字を少なめグラフ多めに」なんらかの資料制作をされる方なら当たり前すぎるぐらい当たり前の話でしょう。
そんな図示にさらにユニークさを加えたのが今回紹介するネットの世界地図なわけですが、見てすごいなと思うのが、面白いだけではなく位置や面積を巧みに使うことで情報を有効に伝達しているということ。
地図先にありきではなく、データ先にありきのような感じを受けます。
MySpaceでかいな……。
何年か前から、Webの世界の流行語の一つとしてAjaxという言葉があります。
Asynchronous JavaScript + XMLの略です。
Wikipedia Ajax
昔はWebアプリケーションと言えば、新しい情報を表示する際にはその都度「サーバ側へのリクエスト「サーバ側からのレスポンス及び画面遷移」というものが一般的でした。
しかし、Ajaxは画面遷移を伴わずにページ内容を変更する技術です。
Ajaxを利用した最も有名なサービスといえばGoogleMapということになるでしょうか。
地図を動かすときにわざわざ画面の再読込が発生していないですよね。
Googleマップ
ちょっと古いですがgoogleMAPで一番やばい物を見つけた奴が優勝：ハムスター速報2ログ
また、当サイトからリンクしている検索エンジンQooqleもAjaxを利用しています。
Googleでは検索の度に新たな画面を呼び出しますが、Qooqleは入力に対応した検索結果を同画面にて表示します。
Qooqle
と、Ajaxについて書きましたが、実はわたし自身、この技術がどういうものなのかいまいち把握できずにいました。
どのようなコードを書くことで実現可能なのかが検討つかないという意味ではないです。
これだけ騒がれていますが、どうして騒がれるか、どうして斬新なのかなど、なんだか不透明だったのです。
Web2.0という単語についても似たようなイメージがありました。
どうしてただの概念に過ぎないWeb2.0という単語をそこまで大々的に取り上げるのかなって。
Wikipedia Web2.0
そんなもやもやを抱えたある日、けっこう前のものではありますが、Ajaxについて説明している素晴らしい記事を読んでかなり納得したのです。
(もちろん、わたしはAjaxの専門家ではないため、理解したと呼べるレベルではないでしょうが)
実現する手法と実現したいことの切り分けができていなかったんだな。
本質を見抜くって難しい。
以下のblog記事ですので興味ある方はぜひ。
Life is beautiful：Ajaxの本質、「非同期メッセージ型ウェブ・アプリケーション」のススメ
ちなみにこちらの記事が掲載されている「Life is beautiful」は、わたしのお気に入りのblogの一つです。
今回だけではなく、過去にもこちら様の記事を元にしたblogを書かせてもらったことがありますね。
青春Bの便利リンクにも掲載させていただきました。お勧めです。
窓の杜、利用されている方は数え切れないぐらい多数いらっしゃることでしょう。
Windows用のオンラインソフトへのリンク集です。
その中にはいわゆるシェアウェア（試用は無料、継続使用は有料）とフリーウェア（無料）、そのどちらもが多数あります。
わたしも窓の杜、頻繁に利用させてもらっています。
そんな窓の杜では、毎年、読者投票と編集部判断による窓の杜大賞というものを実施しています。
その一年間の優れたオンラインソフトを選ぼうという賞です。
インターネット上にはたくさんの素晴らしいソフトがあり、受賞したものだけが素晴らしいわけではもちろんありません。
でも、選ばれたものが選ばれるに値するだけの魅力を持っていることは確かでしょう（人によって使える使えないはあるにしても）。
ということで、わたしも毎年、注目しています。
結果に触れてしまうと楽しみが減ってしまうので、やめておきます。
ぜひ自らアクセスしてみてください！
インターネット上って、数え切れないぐらいのフリーソフトが存在します。
無料での配布というのは、それが善意だけではないとしても、コンピュータユーザをかなり力強く支えています。
インターネットが出る前は、欲しいものは「買う」「作る」「借りる」というのが一般的な選択肢でしたが、今は違います。
「いただく」が追加されています。
そのことが社会的問題を含んでいるのも実際だとしても、だからこその助け合い、だからこそのメリットが大量に存在します。
感動してしまうほどに。
インターネットは、与えてもらうことと与えることが誰でも同時にできる世界なのだなと。
今後、インターネットが抱える様々な問題を解決するため、法整備等がさらに進んでいくでしょうが、よい文化が消えないことを切に願っています。
安易な規制によって自由がなくなりませんように。
今の時期、こういった発表がとても多くて、それで年末を実感しますね。
日本で一番見られているWebサイトはどこなのだろうと考えることがあります。
実際のところはわからないですが、Yahoo! JAPAN(以下、Yahoo)でしょうかね、やっぱり。
多くの方がポータルサイト(Webサイトを巡る際の入り口として使われるサイト)として、ブラウザのホーム(起動時に開くページ)に設定していそうです。
すでにご存知の方が多いかとは思いますが、Yahooは2008年1月1日にトップページデザインのリニューアルが予定されています。
大多数の人に利用されているサイトであるYahooのリニューアルは、Web関係の仕事をしている方にとってはかなりのビッグニュースでしょう。
その理由として、注目を集めるYahooの新デザインは「良いデザインの要素」がぎっしり詰まった教科書と考えられるからです。
ポータルサイトのリニューアルというのは、大きな冒険です。だって、よく使われているが故に現在のデザインが浸透しているわけですから。
それをわかっていて行われるリニューアルですから、デザインに際して、多大な検討がなされているはずです。
また、Yahooのニューデザインが今後の「良いデザインの要素」の指針となる可能性が高いだろうことも、Web業界のビッグニュースと考えられる理由です。
人は使い慣れたものを基準として行動します。
たとえば、ネジを回すときに回す方向を特に考えなくてよいのは、慣れているからです(規格がしっかりしているために慣れさせられているという方が正しいですかね)。
漫画を読むときにコマの順番に悩まないのも、慣れているからです。下から上にコマを読み進める漫画があったなら、読む側はかなり抵抗があるでしょう。
日本でネットをする方の大半が利用するであろうYahooのデザインは、その大半の人にとってのWebデザインの基準となり得ます。
Yahooの仕様(ボタン名称や位置、カスタマイズ可能な範囲、色合い)を参考にすることが、ユーザビリティに優れたサイトを作る上での近道となることが考えられるわけです。
そんなYahoo、新トップページのベータ版が公開されています。
Yahoo! JAPANトップページ(ベータ版)‐ガイドツアー‐
良し悪しを説明することは避けますが、これが今の流行なのかなって感じですね。
mixiのニューデザインもそうでしたが。
全体的に透明感ある印象になっていて、また、横幅が広い。
横幅については、従来は800px以内が良いとされてきました。
以前一般的だった画面解像度が1024×768で、その解像度にてブラウザの左側に検索ボックス等を表示した場合、横800pxを超えるとブラウザを全画面にしても表示しきれないことが多いからです。
ただ、今はディスプレイの解像度も上がり、800px以内だとこぢんまりとした良くない印象を与えてしまうことが多くなってきています。
そのため、横幅が広いサイトが増えてきているようです。
リキッドデザイン(ウィンドウサイズに合わせてサイズが変化するデザイン)にするのも一つの手です。
余談ですが、よく見かける単語「ベータ版(βversion)」これは開発途中バージョンの意味です。
正式リリースのためのプロトタイプ的な意味合いでしょうか。
mixiは今でもベータなのですね。ただ、最近は「常に進化し続ける」という意味でβを使うことが多々あるので、その意味かもしれません。
ちなみに「アルファ版(αversion)」は初期バージョンの意味です。
さらにちなみに「ガンマ版(γversion)」は開発最終バージョンの意味です。
またさらにちなみに「RC版(Release Candidate version)」は出荷候補バージョンの意味です。
それぞれの明確な区分はおそらくプロジェクト毎に異なるでしょう。
Wikipedia ポータルサイト
ユーザビリティ
Web Create Station ‐ リキッドデザイン：用語辞典‐
Wikipedia ベータ版
つい先日もこのblogにて取り上げました「ある題材について皆が二択(○と×)で答えるコミュニティ」コトノハで、本日も興味深い問題が取り上げられていましたのでご紹介します。
同じ内容について何度も取り上げるのはどうかと思いながらも、かなり興味深い題材だったので。
あと、遅ればせながらわたしの中でコトノハがマイブームなんです。
今回の題材は「家に携帯を置いてきた。取りに戻ると遅刻。どうしますか」ってものです。
回答は、まあ、当然といえば当然なのかもしれないですが、意外でした。
もしもわたしなら、取りに帰るかどうするか……。
用事にもよるかな……。人に迷惑をかけるような遅刻なら取りに戻らないだろうな。
仕事だったら絶対に取りに戻らないでしょう(その携帯が仕事上必要ならまた別ですが)。
皆様ならどうしますか。