20201013のvue.jsに関する記事は6件です。

投稿日：2020-10-13T20:59:41+09:00

VueでURLからハッシュ("#")を削除し、リロードもできるようにする

概要

Vueアプリはデフォルトでrouterのパスに「ハッシュ(#)」が含まれています。これはrouterを「historyモード」に変更することで削除することができますが、historyモードを使用することでページをリロードした際に、404エラーが返却されてしまいます(historyモードでない場合にはこの問題は発生しません)。

しかしながら一点問題があります。シングルページのクライアントサイドアプリケーションなので、適切なサーバーの設定をしないと、ユーザーがブラウザで直接 http://oursite.com/user/id にアクセスした場合に 404 エラーが発生します。- HTML5 History モード

しかし、適切な設定をすれば「ハッシュを削除しつつ、リロードにも対応する」ことが可能となります。

Expressをインストールする
$ npm install express --save
connect-history-api-fallbackをインストールする
npm install --save connect-history-api-fallback
参考：connect-history-api-fallback

ルートディレクトリにserver.jsを作成する
server.js
var express = require('express');
var path = require('path');
const history = require('connect-history-api-fallback');
var serveStatic = require('serve-static');
app = express();
app.use(history());
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
package.jsonを編集する

ルートディレクトリにあるpackage.jsonに追記します。
package.json
{
  "name": "＜プロジェクト名＞",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
+    "start": "node server.js"
  },
アプリを起動する

ルートディレクトリで次のコマンドを実行し、アプリを起動します。
$ npm run build
$ node server.js
http://localhost:5000でアプリにアクセスすると、ページをリロードしても404が返却されない、かつハッシュ記号もurlから削除されているはずです。

参考：
Vue.jsで作ったアプリをHerokuにデプロイ
 vue-routerのルーティングURLからハッシュを除去しつつ、URL直接指定でも表示させる（Node, Express）

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-13T19:49:08+09:00

Vue.Draggableのtagの挙動がよくわからないのでちょっとゴリ押しした

環境

nuxt :2.13.3
vue.js : 2.6.11
Vuetify : 2.3.4
Vue.Draggable : 2.24.0

nuxtのモード
▸ Rendering: server-side
▸ Target: server

実現したいこと

Vuetifyのv-cardコンポーネントをVueDraggableで並べ変えたかった。

ぶち当たった問題

このコンポーネントを
<template>
  <v-layout>
    <v-container>
      <draggable tag="v-row">
        <v-col v-for="i in 10" :key="i" cols="3" class="ma-0">
          <v-card>
            <v-card-title>
              {{ i }}
            </v-card-title>
          </v-card>
        </v-col>
      </draggable>
    </v-container>
  </v-layout>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  }
}
</script>
yarn dev
して表示したとき
(以後開発モード)
yarn build
yarn start
して表示したとき(以後ビルドモード)

とで表示が違う。

もっと詳しく

ChromeのDevToolsのElementsを見てみると

[開発モード]

[ビルドモード]

開発モードではv-rowコンポーネントが<div class="row">になっているが
ビルドモードではただのv-rowタグになっている

VueDraggableのtag Propsとはなにか

tagにコンポーネントやHTMLタグを指定することによって<draggable>のをそのタグやコンポーネントに置き換えてくれるもの（だと解釈してる）
標準では<div>になる

tag="v-row"とすることで、Vuetifyのv-rowコンポーネントを指定しているはずだが、ビルドモードではなぜか反映されない。
参考

https://github.com/SortableJS/Vue.Draggable

自分なりの解決策

表示したいhtmlは<div class"row">なので
<draggable tag="v-row">を<draggable class="v-row">
に変更した。
これによって開発モードと同じ表示にすることが出来た。

この解決方法ではゴリ押しすぎる。なんか他にいい方法がアリそう……

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-13T18:06:00+09:00

既存のRailaアプリケーションにのせるフロントのフレームワークを比較した話

背景

既存のRailsのアプリケーションにフロントのフレームワークを導入する運びとなりまして、有名どころ3つをチェックポイントに沿って比較しましたのでその話を残しておきます。
今回はこういうやり方で比較したよ、という話なので、もしフレームワークを選ぶことになった際は参考程度に読んでいただき、その時々の状況やプロジェクトに応じて比較方法は変更すればよいと思います。なのでこれが正解というわけではないです。調査結果に誤りがある場合もあると思いますので、調査は自分で公式のものを見てちゃんと行った方がよいです。

