第7回 HTML5minutes！ 〜triton-js〜 のレポート。

第7回 HTML5minutes！ 〜triton-js〜（https://atnd.org/events/62168 ）のレポートです。

基調講演 「ライブコーディングのすゝめ」

• ハッカーズバーでライブコーディングするバイトが有るよ！
• ライブコーディングとはコーディング作業を人前で披露することですよ。
• ハッカーズバーだと、5時間ぐらいライブコーディングしてる。
• WebRTCを使ってライブコーディングするぞ！
• ライブコーディング中は無口になるぞ！
• ・・・・（ひたすらライブコーディング。響き渡るBGM。）
• PCブラウザを使ったライブ配信システム完成！
• 引き続き、装飾開始。。。
• コメントのやり取りを追加してく。
• object-fit = 画像の拡大方法指定、便利。
• ニコニコ動画風字幕を表示できて、拍手（requested by 壇上の氏）
• ライブコーディング終わり。
• ライブコーディングの問題と対策
  • 沈黙
    • 対応策　音楽を流す
    • 対応策　観客が割り込めるようにする。
    • 対応策　観客を取り込む
  • 漏洩
    • 対応策　クリーンデスクトップ
    • 対応策　クリーンブラウザ
  • 動かない
    • 対応策　地力をつけておく
    • 対応策　最低レベルでたどり着ける落とし所を用意しておく
• カッコイイライブコーディングをするために
  • コーディング力を磨く
  • キーリピート感覚を短縮する
  • エディタをカスタマイズする
• まとめ
  • ライブコーディングとは
    • プログラム力を高めるためのもの
    • エンターテイメント性を出すもの
    • コーディングを好きになるためのもの

coffeescriptとwebpackとgulpと

webpackを導入してloaderがとても良かった話。

• webpackとはjsの依存関係を解決して一つにするツール。
• loaderという機能が良い。
• 学習コストが高く、日本語の情報が少ない。
• いいloaderランキング
  • 3位 coffee-Loader
  • 2位 url-loader
  • 1位 underscore-template-loader
• まずは、npm install webpackしちゃいなよ！

超音波

超音波で通信する話。

• Mac+Chromeで超音波出せるし、受け取れる。
• 音波なので、１対多通信が出来る。
• Mac miniのスピーカーだと19.2Mhzくらいしかでない。Mac Book Proだと19.5Mhzくらい出せる。
• 超音波通信、英語だと Ultra Sonic Networking 超かっこいい。

魅惑のデバッグモード

デバッグモードがかっこいい話。

• ゴジラ60thの記念サイト(http://godzilla.jp/special/)のデバッグモードの話。
• デバッグモードはカッコイイぞ！

ワニと学ぶUXデザイン入門

「UXデザインとは」をワニをメタファとして説明する。

• ワニと暮らすという状況を想像する。
• ワニの気持ちが大事。
  • ワニのニーズを満たし、楽しさ、心地よさを考える。
• 売り手よし、買い手よし、世間よし＝ヒトし、ワニ良し、世間よし
• ワニと暮らすためにやるべきことは
  • ワニを知る。
  • ワニとの関わり方を考える。
• ワニと200時間暮らしてわかったこと。
  • 160時間くらい動かない。
  • ワニもあそぶことがある。
• デザインプロセスを最適化すること＝UXデザイン

初めてのお仕事で考えたキーボード操作アクセシビリティのこと

Web業界半年で感じた・考えたこと

• Webアプリをキーボードで操作できるようにする。
  • 忘れがちだよね。
• アクセシビリティーとは＝だれでも、どんなデバイスからでもコンテンツにある情報にアクセスできること
  • マウス使えない状況もあるよね。
• WCAG や、JISX 8341-3にも乗っている。
• WAI-ARIA1.0に沿うことでスクリーンリーダーにモニターの状況を伝えられる。
• ちゃんとマークアップすれば、なんとかなる。
  • セマンティックを大事にしよう
• より多くの人がより多くの場面でより多くのデバイスからアクセスできるようにしよう。
  • セマンティックを大事にすることでまだ見ぬデバイスからもアクセスできる（かも）
• より多くの人にWebの情報を伝えられるようにしましょう。

素人が30分でWeb3Dコンテンツを公開できた話

• jthird 良いぜ！