よし

http://twitter.com/nyallpo

俺用Vue.js良記事メモ 2018-05

ここ数日Vue.jsでバキバキとアプリを書きはじめたため、良いと感じたURLをメモします。

Vue コンポーネント実装パターン // Speaker Deck

カスタムコンポーネントでv-modelをどう扱うかの話がめちゃくちゃ役に立った!最高!

2018年 スタートアップでSSRにVue.jsを導入してWebサービスを開発した際の知見 - Qiita

"Store はページ単位で持つと良いでしょう。" その一言が欲しかった、超最高!

2018年Vue.jsを使ってる人には知って欲しいオブジェクトと配列の操作のベストプラクティス - Qiita

propsに置いた配列の操作がリアクティブにならなくて悲しい思いをした時に読んだら良かった。尊い

Hypernova で Vue.js のコンポーネントを Rails でレンダリングする - kitak blog

SSRについてRails流にどう解くかという話、未来的に絶対役立つ!

 

・ツール系

Vue Designer でコンポーネントを GUI で開発する by katashin

GitHub - ktsn/vue-designer: Vue component design tool

Markdownエディタみたいにリアルタイムでコンポーネントの結果を確認しながらコーディングができる。Visual Studio Codeで動く。究極かよ!

vuegg

ブラウザ上でGUI部品のデザインを行って、Vue.jsのソースコードとしてzipでくれる。モックアップに使えるかも。頑張りすぎかよ!

GitHub - mimecorg/vuido: Native desktop applications using Vue.js.

Vue.jsで書いたものをネイティブアプリとして動かす謎のツール。R◯act Nativeかよ!

多レイヤー漫画ビューアーを作った

なんかこういうやつです。 

多段レイヤー漫画ビューアー(仮)

f:id:nyallpo:20180522225356j:plain

透過画像を重ねることによってウェブ漫画的な表現を出せるのでは、と思いついたので作りました。このサンプルでは、レイヤー切り替えで日本語↔英語のスムーズな翻訳を実現しています。

ソースコードこれです。 Vue.jsでバキバキ書きました。

github.com

元画像の差分を作るだけで翻訳作業ができるので Githubみたいに漫画の翻訳をコミュニティ側がやって作者に還元してくれる、みたいな未来になればいいのになぁと思いました。

初めてのUnityゲームプログラミング 金拾いゲームを作った

f:id:nyallpo:20180515212926j:plain

ゲーム本体のダウンロード(16.7MB)↓

http://nyallpo.com/games/20180515_kane.zip

ソースコード

github.com

所感

  • チュートリアル玉転がしゲームを改造した
  • BGMと効果音を追加した
  • 金を取ったときに金が飛び散る演出(パーシャル)を追加した
  • ゴールとその処理を追加した
  • "金"というボイス素材が無かったので仕方なく自撮りした
  • PlayerControllerに処理をなんでも詰め込みすぎた
  • 所要時間6時間ぐらい