質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Q&A

解決済

1回答

1285閲覧

GAS(Google Apps Script)でVuetifyが機能しない?のかもわからない。

YuttyaDX

総合スコア25

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

0グッド

0クリップ

投稿2021/12/25 07:10

前提・実現したいこと

【デモ環境あり】GASを使って掲示板を作ってみた話
上記のリンクを参考にして、Webアプリケーションを作っていて、Yahoo知識袋みたいな質問投稿サイトを作りたい。

発生している問題

プログラムを組んでプレビューすると、Vuetifyの機能(<v-app><v-container>など)の機能のみが機能しない。

該当のソースコード

error.html

1<html> 2<head> 3 <base target="_top"> 4 <meta charset="utf-8"> 5 <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"> 6 <!--<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">--> 7 <?!= HtmlService.createHtmlOutputFromFile('vuetify.min.css').getContent(); ?> 8 <title>SNSBoard</title> 9</head> 10<body> 11 <p>errorページが表示されています</p> 12 <div>hogehoge</div> 13 <div id="app"> 14 <v-app> 15 <vue-toollist></vue-toollist> 16 <v-container grid-list-md> 17 <v-layout row wrap> 18 <v-flex xs12> 19 <p>ただいま、更新処理中です。</p> 20 <p>一定時間後、再度アクセスを行なってください。</p> 21 <v-flex> 22 <v-layout> 23 24 </v-app> 25 </div> 26</body> 27</html> 28 29<?!= HtmlService.createHtmlOutputFromFile('vue.js').getContent(); ?> 30<?!= HtmlService.createHtmlOutputFromFile('vuetify.js').getContent(); ?> 31 32<?!= HtmlService.createHtmlOutputFromFile('vue_toolList').getContent(); ?> 33 34<script> 35const app = new Vue 36({ 37 el : "#app" 38 ,data() 39 { 40 return{ 41 } 42 } 43 ,methods: 44 { 45 } 46 ,mounted() 47 { 48 } 49 ,components: 50 { 51 'vue-toollist' : vue_toolList 52 } 53}) 54</script>

外部ファイルのVue.jsやVuetify.js, Vuetify.min.cssなどは他のURLからのアクセスの回数を減らすため、ローカルのファイルにコードを丸コピしています。
詳しくはこちらを見てください。
参考にしたソースコード

補足情報(FW/ツールのバージョンなど)

Vue.js : v2.6.14

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/12/25 09:25 編集

手元で参考リンクのGitHubのソースコードをそのまま(.js拡張子を.gsに変える以外はファイル名やコードは一字一句同じ状態で)GASにコピペして実行したら特にも問題なく動きました。 (もしかしたらご自分でカスタマイズされている部分がエラーを起こしている可能性がありますが、質問文に記載されていないのでわかりません) それか参考リンクと異なるバージョンのvue等のライブラリをコピペしているのであれば、バージョン違いが原因でうまく動いていない可能性もあります。 いずれにしろ参考リンクの内容から独自カスタマイズされている部分があるのであれば、現状の質問文に変更点を全部追記していただいた方が、解決に近づくかとは思います。
guest

回答1

0

自己解決

qnoirさん
ご回答ありがとうございます。先ほど確認したところ、先日私がVue.jsやVuetify.jsのバージョンを上げていて、
元のソースコードに戻して見ると何の問題もなく動きました。
今後もバージョンの確認などは、気をつけていきたいです。

投稿2021/12/25 11:09

YuttyaDX

総合スコア25

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問