3pandaの日記

3pandaの日記です

enchant.jsデビューな今年を振り替える

enchant.js Advent Calendar 2012の13日目のブログとなります。
Advent Calendarは初参戦なのでちょっとドキドキですw

さて、
少し前にバージョン0.6になり、ついにCanvasの利用が標準化になったり! なんとWindows8に対応したり!! 独自開発のハードウェア “enchant MOON”の開発が発表されたり!!! などなど本当に色々と盛り上がっているenchant.jsなので、そのあたりの事とかを記事に出来たら「いいね!」が100くらい軽くつきそうですし、本当は書きたいところなんですが・・・・
今回はあえてenchant.jsデビューのこの一年を振り返ってみようと思います。(ネタがないだけやろw)

enchant.jsの出会い

enchant,jsとの出会いは今年の春先の事でした。
きっかけは「かなり簡単にゲームが作れるよ!」とか「ファミコンみたいなゲームが作れた!!」とかとか、TwitterFacebookのタイムラインで上でのもりあがりでした。
そしてタイムラインを見ているうちに興味を持ち始め、「そろそろやってみよっか!」なんて思っていた丁度良いタイミングに開発元のUEI(株式会社ユビキタスエンターテインメント)が大阪でイベントをするとの事で参加したのがはじまりです。

