20200730のvue.jsに関する記事は7件です。

投稿日：2020-07-30T20:13:03+09:00

Nuxt(SPAモード) + FirebaseでTwitterシェア用にOGP画像の設定をしたい。

Nuxt(SPA) + Firebaseでプロジェクトを作っていたのですが、OGP設定ができなくて悩みまくったのでメモ。

基本的にOGP設定とかをきちんとやりたい場合はSSRでアプリを作りましょう。

今回はSPAモードで作ってしまっていたのでゴリ押ししてみましたという記事です(なのであまり良い方法ではないかもしれない)。

注)Twitterシェアを想定しています。

nuxt.config.ts(js)を編集

まずはnuxt.config.tsを開いてhead部分を以下のように追記してください。

(僕は今回TypeScriptで書いていますが、修正する箇所はJacaScriptでも同じです。)
nuxt.config.ts
export default {
 mode: 'spa' // <- ここが'universal'の場合は普通にできると思うので今回の記事はいらない。
 ...
 head: {
    title: 'サービスのタイトル',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'サービスの説明' },
      { hid: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' }, // 画像のタイプ。詳しくは後術。
      { hid: 'twitter:site', name: 'twitter:site', content: '@uzr4b' },
      { hid: 'twitter:image', name: 'twitter:image', content: '画像パス(絶対パス)'}, // 苦労しました。詳しくは後術。
      { hid: 'og:type', property: 'og:type', content: 'サービスのタイプ(blogとかwebsiteとか)' },
      {
        hid: 'og:title',
        property: 'og:title',
        content: 'サービスのタイトル'
      },
      {
        hid: 'og:url',
        property: 'og:url',
        content: 'サービスのURL' // デプロイ済みであることが前提です。
      },
      {
        hid: 'og:description',
        property: 'og:description',
        content: 'サービスの説明'
      },
      {
        hid: 'og:image',
        property: 'og:image',
        content: '画像(絶対パス)'
      },
      { hid: 'og:site_name', name: 'og:site_name', content: 'サイト名' }
    ],
    ...
  }, 
}
twitter:cardについて

上記の twitter:cardの部分は画像の大きさや文字との比率を好みで設定します。

カードタイプは、“summary”、“summary_large_image”、“app”、“player”のいずれかになります。ツイートをカードで最適化する

こちらの記事が非常にわかりやすかったです。

twitter:imageについて

twitter:imageはシェアされた時に出てくる画像を指します。

画像に関してもこちらの記事が非常にわかりやすかったです。

またここで指定する画像は以下のような規則があるようです。

Twitterカードを設定している WebページのURLのドメイン名と、画像のURLのドメイン名が異なる場合は、Twitterカードに画像を表示しない仕様のようです。

自分はFirebaseのCloud Firetoreを使用していたので、Cloud Firestoreに画像を保存しておきました。こうすることでドメイン名が合うようになりました。

(こんな感じ↓)

ここで保管した画像のurlを先ほどのcontent: '画像パス(絶対パス)'のところに貼り付けます。

これで基本的な設定は完了です。

package.jsonの設定

次に静的なサイトの設定をします。
注) JavaScriptを使用している方は-tsはいらないです。
package.json
...
"scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "export": "nuxt-ts export",
    "serve": "nuxt-ts serve",
    "generate": "nuxt-ts generate" // 追記
  },
...
以下のコマンドを実行して静的なサイト設定をします。
$ npm run generate
このコマンドを実行すると200.htmlとindex.htmlが生成されて先ほどのOPG設定が反映されているかと思います。

ここまできたらCard validator で確認してみましょう。

Card validator で設定の確認

Card validator | Twitter Developersにアクセスし自分のサイトのurlを入力して確認してみましょう。

うまくいけば以下の画像のようになります。

Card previewがきちんと表示され、Logにエラーも出ていません。

もし、Logは成功しているけど画像が表示されないとなったら画像のパスがきちんと設定できていない可能性があるので上記(twitter:imageについて)の項を参考にしてみてください。

またgenerateコマンドを打たないとページのソースにOGPの設定が出てきません。
こちらの記事の【5. Twitterカードが表示されないときの対処法】をみてみてください。