比較したフレームワーク

今回比較、検討したフレームワークは以下の3つです。

VueJs

React

Angular

ちなみにAngularは、今回導入しようとしているアプリはそんなに大規模というわけではなかったので、ある程度のところでAngularの調査は切り上げ、VueとReactに絞りました。

チェックポイント

今回「まあこれが分かれば比較できそうかもしれない」と考えてチェックポイントをチーム内で相談し決めました。

フレームワークの概要（特徴）

主なプログラミング言語

最新バージョン

学習難易度

パッケージサイズ

GUI

既存機能の実装難易度

Heroku上の動作時における不具合等

コード管理のしやすさ

開発手法

ドキュメント

他フレームワークへの以降性

ローカル環境構築のしやすさ

比較方法

期間:2週間
調査人数：エンジニア3~4名

チームメンバーで上記のチェックポイントを分担し、確認を行っていきました。その際の情報共有はGoogleドキュメントを使用し、適宜必要に応じてHangoutを行いました。

比較結果

チェックポイント VueJs React Angular

フレームワークの概要（特徴） OSSフレームワークでコミュニティにより開発・メンテ。GUIのコンポネントのみ提供。必要であれば他のライブラリをインストールする Facebook社により開発・メンテされている。GUIのコンポネントのみ提供する。必要であれば他のライブラリをインストールする Google社により開発・メンテ。フロントエンド用のMVCフレームワーク

主なプログラミング言語 EMACS6 EMACS6 Typescript

最新バージョン（調査当時） 2.6 16.13 10

学習難易度容易：GUIのコンポネントとライフサイクルを理解すれば問題ない。CSSコードはコンポネントの中に記述してもいい容易：GUIのコンポネントとライフサイクルを理解すれば問題ない。難：GUIの作成方法以外、フレームワークのコンポネントを理解する必要がある

パッケージサイズ（約） 80KB 100KB 500KB

既存のサイドパーティ Vue Material Kit, Vuetify, Vue Material, Quasar, Bootstrap-Vue Raect Material Kit, Material UI, React Bootstrap, Ant Design, Semantic UI React mdbootstrap, material, ng-bootstrap

既存機能の実装難易度 APIを新たに作成する必要がある。 Vue同様ー

Heroku上の動作時における不具合等 deployして検証 deployして検証ー

コード管理のしやすさコンポネントで分かれているためコード管理はしやすい Vue同様ー

開発手法オブジェクト指向コンポネント指向コンポネント指向

ドキュメント日本語あり日本語バージョンは英語の直訳日本語あり

他フレームワークへの以降性独自フォーマットであるため、開発が進むと後戻りは困難 Vue同様フルスタックなため代替は困難

ローカル環境構築のしやすさ導入時の設定は少し困難だが、そこが完了していれば容易 Vue同様ー

比較結果

既存機能を実際に開発してみて検証をし、ドキュメントを読んで比較した結果今回はVue&Vuetifyになりました。チームメンバーにVueの経験がある人が多かったのも一つです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-13T18:06:00+09:00

既存のRailsアプリケーションにのせるフロントのフレームワークを比較した話

背景

既存のRailsのアプリケーションにフロントのフレームワークを導入する運びとなりまして、有名どころ3つをチェックポイントに沿って比較しましたのでその話を残しておきます。
今回はこういうやり方で比較したよ、という話なので、もしフレームワークを選ぶことになった際は参考程度に読んでいただき、その時々の状況やプロジェクトに応じて比較方法は変更すればよいと思います。なのでこれが正解というわけではないです。調査結果に誤りがある場合もあると思いますので、調査は自分で公式のものを見てちゃんと行った方がよいです。

比較したフレームワーク

今回比較、検討したフレームワークは以下の3つです。

Vue.Js

React

Angular

ちなみにAngularは、今回導入しようとしているアプリはそんなに大規模というわけではなかったので、ある程度のところでAngularの調査は切り上げ、VueとReactに絞りました。

チェックポイント

今回「まあこれが分かれば比較できそうかもしれない」と考えてチェックポイントをチーム内で相談し決めました。

フレームワークの概要（特徴）

