読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

Triton.jsに参加してまいりました(`・ω・´)ゞ

イベント JavaScript

どうも!chuckです。

本日はTriton.jsというプログラミングイベントに参加してまいりました。

 

atnd.org

 

どんなイベント?

主にフロントエンドにまつわるLTがメイン

HTML5やCSS3、JavaScriptSVGWebGLなどの周辺領域を含めた「広義のHTML5」についての情報共有、技術向上、技術者ネットワーキングを目的とした場として、「HTML5minutes」を定期開催しています。

とのこと。

 

あと、会場のビルが晴海とかあのあたり。 町並みも会場もおしゃれでしたヽ(=´▽`=)ノ

 

 

なんで参加したの?

HTML/CSS/JavaScript??僕でも楽しめそう!と思ったから(安直)

 

とは言いつつ、新卒文系プログラマーとしては、色々と悩みがあって。

勉強するべきことがたくさんある!どれから勉強すればいいの???同い年くらいのエンジニアさんたちと交流してみたい!という思いもありました。

(結局懇親会出ずに帰宅しちゃったけど…ヽ(´Д`;)ノアゥア…)

 

LTラインナップ

LTを振り返ってみます。聞きながらメモです。かなり雑。すみません(´Д⊂

基調講演

増井雄一郎さん(株式会社トレタ)

React.jsについて。

 

感想:React.js勉強したい!僕ってようやくAngular.jsを始めたばっかりなんですよね。ずっとjQueryで満足しちゃっていたので。でも新しいことに挑戦したい!というわけで早くAngularJSに慣れてReactをやりたいと思いました。

あと、divタグにclickイベントをつけて擬似的にボタンにするの、ダメらしいですね(´;ω;`) HTMLだけ見たらボタンであることがわからないとか。すごく納得!

あと、Rebuild.fmで話が上がっていたTitaniumのことも。僕Javaはまだ自信ないし、ましてやObjective-Cなんて書けないし、JSでアプリが書ける?タイタニウムがすごくすごく気になります。

それと、増井さんを生でお見かけしたことにも感動しました。Rebuild.fmでお名前だけは伺っていたので、まさかそんな方とお会いできるなんて…!しかも隣の隣に座っていらした…!!!これもプログラミングイベントだからこそ?!

 

React.js:A JavaScript library for building user interfaces | React

Titanium:Titaniumの基本を学ぶ、JavaScriptだけのクラシックスタイルでTODOアプリを開発しよう - 磯部 幸亮 | type IT Academy

 

 

ここから5ミニッツLT

近藤直人さん(LIG) SVG対応したTweenMaxについて

感想:jsのアニメーションライブラリであるtweenMax。非常に気になる。

配列の要素を秒数指定で描画できるとか。最近使い始めたjCanvasと組み合わせてみたい!

 

tweenMax:GreenSock | TweenMax

 

 

近藤直人さん(まぼろし)cannon.jsで3D物理演算

感想:3D物理演算…!なんかすごく難しそうヽ(´Д`;)ノアゥア…

でも、ブラウザで3Dを描画できたら楽しいんだろうなあ。優先度低いかもだけど、余裕を見て勉強してみたい!oimo.jsとかもあるらしい。 

あと、近藤さんはGithub-pagesをDEMO用に使っていた!僕も最近使い始めたばっかりだから嬉しかったw 

MEMO:物理エンジン重力で落下、物体が回転、物体の衝突

 

スライド

www.slideshare.net

 

cannon.js:CANNON.jsを使って3Dに物理演算を持ち込む | CSS-EBLOG


あと、スマートフォンUI図鑑 発売中!とのことでした。

www.amazon.co.jp

 

 

五十川洋平さん(カヤック) クリティカルCSSについて

MEMO:ファーストビューの表示をブロックしているJS/CSSを排除するとのこと。外部CSSをHTMLの<style />内に展開する=レンダリングブロックを排除する。特にページが長くなりがちなスマフオサイトでは有効

有効なツール:critical, grunt-critical, Web service Critical Path CSS Generaller

 

感想:レンダリングのスピードなんて気にしたことなかった。僕はまだ大規模サイトを作れないし、たぶん今は気にしなくてもいいことなのかもしれない。それでも、今のうちから勉強しておいてもいいのかも。

 

スライド

speakerdeck.com


内田裕太さん(メンバース) アプリエンジニアがReactiveNativeを触ってみた話

MEMO:アジャイル開発をしている方。出たー!アジャイル!たまに聞くけど理解してない単語No.1。ちゃんと調べないと。。
アプリ開発は学習コストが高い。一方、reactNativeはそうでもない。エディタが選べるし、React.jsが書ければいい。Web開発のスタイルに近いとのこと。ただしiOS SDKの知識もある程度必要。そしてコンポーネントの開発?が必要なとこがネック??

 

感想:僕は半年ほどWeb開発をしてきたわけで、すごく気になる内容だった。アプリ作ってみたいな。そうでなくともアプリエンジニアってかっこいい感じがする…ReactiveNative。気になる。

 

ReactiveNative

reactjs - React Native ファーストインプレッション - Qiita

 

アジャイル(調べた)

アジャイル開発 〜顧客を巻き込みチーム一丸となってプロジェクトを推進する〜 (前編) : コラム | NEC情報システムズ

 

 

福田さん (メンバーズ) 昨年のブレイクポイント事情

MEMO;

Web運用ディレクターをされているとのこと。去年、iphone6絡みでレスポンシブデザイン案件を手がけた。なので、設計周りの話が多かった。
2012あたりはAppleがシェアの半数をとっていた。当時のiphoneipadのサイズが480px/768pxだったから、今でもそれが標準になっている?
スマホ表示への切り替えのブレークポイントとなっている。その個数は平均で2〜3点ほど。多いものでは5〜7個!
ブレイクポイントは768px-480pxがよろしい。それ以上はお好みで。とのこと。

 

レスポンシブWebデザイン:レスポンシブWebデザインの作り方(簡単設定方法)

ドットインストール:レスポンシブなウェブサイトを作ろう (全11回) - プログラミングならドットインストール

 


村重司さん(ワンパク)Velocity.jsで複雑なアニメーションを簡単に

MEMO:JQuery/CSSでは複雑なアニメーションが難しい。Velocity.jsを使ってみよう!CSSのtransformやSVGを使うことができる。しかもSVGをアニメーションできる!そしてjQueryと同じ書き方が可能。さらにメソッドチェーンも可能(すごい)

 

感想:かなりやってみたい。最近Canvasを勉強していました。特にjQueryCanvasを書けるjCanvasがなかなか良い感じです。(jCanvasでもメソッドチェーン風に描画が可能)

そういう意味ではVelocity.jsは気になるし、全く未知のSVGもそろそろ勉強したいところ。

 

Velocity.js:http://julian.com/research/velocity/

Qiitaで使い方:JavaScript - アニメーション最強のVelocity.jsの使い方 - Qiita

 

 

柴田和祈(ヤフー)極!HTML5アウトライン

MEMO:アウトラインとは:HTMLの階層構造

アウトラインの掟→HTMLではh1,h2などが暗黙的なアウトラインになる。そしてHTML5のsectionやarticleは明示的なアウトラインになる。

例えsectionの中にh1があればh1が独立してしまい、分離してsectionを押し上げる。アウトラインはSEOに関係があるらしい。

 

感想:うーん、アウトラインなんて考えたことなかった。HTML好きです!とか言ってるくせに勉強不足。というか、実はsectionやasideの重要性をあまり理解してない自分。

 

スライド

speakerdeck.com

 

アウトラインについて:『アウトライン』について / HTML5マークアップ時の基本 | HTML5でサイトをつくろう

HTML5 Outliner(アウトライン度を測ってくれる):https://gsnedders.html5.org/outliner/

HTML5のタグを確認:ちょっとこの辺でHTML5のタグを全部確認してみようぜ!! - WEBCRE8.jp

 


酒巻瑞穂さん(グロースエクスパートナーズ)JSPM

MEMO;2つの質問が出た。1つはbower派かnpm派か。そしてもうひとつは何のモジュールローダーを使ってるか。

 

感想:ん?モジュールローダー??なにそれヽ(´Д`;)ノアゥア…

全体的にレベルが高かった。。勉強不足すぎる。Babel(ES6使えるやつ)とかESLint(たまに聞くやつ)とか、聴いたことあるくせにチェックしてない。やりたい。

 

穴井宏幸(リッチラボ)WebアプリをElectronに乗せる 

MEMO:YahooJapanの子会社でリッチ広告を作っているとのこと。

Easy-video-mapping.com
Github社製でHTML,CSS,JSでデスクトップが作れる(デスクトップが作れる?!)
skywayという単語が。NTTのスカイプ??調べる。

 

スライド

www.slideshare.net

 

宗貞洋平さん(サイバーエージェント)ブラウザでPUSH通知

MEMO:PushNotification is Coming!ブラウザの弱みとは→オフラインで使いにくい。レンダリングやアニメーション、再生機能、ストレージが弱い。
ただし、克服段階にある!serviceworkergagaがネットワーク周りの弱点を克服中。chromeの42から出ている。html5rocks。

 

感想:たしかにブラウザって閉じてる間は何もできない。全く気づかなかったヽ(´Д`;)ノ
curlという単語が出た。調べる。

 

スライド

speakerdeck.com

 

出川さん(レバレジーズ)みんなもMiddlemanで技術ブログ

MOME:teratail開発メンバーの方でPHPの人らしい。うん!Teratail知ってるよー!

middlemanとは?→ Rubyで開発されている静的ページ生成ツール!開発が活発!middleman-blogという公式プラグインが優秀。
Jekyllに比べてシンプル!(Jekyllというのがあるらしい)railsのviewっぽく書ける。ほお!
GithubPagesにデプロイできる (えっ、すごい!)
普段の開発の流れでブログを書ける

 

感想:

ぎゃー!まさに今の自分にピッタリ!?技術系ブログ書き始めたばっかり!

絶対にチェックする!Middleman

 

 

以上です(`・ω・´)ゞ

明日から土日なので、優先順位を決めて今日学んだことを消化していきます!では!

素敵なイベントをありがとうございました!