DIVEJavaScriptの設定を有効にしてご利用ください。無効の場合、当サイトを正常にご利用できません。Lab〜』のレポート記事です!例年に引き続き、テーマは「2019年気になったけど出来なかった事・やり残した事を試す」です。DIVEのクリエイターが開いている社内勉強会。Missionを行いました。DIVE社内勉強会を大公開!」をご覧ください。試してみてまいどMovableTypeにはサーバーとDBがつきものということで、今年は、自分でAWSサーバーを立ててみることにしました。いわゆる一般的なレンタルサーバーだと、必要なモジュールなどはすでにインストール済みですが、AWSのようなクラウドサーバーは、自由度が高いので自分で用意する必要があります。ネットで調べながら黒い画面をポチポチやってみましたが、思ってたよりはかんたんでした。食わず嫌いはよくありませんね。黒い画面、慣れると結構可愛く思えてきますよね。MT大先生として名を馳せるRSKさんですが、ぜひAWS大先生としてもお世話になりたいです、、。AWS"のご相談もお待ちしております!(MMR)MIO「そろそろPWAについて考えてみようか。試してみて去年に引き続き、今年もウェブ業界のモバイル最適化の流れがさらに進んだ年でありました。Web技術屋として、そろそろPWAについて正しい知識を持っておかなきゃマズイよね?という危機感から、実践的な内容で攻めてみました。チャレンジングなテーマではありませんが、今年ちょうどPWAを導入しようとして仕様の都合上見送った案件があったので「やりたかったけどできなかったこと」としてはいい課題だったと思っております。なんとなく知った気でいたPWAですが、知らないことばかりでした!恥をかく前にMIOさんの発表で正しい知識が身についてよかったです。DevToolsの使い方も勉強になりました!(MMR)USY「これは便利!XDの使えるプラグインを探してみた。XDが進化し、より業務に使えるようになりました。僕も、ビジュアルがメインでないサイトデザインは、XDでデザインするようになったので、もっと使い勝手の良い環境を求め、プラグインを漁ってみました。みなさん、大変便利なプラグインでして、来年の業務は捗りそうです。DIVEではUSYさんの啓蒙活動によりXDでデザインを展開していただいたり、本格的にXDの導入が増えました。試してみて以前、試そうとした事はあったのですが、環境を整えたり、新しい言語(C/C++、Rust)を覚えなければいけなかったりで、二の足を踏んでいました。Studioというオンラインでwasmファイルを作れ、更に、AssemblyScript(TypeScriptのサブセット)という言語で作れると知り、試してみました。JSに比べ30%ぐらい速かった(処理の内容により大幅に変わると思います)ので、実案件でも取り入れていきたいと思いました。実際にOKIさんの作ったデモを見たところ本当に倍くらい速かったです!来年はパフォーマンス向上、超速、チョッパヤにも目を向けていきたいと改めて感じた発表でした。試してみてライブラリ自体はかなり前からありますが、使ったことがなかったD3.jsを使ってみました。Documentsということでデータのビジュアライズに使うものでグラフ描画をするためのものではありませんが、某プロジェクトでChart.jsを使い倒していたので比較的な意味も込めて今回はグラフ描画で。自分で書きさえすれば自由度がかなり高いので、グラフ表示含め、ビジュアライズを凝りたいときにはライブラリでの制限がかかることなく実装ができそう。C3.jsというチャートに特化したものもあるみたいなのでそちらも触ってみたい。試してみて挑戦してみたかったアニメーションを作成しました。自分の中ではグリッチが流行っているので挑戦してみました。意外と簡単にできますが、エフェクトを使用したのでjsonで書き出せないのが残念です。AEからjson(svg)で書き出せるのでWEBでは今後需要がありそうです。試してみて近年、3DCGを使用したWebサイトが増えてきていますよね。自分のデザインの幅を広げられるように、そして今後、自分の武器となる技術を増やすためにも、3DCGの知識は必要だと思い、チャレンジしてみました。3Dソフトでのモデリングに合わせて、three.jsも学んで行きたいと思います。今回の特別賞おめでとうございます!!KKBさんは3Dモデルを作成し、three.jsで描画するところまで実装していました!すごいです!これは負けていられないですね、、わたしのやりたいことリストにthree.jsがこっそり追加されました。試してみてWEB業務を無視して、ずっと触りたかったtouchDesignerに挑戦させてもらいました。映像部分だけを作るならオペレーターを繋げていくだけでかっこいいモーションがスムーズに作れ、ソフト自体の重さも感じない為、これが無料だなんてderivative社は格好良すぎだと思いました。出力後はやはりPCスペックに左右されてしまうので、映像出力についても勉強する必要があると学びました。ambitions."(公式から引用、訳:Stimulusは控えめな野心を持つJavaScriptフレームワークです。)というキャッチに惹かれ、Stimulusを試しました。状態をDOM側(data属性)で持つためフレームワークありきのコードにならず、DOMの変更を監視して対応するコントローラーを初期化してくれ、控えめといいつつも十二分な機能をもつフレームワークです。試してみてWebGLで今までアニメーションを作成したことがなかったので、今回作成してみました。three.jsで3Dのマテリアル作成しています。動きについては、左右に移動させるところまではできました!ですが・・・曲線を描くなど、3Dアニメーションを活かした動作ができなかったので、来年以降は自由に動きをつけることができたら、もっと表現豊かなコンテンツになると思います。WebGLは全然手を出せてない分野なのでNAKさんにすがり付きたい気持ちです、、嘘です!ちゃんと勉強します!NAKさんとは一緒にセミナー行ったり色々勉強したいな〜と勝手に思っています、、、。2019のまとめみなさん、2019年お疲れさまでした!そしてお忙しい中コメントありがとうございます!普段の業務に追われつつもたくさんの社内勉強会が行われてきました。ディスカッションでは自分の得意分野は積極的に発言をし、不得意分野はみなさんの知見を共有していただき、実践では業務関係なく新しいことに挑戦し、長いようであっという間だった1年の中でとっても楽しい時間でした!その中でもMATOMEは個人の要素が強く出る回だったので、普段みなさんがどんなことに目を向けているか、どんなことにこだわって制作しているかが見えていい刺激になりました。アニメーションライブラリ「Lottie」を使ってみた。最新のビルドツール「Parcel」で開発環境をサクッと立ち上げる。2019.02.07脱jQuery!?、Swiper使ってみた。Lab〜2018.09.09脱jQuery!?、anime.js使ってみた。Typeではじめる構造化データモンスターダイブの2019年を振り返る。創業10周年を振り返る。