しかしこのイベント、大まかな場所は新大阪と分かっていたのですが、具体的な会場がどこなのかを発表されたのが開催日間近のギリギリだった事、開催日時が金曜日の夕方と言う事もあって、参加表明が10人で実際に参加していたのは私を含めて5人でした(^^; 
たぶん記憶に間違いが無ければ主催者側とあまり変わらない人数だったと思います。
「おいおい大丈夫かよ」って内心思いつつ会場に向かったのですが・・・このイベントがかなり最高に楽しかったので私は一気にenchant.jsとUEIのファンになりましたw
ちなみにその時の感想をかなりメモ書きですが記事にもしてますのでご覧下さい。

enchant.jsの素敵なところ

ここではenchant.jsの素敵なところをまとめてみましたw

良い情報がネットにゴロゴロ

イベントの後、すっかりファンになった私は早速勉強を始めました。
基礎の勉強にはドットインストールさんを利用しました。ここは他の言語とか勉強するにも最適ですw
(話がそれましたが)基礎を学んだ後はひたすらネット上に転がる情報を探して勉強をしていました。enchant.jsは現役のゲームプログラマーさん達の間でも評判が良いので、BLOGにTipsを書かれている方も多く、ネット上には素晴らしい情報がわんさか転がっていました。
またjsdo.itや開発元のUEIが提供する学習環境code.9leap.netに良質なサンプルが沢山り、プログラミングの学習教材としても、すごくいいんじゃないかと思いました。

他にも色々参考になるTipsや資料がありましたのでご紹介~

いや、ほんと導入が簡単なんですってw

「百聞は一見に如かず」と言いますので、まずはこちらをご覧下さい。

JavaScriptのコードを見ていただけると分かるんですが、コード量はわずか17行程度、これだけでクマが登場します!

詳細な解説は後ほど出てくるスライドをご参照ください~

プラグインが豊富

enchant.jsは公式なプラグインが充実していて痒いところに手が届くところが素敵ですw
尚、プラグインのいくつかは、enchant.js本体にマージされていくとの事です。
以下に紹介するものはいずれ統合されるかもしれませんがご了承くださいませ。

ゲームには欠かす事の出来ない方向パッドやボタンを設置できるプラグインです。
くわしい解説はphiさんの記事を見ていただければと思います。
ちなみに私も設置してみました。サンプルはこちら以下の通りです。

tl.enchant.js -- アニメーションが簡単にできるよ!

enchant.jsでアニメーションを簡単につくる事の出来るプラグインです。
具体的な使い方の解説は以下をごらんください。

ゲームを制作する時に色々と活用できそうなのでいつか本体にマージされるんだろうと思いま・・・・・って記事を書こうと調べてみたらv0.6では本体にマージ済みとの事wこちらを参照

gl.enchant.js --3Dゲームもつくれます!!

WebGLを利用し3Dゲームを作るためのプラグインです。
このgl.enchant.jsが先ほど紹介したイベントの後半でものすごく盛り上がりましたw
詳しい内容はこちらをご覧下さい(もうこればっか!)

UEIの人が素敵だ!!

ちょっとこれは横道にそれているかもしれませんが,UEIの人がとっても素敵です。
イベントでお会いした(残念ながらどなたとも話せず)UEIの近藤誠さん高橋諒さん(gl.enchant.jsの開発者)の二人もとってもすばらしい方々なのですが、CEOの清水 亮さんがいろんな意味さらに上をいっていてで素敵ですw
人となりはBLOGを見ていただければ分かると思います。とってもおもしろい(ためになるって意味も含めて)記事を多く書かれているので読まれる事をお勧めします~

あと、勉強会でenchant.jsについて発表する際に広報の方に少し問い合わせをしたのですが、その対応も親切で丁寧でした。
一見関係なさそうですが、こういうのがかなり重要だと思うんでよ。なぜかと言うとフレームワークってきっと使う人にどれだけ気遣いが出来るかって事も重要で、それって開発している人だけじゃなくて関わる人の意識とかにも影響するのかなって。
まぁ、最後は極私的な意見ですがそれを抜きにしてもenchant.jsって素敵ですw

「パンダの会」その七 で発表したよ!!

7月にはHTML5.west.jpで久々に発表したんですが、その際にenchant.jsについて発表しました。でもって私が個人的にやっている勉強会「パンダの会」の第七回になるその七でも続けて発表させて頂きました。

簡単なゲームも作ってみたよw

「パンダの会」で発表するにあたり、実際の導入からサンプルを作っていきました。
最終的にすごーーーーく簡単ではありますがゲームもつくりましたw
でどんなゲームかと言うと・・・・・ こちらをごらんください~
「クマが画面上を飛び回るガイコツから逃げる」ただそれだけのゲームです。 何にもすごくありません。
でもこれJavaScriptのコードが200行以下にで作れるんです。そう聞くと少しすごくないですか?
ちなみに私のようなプログラム素人が書いたコードなので、きっと沢山の無駄がありますし(今みたら自分でもそう思うw)上手く書けばこのくらいのゲームならもっと少ないコードで完成できるんじゃないかと思います。

無理やりだけどまとめだよ

そんなこんなで、今年は本当にenchant.jsな年でした。
来年も「enchant MOON」の登場とか色々と楽しみがてんこ盛りですね。
私ももっとゲームを作っていきたいと思います~

睡眠の質とかダイエットの話

健康的な生活には睡眠。
これは間違い無く重要。そして睡眠はその時間も大切だけど、やはり質も結構重要な要素だと思う。

  • 寝る前に部屋を暗くする
  • 夜食は出来るだけ控える
  • 糖分は取り過ぎない

は正しいと最近実感している
ただ、ここで勘違いしてはいけないのはあくまで基本姿勢であると言う事。
もしこれを実践している時に
”空腹で眠れない!!!!”
なんて夜が来たら夜食を食べても良いのです。
そして、ものすごーく、どうしようもなく
”甘いものが食べたい”
なんて時は甘いものを食べれば良いのです。

肝心なのは”無意味に食べてしまう事”をやめること。
"どうしても食べたいわけじゃないけど"
って場合は我慢すべきで、逆に
”食べないと寝れない・・・耐えれん!!”
ってなる場合は食べないとストレスで寝れなくなる。

もちろん量はある程度気にすべきだけど
普段、"口が寂しい"とかを理由に食べていないければ
たまの不摂生は対した問題じゃないと個人的には思います。

普段はお菓子もコーヒーの砂糖すら控えめにする私ですが
たまにはケーキも食べたいし、夜中のラーメンだって食べたい!!!
って時があります。

と言うわけで、私は
”たまのケーキやラーメンやハンバーガーを美味しく食べる為に、普段は無意味に食べない!”
っと心がけています。

物事は考え方次第、辛く感じる健康的な生活習慣作りも、こう考えれば無理なく続けれるのではと思っています。

専門家(プロ)が求められる事

最近、保険を見直した3pandaです。
皆さん、医療保険やがん保険に入ってますか?
保険って大事ですよ。
加入されてない人は、(特に30代以上の方)一度考えてみましょう。

そんなわけで、かれこれ三ヶ月程前から、保険に入る事を決意したのですが・・・
まぁ、如何せん種類が多すぎて多すぎて、自分にとって一番良い保険が分からず困惑しておりました。

困惑してどう進めれば良いかを悩んでいたところ、ある事を思い出しました。

世の中には「ファイナンシャル・プランナー」と言う生活に関わるお金の専門家がいて、保険なんかの事は相談するといいらしいと

顧客である個人から、収支・負債・家族構成・資産状況などのソース提供を受け、それを基に住居・教育・老後など将来のライフプランニングに即した資金計画やアドバイスを行う職業・職種、およびその職に就く者。

引用:ファイナンシャル・プランナー - Wikipedia

と言うわけで、早速ファイナンシャル・プランナー(以下FP)さんを探し、あるFPさんを見つけ相談に乗ってもらいました。

「やったー! これでバッチリの保険に入れる!!」
と喜んでいたのですが、世の中はそんなに甘くありませんでした;;

そのFPさんは、非常に弁が立ち、医療保険やがん保険等の知識に長け、そして面白いおじさんではあったのですが・・・・・

  • 聞いた事しか回答してくれない
  • 質問をしても回答が遅い(メールで)
  • 専門用語を当たり前のように使うので理解できない時がある、そのフォローは無い
  • 提案書等の些細な事が間違っている
  • 保険の設計書に不備が多い(名前とか年齢とか)
  • 依頼した書類が自宅に送られ来たが、明らかに足りない・・・・
  • 肝心なところをウヤムヤにする

orz・・・・

はじめのうちは、些細な事はあまり気にしないでいたのですが、それも積み重なると不信感が積もってゆきました。
それでも、ある程度時間を割いたので、我慢してやり取りを続けていたのですが、最も肝心な保険の設計の不備を見つけてしまい、 契約寸前ではあったのですが、完全に信用出来なくなり、全て白紙にしてもらいました。

そんな事もあったので、
「もう、保険なんか入るか!!!」
と荒れていたのですが、そういう訳にも行かないので新たにFPさんを探す事としました。

その後、色々とFPさんを調べて、信頼できる人を見つけ、先日ようやく無事に保険の契約を完了しました。(何事もありませんように;;)

さて、少し長い前振りでしたが、いよいよここからが本題になります。
今回の件で、私はある思いに駆られました。

それは
「普段の自分はお客様(クライアント)にこんな嫌な思いをさせてないだろうか?」
と言う事です。

Web制作の仕事をしていると、お客様の都合で大変な目にある事が多々あります。
それはもう、ここには書けないくらい色々な事がありあます。 (^^;

普段、仕事をしていると、ついつい自分目線(制作側)で考えがちなんですが、今回のように自分が専門家(プロ)に仕事を依頼する立場になり、
依頼人=顧客の立場で色々と考えてみる事で、「専門家(プロ)が依頼人(クライアント)に求められる事」を改めて考えさせられました。

今回はそんな事を記事にしてみました。
少々長くなりますが、お付き合い下さいませ。


専門家は世の中に沢山存在する

とても当たり前の事ですが、ついつい忘れて自分は特別なんだと思いがちでは無いでしょうか?

この記事をご覧の皆さんの大半はWeb制作の専門家として活躍されている方かと思います。
Web制作のお仕事でない場合でも、何らかのお仕事をされている専門家であると思います。

もし今、「アルバイトだからプロじゃない」や「まだが浅いからプロとは言えない」と自分は該当しないと、
思われた方が居ればそれは違います。

例え「アルバイト」であっても、「経験が浅い新人さん」だとしても、仕事としてその業務を行っている以上、あなたは専門家として扱われます。

もし、これまでそう思われていなかったのであれば、今この時を持って、その自覚をお持ち頂ければと思います。


依頼人=顧客が専門家に仕事を依頼する理由

ある人が問題を抱え、それを専門家に依頼した時、
ある人は依頼人=顧客(以下、依頼人に統一します)となります。

そして、依頼人が専門家に依頼をする大きな問題=理由としてはこの二つかと考えます。

  • 安心を得たい
  • 負担を軽減したい

もちろん他にもあるかもしれませんが、大きな問題=理由としてはこの二つが締めていると思います。

安心を得たい

安心を得たい=不安から開放されたい
依頼人が専門家に何かを依頼する場合、それは幾つかの不安を抱えている
場合が多いと考えれます。

不安については書き出せば数限りなくあるのでしょうがここでは下記の二つに絞らせて頂きます。

  1. 知らない事への不安
  2. 失敗への不安

知らない事への不安

例えば同じ距離を歩くにしても、【初めて行く場所】と【毎日通っている場所】とではどちらが不安でしょうか?
前者の方が確実に不安になるのではなでしょうか?

人は経験した事の無いものには不安を覚える事が多いと思います。
しかし経験したものにはある程度の予測が立つ為、その不安は軽減されます。

未知の存在、経験・・・は不安な事が多いです。

失敗への不安

人は失敗したくないもだと思います。私はそうです。 もちろん「失敗から学ぶもの」もありますが、「失敗が許されない事」も生きていれば沢山あると思います。

少なくとも私はそうです。 もちろん、失敗覚悟で挑戦もしますし、それも大事ですが今回はそのあたりは割愛します;

負担の軽減をしたい

負担の具体例を挙げると下記の二つが考えられます。

  1. 時間
  2. お金

他にも幾つかあるかと思いますが、私はこの二つが軽減したい大半の理由です。

時間

例えば「その作業を行う時間が無い」これも専門家に依頼する理由になりえると思います。
その場合、自分自身でも出来なくはないので、先に述べたような不安は無いかもしれません。
しかし、その作業に割ける時間が無い事が、大きな負担である場合は専門家の力を借りて解決すると思います。

生活に置き換えれば、晩御飯を作る時間が無くて外食をする場合等が一番分かりやすい例かと思います。

お金

専門家に頼む事で費用が掛かってしまう場合もありますが、求めている結果に照らし合わせた時に
依頼する方が費用を抑えれる事も多いと思います。


依頼人が専門家に求める事

では、依頼人が求める内容に専門家をどう答えるべきでしょうか? 抱える不安を解消する為には下記のようにすべきではないかと私は考えます。

依頼人に誠実である事

「出来る事」、「出来ない事」は正確に伝える必要があります。 とっても当たり前の事ですがとても重要だと思います。

「出来ない事」は始めに伝える。

これは本当に重要な事だと思います。

そして、ただ単に「出来ない」と言うのでは無く 依頼人の求める事に限りなく近い目的を対案を示す必要があります。

先に述べたように依頼人は不安や負担を抱えています。
その問題(不安・負担)を解決(開放・軽減)する為に、専門家に依頼をしているのですから 誠実でなくていけません。

依頼人を裏切ってはならない

依頼人は安心を得たい、または負担を軽減したいと言う目的から専門家に依頼をしています。 それにも関わらず、それ成しえないと言う事は、依頼人にとって大きな裏切りです。

ですから致命的な失敗で無くても、不安にさせるようなミスは起こしてはなりません。 不安を解消する為に依頼をしているのに、不安にさせてしまっては依頼人にとって 専門家に任せた意味が無くなり、裏切られたと思われても仕方ありません。

ただ人は完璧では無いので、やはり失敗をしてしまいます。
それは仕方の無い事ですが、依頼人は完璧を求めているわけですから、失敗をした場合は誤魔化さず謝罪し誠意を尽くし信頼を再度得る必要があります。

また犯した失敗が些細な事でも、表面上は大きな問題にならなかった場合でも、依頼人からの信頼は確実に下がっていると考えるべきです。 そして些細な裏切りの繰り返しは修復できない溝を生む事になります。

※期待以上の事をやってしまう「良い意味での裏切り」は対象外です。

依頼人の目線に常に立つ

例えば、自分の専門用語で話してはいけない。 自分がやれば直ぐに出来る事を当然のように依頼人に求めてはならない。

依頼人は素人である。

依頼人は時に余計な事をして専門家の手を煩わせる事もあります。 しかし、それは仕方ありません。 依頼人は素人なのです。 だからこそ、専門家に依頼をしているのであると言う事を忘れてはいけない。

自分自身がその分野において専門家であっても他の分野では素人なのだから 驕ってはならない。 専門家は驕るのでは無く、素人を責任を持って補助すべきなのです。

依頼人よりも依頼人を理解しなければならない

これは依頼された内容に限らず、可能な限り依頼人を知る必要があるのでは無いかと思います。 依頼人が抱えている問題が、「何なのか?」「自分の専門分野で有るのか?無いのか?」 自分の専門分野であった場合は当然として仮に無かったとしても誠実に対応すべきである。

自分の専門外でなければ専門家を紹介したりのフォローをし、依頼人の問題解決に 全力を尽くすべきであると思います。

まとめ

実体験での依頼人になった場合に感じた専門家への不満から 改めて自身が専門家となった場合にすべき事を考えなおしてみました。

そうすると、普段クライアントに感じている、不満だったり、不信感だったりが 如何に自分勝手な思い上がりなのかが分かってきました。

依頼人は抱えている問題を解決する為に我々に依頼をしているのだと言う事。 また、自分自身もある分野においては素人であり、依頼する側の人間である、そして その場合の方が遥かに多く、専門家には完璧を求めていると言う事を忘れてはいけない。

今回、そんな事を唐突に思い立ち久々に記事にしてみました。 このように考えれるだけで、働く事が少し楽になたり、やりがいを感じれるようになれば嬉しい限りです。

補足

今回の記事は、ここ最近の体験で気づいた事や先日のCSS Nite in KOBEでお聞きしたお話が大きく影響しております。
本記事はその内容に触れてはおりませんが、大変勉強になったイベントでした。

何も考えずにただ思いのまま書いてみる実験。HTMLで時間軸がどうたらこたら

なんでだろう?

外に出ると無性に書きたい事とかが溢れてくる。

今も自宅へ帰る地下鉄の中、
しかし、乗り換えだからまたしばらくは書けない 歩きながらはあきません~

-10分くらい歩いてました-

ふぅ、
JR線に乗り換え待ち。

そう言えば前に時系列を表現するならHTMLなのかCSSなのかって話を酒の肴にしたなぁ~

-電車が来たのでのります-

座席すわって発車待ちです。
うーん、やはり時間軸の要素は必要かもしれない。

この記事のように時間軸を意識して書く事なんかそんなに無いだろが、例えば小説だったりすると間ってやつは必要…

でもそれって読み手の解釈?

時間軸と言っても幾つパターンがあるかもしれない。
思いつくものは小説などの読み手がある程度は世界観を自由に出来るもの。

もう一つは入念に練られたタイムスケジュールやこの記事のようなドキュメンタリーぽいかんじ。

-眠れなったので仮眠します
15分経過
-起きた最寄駅だ!
7分経過
バスに乗りました。
遅れてたからかすごい飛ばしてる
酔いそう…

さてさて時間軸。

僕は少しまえまで、HTMLはそんな事をデータかして表現する為にも使われるんでは無いかと本気で思ってました。
実際にどこかのワーキンググループで今話されてるのかもしれませんが、実現は今のところ現実的では無いのだと思います。

おい!
アクセス踏み過ぎやろ!運転手!
酔いそう
-バスに乗って約10分経過

バスを降りて夕飯を買う為にスーパーに居ます。

さてさてようやく落ち着いてかけます・・・
って、なんの話だってけ?

そうそう、じかんじく、時間軸

先ほどから題材にしているような時間軸もそうですが、途中に書いたような感情や状況説明。
これらもデータ化する為にHTMLやCSSが進化、又はこれらに変わるものが登場すると思っていました。

しかし、現実はまだまだそんなところにはおらずHTMLは便利なテンプレート言語として活用されているに留まっているところで足踏みしています。私的に

それが悪いとかどうとかって話ではありません。

ですが、私がかつて妄想したHTMLの進化とはかなりの誤差があり、その為に少々の絶望を味わった・・・・
というどうでも良い事を少し語ったところで、締めくくりたいと思います。
これ無駄に長くなるフラグなのでw

スーパーで大分、変な目で見られはじめてますし(^^;;

enchant.js meetup! 大阪 vol.2 に参加してきました!

さて、先週末に「enchant.js meetup! 大阪 vol.2」に参加して参りました。

東京ではわりと人が集まるイベントのようなんですが、大阪で二回目となる今回の参加者はなんと約5名w
金曜日の夕方だった事となかなか場所が確定しなかったのが要因かなと思いますが、個人的には少人数だったので色々面白かったですw

■セッション001 「enchant.js & 9leap ロードマップ」 清水亮さん

ユビキタスエンターテインメントCEOの清水亮さんより新サービスなどのご紹介。

●新サービスの発表

ブラウザ上で実行できる「enchant.js」の統合開発環境「code 9leap」を7月2日 βサービス開始!

またゲーム上でHTMLベースのUIを盛り込む事の出きる「widget.enchant.js」についても発表。
widget.enchant.js」はゲームに限らずスマートフォン向けのJavaScriptフレームワークとしての利用も視野に入れているとの事。

背景としては既存のフレームワークでは会社(ユビキタスエンターテインメント)で求める要求に満たしていない為、自社で開発する事にしたとの事。

●9分でゲームを作るライブコーディングバトル

次のセッションから登場のはずの近藤誠さん高橋諒さん(gl.enchant.jsの開発者)の二人に急に バトらせる と言う無茶振りw

高橋さんはgl.enchant.jsがメイン?と言う事で3Dゲーム縛りが暗黙の了解とかw

お題は参加者一人ずつから募った結果「海」「トランプ」「ボール」「計算」「動物」「夢」の6つ

当事者の二人
「6つはやった事ないですよ~」
と言いながらもなんとか簡単なゲームを形にされていました。
すごい!!

この二人が、そうとうすごい変態・・・いやいや凄腕の開発者さんなので当然と言えば当然。とはいえ9分間でゲームを完成させるとすると、書く事の出来きるプログラムは、おおよそ50行程度との事。ぱねー!!

■セッション002 「gl.enchant.jsで3Dプログラミング物理シミュレーション」 高橋諒さん

サンプルとして公開されている「Angry Droid 3D」の解説(だったと思います)をしつつの説明でしたがgl.enchant.jsの解説は正直JavaScriptの範疇を超えていて???が点滅しまくり?!!でも凄かったです。

すいません、こんなレビューしか書けなくて;
gl.enchant.jsは7月中旬に正式リリースとの事ですがすでにβ版が公開されているので触ってみようと思います!

■セッション003 「9 Hacks(仮)」 近藤誠さん

enchant.jsの9つのHackの紹介。

Hack 1 enchant.js でプレゼン

発表に使われているスライドがenchant.jsで作られていました!
これは便利w

1スライドを1シーンとしているようでした。
当然、画面上にクマ(enchantで同じみの)を走らせたりも可能!
是非ともプラグインとして公開して欲しいところです。

Hack 2 enchant.js チートする

ちょっと書いていいか微妙?なんで割愛(^^;

Hack 3 enchant.jsでスターを取る!!

Canvasとして扱って加工して色味をつけるカラーフィルターの関数を作り適用しているようでした。

Hack4 enchant.js でゲームボーイ

Hack3の応用で昔懐かしの初代ゲームボーイを色味を再現。

Hack 5 またゲームボーイ

Hack4とは違いgl.enchant.jsでWebGLのShader?(良く分かっていない)を利用した手法のご紹介でした。

以下、Shaderネタが続きますがコードの解説は説明出来ないので割愛しタイトルだけのご紹介です。すみませんm(_ _)m

  • Hack 6 カメラのフィルターぽい感じ
  • Hack 7 ポップアート
  • Hack 8 凸レンズ風?
  • Hack 9 モザイクフィルター

Shaderは通常は3Dで利用し、立体感やテカリの再現に利用される技術のようですが2D表現も可能でなんかすごいです。
何をしているかは凄すぎて理解できませんでしたが、Shaderが凄かったのでgl.enchant.jsを勉強したくなりましたw

この後、清水さんによるShaderの説明があり、ShaderにまつわるGPUの解説、歴史?などの解説を受けました。

色々と熱く語られていたので難しい内容でしたが聞きいいってしまいましたw
そのなかで
「メッシュと書いたらメッシュが出きるくらい面倒な事をしないでプログラム出来るようにしたい!」
と言われてのが印象的でした!※

このあたりが「若いプログラマーの育成と、文化としてのプログラミングの普及を目的」として「9leap」をはじめられた事と一致する信念なのだと感じました。

※文言は違うかもしれませんm(_ _)m

なんか上手にレビューが書けませんでしたがこんな感じです。
ノンプログラマーな私ですが「enchant.js」にまずます興味を持ったので色々と使ってみようと思います。

参考リンク

自己学習のお話

年度末もそれほど忙しかったわけでもないのですが、輪を掛けて最近さらに待機が多く時間をもてあましているので勉強をしています。

勉強と言っても個人的に興味のある事をただやるわけには行きません。なぜなら会社で働いているのですから、何かしら業務に結びつくものにしないと(たぶん、いや本当に、決して個人的な趣味になんて、そんな・・・・;;;)

そうなると必然的にWeb系の勉強になるのですが、いかんせん私は本で学習するとかネットの記事をみるとかでやるのが苦手で・・・
まぁ、すごく興味を持っていれば行けるんでしょうが、火がつくまでに時間がかかって挫折する事が多い残念なやつなので・・・orz

そんな時に出会ったのがドットインストールでした。

ドットインストールは「プログラミングをかつてないほどに身近にすることを目指しています。」と書かれているだけあってものすごくとっつきやすいです。何が良いかざっとあげてみます

ざっくりなので分かりやすい

プログラミングの入門と言うと、どうしても詳細に書かれていたりするので(それはすごく大事なんだろうけど)私のような超入門者はそこで躓いてしまいがちなんだと思うのでですが、ざっくりした解説とサンプルで体系をつかめるので躓けずに進めます。

長くても3分

一回がこれだけの短さだと、隙間時間にも出来ますし、一度に沢山の事をやらないので身につきやすいと思いました。

自分のペースで出きる

動画を見ながらになるので、理解できなかったところはまき戻して見直せます。また一通りの一連の流れをみてから見直すなども出きるので、自分のペースでやる事が出来てやる気を維持できます。

サンプルコードとデモがある

全てではないですが、私の見たところ殆どのレッスンにサンプルコードがあるので自力で書いたコードと見直せたり、デモがあるので完成形を体験出来ます。

運営されているのは・・・

このドットインストールを運営されているのはかの有名な百式の管理人さんです。

おそらくレッスンも全てご自身おこなっておられると思います。
なんと言うかそのバイタリティには感服いたす次第です。はい

私も見習ってやりたい事を形していきたいと思います。そんなわけでしばしドットインストールでスキルアップをしたいと思います。

Responsiveの本当の意味を考えてみる必要がある。と思う今日この頃です。

Responsive Web Design(レスポンシブWebデザイン)と言うと、デバイスのモニターサイズを「どうするこうする」と言う話に重点が置かれている現状に、少し嫌気がさしている毎日です。

たしかに、デバイスのサイズに合わせて、最適なコンテンツの幅や文字のサイズの調整も大事な事なのかもしれません。

ただそれは、"情報を伝える"と言う"目的"における"手段”の一つであって、必ずしも、それが答えでは無いはずです。

ましてや、デバイス事にレイアウトを変える事を、効果として制作側が面白がってやる為の理由では無いはずです。(実験的にやるのは良いですが)

利用シーンに最適化する必要がある

スマーフォンやタブレットが普及した事で、これまで以上にWebの情報の活用方法は変わってきていることは説明の必要もないかと思います。

利用するシーンもこれまで以上に、日々の生活に密着しているのではないでしょうか?

私の場合ですが、例えば通勤時には、電車の中でスマートフォンRSSリーダーで記事を見たり、SNSを確認したり、カレンダー(アプリ)を見てスケジュールを確認したり・・・・etc
そして、本当に稀にですがWebブラウザを立ち上げて、何かを調べる事もあります。
そう、ブラウザを立ち上げるのは本当に稀な事です。

先ほど書きました通り、情報の収集はRSSリーダーのようなもので最適化し、SNSやカレンダー、地図などのサービスについてもアプリを利用し、ブラウザを利用する必要性が殆どありません。
(余談:アプリの中でブラウザが立ち上がっている場合は非常に多いですが・・・)

スマートフォンをお持ちの皆さんも似たようなところではないでしょうか?

この現状で、なんでもかんでもスマートフォンやタブレットのデバイスサイズに合わせるWebサイトが果たしてResponsive Web Design(レスポンシブWebデザイン)なのでしょうか?

デバイスの最適化と言う観点から、現状の流れは非常に疑問に思えます。

GoogleのProject Glassから未来を考えてみる

GoogleProject Glassの動画イメージがResponsive Designの一つのヒントになるかもしれません。

この動画は眼鏡型のデバイス(Glass)をかけた主人公の日常を描き、そこからGlassのコンセプトを伝えているのだと思います。

さて、この眼鏡型のデバイス(Glass)で、仮にWebサイトを見ると過程しましょう。
その時Responsive Web Designを採用するWebサイトでは、その広さにコンテンツのサイズを広げるのが最適でしょうか????

考えるまでもなく答えは否(No)ですね。

そもそもこの動画の中にはブラウザはありませんでした。
必要な情報は、視界の邪魔にならないところに表示されていました。
Web上の情報網から最適なものを引っ張りだしているベストな形にも思えます。

そして、このデバイスにおいては、我々が現在行っているような、PCでWebブラウザを立ち上げて、Webサイトに情報を見に行く と言う行動が最適では無いのが分かります。

もちろんこれはGoogleの考えたイメージでしかありません。
しかし、よくSF映画で見かける、それ程珍しくもないデバイスの形です。

そう、もう随分と昔から我々がイメージしてきたインターフェイスの形なのです。

そしてResponsive=直訳で"反応する"と言う意味において、このデバイスのようなWebの扱い方は正しいものだと思います。

未来の話ではなく現在進行形の問題

今はまだ、このGlass(のようなデバイス)は存在していません。

ですが、すでにデスクトップマシーンと備え付けモニターから、開放された生活を手にしている現在において、モニターサイズにばかり捕らわれた考え方は、もう捨てる時期にきているのだと思います。

Glassのようなデバイスが登場する時に慌てない為にも、デバイスの利用シーンをもっと検証し、より最適なコンテンツの表現方法を考えるべきではないでしょうか?

そしてそれが本当の意味でのResponsive(反応する)Design(設計)ではないかと私は考えます。