mozyのかきおき

mozyの読書感想文や思考置き場

Laravel/Vue.js勉強会#6 に行ってきたぞ!

f:id:mozy_ok:20181114001603p:plain

Laravel/Vue.js勉強会とは

その名の通り、Laravel / Vuejsに関する勉強会です。

Laravel/Vue.js勉強会#6 - connpass

当日は、勉強会中にTwitterで、自分も含めて以下のように、みなさん実況をしていたのでハッシュタグ #Laravue で検索すると幸せになれます。

LTのメモをまとめていきます

会場スポンサー枠

株式会社レアジョブ 田原さん

Vue Tourを使って心地よいチュートリアル画面を 〜ユーザー体験の向上へ〜

  • 田原さん フロントエンドエンジニア
  • Vue Tourを使うと幸せになれる? ことについて話します。
  • 事業は、レアジョブ英会話がメイン
  • 英会話のシステムは、画面内のボタンなどが多いため、ユーザ目線では、どうやって使ったらいいかわかりづらいよね。という問題点があった
  • それを踏まえて、Vue Tour使うことでチュートリアルを簡単に実装できてよかったということを話します。
  • チュートリアルアニメーションの実装時は、各ボタン、領域に説明などを追加していく必要がある。

使用上の注意点がいくつかある

  • TypeScriptには対応していないので、この周りは自前で処理等をする必要がある
  • デフォルトコンポーネントは省略しないこと
  • 発火時に後ろのレイヤーにもクリックが効くのでレイヤー分けなどに注意!
  • 動画の自動再生は基本機能として存在しない
    • セットインターバルとかで簡単に実装できた
  • 基本的には、GitBooksと合わせてSampleの実装を見ると使い方がわかる

参考

Vue Tour リポジトリ
github.com

Vue Tour ドキュメントページ
Vue Tour | A lightweight and customizable tour plugin for use with Vue.js

ドキュメントのページ自体でVue Tourが動いているので体験できる!

感想

新規ユーザ向けのチュートリアルを作る際にこのようなライブラリを知っていると容易に実装ができるのだなと思い知った。。

登壇枠1

Nuxt generate Laravel Nova on AWSが綺麗にハマった話

スライドはこちら
slides.com

株式会社SCOUTER CTO @kotamats さん

  • 新サービス絶賛開発中でそちらのインフラ周りのお話
  • 既存のScouterやsardineといったシステムも、Laravue でやってきた
  • 新規事業要件
    • 最短で仮説検証する必要があった
    • 以下の理由のため、リリースタイミングで最低限のCRUDが入っているadminが必要だった
      • アカウント発行
      • 事業的に変更しうるマスターデータの編集

このような状況の時に、ちょうどLarval Novaがリリースした。
Laravel NovaとはLaravel向けの管理画面の生成ツールで、OSS等ではなくライセンスの形で販売中。
Laravel Novaは導入も簡単で以下のような特徴がある

  • モダンな動きをする (Laravel-admin はjQuery)
  • CRUDが簡単に作成できる。

  • こうすることで、一般ユーザはどんなURLにしても管理画面の存在を見ることができない!

その他のスライドにないTips

  • AWS WAFの403ページはXMLが直接出るようなページなのでUXは変えよう!
  • S3 originで ページが存在しない場合には 404ではなくて、403が返るのは、404を返すことで "存在しない"という情報をユーザに与えてしまうため、攻撃時の判断軸になってしまうかららしい

参考

Laravel Nova
Laravel Nova - Beautifully-designed administration panel for Laravel

感想

管理画面をいい感じに隠せる知見を知ることができて最高の気分。
/admin ページなどで不自然に404が返るページなどを見かけることがあるのでこういう知見はどんどん活用して行かないといけないと思った。

登壇枠2

俺の最強Vue.js環境

スライドはこちら

slides.com

@kahirokunn さん

後半のOOP周り話は難しくてついていけず。。他の方のTwitter実況を見ると良いと思います。😓

参考

サンプルのリポジトリ
github.com

Storybook
https://storybook.js.org/

Storybook のリポジトリ
github.com

感想

Storybookを使うことでUIコンポーネントのカタログができたり、デザイナーさんとの協業がしやすいとは聞いてはいたが、実際に動いているのを見るのは初めてだった。
Netlifyと組み合わせることで容易に使用ができると知ったので使っていきたい。まずは個人プロジェクトから。

LT枠1

プログラミング初心者がVue.jsでWebサービスを作ってみた

スライドはこちら
speakerdeck.com

@unadesuga さん
エンジニア歴 3ヶ月でLT登壇!?

  • バンコクのgaogaoというプログラミング修行できる塾で2ヶ月近く修行をしてきた

なぜサービスを作り始めたのか

  • とにかくサービスがつくたい!
  • 自分がどこまでできるか知りたい
  • 自分があったらいいなと思うサービスのアイデアがあったため

サービスの概要

  • 本を読むのが好きなので、本と地図をつなぐサービスを作っている
  • 聖地巡礼などの需要が高まっているため、地方の活性化にも繋がるのではないか?
  • サービスは後日公開予定 !?

参考

GAOGAO事務所
gaogao.asia

感想

3ヶ月目でサービス作り始めて、LTで登壇して話すってすごすぎる。。
俺はエンジニア歴3ヶ月目の時何してたんだろう..(遠い目
自分も、旅行と読書が好きなので、サービスがリリースしたら使ってみたい!

LT枠2

electron vueでデスクトップアプリを作る

ジャンボさん? 急遽参加枠

  • electron + vue でアプリを作りたいときは以下のボイラーテンプレートが便利
  • ただし、テンプレートエンジンとしてJadeを使っているので好みはあるかも

GitHub - bdero/electron-vue-typescript-starter: An Electron starter that supports VueJS + TypeScript.

electronならではのTips

  • 既存のSPAのソースをそのまま載せられるかというと、一部は可能だが、PHP上に乗る前提で実装されている部分などはAPI連携が難しい
  • 本番ビルドするときは file:// アクセスになる
  • ワンコマンドでバイナリを吐き出せる
  • 本番リリースの時のために暗号化などもできる。
  • electron製のアプリも、もちろんMacのストアで配布できる

感想

Vue CLIのelectronのサンプルは触ったことがあったが、こちらのボイラーテンプレートの方がより使いやすいなと感じた。
自分もelectronアプリケーションを作ってMac Storeで販売してみたいなぁ。

まとめ

参加されている方の人数も多く、熱量も高いためびっくりしました。
勉強会はもちろん、懇親会でも色々な方とお話ができたので大変刺激を受けました。俺もVueとLaravel書いていくぞ!
会場の提供をしてくださった株式会社レアジョブさん、運営のみなさん本当にありがとうございました!

f:id:mozy_ok:20181113231048j:plain ピザで締めるStyle(笑