SaCSS vol.110参加してきましたレポ

2020/1/25(土)「SaCSS vol.110」

ほぼ毎月札幌で開催されているWeb勉強会のSaCSS。いつもお世話になってます。

最近は東京や他の地域から講師をお招きするのですが、今回は発表者を募りLT(Lightning Talk:短い小話)をしていただく回でした。

自分もそろそろLTデビューしたいな…

そんな事を思っていた矢先の募集だったので、意気揚々と参加申し込みをしたのですが、既に埋まっていた

このやる気、この熱意、どうしてくれよう!

なんか別の事やろう…という事で、ブログを書く人で参加申し込みする事になり、今この記事を作っています。

さて、与太話はおいておき、今回のLT内容はこちら!

LT内容もくじ

  • @redamoon : Nuxt.js + Netlify Fromsで始めるサーバレスなフォームを試した
  • @noliaki : Webサイトで使える、(Vueの)小テク
  • @h1romas4 : 楽しい WebAssembly
  • @wattlaa : 企画に煮詰まった時のアイデアづくりヒント10
  • @ kuromailserver : 無音動画学習方法のススメ
  • @chi_cca3 : 未経験からAWSを勉強中
  • @kuma_hati : ベンチャの話
  • @h2ham : 今試しているツールについて (& 時間があれば、本日のフォローアップ)

WEBサイトで使える、(Vueの)小テク

noriaki yamada (@noliaki) さん

Vue.jsの勉強会 v-sapporo を主催もされている方のLTから始まりました。

金曜日開催なのでまだ一度しか行けてない…。すごい濃い話が聞ける勉強会です。

アコーディオンやモーダルウインドウについてのお話。

アコーディオンは、jQueryで実装するとなると結構簡単ですよね。

サンプルFAQ

