対処法が分かればすぐ解決できることだったので、メモです。 事象 Vue CLI でビルドしたファイルを Web サーバに配置して、確認！ あれ、画面が真っ白……。 コンソールには「こんな JS ファイルないよ！」というエラーが表示されていました。 HTML ファイルで指定している各ファイルパスが合っていないようです。 よくよく確認すると、相対パスで書いていたはずのものが、ルートパスに置き換わっていました。 // 相対パス './js/sample.js' // ← こっちで書いたのに // ルートパス '/js/sample.js' // ← こっちになっているのです… Vue CLI では、特に指定していない場合は、ルートパスを指定する仕様のようです。 ドメイン直下に配置する場合は良いのですが、そうではない場合に困りますね…。 対処法 package.json と同じ階層に vue.config.js ファイルを作成します。 この vue.config.js ファイルに以下のコードを書きます。 module.exports = { publicPath: './' } そしてもう一度ビルドして適用。これだけです。簡単でしょう…？ 割と時間を取ってしまった割に、3行のコードで解決できてしまいました。 未来の自分が忘れた時のために、ここに記録を残しておきます。

概要 サーバーから能動的にデータを送信するHTTP通信方法であるServer-Sent Events(SSE)を利用して画面上の画像を都度差し替えて表示する仕組みを作ってみていたので覚書として。 導入 下記のコードをvue.js内のmethodsに書き込めばおおよそ完了。 EventSourceにはリアルタイム取得したいサーバー側のURIを書き込み、Cookieも有効にしたい場合はコンマ区切りで{ withCredentials: true }を追加すればOK。 <script> methods: { getImage () { let evtSource = new EventSource('/get_image', { withCredentials: true }) evtSource.addEventListener('message', event => { this.imgSrc = event.data }, false) } } </script> vueファイルの全体像としては下記のイメージ。 display.vue <template> <div> <img :src="imgSrc"/> </div> </template> <script> export default { data () { return { imgSrc: null } }, created: function () { this.getImage() }, methods: { getImage () { let evtSource = new EventSource('/get_image', { withCredentials: true }) evtSource.addEventListener('message', event => { this.imgSrc = event.data }, false) } } } </script>