主なプログラミング言語

最新バージョン

学習難易度

パッケージサイズ

GUI

既存機能の実装難易度

Heroku上の動作時における不具合等

コード管理のしやすさ

開発手法

ドキュメント

他フレームワークへの以降性

ローカル環境構築のしやすさ

比較方法

期間:2週間
調査人数：エンジニア3~4名

チームメンバーで上記のチェックポイントを分担し、確認を行っていきました。その際の情報共有はGoogleドキュメントを使用し、適宜必要に応じてHangoutを行いました。

比較結果

チェックポイント Vue React Angular

フレームワークの概要（特徴） OSSフレームワークでコミュニティにより開発・メンテ。GUIのコンポネントのみ提供。必要であれば他のライブラリをインストールする Facebook社により開発・メンテされている。GUIのコンポネントのみ提供する。必要であれば他のライブラリをインストールする Google社により開発・メンテ。フロントエンド用のMVCフレームワーク

主なプログラミング言語 EMACS6 EMACS6 Typescript

最新バージョン（調査当時） 2.6 16.13 10

学習難易度容易：GUIのコンポネントとライフサイクルを理解すれば問題ない。CSSコードはコンポネントの中に記述してもいい容易：GUIのコンポネントとライフサイクルを理解すれば問題ない。難：GUIの作成方法以外、フレームワークのコンポネントを理解する必要がある

パッケージサイズ（約） 80KB 100KB 500KB

既存のサイドパーティ Vue Material Kit, Vuetify, Vue Material, Quasar, Bootstrap-Vue Raect Material Kit, Material UI, React Bootstrap, Ant Design, Semantic UI React mdbootstrap, material, ng-bootstrap

既存機能の実装難易度 APIを新たに作成する必要がある。 Vue同様ー

Heroku上の動作時における不具合等 deployして検証 deployして検証ー

コード管理のしやすさコンポネントで分かれているためコード管理はしやすい Vue同様ー

開発手法オブジェクト指向コンポネント指向コンポネント指向

ドキュメント日本語あり日本語バージョンは英語の直訳日本語あり

他フレームワークへの以降性独自フォーマットであるため、開発が進むと後戻りは困難 Vue同様フルスタックなため代替は困難

ローカル環境構築のしやすさ導入時の設定は少し困難だが、そこが完了していれば容易 Vue同様ー

比較結果

既存機能を実際に開発してみて検証をし、ドキュメントを読んで比較した結果今回はVue&Vuetifyになりました。チームメンバーにVueの経験がある人が多かったのも一つです。

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-13T11:33:00+09:00

【Vue.js】Vue.jsでfontawsome(Free版)を使用する方法　　

【ゴール】

Vue.jsでfontawsomeを使用する。(Free版)
※Vue.jsバージョンは2.6.12です！！！

【メリット】

■Vue.jsの理解度向上
■UI向上

【環境】

mac catarina 10.156
Vue.js v2.6.12

【実装】

※node.js, vue.jsのインストールは割愛。ページ下に参考リンク貼っておきます?‍♂️

兎にも角にも、「npm install」

アイコンのコード入れたら全部使えるよにします〜
mac.terminal
//ワークスペース作成
$ vue create fontawsome

// fontawsomeのパッケージ（無料版のみ）
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/free-brands-svg-icons
$ npm i --save @fortawesome/free-regular-svg-icons
$ npm i --save @fortawesome/vue-fontawesome@2  //ここだけバージョンによって異なります。
インストールしたパッケージを読み込む
main.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'

library.add(fas, far, fab)
Vue.component('font-awesome-icon', FontAwesomeIcon)
使ってみる
app.js
<template>
  <div>
    <font-awsome-icon icon="お好きなアイコンのコード">
  </div>
</template>
以上！！！

【まとめ】

■ npm install
■「main.js」でパッケージを読み込む
■ < font-awsome-icon icon="お好きなアイコンのコード"> でviewに描画する

【オススメ記事】

■公式ドキュメント
https://github.com/FortAwesome/vue-fontawesome

■ 【node.js】 node.jsインストール芋っていたけど、簡単だった件...
https://qiita.com/tanaka-yu3/items/739db5ffed24a8d9ae4b

