シリコンバレースーパーウエア

ホーム ブログ Firebase情報 Vue Routerを使ったプロジェクトをFirebaseで公開するには？ 2022年3月31日 Vue Router を使ったプロジェクトを Firebase で公開するには？ Vue Router は Vue を使った Web アプリで、ページ毎に表示を切り替える場合に利用されます。ところが、設定によっては、「ページが見つからない」（４０４エラー）になる場合があります。原因は、Web サイトのページの切り替え（ルーティング）にあります。この記事では、Firebase を利用して、Vue Router を利用した、Vue アプリを公開する方法を紹介しています。 ルーティングの仕組み Web サイトで表示するページを切り替える仕組みを「ルーティング」と呼んでいます。 簡単にいうと、Web ブラウザで指定したリンク（URL）によって、表示を切り替える事ができますが、この切り替えの仕組みをルーティングと呼んでいます。 この「切り替え」を行なっているのは、通常の Web サイトでは、Web サイトの情報を持っているサーバー（Web サーバー）が行なっています。 Web ブラウザは、指定されたリンク（URL）を Web サーバーに送って、表示する情報を Web サーバーから受け取って表示をしています。 Vue の表示の仕組み Vue は「フロントエンドのフレームワーク」の一つで、「Web ブラウザで表示を管理する仕組み」です。 一般的に Vue で作成した Web アプリをインターネットで公開する場合には、 Vite を使って Vue のプロジェクトを作成した場合には以下のコマンドを実行して公開用の情報（イメージ）を作成します。 （＊）この連載では、 Vite を Vue のサンプルプロジェクト（テンプレート/ひな型）を作成する方法を前提に紹介しています。 $ npm run build この公開用の情報（イメージは）、作成した Vue のプロジェクトフォルダの下に「 dist 」というホルダーを作成してその下に作成されます。 実際に作成してこのフォル

ホーム ブログ Firebase情報 Vue Routerを利用する 2022年3月29日 Vue Router を利用する 「Vue Router」を使うと、Vue を使って、ページ毎の表示が簡単にできる様になります！この記事は、「Vue Router」の基本的な使い方を紹介しています。 Vue の基本は「１ページ」 前の記事でも触れていますが、Vue などのフロントエンドのフレームワークの表示の基本は「１ページ」です。 基本になる HTML のページに、Vue が表示させる「部品」を組み込んで表示させるというのが基本的な仕組みになっているのが理由です。 しかし、通常の Web サイトの様に、ページ単位で表示を作れると便利なので、ページ毎の「部品」を作成して、アプリを作る場合も多くなっています。前回は、Vue の基本機能である「v-if」を使って表示するページを切り替える方法を紹介しました。 実は、Vue は、こうしたページ毎の表示をサポートするパッケージ（モジュール）を予め用意していて、ページ毎の表示を簡単に行うことが可能です。この記事では、そのパッケージ（モジュール）の、「Vue Router」の使い方を紹介します。 一番簡単な方法は？ 「Vue Router」を一番簡単に使う方法は、Vue のプロジェクトを作成する際に、「Vue Router」を使う事を予め選択する方法です。 予め、選択する事で、プロジェクト作成時に必要な設定を行なってくれるので、あとはページを追加する感じで利用する事ができます。 以前紹介した、「npm init vue」を利用して Vue のプロジェクトを作成する場合には、以下のような感じで実行されますが、その際に、「Add Vue Router」の質問のところで、「Yes」を選択すると自動的に、「Vue Router」を組み込んでくれます。 $ npm init vue Need to install the following packages: create-vue Ok to proceed? (y) Vue.js - The Progre

ホーム ブログ Firebase情報 Vueのページの考え方 2022年3月27日 Vue のページの考え方 Vue の公式チュートリアルの例では、作成したのは基本的に「１ページ」の Web アプリでした。この記事では、Vue フレームワークの「ページ」の考え方について紹介します。 基本は「１ページ」！ Vue フレームワークを利用した場合は、Web アプリのページは基本的に「１ページ」になります。 公式チュートリアルでは、「メインのページ （App.vue)」から「部品（ChildComp.vue）」を呼び出すような例も学習したと思いますが、これも基本的には「１ページ」のアプリです。「部品（ChildComp.vue）」も、メインのページの一部として表示されているからです。 理由は簡単で、Vue のフレームワークがやっていることは、元になるページに作成した「Vue」の「部品」を Vue が埋め込んで表示をしているからです。Vue では「メインのページ（App.vue）」も、「部品（ChildComp.vue）」も「Vue の部品」として扱われています。したがって、 npm などのパッケージ管理アプリを使って Vue のアプリを開発する場合は、「index.html」というファイルが元になるページで、Vue はこのページに表示を埋め込む仕事をしているだけです。 これが、 Vue や React などフロントエンドのフレームワークを利用して開発した Web アプリが「１ページアプリ」と呼ばれている理由でもあります。 複数のページを扱うには？ では、Vue のフレームワークを利用して複数のページを持った Web アプリは作れないのかという疑問が出てくると思います。 結論から言うと、複数のページを持ったアプリを Vue を使って開発する事は可能です。 コンセプトは同じで、同じ「index.html」に、別のページの「部品」を埋め込んで表示するようにすれば良い事になります。 結果的には、「index.html」と言う一つのページを表示しているのですが、埋め込む情報を全く別の「部品」を埋め込