これでサイトのURLをツイートするとOGP画像が出るようになりました！！

この時作ったもの

昔作っていたNuxtのプロジェクトをTypeScriptの練習で書き換えたものです。
よろしければみてやってください?‍♂️
Course Map

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T17:39:35+09:00

さくっとVue3をCodePenで試したい

さくっとVue3をWebブラウザで試したい時に使えるTipsを見て、Qiitaとかteratailとかに実行可能なコード貼り付けたいなと思って試してみた。

設定

CodePenの settings で設定画面から、JSを選んで、https://unpkg.com/vue@nextを追加します。

次に、HTMLにターゲットを用意します。
<!DOCUTYPE html>
<html>
  <body>
    <div id="vue-app" />
  </body>
<html>
更にさくっとやりたいときはpugを指定して
#vue-app
お行儀はよくないかもしれませんが、動作しました。

ｊｓ

あとは元ネタと同様にVueのコードを書いていきます。
CodePenに書いたサンプルはこちらになります。
https://codepen.io/iwamoto-takaaki/pen/vYLqWar

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T15:35:54+09:00

Vue.js、Svelte.js、jQueryのToDoアプリを作って構文を比較した

Vue.js、Svelte.js、jQueryの構文比較

Vue.jsとSvelte.jsでそれぞれTodoアプリをつくって違いを見比べてみました。
作ったものがシンプルすぎるせいもありますが、ぱっと見では違いが分からないくらいには書き方が似ているので、Vueに慣れていたらSvelteの習得は楽だと思います。

Vue.jsでの実装

まずはVueでつくったToDoアプリのソースコードです。
【Vue.js】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Task list</title>
<style>
[v-cloak] {
    display:none;
}
</style>
</head>
<body>
<div id="app">
    <h2>Task list</h2>
    <input v-model="newTaskName">
    <button v-on:click="add">add</button>
    <ul>
        <li v-for="task in tasks">{{ task.text }}</li>
    </ul>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
let app = new Vue({
    el: '#app',
    data: {
    tasks: [],
    newTaskName: '',
    },
    methods: {
        add: function(){
            if(this.newTaskName == "") return;
            this.tasks.push({text: this.newTaskName});
            this.newTaskName= '';
        }
    }
});
</script>
</html>
Svelte.jsでの実装

