position: absolute;

あなたが2013年に目にするであろう10のWebデザイントレンド


THE NEXT WEBというサイトで「10 Web design trends you can expect to see in 2013」という記事が掲載されていました。
海の向こうの記事ですのでそのまんまと言うことはないとは思いますが、あちらのトレンドがいろんな形でやはり影響を受けると思いますので、こういう形でまとまっている記事を参考にするといいかなと。
というわけで、別段邦訳許可もとっていないので見出しの訳中心で紹介したいと思います。
※ 訳の正確さについては一切自信ないのでちゃんと読む場合は原文かちゃんとした邦訳記事が出るのを待ってください。というか訳してください。


HTML5のvideoとcanvasで動画のキャプチャを取る


このエントリーはGraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012の19日のエントリーになります。

先日CSS Nite LP, Disk 25:Webデザイン行く年来る年(Shift6)に参加しました。その時にこのAdvent Calendarを起こしたoyamadaさんにもう「ひとつエントリー書いて」と言われましたので、ちょっと小ネタですが19日めとして登録しておきます。

動画のキャプチャを取る方法は様々ありますけど、HTML5でも手軽な方法でできますよということで。

サンプル
※動画はW3Cのサイトで利用されていたものを拝借しました。

「snapshot」というボタンを押すと再生中の動画のキャプチャを撮ってHTML内に挿入します。imgタグで入ってますので大抵の環境であれば右クリックで保存できます。

コードの解説ですが

canvasContext.drawImage(videoElement,0,0);
// 座標関係はとりあえず0,0で

以上!これでcanvasに再生中のvideoのキャプチャが取り込まれます。
ちなみにimgタグにcanvasのデーターを反映させる方法ですが、

imageElement.src = canvasElement.toDataURL('image/png');
// 'image/png'は出力する形式に合わせてください

というわけでJavaScriptのサンプルはこちらです。はい、小ネタでした!


イベント定義でonを使ってみよう

このエントリーは軽めのjQuery Advent Calendar 2012の19日目のエントリーです。

jQueryを利用する利点にイベントの処理が書きやすいというのがあります。例えばクリックでアクションを起こすときには

$('hoge').click(function)

という書き方で、対象の要素を指定してしまえば容易にイベントを割り振ることができます。

で、このエントリーのタイトルは「onを使ってみよう」ということですから、

$('hoge').on('click',function);

という形で書けばいいよね。ハイ終了!

…ではなくて今回紹介したいのは

$('fuga').on('click','hoge',function);

という形式のonの利用です。リファレンスの表記で表すと

.on( events , selector , handler(eventObject) )

という形式になります。イベントを設定したい要素の親要素のセレクタを「fuga」に入れ、イベントを設定したい要素を(findの要領で)「hoge」に入れます。


岡山(地方)でサテライト勉強会を開催することについて

このエントリーは大都会岡山 Advent Calendar 2012の14日目のエントリーです。

さて、「本当に阪急ブレーブスの動向について書くの?」という空気が漂ってましたが、各球団の来季スタッフをいちいち調べるのも面倒なので他のことにします。

というわけで岡山(地方)において東京が羨ましいと思えることの1つに、コミュニティというか勉強会の充実ということがあげられると思います。単純に人口が多いので業界に関わっている人も多いですし、登壇ができるような人も多い。多少ニッチなテーマでも成立するといった点でやはり太刀打ちできないわけです。

それの解決策のひとつとしてサテライトの開催というのがあるではないかと思います。

今年、都合2回サテライト勉強会の開催を行いましたので、その辺りを振り返りつつ「地方でサテライトを行うこと」について書きたいと思います。

2012年は下記の2回、サテライト会場を主催しました。

注意すること

いざという可能性はアナウンスしておく

サテライトで中継するのは今では主にUstreamを利用することになります。その関係で様々なトラブルが予想されます。

  • 配信側機器の不調
  • 配信側ネットワークの不調
  • Ustreamの不調
  • 受信側ネットワークの不調
  • 受信側機器の不調

などなどです。そのため、「万が一」の可能性があることと、その際はご理解頂くことをアナウンスしておく必要があります。また、そういったリスクがあるので料金も会場代の頭割りぐらいが適当かと思います。

ネットワークが用意されている会場を確保しよう

私の場合、どちらもサムライスクエアさんをお借りして行いましが、こちらは無線LAN完備。モバイルでも行えますがやはり電波の状況が読めないことと、後述の件も踏まえて固定回線が利用できる方がいいかと。

ネットワークのバックアップを

固定回線といえどもトラブルの可能性はあります。こればかりはどうしようもない。なので、できればWiMAXかLTEの回線をいつでも使える状態にしておきましょう。

時間に少し余裕を

配信側が押してしまった場合なども考えて終了時間などは少々余裕を思って借りましょう。

サテライトならではのメリット

いきなり注意点書きましたがサテライトならではのメリットも当然あります。

ゆるくできる

登壇者の集中力をさくとか、進行に影響するといったことも基本無いのでゆるく気楽にできます。

お話もできる

上記と関連してますが、ちょっと聴きながら思ったことを言ってサテライト会場の人たちと共有したり、ちょっとツッコミを声出して言ってみたりとかはサテライト会場ならではですね。

サテライト会場からの発表

行ったサテライトではどちらもLTやグループワークの発表をサテライト会場から行うという事をやりました。Sublime Text 2ではG+のハングアウト、WebsigではSkypeを利用しました。別に何を使おうと問題無いですが、ハングアウトのデスクトップ共有などを使うとスムーズでいいかも。(Skypeのデスクトップ共有っていつから有料アカウントの機能になりました?)

注意点としてはサテライト会場側の配信の音声を切ること。マイクから入ってくる配信の音声がタイムラグ2重奏でおかしな感じになったり、最悪ハウリングを起こしたりといいことなしです。

サテライトをやる意義

最近ではUstreamで配信を行う勉強会も多いので家や職場で見ればいいといえばそうなんですが。

  • 集中できる
  • 集まった人たちとコミュニケーションがとれる
  • 遠方で同じ事に関心のある人達とコミュニケーションがとれる
  • 聞くだけでなくこちらからもアウトプットすることでより深くやりとりができる
  • 思ってるよりはコストが少なく開催できる

という利点があります。

Websigでは各地方のコミュニティに打診があり私が手を上げたという形ですが、Sublime Text 2は東京での開催のお知らせを頂いてすぐに「サテライトをさせてください!」とお願いして開催しました。もともとUstreamでの配信は予定されていましたが、こうやってサテライト会場があるとよりそちらにも力を入れてもらえるので、オープンな配信であればサテライト会場の人たちだけでなくそれ以外の人たちにも恩恵があると思います。配信側の人たちの手数が多少増えてしまう面もあるので無理は言えませんが「これ聞きたいなあ」と思ったら同士を集めてサテライトを行うというのも1つの方法だと思います。

大都会岡山 Advent Calendar 2012の14日目のエントリーは以上です。明日は@razonさんです。ありがとうございました!


Tumblr ReactionTreeを補助するuser.jsを作った


Tumblr ReactionTreeで情報の拡散を視覚的に見るのが結構楽しいんですが、一つだけ難があるとすれば「もっと見る」をクリックしなければならないところ。

ということで「もっと見る」を自動的にクリックするuser.jsを作成しました。

openmorenots.user.js

0.5秒ごとに「もっと見る」があればJavaScriptでクリックするので、noteが多いエントリーはしばしの間ダッシュボードでも見ながら待って頂ければ。