Vue.jsプロジェクトの起動時の名前を設定する
はじめに
今回は、Vue,jsプロジェクトの起動時の名前を設定する方法についての内容です。
通常の場合、プロジェクトの名称がそのまま起動時の名前になります。
vue.config.jsを編集する
vuetifyを導入したときのvue.config.jsは以下の内容になっていると思います。
module.exports = { transpileDependencies: [ 'vuetify' ] }
現在の状態でnpm run serveで起動すると、タブの表示名は以下の形になります。
これは、プロジェクト名称を「front」としたためです。（c-mappプロジェクト内のフロントエンド側という意味で命名しました。）
そのため、vue.config.jsを編集してここの表示を変更します。
一度npm run serveを停止します。
module.exports = { pages: { index: { entry: "src/main.js", title: "c-mapp", } }, transpileDependencies: [ 'vuetify' ] }
pages:以下の記述を追加しています。
entry以下の部分でwebpackのエントリーポイントを指定しています。 また、titleを記述することで、名称を変更しています。
起動すると、こんな感じになります。
entryはデフォルトでは設定の必要がないんですが、pagesを記述するときにentryを設定していないとエラーになるので設定するようにしましょう。
おわりに
leaflet導入については次回以降に行おうと思います。
Springbootアプリケーションの実行時にメインクラスが見つからないというエラーが発生した対応の備忘録
はじめに
leafletを使ってフロント側に地図を表示、サーバ側でその辺の周りを色々行うためのアプリケーションを作成していたんですが、サーバ側処理を担う予定であるSpringbootのローカル環境実行時にエラーを吐きまくっていたので、それについての備忘録です。
かなり短い内容なんですが、忘れそうなのでここで書いておこうと思います。
コンパイラのJavaバージョンを確認する
これが原因でした。
使用しているeclipseではJava15を指定したにも関わらず、springbootプロジェクトのgradleの記述で17を設定していたためです。
本来であればeclipseのjreに17を追加して指定する、またeclipseを別バージョンをインストールして使い分ける、色々と対応としては考えられるんですが、今回は面倒だったのと別に15でも良い（17でなければならないとは考えていなかった）ため、15に設定し直してみます。
gradleプロジェクトのリフレッシュを再度行い、Springbootアプリケーションとして実行。
とりあえずエラーなく動いてくれました。
おわりに
これでサーバ側処理を色々作れそうです。
Vue.jsプロジェクトをVuetifyを使って編集する(PART2 ナビバー改修編)
はじめに
c-mappプロジェクトの一環として、今回はvue.jsのvuetifyによってナビバーを改修していこうと思います。
アイコンボタンを作成してみる
前回の記事でとりあえずでボタンを配置しています。
今回は、まずそのボタンにアイコンの要素を加えてみます。
まず、現在のApp.vueが以下の内容になります。
<template> <v-app> <v-app-bar app color="primary" dark > <v-app-bar-title>c-mapp</v-app-bar-title> <v-btn to="/">Home</v-btn> <v-btn to="/about">About</v-btn> </v-app-bar> <v-content> <router-view /> </v-content> </v-app> </template>
アイコンコンポーネントについては、以下のページに記載されています。
Material Design Iconsを指定することで、アイコンを表示、利用が可能になります。
ちなみに、どのアイコンを使えるのか等については、以下のサイトで検索できます。
（アイコン・コンポーネントのページからもリンクが貼られています。）
例えば、ホームアイコンを利用したい場合は、以下のように検索してみましょう。
Homeで検索し、出てきたやつの中から何を使うか指定していきます。
App.vueを開き、以下のように変更しましょう。
<template> <v-app> <v-app-bar app color="primary" dark > <v-icon>mdi-home</v-icon> <v-app-bar-title>c-mapp</v-app-bar-title> <v-btn to="/">Home</v-btn> <v-btn to="/about">About</v-btn> </v-app-bar> <v-content> <router-view /> </v-content> </v-app> </template>
c-mappの左に、アイコンが表示されるように追加しています。
<v-icon>mdi-home</v-icon>
mdiはMaterial Design Iconsの意味で、それの中でhomeを指定しています。
c-mappの横にアイコンが追加されているのが確認できます。
とりあえずこんな感じで、アイコンを追加可能です。
ナビバーをとりあえず編集
とりあえず他にもアイコンを追加していきます。
<template> <v-app> <v-app-bar app color="primary" dark > <v-app-bar-title>c-mapp</v-app-bar-title> <v-btn icon to ="/"> <v-icon>mdi-home</v-icon> </v-btn> <v-btn icon to="/about"> <v-icon>mdi-information-outline</v-icon> </v-btn> </v-app-bar> <v-content> <router-view /> </v-content> </v-app> </template>
画面上ではこんな感じで表示されます。
ボタンに文字を表示していた形式と異なり、アイコンのみで表示しています。
アイコンについては、どの機能であるのか、何を意味しているのかがわかりやすい方がいいと思います。
ナビバーについては、一旦このへんで終わりにしておきます。今後のページ追加などの際に必要があれば修正していきます。
おわりに
次回はそろそろマップの部分について作成していこうと思います。leafletの導入などを行う予定です。
npmコマンドで「Error: error:0308010C:digital envelope routines::unsupported」が出たときの対処法(Windows版)
はじめに
すでにいくつか対処法等は出ているのですが、今回はWindowsOSで上記エラーが出た場合の対処法について記載していきます。
原因と対処法
エラーメッセージをそのまま検索すればいくつか出てきますが、Node.jsのバージョンが上がった場合にそれに対応できずにエラーとなっているのが原因となります。
とりあえず、バージョンを下げるなり何らかの対応を取ればOKということです。
以下のコマンドを実行することで、エラーを解消できます。
set NODE_OPTIONS=--openssl-legacy-provider
opensslの設定の関係を修正するという内容です。
EXPORTコマンドで実行するように出てくる記事が多かったため、Windowsの場合はこのコマンドを実行すれば解消できるよ！という意味で記事を作成しました。
ちょっと急ぎ足の内容になりましたが、今回はこれまで。
おわりに
本当に急ぎ足なので、どっかで補足などをしたいと思います。時間があれば。
Vue.jsプロジェクトをVuetifyを使って編集する
はじめに
c-mappプロジェクトの一環として、今回はVuetifyを中心に編集していこうと思います。
というのも、前回のrouter導入時に無理やりソースを書き換えるタイプのコマンドを入力して実行したため、ソースが地味に変になっています。とは言っても、そこまで難しい話でもないので、そこをまずは直しつつ、更に有るべき形を目指しながらやっていきましょう。
Homeを編集してみる
まず、新たに追加されたHome.vueを見てみましょう。
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' export default { name: 'Home', components: { HelloWorld } } </script>
HelloWorld.vueコンポーネントを取り込んでいます。まず、このファイルを以下の内容に変更してみましょう。
<template> <v-container> <v-row class="text-center" dense-no-gutters> <v-col> <h1>Home</h1> </v-col> </v-row> <v-row class="text-center" dense-no-gutters> <v-col> ホームページ </v-col> </v-row> </v-container> </template> <script> export default { name: 'Home' } </script>
編集すると、以下の内容になります。
ついでに、About.vueも一旦このような形に編集しましょう。
<template> <v-container> <v-row class="text-center" dense-no-gutters> <v-col> <h1>About</h1> </v-col> </v-row> <v-row class="text-center" dense-no-gutters> <v-col> This is an About Page. </v-col> </v-row> </v-container> </template> <script> export default { name: 'About' } </script>
次に、App.vueを編集してみましょう。
共通部分の編集
App.vueは共通部分の編集になります。ここの<router-view />の部分に、作成しているHomeやAboutの内容が表示されます。画面上部のナビバーも含めて編集していきます。
一旦このような形に修正してみます。
<template> <v-app> <v-app-bar app color="primary" dark > <v-app-bar-title>c-mapp</v-app-bar-title> <v-btn to="/">Home</v-btn> <v-btn to="/about">About</v-btn> </v-app-bar> <v-content> <router-view /> </v-content> </v-app> </template>
v-？？がvuetifyによるものです。v-btnはvuetifyによって装飾されているボタンを呼び出して使っています。
これで起動すると、このような内容になります。
（全画面表示はしていないです。）
Home,Aboutがそれぞれこのような形で画面遷移できればOKです。
おわりに
次回はナビバーの部分をより詳細に修飾しつつ、各画面について詳しく作成していこうと思います。
借りていたVPSを解約した件(4月の話です。)
はじめに
今回の話はプログラミングではないんですが、ITに関連する話になります。
単純な話、色々面倒になってVPSを解約したって話です。解約そのものをしたのは今年の4月の話です。
借りていた理由と使い道
そもそもVPSって何？って話ですが、単純にいうとVirtual Private Serverの略です。それがそもそも何？って話なんですが、日本語訳すると仮想専用サーバーということになります。
一般的にレンタルサーバーの場合、共有のサーバーをそれぞれが契約に応じて利用しているというのがレンタルサーバーのサービスによく見られる形式になります。
メリットとしては、安いということですが、他の方も利用しているので影響が少なくないという点、またサービス内容によっては自由度が低く、やれることが限られている点などがデメリットになります。
これに対し、VPSの場合はそれぞれに仮想サーバーが用意されており、影響を受けにくいという点や、自由度が高いため様々なことが出来るという点がメリットになります。その分、レンタルサーバーを比べて料金が高い等のデメリットも勿論あります。
この使い道についてなんですが、私自身はアプリケーション開発の勉強のため、またそれをデプロイする為にサーバーが必要でした。DB等も設置したいため、そういった用途にも利用できるものを求めていたのが理由になります。
そして、VPSでは色々なことをやっていました。Wordpressの運営、DBの構築、アプリケーションの公開等、勉強するためにはかなり有効だったと思います。
また、VPSの場合は基本的にLinuxやその系列の物が多いです。
これについても、普段触れる機会もあまりなかったため、かなり勉強になりました。（CUIなんて普段のPC作業で使わないですもんね。）
ということで、勉強のためにはかなり重宝しました。
ではなぜ解約することにしたのか、その話をしていきたいと思います。
不正アクセス対応
不正アクセスが検出されました。すぐに対応をお願いします。 という内容の通知が2,3ヶ月に1回のペースで来ます。
これについては、サービス提供会社様がそのログを検出し、対応をしてくれているということなので悪い点でもなんでも無いです。
これについては、調査を行い、メールなどを返信することでOKなんですが、それをしない（返信をしない）場合、サーバーが止められ、初期化しないといけなくなります。
これがめんどくさかったです。これで収入を得ているならそんなことにはならないんですが、こうした形で毎度調査を行い、色々やっていかなきゃいけないのが面倒でした。
一度これでWordpressの運営していたサイトを削除しています。
それ以来、DBサーバーとしてのみの活用の仕方にしていたんですが、それでも不正アクセスが検出されたという通知が来てしまい、これ以上は難しいと思って解約したのが理由になります。
とはいえ、勉強にはなる
しかし、この4ヶ月ほど使っていたのは勉強になったには事実です。割と色々な部分で活かすことが出来ると思います。
不正アクセスのその調査、対応などが煩わしくないのであれば、VPSのデメリットは殆ど無いです。
おわりに
今現在はクラウド系のサービスなどを中心に利用しています。クラウドサービスの場合、従量制のため思いがけない金額になるケースが有るらしく、一長一短だなあと思う次第です。
Vue.jsプロジェクトにvue-routerを追加する
はじめに
c-mappプロジェクトの3つ目の記事になります。今回は、Vue.jsによって作成しているフロントエンドにvue-routerを導入する手順についての内容になります。
なぜ追加するのか
そもそもなぜvue-routerを追加する必要があるのか？もっと言えば、vue-routerって何？どう変わるの？って話になると思います。
vue-routerとは、Vue.jsによって作成したフロント側をSPAとして構築する際に利用できるプラグインです。
SPAって何？って話ですが、別に週刊誌ではないです。
シングルページアプリケーションの略です。
ググってもらえば色々と出てきますが、簡単に説明すると、従来のWEBアプリケーション等では画面側を作成するときにhtmlファイル等をそれぞれ用意し、サーバ側に通信することでどのページを呼び出してくるのか指示を出し、それを受けてどのファイルを表示するのかを処理していました。
これに対し、SPAの場合は用意するhtmlファイルは一つだけになります。そしてそのファイル内に何を描写するのか、その指示や処理をフロントエンド側の処理で行うことによってサーバ側への通信負担軽減等を行うことが出来ます。
イマイチ私の説明だけだと要領を得ないかもしれませんが、以下のポイントだけ押さえてもらえば大丈夫です。
- htmlファイルは一つだけ
- javascript等、フロントエンド側の処理で制御、描写を行う
- サーバ側への通信は行わない
この辺の内容については、別記事で改めて解説したいと思います。
ということで、まずSPAとは何なのか、を簡単にそれっぽく理解していただけたと思います。
そして次に、vue-routerの役割についてです。
ルーティング処理を行うために必要なプラグインですが、そもそもルーティングとは？って話ですよね。
従来のWEBシステム等の場合とは異なり、SPAの場合は実際に画面遷移が行われているというよりは、描写内容を変えているというのがより近い表現になります。
そしてその場合、実際にサーバ側へリクエストを送信し、それの返しを受けているわけではないですが、擬似的にそれをできるようにしている、みたいな認識で良いと思います。（違ったらごめんなさい）
詳しく知りたい方はQiita等に記事がありますので、よかったら色々探してみてください。（本記事の最後に参照リンクを掲載しておきます）
前置きが長くなりましたが、一旦この記事ではこの辺で終わりにします。
次に、実際に導入してみましょう。
コマンドで追加する
以下のコマンドをプロジェクトのルートディレクトリで実行してください。
vue add router
実行後、historyモードを利用するかy/nで聞かれます。今回はyを入力します。
入力後、処理が続きます。このとき、色々と新規でファイルが追加、作成されていきます。
App.vue等も勝手に書き換えられています。
とりあえずこれで一旦起動してみましょう。
画面上部に有る Home | About をクリックすることで画面遷移が可能になっています。
これでとりあえずvue-routerの導入は完了です。
おわりに
vuetifyを導入していたため、ぐちゃぐちゃになっています。このへんの修正などを次回以降行っていきましょう。