つぎにSvelteでつくったソースコードです。
ループの書き方がVueとは異なりますね。またデフォルトのデリミタがVueは{{と中括弧２つなのに対して、Svelteの方は{と中括弧１つとなっています。
【Svelte.js】src/App.svelte
<div id="">
    <h2>Task list</h2>
    <input type="text" bind:value={newTaskName}>
    <button on:click={() => add()}>add</button>
    <ul>
        {#each tasks as task}
        <li>{task.newTaskName}</li>
        {/each}
    </ul>
</div>
<script>
let tasks = [];
let newTaskName = '';

function add(){
    if(newTaskName == '') return;
    tasks = [...tasks,{newTaskName}];　//スプレッド構文を使用
    newTaskName = '';
};
</script>
【Svelte.js】src/main.js
import App from './App.svelte';

const app = new App({
    target: document.body
});

export default app;
上記２つを見比べると構文の雰囲気がよく似ている事が分かります。
現在Vueの方が日本語のドキュメントも充実しているし書籍も数多く出ているので学習環境は整っていますが、一旦Vueを習得してしまえばSvelteへの移行は非常に楽なんじゃないかと思います。

スプレッド構文の参考
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax

jQueryでの実装(参考)

参考までにjQueryでも同じ挙動のToDoアプリを実装してみました。
この程度のアプリだったらむしろjQueryの方が分かりやすいかもしれません。
VueもSvelteもJavaScriptのソースコードにクリックイベントを記述する必要がないですが、jQueryの場合はclassやID等をトリガーとしてクリックイベントを設定する事が必須となります。
<!DOCTYPE html>
<html lang='ja'>
<head>
<meta charset='UTF-8'>
<title>Task list</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>
</head>
<body>
<h2>Task list</h2>
<input type='text' value='' id='text'>
<button id='add'>add</button>
<ul id='todo'></ul>
<script>
const App = class {
  add() {
    $('#add').on('click', () => {
      let text = $('#text').prop('value');
      let html = `<li>${text}</li>`;
      $('#todo').append(html);
      $('#text').prop('value', '');
      });
    }
  }
let todo = new App();
todo.add();
</script>
</body>
</html>
所感

ちょっとSvelte.jsにもちょっかい出してみましたが、現状は日本語ドキュメントが充実しているVueの方が取っつきやすく、構文も見やすいなぁと感じました。
また、Svelteのうり？となっている実行速度の速さはある程度大きなアプリでないと体感し難いかもしれません。とりあえずフロントのフレームワークはjQuery以外では引き続きVueを勉強していこうって思いました。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T09:31:12+09:00

googleスプレッドシートのデータをjsonで吐き出して、NUXTでセクションごとにリスト表示する

スプレッドシートのデータを取得して、データをセクションごとにリスト表示させたのを忘れないようメモ。
axiosでGETしてくるとこが遅いので改善したい。

スプレッドシートに表を用意

データをjson形式で出力。

方法はここを参考。
https://qiita.com/YukiIchika/items/778856a7ea92e5a2383c

NUXT側でデータを取得する。

ここを参考。
https://ma-vericks.com/nuxt-axios/

vueファイル内で
export default {
  async asyncData({ $axios }) {
    const url = 'https://script.google.com/macros/s/ID/exec';
    // リクエスト（Get）
    const response = await $axios.$get(url);
    // 配列で返ってくるのでJSONにして返却
    return { result: response }
  }
};
</script>
セクションごとにリスト表示させる

これのためにsectionsKeyを設定しておく。
<ul>
  <template v-for="item in result">
    <template v-if="item.sectionsKey === 1">
      <li>
        <nuxt-link :to="item.url">{{ item.pages }}</nuxt-link>
      </li>
    </template>
  </template>
</ul>

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T09:31:12+09:00

googleスプレッドシートのデータをjsonで吐き出して、NUXTリスト表示する

スプレッドシートのデータを取得して、データをセクションごとにリスト表示させたのを忘れないようメモ。
axiosでGETしてくるとこが遅いので改善したい。

スプレッドシートに表を用意

データをjson形式で出力。

方法はここを参考。
https://qiita.com/YukiIchika/items/778856a7ea92e5a2383c

NUXT側でデータを取得する。

ここを参考。
https://ma-vericks.com/nuxt-axios/

vueファイル内で
export default {
  async asyncData({ $axios }) {
    const url = 'https://script.google.com/macros/s/ID/exec';
    // リクエスト（Get）
    const response = await $axios.$get(url);
    // 配列で返ってくるのでJSONにして返却
    return { result: response }
  }
};
</script>
セクションごとにリスト表示させる

v-forの中でv-if使うなって書いてあるけど他に方法が思いつかない上に猫本でやってるからやっちゃう。
<ul>
  <template v-for="item in result">
    <template v-if="item.sectionsKey === 1">
      <li>
        <nuxt-link :to="item.url">{{ item.pages }}</nuxt-link>
      </li>
    </template>
  </template>
</ul>

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T09:15:05+09:00

NUXTでgenerateするとluminous-lightboxが動かない

NUXTでLuminousGalleryを使おうとすると動かなかったのでメモ。

公式通りプラグイン内で
var galleryOpts = {
  // Whether pressing the arrow keys should move to the next/previous slide.
  arrowNavigation: true
};

var luminousOpts = {
  // These options have the same defaults and potential values as the Luminous class.
};

new LuminousGallery(document.querySelectorAll("a"), galleryOpts, luminousOpts);
とやるとgenerateすると動かないので、

new LuminousGallery(document.querySelectorAll("a"), galleryOpts, luminousOpts);

この部分だけluminousを動かすvueファイル内で
  mounted(){
    new LuminousGallery(document.querySelectorAll(".luminous"));
  }
としてあげると解決した。

　 Tweet
Qiitaで続きを読む

投稿日：2020-07-30T01:33:24+09:00

MEVN STACKとは〜Vueでフルスタックに作りたい〜

MEVN STACKって何？

MEVN STACKってこういうのだよ

MEVN STACKとは、

Mongodb

Express

Vue.js

Node.js

の頭文字を取ったもの。
類似にMEAN STACK（Mongodb,Express,AngularJS,Node.js）もありますね！
Qiitaには、MEANはあったけどMEVNについてはなかったので、これから頑張って書いていきたいと思います。
もし少しでもいいね！と思ったら「Looks Good To Me!」をください。励みになります！

構成はこうすればできるよ

それぞれの役割についてです。

[引用画像：https://bezkoder.com/vue-node-express-mongodb-mevn-crud/]

上記のような構成で構成します。
構築方法は以下の通りです。

環境構築

■動作環境

OS:macOS Catalina 10.15.6
Node:v13.8.0
Vue:@vue/cli 4.2.2
mongodb:v4.2.3

mongodbの起動

ターミナルにて以下のコマンドを実行してmongodbを起動します。パスに記載されているところに「mongod.conf」が作成されているので、必要な項目を設定する。
terminal.
hoge@hoge-MacBook-Air hoge %mongod --config /usr/local/etc/mongod.conf
僕はソースコードのプロジェクトはdocumentsの配下に格納するようにしているので、storageにはdocumentsの下にdataフォルダを作成してデータベースのデータを格納できるようにしているよ。任意でパスは変更してね。
mongod.conf
systemLog:
  destination: file
  path: /usr/local/var/log/mongodb/mongo.log
  logAppend: true
storage:
  dbPath: /Users/Seastar/Documents/data/db
net:
  bindIp: 127.0.0.1
mongodbの起動を完了したらアプリケーションプロジェクトを作成はじめます！

プロジェクトの作成

今回はhogeという名前で作っているので、必要に応じて変更してくだせぇ。
terminal.
hoge@hoge-MacBook-Air documents %mkdir hoge && cd hoge
hoge@hoge-MacBook-Air hoge %npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (hoge)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/hoge/Documents/hoge/package.json:

{
  "name": "hoge",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) y


   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New minor version of npm available! 6.13.6 → 6.14.7       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.14.7   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯
上記のコマンドを無事に実行するとhogeフォルダの配下に「package.json」が作成される。
作成されたのを確認したら以下のコマンドを続けて実行する。
terminal.
hoge@hoge-MacBook-Air hoge %npm install express bcryptjs passport passport-jwt jsonwebtoken mongoose body-parser cors concurrently mongodb
hoge@hoge-MacBook-Air hoge % npm i -D nodemon
それぞれの役目は以下の通り

express

Node.jsのフレームワークの一つ

サーバーサイド処理を書くために必要

bcryptjs

パスワードなどをハッシュ化するため

passport

認証機能を実装するため

passport-jwt

passport JSON Web Tokeで電子署名付きのJsonで改ざんチェック

jsonwebtoken

JSON Web Tokeでのチェック

mongoose

mongodbへの操作のため。ちなみにマングース

body-parser

formの入力値を受け取るため

cors

Cross-Origin Resource Sharing

concurrently

npmのコマンドをサーバー側とフロント側で同時に実行するため

mongodb

mongodbを操作するためにドライバーが必要

nodemon

アプリケーションのコードの変更を監視し、変更があった際に自動でサーバーの再起動をしてくれるツー

インストールが完了すると以下のような構成になる。

その後、「server」のフォルダとVueクライアントの「client」を作成していく。
terminal.
hoge@hoge-MacBook-Air hoge % mkdir server
hoge@hoge-MacBook-Air hoge % vue create client


Vue CLI v4.2.2
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.2.2 → 4.4.6   │
│    Run npm i -g @vue/cli to update!     │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

....省略.....

?  Successfully created project client.
?  Get started with the following commands:

 $ cd client
 $ npm run serve

hoge@hoge-MacBook-Air hoge %cd client
hoge@hoge-MacBook-Air client %npm i axios
hoge@hoge-MacBook-Air client %cd ../
hoge@hoge-MacBook-Air hoge %cd server
hoge@hoge-MacBook-Air server %touch index.js
この記事はここまで

長くなるので今回はここまでにします。
次回以降に具体的なコードを作っていきます。

　 Tweet
Qiitaで続きを読む