どうも、カムノです。
はじめまして。
開発をとりまとめています。
つまりこの会社の肝（キモ）です。
今後の私の動向に注目してください。
このCHEATのサイトは私が半分ぐらい作っています。
まだどんどん改善したいところや作りたいページがあるのですが、
色々あるなあと思いつつ、まだ着手できていません。
そのCHEATホームページですが、Vue.jsを使って作成しています。
Vue.js とは？
Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
ね？ 全くわかりませんね。
そういった方のために、Vue.js布教を目的として、今回記事を書いてみたいと思います。
そのため、ノウハウとかは実は全然ありません。
今後詳しく解説などもしていければなと思っています！
Vue.jsはまだトラブル解決の記事なども少なく、phpなどの歴史のある言語と比べるとまっだまだだな〜という感じかと思います。
少しでもユーザーが増えて、Vue.js使いが増えれば幸いです。
作り方のイメージとしては、それぞれのセクションがコンポーネントになっていて
図で表すとこんな感じです。
分かりづらいですよね。
実際のコードの様子
今回CHEATホームページで使ったコードの一部は、この様な形。
ページには、コンポーネントを以下のように並べるだけです。
（コードの完成形はこうなります。
非常に管理しやすいと思いませんか？）
※CSS部分は外しています！
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<template> <div class="main" :class="classScene"> <navbar/> <main-image/> <section id="Blog"> <cheat-park/> </section> <section id="News"> <news/> </section> <section id="Company"> <company/> </section> <section id="Service"> <service/> <system-develop/> <app-and-vr/> <web-develop/> </section> <section id="Recruit"> <recruit/> </section> <section id="Access"> <access/> </section> <!-- <section id="Contact"> <contact/> </section> --> </div> </template> <script> import Navbar from '~/components/Navbar' import MainImage from '~/components/MainImage.vue' import CheatPark from '~/components/CheatPark.vue' import News from '~/components/News.vue' import Company from '~/components/Company.vue' import Service from '~/components/Service.vue' import SystemDevelop from '~/components/SystemDevelop.vue' import AppAndVr from '~/components/AppAndVr.vue' import WebDevelop from '~/components/WebDevelop.vue' import Recruit from '~/components/Recruit.vue' import Access from '~/components/Access.vue' import Contact from '~/components/Contact.vue' export default { components: { Navbar, MainImage, CheatPark, News, Company, Service, SystemDevelop, AppAndVr, WebDevelop, Recruit, Access, Contact }, computed: { classScene: function () { return { 'is-palette2': this.$store.state.scene == 2, } } }, } </script> |
この上のコードで、CHEATのTOPページができあがります。
[blogcard url=”https://cheat.co.jp/”]
もちろんこれだけでは中身がありませんので、各コンポーネントを作成しています。
各パーツ部分は・・・
【html自体】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div class="CompanyBase has-text-centered"> <div class="Company slideInLeft" :class="{'in-screen':isInScreen}"> <section> <h1 class="fontPoppins">COMPANY</h1> <h2>会社概要</h2> <h3>毎日を楽しむ、<br />プロフェッショナル</h3> <p> 私たち自身も、お客さまにも、毎日を楽しく過ごしてもらいたい。業績UP・業務効率化によって、少しでも余暇を作ることで、個人が”本当に自分のしたいこと”ができる時間を創出します。そのために、企画・提案・構成・演出などを行う表現部門、デザイン・エンジニアリングの開発部門が連携し、クオリティにこだわった制作に注力しています。常に情報感度を高く持ち、新しい分野にチャレンジしていくことで、そこで得たスキルを制作物にブラッシュアップすることも忘れません。 </p> <a href="/Company" class="showDetail"> 会社概要を見る </a> </section> </div> </div> </template> |
【script部分】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script> import MixinAnimation from './MixinAnimation'; export default { mixins: [MixinAnimation], name: 'Company', data() { return { sceneNum: 2, sceneOffsetY: -0.1, screenOffsetY: 100, } } } </script> |
このようなコードを、importしている数だけ用意しなければなりません。
また全ページで使う共通処理は、Mixinをつかって各コンポーネントに継承させています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<script> export default { created () { this.isCreated = true; }, data() { return { isCreated: false, isLoaded: false, sceneNum: -1, sceneOffsetY: 0.1, sceneNumLeave: -1, sceneOffsetYLeave: 0.1, screenOffsetY: 100, } }, computed: { isInScreen(){ if(this.sceneNum >= 0 && this.getPosPer(this.sceneOffsetY)){ this.$store.commit('updateScene', this.sceneNum); } if(this.sceneNumLeave >= 0 && this.getPosPer(this.sceneOffsetYLeave)){ this.$store.commit('updateScene', this.sceneNumLeave); } if(this.$store.state.scrollY >= (this.getPosition() + this.screenOffsetY)){ if(this.$store.state.scrollY <= (this.getBottom() - this.screenOffsetY)){ return true; }else{ return false; } } else { return false; } }, blur: function() { return this.getBlur(); } }, methods: { getBottom: function() { if(this.$el){ return this.$el.getBoundingClientRect().bottom + this.$store.state.scrollY; }else{ return 0; } }, getPosition: function() { if(this.$el){ return this.$el.getBoundingClientRect().top + this.$store.state.scrollY - this.$store.state.height; }else{ return 0; } }, getPosPer: function(offset) { if(this.$el && ((offset * this.$el.getBoundingClientRect().height) + this.$el.getBoundingClientRect().top) <= 0){ return true; }else{ return false; } }, getBlur: function() { if(this.$el){ return Math.floor(20 * (this.$store.state.scrollY - this.$el.getBoundingClientRect().top) / this.$el.getBoundingClientRect().height); }else{ return 0; } }, setLoaded(flg) { this.isLoaded = flg; } } } </script> |
ね、簡単でしょ？
ちなみに、レスポンシブ対応はウィンドウサイズから自動計算したフォントサイズをベースに指定することで、remで指定した要素が勝手に調整される仕組みです。
この仕組みがあれば、例えばマーケティング観点でどうしても文字列を段落ちさせたくない時などに、自動計算して段落ちしないようにしてくれるので、LP制作の時とかに便利かもしれません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<template> <div class="fadeInFast" :class="{'in-screen':isLoaded}"> <nuxt/> <my-footer/> </div> </template> <script> import MyFooter from '~/components/MyFooter' export default { components: { MyFooter }, data () { return { isLoaded: false } }, mounted() { window.addEventListener('scroll', this.onScroll); window.addEventListener('resize', this.onResize); this.onScroll(); this.onResize(); this.isLoaded = true; }, methods: { onScroll() { this.$store.commit('updateScrollX', window.scrollX); this.$store.commit('updateScrollY', window.scrollY); return true; }, onResize() { this.$store.commit('updateWidth', window.innerWidth); this.$store.commit('updateHeight', window.innerHeight); this.updateFontSize(); return true; }, updateFontSize() { var fontSize = window.innerWidth / 32; var fontSizePx = ""; if(fontSize > 16){ fontSizePx = "16px"; }else if(fontSize < 10){ fontSizePx = "10px"; }else{ fontSizePx = fontSize + "px"; } document.documentElement.style.setProperty('font-size', fontSizePx); } } } </script> |
ひとまず、以上で説明終わり！
Vue.jsの魅力を1%でも伝えられたのかどうかわかりませんが、今後はVue.js使いの人にも頼ってもらえるようなトラブル解決方法や、ノウハウを伝えていければと思います。
今までhtml/css中心のマークアップで構築していた方には、もちろん少し取り組みづらい構築の仕方になるのですが、慣れれば強力な武器になると思います。
（年収が上がるのでは）
どんどん新しい技術が出るweb/プログラムの世界なので、新しいことにチャレンジしていきましょう！！！
そんな中、私も実はもう1つ今取り組んでいることもありますので、これもまた随時公開していきたいと思います。
では、また・・・
まとめ
SHARE
