2014/09/29更新

[フロントエンド] 第3回トリトンJSで、Material DesignとPolymerについて話してきました。プレゼン資料付きです。

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
先日の第3回 HTML5minutes! 〜triton-js〜で30分間のキーノートを担当させて頂きました。 今日はその内容をご紹介したいと思います。

画像


Material Design と HTML5

今回のセッションでは以下の内容を扱いました。
  • Material Designについて
  • Polymerというライブラリについて
  • Polymerを使ってMaterial DesignをWebで実現する実装について
  • Paper Elementの実装の味見
Material DesignGoogle IO 2014で発表されたGoogleのデザインコンセプトです。 今回のセッションではMaterial Designを紹介する動画にまずは触れた後に、Material Designのゴールやコンセプトや構成要素に触れ、Material Designをまるっと学ぶことを目的にしました。

その後のPolymerでは「Google製の未来を作るライブラリである」ことを説明し、jQueryなどの既存ライブラリとは違う一面を持っていることに触れました。 またPolymerが扱う新技術についても触れました。たくさんの新技術があり楽しいライブラリだと個人的には感じています。

そしてPolymerを使ってMaterial DesignをWeb上で実現するところでは、実際にコーディング内容を紹介して具体的な使い方をイメージできるようにしました。 おおなんだか良く分かんないけど凄そうだ、と雰囲気だけでも伝わっていたら幸いです。

最後のPaper Elementsの味見では、paper-rippleという波紋の広がるようなエフェクトについて扱いました。 ChromeのDevツールで中身を見てみたり、Githubで実際のソースコードが読めたりするあたりは興奮しますね!!(って自分だけかな...)。

そんなこんなで30分で盛りだくさんにお話させて頂きました。その後の懇親会で「面白かったです」とたくさん言って頂き本当に嬉しかったです。 聞いて頂きまして本当にありがとうございました!!!

また最後になりますが、本資料を事前に見て頂き様々なご指摘を頂きましたみなさま、ほんとうにありがとうございました。


プレゼンについての余談

最近話すために参加した4つのセミナーで、それぞれ「話すの上手いですねー」って言ってもらえました。 実はそれも目標にしていたので、本当に嬉しかったです! 「天性のものですかね」と言われたこともありましたが実は全くそんなことはありません。

プレゼンで上手く話せるようになりたいという気持ちから、実はめっちゃ練習してます(誰にも見つからずにひっそりとw...)。 資料作成ではいきなりプレゼン資料を作るのではなくて、構成を作り、不足している点は調査や実験を行い、そして遅くても発表日の1週間前までに完成させます。

その後は毎日のように1〜1.5時間くらい会議室にこもって、ひたすらプレゼン練習をしています。 最初の方なんて「あの〜」「え〜っと」などの連発で、所定時間に全く収まりませんw。 話す練習をしながら、資料の論理構成のおかしいところを直しながら、完成度を高めていきます。

そして発表日の2日前くらいに、時間配分や内容やしゃべりで納得のいく状態にもって行きます(この状態にたどり着くまで本当に不安な気持ちでいっぱいですw)。 その後は指定時間内でいかに聴衆に楽しんでもらうか、どのようにプレゼン内で波を作るかなどレベルアップを図りつつ、当日を迎えます。
この状態で当日を迎えられるとプレゼン直前での不安という気持ちはなくなり、逆にワクワクしてきます。「よーしこれから30分間のエンターテーメントだ」という感じのよくわからないテンションですw。

プレゼンを上手くやりたいという思いから、毎回毎回でその時点での最高の準備をして当日に望むことで、次の時にはさらに1歩上に進めるように心がけています。
Youtubeで見る様々なカンファレンスでは、とんでもなく素晴らしいプレゼンに多数出会います。そんな状態にまで自分もなれるようにこれからも頑張って行こうと思っています。

これからも有益な情報をドンドンと発信していきたいと思っていますので、ぜひとも話せる機会をくださいー!!



最後に

今回の内容ではMaterial DesignとPolymerに触れました。これからのみなさまのWeb生活に少しでも役立てれば幸いです。

今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。気になった方はぜひ、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。
最後までご覧頂きましてありがとうございました!





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。