概要 サーバーから能動的にデータを送信するHTTP通信方法であるServer-Sent Events(SSE)を利用して画面上の画像を都度差し替えて表示する仕組みを作ってみました。 今回は画像送信を挙げていますが、特にチャット文言やセンサーデータなどリアルタイムでやり取りさせるものでよりイメージが出来るかと思います。 導入 画面側 下記のコードをvue.js内のmethodsに書き込めばおおよそ完了。 EventSourceにはリアルタイム取得したいサーバー側のURIを書き込み、Cookieも有効にしたい場合はコンマ区切りで{ withCredentials: true }を追加すればOK。 今回はサーバーから取得した画像ファイルをそのまま出すだけなのでevent内のdataをそのまま変数に格納する作りになります。 <script> methods: { getImage () { let evtSource = new EventSource('/get_image', { withCredentials: true }) evtSource.addEventListener('message', event => { this.imgSrc = event.data }, false) } } </script> vueファイルの全体像としては下記のイメージ。 display.vue <template> <div> <img :src="imgSrc"/> </div> </template> <script> export default { data () { return { imgSrc: null } }, created: function () { this.getImage() }, methods: { getImage () { let evtSource = new EventSource('/get_image', { withCredentials: true }) evtSource.addEventListener('message', event => { this.imgSrc1 = event.data }, false) } } } </script> サーバー側 とりあえずランダムで画像URL送り込む感じで。 Image.java @GetMapping(value = "/get_image", produces = MediaType.TEXT_EVENT_STREAM_VALUE) public Flux<Object> getImage() { 　　 String[] imageArray = { "https://2.bp.blogspot.com/-27IG0CNV-ZE/VKYfn_1-ycI/AAAAAAAAqXw/fr6Y72lOP9s/s800/omikuji_kichi.png", "https://3.bp.blogspot.com/-vQSPQf-ytsc/T3K7QM3qaQI/AAAAAAAAE-s/6SB2q7ltxwg/s1600/omikuji_daikichi.png", "https://4.bp.blogspot.com/-qCfF4H7YOvE/T3K7R5ZjQVI/AAAAAAAAE-4/Hd1u2tzMG3Q/s1600/omikuji_kyou.png" }; Random rand = new Random(); return Flux.interval(Duration.ofSeconds(1)) .map(sequence -> imageArray[rand.nextInt(imageArray.length)]; }

今回やること 　一覧表示での「初見」「鑑賞種別」の表示が、コードをそのまま表示していた為に意味が分かりずらかったので、コードの変換を行い意味が分かる表示にします。 プログラムの修正 「初見」の変換 　次の様にコードを変換します。 　　　0→いいえ ／ 1→はい 　変換のパターンが単純で固定的なので、フィルタ（filtersオプション）を使用します。 Vuejs.html 　filters:にconvFirstLookを追加します。 <script> 　　： 　var app = new Vue({ el: '#app', 　　　　： filters: { 　　　　： }, convFirstLook: function(flag) { return (flag == 0) ? 'いいえ' : 'はい'; } }, 　　　　： Index.html 　HTMLでの一覧表示の「初見」列で、Vuejs.html に追加したconvFirstLook使用します。 <td class="col04">{{ record[3] | convFirstLook }}</td> 以前の記述 <td class="col04">{{ record[3] }}</td> 「鑑賞種別」の変換 　スプレッドシートの［鑑賞種別］シートのデータを使用して、コードを変換します。 　動的に処理できる様に、データ（dataオプション）に配列として取り込みます。 Vuejs.html 　data:にviewingTypes（配列）を追加します。 　methods:にconvViewingTypeを追加します。 　　※filters:では、data:の値を参照できないので、methods:を使用します。 <script> 　　： var app = new Vue({ el: '#app', data: { 　　　　： viewingTypes : [], 　　　　： }, 　　　　： methods: { 　　　　： }, convViewingType: function(val) { let res = ''; for(const viewingType of this.viewingTypes) { if(val == viewingType[0]) { res = viewingType[1]; break; } } return res; }, ViewingRecord.gs 　［鑑賞種別］シートからデータを取得する処理：getViewingTypes()（サーバ側の処理）を追加します。 function getViewingTypes(year) { var fileId = getFileIdFromYearSettings(year); var sheet = SpreadsheetApp.openById(fileId).getSheetByName('鑑賞種別'); var lastRow = sheet.getLastRow(); var results = sheet.getRange(3, 3, (lastRow - 2), 2).getValues(); Logger.log('results: ' + results); return results; } javascript.html 　サーバ側の処理で取得した［鑑賞種別］シートのデータを、viewingTypes（data:）にセットする処理：getViewingTypes()（クライアント側の処理）を追加します。 <script> 　　： function getViewingTypes(year) { google.script.run.withSuccessHandler( function(v, element) { var viewingTypes = []; for(let viewingType of v) { viewingTypes.push(viewingType); } app.viewingTypes = viewingTypes; }) .withFailureHandler( function(msg, element) { showError(msg); }) .withUserObject(this) .getViewingTypes(year); } Index.html 　HTMLでの一覧表示の「鑑賞種別」列で、Vuejs.html に追加したconvViewingType使用します。 <td class="col04">{{ convViewingType(record[4]) }}</td> 以前の記述 <td class="col04">{{ record[4] }}</td> Vuejs.html 　data:のviewingTypesに動的にデータをセットする為、mounted:とdoChangeYear（methods:）にgetViewingTypes()の実行を追加します。 <script> 　　： var app = new Vue({ el: '#app', 　　　： }, mounted: function() { 　　　　： getViewingTypes(this.selectedYear); }, 　　　　： }, methods: { 　　　　： doChangeYear: function() { 　　　　　： getViewingTypes(this.selectedYear); }, css.html 　「初見」と「鑑賞種別」の列幅ならびに一覧表全体の幅を広げます。 <style> table#resultList { width: 1150px; } 　　　： } .head04 { width: 75px; height: 50px; text-align: center; } .head05 { width: 75px; height: 50px; text-align: center; } 　　　： } .col04 { width: 75px; display: table-cell; text-align: center; vertical-align: middle; } .col05 { width: 75px; display: table-cell; text-align: center; vertical-align: middle; } 　　　： </style> 結果 　「初見」と「鑑賞種別」の表示が変換されました。 ◆前の記事 GASでWebアプリ｢映画鑑賞記録｣を作る⑬ ◆索引 GASでWebアプリ｢映画鑑賞記録｣を作る《索引》

vue(vue.js)でloadingする際、よく紹介されているvue-loading-templateの紹介です。 しかし、リポジトリのreadmeを見てもexmapleを読んでも、検索しても、初見では使い方がわからないのではと思ったので、この記事を書くことにします。 かなり丁寧に解説することを目指します。 まず、vueの使い方ですが、nodeやyarnでinstallして使います。 今回は、package.jsonを用意します。 package.json { "name": "sample-vue-project", "version": "0.0.1", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.4", "vue": "^2.6.11", "vue-loading-template": "^1.3.2", "vue-template-compiler": "^2.6.14" }, "devDependencies": { "@vue/cli-service": "~4.5.15" } } 基本的にはpackage.jsonがあるディレクトリ内でyarn installなどをすればOKです。 command-exmaple $ mkdir -p project $ cd project $ cat package.json { "name": "sample-vue-project", "version": "0.0.1", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.4", "vue": "^2.6.11", "vue-loading-template": "^1.3.2", "vue-template-compiler": "^2.6.14" }, "devDependencies": { "@vue/cli-service": "~4.5.15" } } $ yarn install 次にvueのsrc file(ソースファイル)を用意します。通常はこれをbuildすると、html(web)が生成され、それをweb server上に置くことで有効なページとして動作します。 command-exmaple $ mkdir -p src $ touch src/main.js $ vim src/main.js src/main.js import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App) }).$mount('#app') main.jsに全てを書いても良いですが、今回は、App.vueを読み込んで処理することにします。html形式のほうが最初はわかりやすいと思います。 なお、main.jsに書く形式と読み込む形式では、若干、書き方が異なります。 command-exmaple $ vim src/App.vue src/App.vue <template> <div id="app"> <Loading v-show="loading"> <vue-loading type="barsCylon" color="#99892b" :size="{ width: '50px', height: '50px' }"></vue-loading> </Loading> <button @click="picker" >start</button> <p v-show="!loading">{{ name }}</p> </div> </template> <script> import { VueLoading } from 'vue-loading-template'; export default { data() { return { name:"", loading: false } }, components: { VueLoading }, methods: { picker: function(){ this.loading = true; setTimeout(() => { // ここに処理 this.name = "test"; this.loading = false; }, 1200); } } } </script> これは、ボタンがクリックされるとnameに文字列を入れるのですが、その処理まで1.2秒の待機時間を設け、その間にローディングを表示しています。 ポイントとしては、ローディング処理の有無はv-showなどで変数を指定して制御するということです。 exampleにもreadmeにも書かれていない気がするので、これは初見ではよくわからないんじゃないかなと思いました。 例えば、以下のタグを用意する必要があり、loading=trueの場合は上で、loading=falseの場合は下になります。 <xxx v-show="loading"></xxx> <xxx v-show="!loading"></xxx> 簡易なサンプルを用意すると、以下のような書き方になります。 <Loading v-show="loading"> <vue-loading type="bars" color="#d9544e" :size="{ width: '50px', height: '50px' }"></vue-loading> </Loading> <p v-show="!loading">{{ name }}</p> ローディングの種類は、typeで指定しますが、これらはreadmeに書かれています。balls, bars, beat, bubbles, cylon, spin, spiningDubbles, barsCylonがあり、それらを指定できるようです。見た目はdemoから確認しましょう。 vueの場合は、sleep, timeout関連で待機時間を指定するのもハマりどころかもしれません。 setTimeout(() => { // ここに処理 }, 1200); 最後に、previwとbuildについて説明します。preview, buildとは、表示確認と実行ファイル生成のことです。 # preview $ yarn serve $ curl -sL localhost:8080 # build $ yarn build $ ls ./dist/ buildの場合は、基本的に./dist以下に生成されます。必要になるファイルは内容によります。buildされるファイル等を指定するのは、以下の設定ファイルを作り、yarn buildする必要があります。 vue.config.js module.exports = { configureWebpack: { output: { filename: '[name].js', chunkFilename: '[name].js' } }, css: { extract: { filename: '[name].css', chunkFilename: '[name].css' }, }, } これを前提に話をすると、今回の場合は以下の構成で有効なページになります。 commmand-example $ cp ./dist/*.js ~/public/web-server/ $ cd ~/public/web-server/ $ vim ./index.html /index.html <div id=app></div> <script src=/chunk-vendors.js></script> <script src=/app.js></script> $ firefox index.html or $ jekyll serve なお、普通にyarn buildで生成された./dist内でpreviewしてもOKですし、ファイル全部をdeploy(ここではweb-server上に置くこと)してもいいです。

ReactよりVue.jsの方が好みな感じの雰囲気を醸し出しているので軽く触っておく。 なお、ReactもVueも基幹系ではあまり需要がないので利用することなかった。（jQuery止まり） 導入 CDN版の場合は公式に簡単には書いてある。 <script src="https://unpkg.com/vue@next"></script> HTMLにこれ書くだけで使う事は可能。 バージョン番号指定なら <script src="https://unpkg.com/vue@3"></script> <!-- 3の最新 --> <script src="https://unpkg.com/vue@3.0.0"></script> <!-- 特定バージョン --> npmでローカルにインストールする場合 npm install vue@next TypeScriptでやるならインストールする必要がもちろんある。 Vue3についてはこことか。 3系はIEでは動かないので、その辺りでの注意は必要。 お試し 今回は時間があまりなかったのでCDN版で。 ここ見ながら vueはせっかくなので最新のV3で書き換えて試す。 V2とV3の違いがあって、new Vue({})がエラーになる。 代わりにVue.createAppを使う。 また、.mount(target)で対象を指定する。 AJAXにはaxiosではなくjQueryを使ってみるか、と思って適当に以下で書いてみた。 <script src="https://unpkg.com/vue@3"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> Vue.createApp ({ data() { return{ inputZip:'', defaultZip:'1000000', zip:'0000000', zipAddr:'' } // 二重括弧に対応するデータ。初期値も指定。 }, computed: { computedZip: function(){ return !isNaN(this.inputZip) && this.inputZip.length == 7 ? this.inputZip : this.defaultZip }, computedAddress: function(){ return !isNaN(this.inputZip) && this.inputZip.length == 7 ? getAddress(this.inputZip) : '';} }, methods: { getAddress: function(z){ let params = {"zipcode": z}; $.get('https://api.zipaddress.net/',params ).done( function(d){ if(d.code == '200'){ this.zipAddr = d.data.fullAddress; // 画面が変更されない }else{ this.zipAddr = d.message; } }).fail( function(e){ this.zipAddr = e.code; }); } } }).mount('#vue-target'); // mountでVueを利用する対象を指定 </script> 動かない。 methodでthis.xxxにセットしても変更されないのはおそらくjQuery内部のThisの問題。 サンプルのようにAxios使うと普通にできた。 methods: { getAddress: function(z){ let params = {"zipcode": z}; axios .get('https://api.zipaddress.net/', {'params':params}) .then(res => { console.log(res.data); this.zipAddr = res.data.code == 200 ? res.data.data.fullAddress : res.data.message; }); } } 勿論jQueryを使って書くことも出来て、とりあえずこんな感じでthisを受けると動いた。 （動かない原因に気が付くのに時間がかかってしまった） methods: { getAddress: function(z){ let params = {"zipcode": z}; let _this =this; // jQuery内部で使うためにthisを引き受けておく。 $.get('https://api.zipaddress.net/',params ).done( function(d){ if(d.code == '200'){ _this.zipAddr = d.data.fullAddress; }else{ _this.zipAddr=d.message; } }).fail( function(e){ _this.zipAddr = e.code; }); } } Method周りの公式マニュアルも参考にするとよい。 いろいろ見ているとV3ではThis付ける付けない辺りの挙動もV2から変わっているらしい。 こことかこことかが参考になるかも 情報が揃っているV2の方が使いやすい可能性はあるものの、やはり今から使うならV3か・・・ そういえばSwiftなんかは強制アップデートで古いコード動かなくなったりしてイライラしたなぁ、という思ひ出。

はじめに Vue.js 2系でしか使用したことがなく、 Nuxt.jsでは今まで書いていた書き方だとエラーになり・・・ かつ、TypeScriptでの記述例があまりなかったので忘備録として。 見られてまずい個人情報などは、この方法で保存しないように！ Nuxt.jsでVuexStoreのstateを保存する手順 ① vuex-persistedstateのインストール npm install --save vuex-persistedstate ②　~/plugins/localStorage.ts に記述 ~/plugins/localStorage.ts import createPersistedState from "vuex-persistedstate"; export default ({ store }: any) => { createPersistedState({ key: "vuex", //pathsの中身は、保存したいstateを記述 paths: ["todo.todoList"], //保存先 storage: window.localStorage, })(store); }; paths: 保存したいstateを指定するところ "storeモジュール名.保存するstate変数名" の形式で記載。 複数ある場合は、 "storeモジュール名.保存するstate変数名","storeモジュール名.保存するstate変数名" でOK storage: 保存先を指定するとことろ 今回は、localStorageを使用。※下記表参照 下記以外にもCookieにも保存ができるそう？だけど私は使わないで省略。 ストレージ storageの値 保存期間 ローカルストレージ window.localStrage 意図的に消さない限り保存され続ける セッションストレージ window.sessionStrage ブラウザを閉じたりセッションが切れたた消える ③ nuxt.config.js に追記 ~/nuxt.config.js plugins: [{ src: "~plugins/localStorage", ssr: false }], おわりに Nuxt.jsの練習でTODO LISTを作成していることがバレましたが。 データベースが作れない私でも取り急ぎローカルに保存できた

vue-sfc-rolluとは vue-cliのように、とても簡単にVueライブラリを作成する環境（プロジェクト）を自動生成してくれる、とても便利なリポジトリです。 具体的な使い方については、以下サイト様が詳しく解説してくださってます。 https://zenn.dev/hiratake/articles/publish-vue-sfc-rollup 問題 デフォルトの状態では、例えば"entry.esm.js"内などに「export default class クラス名」を記述して、実際にbuildして"npm link"などでテストしても、以下のようなエラーを出力して処理が停止します。 ERROR Failed to compile with 1 error 1:02:55 error in ../sample-project/dist/sample-project.esm.js Module parse failed: Unexpected token (204:17) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders | | class SampleClass{ > static install = install$1; | | constructor() { 対処 「babel-plugin-transform-class-properties」をインストールします。 npm install --save-dev babel-plugin-transform-class-properties また、インストール後、プロジェクトのルートディレクトリにある"babel.config.js"を編集します。 babel.config.js const devPresets = ['@vue/babel-preset-app']; const buildPresets = [ [ '@babel/preset-env', // Config for @babel/preset-env { // Example: Always transpile optional chaining/nullish coalescing // include: [ // /(optional-chaining|nullish-coalescing)/ // ], }, ], ]; module.exports = { presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets), plugins: ["transform-class-properties"] <-- 追加！ }; 以上です。