■ 【HOMEBREW】 Mac OSのパッケージマネージャーについて node.jsやってたら学んだ事
https://qiita.com/tanaka-yu3/items/65dac47443cc08914a86

　 Tweet
Qiitaで続きを読む

投稿日：2020-10-13T00:26:27+09:00

LINEボットでゲームブック、回想シーンを追加

前回の投稿（ LINEボットでゲームブックを作った、ついでにシナリオエディタ作ったので完成）の続きです。

LINEボットでゲームブックを作りましたが、かのTyranoScriptを参考に、回想シーンを付けてみました。
気に入った画像があるページで、「記憶」と言うと、その時の画像や音声を覚えておいてくれるので、いつでも見返せるようになります。
今回も、GitHubに上げています。

poruruba/LinebotGamebook
　https://github.com/poruruba/LinebotGamebook

回想シーンを思い出すために、LIFFアプリを追加します。
こんな感じの画面が、LINEアプリ内に表示されます。

LIFFアプリの登録

LIFFアプリは、スマホのLINEアプリの中で起動できるWebページです。
ユーザにログインを気にさせずにWebページを表示させられるのがよいです。

LINE Developersより、LINEログインチャネルを作成し、LIFFタブを選択して、LIFFアプリの「追加」ボタンを押下すれば登録できます。

LIFFアプリ名には適当な名前を入力し、エンドポイントURLには、立ち上げたサーバのURLを以下のようにして入力します。

　https://【サーバのURL】/gamebook/liff/index.html

そうすると、LIFF IDが払い出されます。これを覚えておきます。ついでに、このチャネルのチャネルIDも覚えておきます。

※ちなみに、以前はMessaging APIでLIFFが登録できていたのですが、最近はだめになったようです。（その影響で、liff.sendMessages()が呼び出せなくなっているような。。。）

あとは、上記のURLに表示させたいWebページを作ればよいです。
このページにユーザに飛んでもらうためには、チャットで「"https://liff.line.me/" + LIFF_ID」という感じのURLをクリックしてもらえばよいです。

LIFFアプリとサーバの連携

LIFFアプリは通常のSPAのWebページです。
以下のjavascriptライブラリを取り込みます。
public/gamebook/liff/index.html
  <script charset="utf-8" src="https://static.line-scdn.net/liff/edge/2/sdk.js"></script>
LIFFアプリのJavascriptでは、Webページが起動した直後に、以下を呼び出します。
public/gamebook/liff/js/start.js
                await liff.init({
                    liffId: LIFF_ID
                });
                this.id_token = liff.getIDToken();
LIFF_IDは先ほど取得したものです。
そして、このid_tokenを立ち上げたサーバに渡します。
public/gamebook/liff/js/start.js
                var param = {
                    id_token: this.id_token,
                    cmd: 'get'
                };
                var json = await do_post(status_url, param );
(参考) liff.init()、liff.getIDToken()
https://developers.line.biz/ja/reference/liff/#initialize-liff-app
https://developers.line.biz/ja/reference/liff/#get-id-token

サーバ側では、IDトークンを検証してLINEユーザIDを判別して、シナリオの状態を取り出し、jsonとして戻してくれるようにサーバ側を実装しました。

サーバ側の処理

サーバ側ではIDトークンをLINEサーバに渡して正しさを確認すると、ユーザの情報が取得できます。ブラウザから取得したIDトークンと、先ほどメモっておいたチャネルIDを使います。
api/controllers/linebot/index.js
      var json = await do_post_urlencoded('https://api.line.me/oauth2/v2.1/verify', { id_token: body.id_token, client_id: LINE_CHANNEL_ID } );
      var userId = json.sub;
(参考) LIFFアプリおよびサーバーでユーザー情報を使用する
　https://developers.line.biz/ja/docs/liff/using-user-profile/

userIdがわかったので、DBまたはファイルから状態を取得し、以降の処理でクライアントに返してあげています。

あとは、ソースコードを見ていただければ！！

補足

LIFFアプリは、ChromeではなくLINEアプリの中で起動するのでJavascriptのデバッグがつらいです。
その場合には、以下の部分のコメントアウトを解除してください。consoleが見れます。
public/gamebook/liff/js/start.js
//var vConsole = new VConsole();
Tencent/vConsole
　https://github.com/Tencent/vConsole

以上

　 Tweet
Qiitaで続きを読む