聞きたい事があればなんでも答えよう(なんでもとは言っていない

ごはんのお供といえば?

マヨネーズ。

ラーメンの具で好きなものは?

マヨネーズ。

//アコーディオン(よくある質問ページでよく使われがち)
$('.accord').slideUp();//非表示アニメーション
$('.accord').slideDown();//表示アニメーション

一つ開けば他は閉じるとか、開いたままにしとくとか、アニメーション速度を変更とか、閉じるとデザインが変わるとか、こだわるとキリがない感じもしますが、

モーダルウインドウは、なんか考えるの面倒なので僕もBootstrapを使ってました。

これらの動きをVueで実装する方法を紹介されていました。

まずアコーディオンを実装するのに、transitionのenterとleave機能を使っていく例が紹介されました。

上記のサンプル見てもわかるように、高さがアニメーションできてないですよね。

原因として、JSの実行≠視覚効果反映とのこと。段々むずかしい内容になってきましたね!

解決方法はnextFrameを使う方法とのこと。実行タイミングの調整って地味で時間がかかって大変ですよね…。

次にモーダルの実装を紹介。

  • ページ自体のスクロールを止める
  • 上下左右中央に配置

これらを条件に、Bootstrapのモーダルを参考に作られたそうです。

まとめで仰られてましたが、これらの動きをライブラリで解決をするというのも一つの手ではありますが、どうやって実装されてるかを知っておくと後々自分のためにもなりますよね。

今回の資料があがってましたので、詳細はこちらをごらんください。

Nuxt.js + Netlify Formsでフォームをためしてみた

ぐっちー (@redamoon) さん

お次はぐっちーさん。jswspというJS勉強会を主催してる方です。

一度だけ参加させていただいた事がありましたが、内容も初心者にやさしい感じでした。初学者にもおすすめです。

昔と違ってNetlifyなどを利用することで、Webサイトをサーバレスで作れるような時代。

そんなNetlifyの機能にNetlify Formsというものがあり、フォームページを作る事ができるそうです。

今回はそれをNuxt.jsを使って実装するデモをみせていただきました。

Vue.jsをサーバーサイドに動かせるすごーい!

メリット

  • サーバ知識なしでフォーム作れる
  • Gitリポジトリでデプロイするためコーディングの延長上で実装買おう
  • 機能的な制限はあるが、デザインの制限なしで作れる
  • Webサイトのお問い合わせには有効的(イベントのアンケートなど)

デメリット

  • 自動返信メールはないので、別のツール連携が必要
  • ベーシック認証などクローズドに使う場合はかきんが必要Pro 月5000円
  • 無料範囲が月100件まで
  • 多少のコマンド知識が必要
今回の資料があがってましたので、詳細はこちらをごらんください。

企画に煮詰まった時のアイデア発想のヒント10

Machishima Wataru(@wattlaa) さん

Machishima Wataru さんは、GEAR8さんのディレクター。トテモスゴイ人(こなみかん

アイデア出しって大変ですよね、なかなか。

そもそもアイデアって何かというと

アイデアとは?既存の要素の新しい組み合わせ。以外の何でもない

ジェームズ・ウェブ・ヤング「アイデアの作り方」

なるほど、ゼロから考えるのが全てではないのか…なるほど…。

紹介された発想のヒント

  • カラーバス
  • ちょいメモ
  • フォトリーディング
  • アイデアスケッチ
  • マンダラート
  • マインドマップ
  • ブレインストーミング
  • Googleの知恵
  • PINTERESTの知恵
  • 踊る大捜査線の知恵

踊る大捜査線の知恵とは、現場主義的なアイデアの出し方とのこと。

利用者がいる場所に行ったり、いつもと違う道を歩いてみたり、食べ歩いてみたり。そういった何気ない動作から生まれてくるアイデアってよく聞きますよね。サラリーマンが待ち時間に電卓をカタカタと打ち込んで暇つぶしをしてるのを見て、ゲーム&ウォッチが生まれた的な話とか。

これらアイデア出しを全種類すべき、ってことではなく、自分に合うもので見つけていくのが大事とのこと。

また、アイデアをたくさん出し考えつくした後の提案には自信が生まれるってお話も、確かにそうだなぁと思いました。

今回の資料があがってましたので、詳細はこちらをごらんください。

無音動画学習のススメ

ワロ (@kuromailserver)さん

海外のUdemy動画を無音にして学習するという使い方でスキルアップに成功したすごい人。

実際どうやって学習したの?ってところを今回紹介されてました。

ざっとまとめるとこんな感じでしょうか

海外コース学習をはじめた理由

  • 海外のコースの方がクオリティが高め
  • 英語は読むことができるが書く、聞くは苦手
  • 30時間越えの大きいコースが多い
  • 作成するアプリ、機能が多い

学習方法まとめ

  • 基礎技術は日本語コースで習得でOK
  • 大規模アプリなどの応用技術は海外コースで習得
  • 特殊なツールで2倍速~4倍速、8倍速で再生
  • 音声カット
  • 字幕再生
  • 眠気防止音楽を代わりにかける
  • 同じ動画をリピートし、1回目は流し見程度にする

実際、自分でも動画学習で無音+字幕表示でやってみましたが、1.5倍が限度でした。
2倍以上でみれるのすごい。

未経験からAWS勉強中

chicca( @chi_cca3 )さん

初登壇(初登壇とは言っていない)のchiccaさん。

https://aws.amazon.com/jp/what-is-aws/?nc2=h_ql_le_int

IT未経験からスタートし、現在AWSの勉強をしていて、そのことを発表されていました。

AWS勉強のため、最初のうちはAWSのドキュメントを勧められるが、なかなか進まなかったそう。

そんな時は、udemyでもAWS講座も利用して学習を進められたそうです。

自分、今これ、Vue.jsとかReactでまさに起きてるやつです、udemyで勉強してみようかな・・・。

また、学習をいくらか進めた後、たまに振り返ることで以前より内容が頭に入ってくるようになったそう。

たしかに、基礎に立ち返ってみると、あの時見えて無かったって部分が見えてくるってありますよね。
(最近WordPressでありました)

今のchiccaさんは、NATゲートウェイや耐障害性も勉強されてるそうです。
ツヨツヨエンジニアさんになる日も近いですね。

ベンチャの話

くまはちらぼさん(@kuma_hati)さん

ベンチャの定義の話。

ベンチャーの直訳は、冒険、冒険的な企て。ビジネスにおいては、あまりよろしくない言葉だったんですね・・・w

ベンチャービジネスは和製英語だったり、ベンチャー企業の統一した定義は存在してなかったり、結構曖昧なものらしく、

たくさん出資を集めて事業をスケールさせバイアウトかIPOでイグジットする企業

基本的に失敗するし、成功確率は1/100以下、働き方はブラック

ベンチャー故に成功する事もあれば、失敗も大いにありうる。

それを改めて実感いたしました。

楽しいWebAssembly

ひろましゃさん(@h1romas4)さん

昨年12月、W3C勧告で第4のウェブの要素になった webAssemblyの紹介をしていただきました。

まだ、なかなか

WebAssemblyとは、ウェブウラウザーなどでJavascript以外の言語を動かす技術

主要ブラウザですでに実装済みで、Figma,Google Earth, Unityなどですでに活用されているそうです。

Figmaってすごいレスポンス早い気がしてましたが、なるほどWebAssemblyだったのですね。

  • FLASH PLAYER / JavaAppletなどと異なり安全でW3C標準
  • 早い、JSの3~5倍
  • .wasmファイルにコンパイルできる言語
  • wasmにコンパイルされたインタープリタで動作する言語もあるが、あまり早くない
  • WebAssemblyから直接ブラウザーにアクセスはできない(現時点
  • Javascriptからimportして、計算ライブラリとして利用もできる
  • Javascript とWebassemblyは仲良し

仲が良いのはいいこと。

Javascriptに入出力を移譲し、Javascriptで書きづらかったり遅くなる処理の置き換えや、多言語で成長しているライブラリーをブラウザー内でそのまま活用できるそう。

今後の動向、見逃せないですね。

その他、Web Assemblyを使用したデモもご紹介いただきました。

今回の資料があがってましたので、詳細はこちらをごらんください。

今試しているツールについて

ハム(@h2ham)さん

最後にSaCSS主催のハムさんによるフォローアップ。

最後に今後のSaCSSの告知がありました。

今回同様LT回のようです。今回はLT発表申し込んでみました。どうぞよろしくお願いいたします。
この回は、 北海道テレビ放送株式会社(HTB)内 会議室 にて開催。

さいごに

VueもSSR(静的サイトレンダリング)も、AWSも、WebAssemblyも、まだまだ覚える事がたくさんあるなぁ。

今度の休日にSSRを勉強してみようかな。

この記事を書いた人

CORUN

「たぶん、できるんじゃないかな。」
それがコンセプトであり、なりたい自分の一人。
Webのお仕事やっております。