静的サイトをリニューアルする機会があったので、 Nuxt.jsを実験的に導入してみることにしました。
導入前
- font, br, pre, table, centerなどで組まれたDOM
- iframeによる2ペイン型ページ
- 1枚CSS
- 忍者ホームページ
ちょっと懐かしくなるような感じで組まれたHPです。担当者が次々変わった痕跡があちこちにあって、HTMLでコメントアウトされてたりする部分もちらほら。
更新は1年前から止まっており、管理する人がいない状態でした。
導入後
- npm, Webpack, Nuxt.jsの導入
- Nuxt.jsのテンプレートで各ページを置き換え
- 既存コンテンツの中身は可能なかぎりDOMには触れずにそのまま移植
- CSSは Sassに置き換え, FLOCSSでフルスクラッチ
- ogなどのヘッダの整備
- レスポンシブデザインによるSP対応
Nuxt.js導入
まずは、サーバーの中身をローカルに全部ダウンロードしてきました。画像ファイルなどの命名を軽く整理しておきます。
Nuxt.jsのZipを公式HPからダウンロードし、中身をさっきダウンロードしたディレクトリにそのままぶちまけます。
次に、ディレクトリの中に入り、必要なものをインストール。 prettierとかもついでに入れます。
$ yarn install $ yarn add --dev node-sass sass-loader prettier eslint-plugin-prettier eslint-config-prettier
.eslintrc.jsのprettier周りを書き換え。
module.exports = { root: true, env: { browser: true, node: true, }, parserOptions: { parser: 'babel-eslint', }, extends: [ 'plugin:vue/essential', 'prettier', ], plugins: ['vue', 'prettier'], }; >
nuxt.config.jsにヘッダなどをつらつらと書いていきます。
module.exports = { /* ** Headers of the page */ head: { title: 'おなまえ', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: '内容', }, { name: 'msapplication-TileImage', content: '/ms-icon-144x144.png', }, { name: 'msapplication-TileColor', content: '#ffffff' }, { name: 'theme-color', content: '#ffffff' }, { name: 'og:title', content: 'タイトル' }, { name: 'og:type', content: 'website' }, { name: 'og:url', content: 'http://example.com' }, { name: 'og:image', content: 'http://example.com/image.png' }, ...
既存ページの移植
まずは既存ページのHTMLをガンガン移植していきます。
$ yarn dev
を叩いてテスト用サーバーを起動。localhostに立つ開発用サーバーで、ブラウザでリアルタイムに確認できます。
pagesディレクトリの下に既存ページと同じようにファイルを切っていきます。拡張子はvueなので、index.htmlはindex.vueになる感じですね。
<template></template>で囲む感じで、既存ページを中にコピペしていきます。
<template> <article> <div>...</div> </article> </template>
共通部分とかはlayoutsのdefault.vueに切り出して記述。
<template> <div> <header> <h1>〇〇公式Webページ</h1> <nav> <ul> <li><nuxt-link to="/">メニュー1</nuxt-link></li> <li><nuxt-link to="/hoge">メニュー2</nuxt-link></li> <li><nuxt-link to="/fuga">メニュー3</nuxt-link></li> </ul> </nav> </header> <main> <nuxt/> </main> </div> </template>
CSSはSassというCSSの拡張でフルスクラッチしていきます。今回はレスポンシブデザインにするので、ブレイクポイントは変数で定義しておきました。ディレクトリ構成とかはたいていFLOCSSを採用してます。命名はBEM。
大体こんな感じで移植完了。いったん分割しちゃえば、あとはそれぞれのページのHTMLキレイにしていくだけです。
リリース
$ yarn generate
を叩くとdist以下に静的ファイルが生成されるので、それをまとめてFTPで上げるだけです。
感想
今回ほぼ初めてVueにも触ったんですがほんと簡単ですねこれ。ただ、Reactと比べるとブラックボックス感はあります。
単なるテンプレートエンジンとしてはReactと比較して導入コストがすごく低いです。HTMLベースなのでコピペでもそのまんま動くので、HTMLベースで抱えてる場合はVueの方が過去のページの書き換えが少なくて済みそう。
今回のケースだと変化する情報が大してないのですが、情報量が増えてくるとReactの方が長期的な管理はしやすそうです。
Reactは「学習コストが高い」という点から見ると、頻繁に管理者変わる系のところでは採用しづらいです。Vueだとコピペでまだ何とかなるから、強い人が来た時にきれいにしてくれるはず……。
Slots by Betway Casino Resort, New Orleans - Mapyro
返信削除Find 의왕 출장마사지 the best 광명 출장샵 deals on Slots 용인 출장샵 by Betway Casino Resort, New Orleans. Mapyro 전라북도 출장안마 users 부산광역 출장안마 are in control and you can't miss a bang.
Nevertheless, the French roulette desk might be be} thought of most useful to gamers. Most gamers keep away from the American roulette wheel because of of} its larger home edge - 5,26% and lower chances to win. Get probably the most of this superb roulette wheel experience by half in} one of the best roulette games in the marketplace with plenty of bonus chips and other bonuses. The standard roulette desk employs a lot as} 10 units of wheel checks . Each set is in a different way|in another way} colored; every historically consists of 300 chips; and there's be} one set 원 엑스 벳 for every player.
返信削除