ホーム ブログ Firebase情報 CSSの手抜き 〜 Bootstrap 2022年3月24日 CSS の手抜き 〜 Bootstrap Vue の公式チュートリアルでも、CSS の部分に関する学習は Javascript や HTML の部分に比べると少なくなっていました。Web 開発の「機能」という観点で見ると、重要なのは、HTML と Javascript になるのが大きな理由です。CSS は「見た目」をよくするという位置付けなのでどうしても優先順位は低くなります。最小限の手間で、見た目をよくする方法に、Bootstrap などの予め標準的な HTML の記述の装飾をまとめた仕組みを利用すると、最低限の知識で、見た目の良いページのデザインが可能になります。この記事では、Vue で Bootstrap を利用するやり方を紹介しています。 Bootstrap とは？ Bootstrap は、HTML で書かれたページの基本的な「飾り」を予め準備して提供している「フレームワーク」です。 この機能を利用すると、Web ページのデザインを行う際に、CSS を書くための時間を最小限に抑えることが可能になります。特に、Web アプリなどの開発では、機能の方が重視される傾向が強く、基本的な HTML の部品の表示の仕方にこだわらないでも良い場合も多いので、上手に利用すると開発の手間を最小限にできます。 Bootstrap 以外にも似たような仕組みは沢山提供されているので、調べて利用すると好みのデザインのフレームワークを見つけられるかと思います。 Bootstrap の利用例 次に、Bootstrap を使うとどんな事ができるのかを「ボタン」を例に見てみます。 下のイメージは、三つの例を挙げています。 HTML の記述だけの場合 Bootstrap を利用した場合 CSS の記述を Bootstrap の「飾り」に近くなるように書いた場合 実際の HTML のボタンの記述は以下のようになっています。 <button>No-CSS</button> <butto

ホーム ブログ Firebase情報 WindowsでNodeJSを使う 2022年3月22日 WindowsでNodeJSを使う NodeJS は基本的に、コマンドラインで利用するアプリです。Windows のコマンドラインは、Linux や MacOS とは違うタイプの物を使っています。この記事では、Windows で NodeJS を使う場合について紹介しています。 Web 開発でよく利用される NodeJS NodeJS に含まれている「npm」、Javascript のパッケージ管理のためのアプリです。 NodeJS を使わなくても、Web 開発は可能ですが、Vue や React などを利用して開発する場合、殆どの場合は、パッケージ管理のアプリを使って開発するのが一般的です。 この連載でも、Vue を利用するやり方として、NodeJS に含まれる、「npm」を利用するやり方を以前の記事で紹介しています。 「npm」を利用すると、Vue や React などのフレームワークの仕組み以外にも、インターネット上で公開されている沢山の基本機能のパッケージ（モジュール）も簡単に自分の開発プロジェクトに取り込んで利用する事ができます。こうした、理由もあって「npm」は Web 開発では広く利用されているアプリになっています。 「npm」を含めてソフトウエアの開発用のアプリの多くが、「Unix」という OS をベースに開発されていて、無料で公開されています。Linux や MacOS は、Unix ベースの OS なので余り問題はないのですが、Windows は、少し系統の違う OS なので若干の違いがあります。 この記事では、Windows で Web 開発を行う場合のやり方についてもう少し詳しく解説しています。 一般的な NodeJS のインストール方法 一番シンプルな方法は、 NodeJS のサイト からインストールパッケージをダウンロードしてインストールする方法です。 最近の PC の場合は、殆どの CPU が 64 ビットの CPU を使っているので、殆どのケースでは、「W

ホーム ブログ Firebase情報 Vueのプロジェクトをインターネットで公開する 2022年3月20日 Vue のプロジェクトをインターネットで公開する Vue を利用して開発した、Web アプリをインターネット上で公開するための方法として、Firebase を利用する方法を紹介します。 Web アプリをインターネットで公開するには Vue で作成するアプリは、基本的に Web ブラウザ上で動作します。開発中は、開発で使っている PC で仮の「Web サーバー」を動かして動作の確認を行うのが普通です。 しかし、この開発した Web アプリをインターネット上で公開するには、この Vue で開発したアプリをインターネットからアクセスできるサーバーにコピーする必要があります。 こうしたサービスを「Web ホスティングサービス」と呼んでいますが、色々なサービスがあって、初心者には迷う部分が大きい部分です。 この記事では、色々ある Web ホスティングサービスの中から、「Firebase」のサービスを利用して Web アプリを公開する方法を紹介します。 Firebase のサービスとは？ Firebase は Google が提供している、インターネットのサービスの一つで、Web ホスティングの他にもログイン機能（ユーザー認証機能）や、データベース、オンラインストレージなど色々なサービスを提供しています。 便利なのは、Google のアカウントを持っていれば誰でも利用できる事に加えて、一定の利用量（アクセスの数や利用しているファイルの容量など）が一定量以下の場合には、無料で利用できる所です。 したがって、初めて Web アプリを提供する場合の多くは、アクセス数や利用量は無料枠内に収まる場合が殆どなので、Firebase を利用して Web サービスを公開する場合には、費用がかからない場合が多くなります。つまり、無料で Web サービスが公開できるという事になります。 （＊）アクセス数や利用量が制限を肥えた場合には費用が発生します。 やり方は簡単！ Firebase を利用するには、Goo