新年あけましておめでとうございます。
昨年、夏頃にとある案件で、wordpressのテストがてら自分のブログをアップデートしたところ、管理画面のすべてのjavascriptが全滅して投稿が一切出来なくなる状態に陥り、その後は多忙のため、自分のブログに関してはずっと放置していました。
さらに年末にサーバのphpをアップデートしたところ、メールサーバーが死んだので心機一転として新しいサーバーを借り、そこへ環境構築し、新たな年を新たな環境で迎えることにしました。
見た目はそのままですが、中身は新たにこれからまたブログは再開しようと思っています。
本年もどうぞよろしくお願いいたします。
YouTubeがデフォルトの動画プレイヤーをFlashからHTML5に移行したという記事を見ましたので、一時代の隆盛を見たということで、思い出語りをしたいと思います。
YouTubeがFlashからHTML 5に移行した今こそ振り返るスティーブ・ジョブズの5年前のレター : ギズモード・ジャパン
僕がWEB業界に入った頃、2000年代前半くらい前の話です。その頃はFLASH全盛時代だったと記憶しています。
僕は学生時代からウェブサイトを作る仕事がしたいと野心に燃える若者だったのですが、特に技術や知識があるわけでもなく、漠然とそう思っているだけでした。
とは言え、星の数ほどあるウェブサイトを見てhtmlの仕組みや、デザインの表現は勉強をすることができましたので、寝食を忘れありとあらゆるジャンルのサイトを眺めては、スクリーンショットを取り、600%くらいまで拡大してテクスチャパターンの作り方やら、アイコン1pxの重要性、グラデーションの色配分などを目を皿にして、それこそディスプレイに穴が開くほど見つめていました。
あぁ、この罫線は黒じゃなくて#333のグレーと#fffの1pxずつ組み合わせて表現しているんだ、とか、べた塗りに見えて実はほんのりグラデーションがかかってるんだ、とか、えっウェブサイトってtableタグで作るの！？とかそういう感じです。あの頃は見るものすべてが楽しくて仕方ありませんでした。
しかし、FLASHに関してはあまり興味がありませんでした。いや、語弊があります。
FLASHは見ても勉強にならなかったのです。それはなぜか。
Flashは当時Macromedia Flashというソフト(現在はAdobe Flash)でしか作成できない上に、Flashをブラウザで表示するために.flaファイルを.swfへパブリッシュする必要がありました。
.swfファイルはブラウザのプラグインという形でインストールされたFlash Playerで再生されます。.swfは再生するためのファイル形式ですので、中身に何が書いてあるのかはわかりませんでした。
中身がどうなっているかわからないということはつまり、どう書いたらどういう風に動くかがさっぱりわからないということです。
ちなみに、Flash Playerは無償で提供されていたので、誰でもダウンロードしてインストールすることができますが、Flashは有償です。テキストエディタだけあれば始められるhtml+javascriptとはエライ違いですね。
今だったら何で例えようかな…PDFリーダーみたいなもんですかね。OSXだと印刷代わりに PDF出力できるから違うな…。
とにかく、Flashを作るためには専用のソフトが必要でそれが結構な値段で販売されていて、さらにいろんなサイトを見て学習しようとしても構造がどうなっているのかわからず、勉強するためにまず超えなきゃいけない壁が結構大きかったんです。
そんな僕でも、運良く雇ってくれる会社があって、もちろんFlashの制作もありました。
運良く雇ってくれた会社でも、運悪くFlashができる人が僕と入れ替わりで退社、二日間だけ前任者の人にFlashの基礎の基礎を教えて貰いました。
OnMouseOver(だっけ？)とか、OnReleaseだとか、this.stopとかそんなレベルの話です。正直、仕事になるわけがありません。
traceも知らないので、意図通りに動かない場合の対処の方法すらわからない。
幸いにも、会社に参考書は大量にあったので、ひたすら読んで、ググっては目的のものが探せず悩んだり、前任者が作った.flaファイルをいじって…を繰り返して勉強しながら仕事していました。
Flashに造詣の深い人脈もなく、誰にも聞けない状況で、あーでもない、こーでもないとFlashと格闘を繰り返しておりました。
もしもあの頃、Flashを良く理解している人が一緒に仕事をしていたら、僕のFlashに対する考え方は今と違っていたのかもしれません。
ぶっちゃけ、今考えればよくあのクオリティで給料もらえたなぁと当時の会社の優しさを今ひしひしと感じております。
とまぁ、わからないながらも何回も触っているとググり方もわかってきて、理解も深まり、転職をしたりしてFlashを触る機会も増え、それなりに仕事として作れるレベルにはなったんです。
タイムライン制御だったものをActionScript制御で出来たり、外部データと連携したり、と、やれることも増えました。
多分やっとそこで仕事としてお金がもらえるレベルだったんだと思います。
設計、デザインや、HTMLとCSSに関しては普通に仕事としてできてると思ってて、仕事の選択肢としてFlashも増やせるなぁと思っていた頃に海の向こうではiPhoneが登場。
2007年頃だったかな。当時は日本じゃ売ってなかった。
翌年にiPhone3Gが日本でも販売されて、爆発的に普及したのは記憶に新しいところですが、もう7年前の話なんですね。つい最近のように思えます。
その頃お客様から「iPhoneでメインビジュアルのところが真っ白なんですが」という問い合わせがいくつかあって、毎回「iPhoneではFlashが表示できないんですぅ〜」という言い訳をしておりました。
代替手段はFlash Playerがないときにインストールを促すアラートの代わりに画像をただ置くだけ。単純な複数の画像を切り替えるスライドショーならまだしも、当時は複雑な動きをするFlashをメインビジュアルに使用しているサイトも多数あったのでJavascriptで実装しようにも、コスト面で妥協せざるを得ませんでした。
さらに、Flashには、前述のように専用のソフトでないと開発できないことだったり、HTML+Javascriptに比べてCPUにかかる負荷が大きかったり(作り方にもよるけれど同様の動作をさせるのであればという条件で)、.flaファイルの中身の作り方によっては、作った人しか理解できなくなってしまうブラックボックス化からのメンテナンス性の低さだったり、検索対策が甘い(できるんだけどswfの中身が見えない関係で効果がわかりにくい、SEO業者に嫌われる)と、デメリットの多さもありました。
しかしながら、それまでのプラットフォームで多彩な表現のできるFlashは、上記のデメリットを打ち消してお釣りがくるほどの有用なツールだったのです。
iPhoneのFlash非対応や、PCブラウザのHTML5+CSS3サポートによる代替技術の発達によって、業界全体の考え方が変わってくるまでは。
と、業界全体でだんだんとFlashは使わない方向で考え方がまとまりかけていた過渡期ですが、未だにお客さんからは「Flashでお願いします〜」という依頼もあったりしました。
「予算との兼ね合いもありますが、スマホでの表示や今後のメンテナンス性も考えてFlashはやめましょう」という話を、何度かした記憶があります。
せっかくみんながFlashをなるべく使わない方向で動いていた矢先、Androidがリリースされました。
どうやらAndroidはFlash Playerがインストールできるらしい。
業界騒然、となるわけはなく、すでに多くの人たちがFlashを利用することのメリットデメリットを理解しているため、AndroidでFlashが再生できることは、Flashの終焉を遅らせることはできませんでした。
FlashのCPUの負荷が大きいということはつまり、より多くの電力の消費につながります。モバイルデバイスですので電力は電池を使用するので、電力を多く消費することは電池の減りが早くなることを意味します。
また、日本でAndroid黎明期にリリースされた端末はそれぞれが貧弱なメモリしか搭載しておらず、Flashが含まれるウェブサイトを表示するとフリーズしたり、ブラウザが強制終了したりという事態が頻発しました。そういったこともあり、Flashを使用するサイトは次々と消えていったのです。
なお、Android向けFlash Playerは2013年にサポートが打ち切られました。合掌(-人-)
今後の動静を考えるに、そう遠くない将来にFlashを利用したサイトは確実にその数を減らし、開発ツールであるAdobe FlashもFireworks同様に姿を消していくのでしょうか。
近年のAdobe Flashでは、AIRアプリ開発、HTML5 canvas制作ツールとしての機能が強化され、もともとのflash作成という面はあまり目立たなくなっています。
すでに若い人たちはFlashそのものの存在自体を知らないと思います。
未だにFlashを使用しているサイトが、web黎明期のmarqueeタグやblinkを多用したサイトのような過去の遺物、化石のような扱いを受けることもあるのではないでしょうか。
というわけで久しぶりにFlash触ってみたけど、懐かしすぎて泣けてきた。
さらに、swf埋め込みの記述の仕方忘れてわかんない！
表題の通り、ECキューブとにらめっこを始めました。
一つのDBを使用して、複数の店舗サイトを運用するというお題なんですが、いろいろ調べながらやっております。
Aというサイトがあって、同じ商品を扱うBというサイトを用意するために、とりあえずテスト用のサイトをいくつか作ってみて、わかったんですがテーマはAとBとで分けることができるんですけど、DBは一緒なのでレイアウト設定などで表示非表示の出し分けができないです。
ちなみに管理画面はユーザーIDとPWが一緒なはずなのに、AでログインするとBでログインできなくなります。まいったなこりゃ。
あまり参考にはならないかもしれませんが、Concrete5についていろいろな悩みを持っているという方が多いという話を聞いたので、自身の体験からデザイナーの悩みを払拭してみます
デザイナーが躊躇う第一の理由がプログラムです。
僕はweb業界で働くようになって、三年前にフリーランスになるまでプログラムは書いた事がありませんでした。
会社員時代にやって来た仕事は、基本的に設計書を書いて→デザインを起こして→htmlとcssでコーディングするまで。
システムの実装はプログラマにぶん投げていました。
僕もそうなのですが、はっきり言ってしまうとデザイナー職の人ってプログラム見るの嫌いなんですよ。アレルギー。
phpのソースファイル開いただけで「なんだそれ、わけわかんねー」って言って興味すら持たない人だっています。僕自身も昔そうでした。
もちろん、仕事上必要だから言語の基礎的な部分は理解してたつもりですが、ifとかechoとか本当に基礎の基礎、高校の授業で習うレベルの知識しかなかったんです。
そんな僕が出来ている理由をご紹介します。
Concrete5は汎用性が高いCMSですが、基本的に普通にhtmlとcssを書いているのと同じ感覚でコーディングすれば特に問題がないです。
html+cssだったらWebデザイナーなら作業できますよね。それでいいんです。てかソレ以外にphpでいじる必要がある様なものは大体マーケットプレイスにアドオンがあります。
Concrete5の概念をシンプルに考えると、大きく分けて下記の二つに分類出来ます。
テーマは全体のデザインやレイアウトを決めるための要素です。
themesフォルダに入っています。htmlやcss、共通で使用する画像はここに置きます。
テーマのファイルは.phpですが、テーマ内にphpのループ処理や複雑な記述はありません。後述のブロック追加タグがあれば大丈夫。
ブロックは、CMSでは一般的に編集可能なエリアの事を指します。
テーマファイルの中にブロックの記述をするとその部分がCMS運用時にブラウザで編集可能になります。
<?php
$a = new Area('任意の英数');//場所毎に名前を変える
$a->display($c);
?>
実際にファイルを開いてみると、上記のブロック追加は最初から書いてあるのでhtmlのマークアップや、cssを変えるだけで組み込みできちゃいます。
ここまででphpを書く必要がほぼない事はご理解いただけましたでしょうか。
静的なhtmlで30ページのサイトを作るとしたら、めんどくさいいくつかの作業があります。
例えばナビゲーションのリンクが切れてたり、パンクズはページ毎に設定しなきゃいけなかったり、共通部分のhtmlなんか毎回書いてられるかって話になると思うんですよ。で、手作業でやってると必ず間違えるんです。人間ですからしょうがないとしても、間違いの確認やら修正やらで余計な時間を取られるのって気持ちのいい事ではないですよね。
こんなのはたとえ話で実際にそんな案件ってもうあまり無いです。
むしろ静的htmlで30ページ作ったらconcrete5に組み込みするより高い見積もりにしないと割に合わないんじゃないかなぁ…。
で、予め用意されているものとして代表的なものが、以下。
他にもたくさんあるけど、別の機会にご紹介します。
スライドショーは画像を選ぶだけで作れるし、オートナビはページさえ作れば各ページのサブページまでリスト構造化します。
wysiwygエディタは言わずもがな。エクセルからコピペすればそのままテーブルで入ったりしてとても便利。
これらは、特になにか設定をするわけでなく、デフォルトの機能です。
「あぁ、ブロックから出力されるタグが<li>じゃなくて<p>だったらなぁ〜」と思った事はありませんか？
concrete5には「カスタムテンプレート」という機能があります。
これは、オートナビブロックやページリストブロックなどの出力される内容をちょっといじったりすることができます。
カスタムテンプレートはphpを知っていればより自由度の高い変更ができますが、僕は特に必要としていません。敢えてphpを書いていると言えば、ページタイトルを出力しているタグをコピペしたり、リンクをコピペしたり、基本的にコピペで出来てしまうんですよ。
ここまでで、プログラムについて細かく説明せずに書きましたが、本当にこの程度の知識で汎用性の高いCMS構築が出来てしまいます。
僕が簡単に扱える上に、お客さんからはこんなに使いやすいCMSは初めてですよ！とお喜びの声が聞けてwin-winの関係が築ける事間違いなし！！
concrete5とは全く関係ありませんが、こないだ初音ミクV3を買ったので、作曲しました。
V3に一緒にStudio Oneというソフトが付いて来たので、それで編集をしました。
ただ、ギターとベースの録音に関して僕の持っているUSBの接続ケーブルだとどうやってもinputできなかったので、ギターとベースはgaragebandで録音して、トラック毎にwavに変換してStudioに読み込みした後エフェクトかけました。
ギターとベースを撮ってるときはノリノリでポップでキャッチーな曲を作ってるつもりだったんです。
それがどうしてこうなったのか自分でもわかりません。
1年と2ヶ月前から待ちました。
もう、今年に入ってからは存在自体忘れていま…いえ、そんなことないです。
ずっと待ってたんです。
えぇと、お値段は…いくらだっけな…。
確か80ドルくらいでした。
[追記]
ごめんなさい、今調べたら日本円で8200円+配送料1800円+消費税で10500円でした。
で、発送元は花のサンフランシスコ…じゃなくてシンガポールでした。生産がシンガポールなのかな。
「発送したでー」メールが届いてから、わずか8時間でヤマトのにーちゃんが持ってきました。
Fedexのトラッキングしたら、3日前くらいに発送してたので、単にメール来るのが遅れただけっぽいですね。
そしてついに、LEAP MOTIONが私の手元に！！ｲﾔｯﾎｰｰｰｩ！！
箱の質感がなんか安っぽいと感じるのは、普段アップル製品ばっかり買ってアノ箱に慣れてしまったからだと思いたい。
という方は、まず下記の動画をご覧ください。
今までのPCのインターフェースって、マウスだったりキーボードだったりして物理的なものを押すなり動かすなりして、PCの操作を行ってきましたが、LEAP MOTIONはモーションセンサーで手の動きを読み取り、それをPCに反映します。
僕は良く知らないけど、似たようなインターフェースはマイクロソフトのキネクトとかがそうらしいですよ。
大きさは100円ライターを2つ重ねたくらいの厚みで、デザインはアルミと黒の組み合わせなので、非常にMacに合いますね！
USBでつなぐだけ！早い！簡単！！
ってわけにもいかず、前項の写真に記載されているように、https://leapmotion.com/setupへアクセスして、専用のソフトのダウンロード・インストールが必要です。
Airspaceアプリ画面
LEAP MOTION専用のアプリケーションを提供するプラットフォーム「Airspace store」が2013/07/23にオープンしました。
現状アプリのAirspaceをクリックするとブラウザ開いて普通のウェブサイトが表示されるんだけど、これそのうちAirspaceに統合されるのかな。iTunes storeみたいに。
Airspace storeでは、やっぱりiTunes storeみたいに、LEAP MOTION専用のアプリを購入する事ができます。
ただ、iTunes storeと違って、まだ始まったばかりのサービスなので、アプリの数は非常に少ないです。まだ100個くらいしかありません。
デフォルトで「Visualizer」という機能が付いているので、それを動かしてみました。
こんな感じで、手の動きをキャプチャして画面の操作に反映します。
例えば、「Touchless」というアプリを使用して、従来であれば、マウスで行っているカーソルの動きを、LEAP MOTIONの操作で行う事も可能になります。
ただ、奥行きや高さの情報も含まれる為、カーソル操作をLEAPで置き換えて使用するのは、今まで平面の画面に対してマウスを使用して平面の操作を行っていたものを、3次元的に操作する必要性は全く感じません()
例えば、カーソルを画面右上に持って行きたいときに、腕を右上に持ち上げないとカーソルは右上に行かず、また、クリック操作は指を前に出す操作になるので、前に出した瞬間に上下左右の位置がずれてしまう。
ごめんね。絵が描ければ図解できるんだけど…。
つまり、どういう事が言いたいんだってばよってところで、個人的には、LEAP MOTIONを最大限に活用するには今までにない新しいOSが必要なんじゃないかなーって思います。
PC用のOSでも、タッチデバイスOSでもない、3Dを基本概念として設計された全く別のOS。
LEAP MOTIONがあれば、掴む動作や、はじく動作、あおぐ動作なんかも実装できるわけです。
テレビなんかもね、あんなたくさんのボタンをつけたリモコンを作るんじゃなくて、こういうインターフェースで手を叩いたら電源つけるとか、右に手を振ったらチャンネル切替とか、いろいろできるんじゃないかなって思って、夢がどんどん広がっていくわけですよ。