絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

41 件中 1 - 41 件表示
カバー画像

Vue CLI を使った場合の環境変数

Vue CLI を使った場合の環境変数これまで、Vite で Vue のプロジェクトを作成した場合の環境変数の扱い方を紹介してきました。しかし、Vue のプロジェクトを作成する際に、Vue が提供している「Vue CLI」を利用している方もたくさんいらっしゃるようなので、この記事では、Vue CLI でプロジェクトを作成した際の環境変数の扱いについて紹介しておきます。なぜやり方が違うか?Vue の中で使う環境変数なのに、なんでやり方が違うか不思議に思われる方も多いと思います。まずは簡単になぜやり方が違うのかを簡単に説明しておきます。 npmなどのパッケージ管理アプリを利用して、Vue などのフレームワークを利用する場合には、作成したアプリを公開するためのイメージを作る仕組みが必要です。この仕組みが、Vue CLI だったり Vite というように違うの一番の理由です。インターネットに公開する際は、作成したアプリを HTML と Javascript、そして CSS のファイルにして Web ホスティングをする Web サーバーにコピーする必要があります。開発用のサーバーの場合でも同様で、Web ブラウザでアプリを動作させるためには、基本的に Web ブラウザが扱える「形」にする必要があるためです。その仕組みが違うので、環境変数の扱い方も違っています。Vue CLI で環境変数を利用する場合は?Vite でプロジェクトを作成した場合には、環境変数を「_.env_」というファイルで、最初に「VITE_」をつけて、「VITE_XXXX」のように記述して、Javascript のプログ
0
カバー画像

Vue と Vite の環境変数で Firebase のプロジェクト情報を設定する!

Vue と Vite の環境変数で Firebase のプロジェクト情報を設定する!前回の記事では、環境変数の基本的な使い方を紹介しました。今回は、Firebase のプロジェクト情報を環境変数で扱う具体的な方法を紹介します。Firebase のプロジェクト情報Firebase を利用するには、Firebase のプロジェクト情報を使って、Firebase を使うための初期設定が必要になります。Vue や React などのフレームワークを利用する場合には、npmなどのパッケージマネージャを利用する場合が多いと思いますが、その場合は、Javascript で Firebase の初期設定を行う際に Firebase のプロジェクト情報を使います。直接コードに埋め込む事もできるので、プログラムを再利用したり配布したりしない場合にはこの方法でも問題ありません。しかし、プログラムを再利用したり、配布・公開する場合には、特定の Firebase の情報をそのまま拠有するのはセキュリティ上余り好ましい事ではありません。もちろん、フロントエンドから Firebase を利用する場合には、いずれにしてもプロジェクト情報はソースコードの一部になるので、Web ブラウザを利用すれば取得できるわけですが、それでも、プロジェクト情報は共有しない方が無難です。また、再利用する方でも、プログラムのコードを変更するよりは、環境変数として設定する方が、間違いも少なく安全です。環境変数を利用した Firebase の初期化のコードでは、早速 Firebase のプロジェクト情報を環境変数として設定する方法を紹
0
カバー画像

環境変数を使って他の人にも使いやすいプログラムにする!

環境変数を使って他の人にも使いやすいプログラムにする!前回はハードコーディングの話を紹介しましたが、開発者以外が既に作成されたプログラムを再利用する際、プログラムの設定を変更したい場合があります。ブログサービスの例では、提供するブログのタイトルなどを変えたい場合があります。そのような事を考えると、そうした変更がやりやすいプログラムにしておくと、再利用する場合に使いやすいプログラムになります。その際に利用できるのが「環境変数(Environment variable)」です。この記事では、Vite を利用して作成した Vue のプロジェクトで環境変数を利用する例を紹介します。どんな場合に環境変数を使うか?これまで紹介してきた、Vue を利用してブログサービスを提供するプログラムを考えてみます。 今までタイトルを入れていませんでしたが、例えばブログのタイトルなどに利用すると便利です。一番簡単にプログラムを書く場合、プログラムに直接、「タイトル」を埋め込んで仕舞えば良いことになります。<template>  <div>    <h1>{{ title }}</h1>  </div></template><script>export default {  data() {    return {      title: "Vueを利用したブログサービスの作り方",    };  },};</script> のように記述すれば、タイトルを表示する事が可能です。しかし、この場合は、このタイトルを
0
カバー画像

Vue と Firebase によるブログサービスの管理ページの例

Vue と Firebase によるブログサービスの管理ページの例Markdown で記事を書いて、Firebase を使ってブログサービスをする Web サービスを Vue で作成する場合の、管理ページの実施例を紹介します。この記事では、特に Markdown のメタデータを Firestore で管理する場合の例を紹介します。投稿記事の一覧表示投稿記事の一覧を表示する際のデータを Firebase のデータベースである、Firestore に保存してサービスを提供する場合、一覧の表示は、Firestore から取得するデータで実現可能です。 実際に、投稿の中身を表示する際は、Firebase のストレージのファイルからデータを読む必要がありますが、それ以外は、Firestore のデータだけで対応できます。つまり、一般の利用者(ブログの読者)が利用する基本機能は二つという事になります。* 投稿記事の一覧を見る* 投稿記事の一覧から選択した記事の中身を見る 投稿記事の一覧の情報に、Firebase のストレージにあるファイルへのリンク(URL)を入れておけば、記事を選択した際に、リンク情報(URL)も同時に取得できるので、それを使ってファイルの中身を取得する処理があれば基本機能はカバーできます。管理に必要な機能は?では、サービスの管理者として必要な機能は、* 記事の投稿* 表示する記事の管理* 投稿の削除 という事になります。記事の投稿は、Markdown で書かれたファイルを Firebase のストレージに保存する事と、Markdown のメタデータを抜き出して、Fire
0
カバー画像

Firestoreを利用したブログサービスの実装例

Firestoreを利用したブログサービスの実装例この記事では、Firestore を利用して、投稿記事のメタデータを保存した場合の実装例を紹介します。今回紹介する方法では、投稿記事を表示する場合以外は、Firestore からメタデータを取得して表示するため、投稿数が多くなっても素早い記事の一覧表示が可能です。投稿記事の一覧の取得Firebase のデータベースである、Firestore から投稿記事のメタデータを取得します。 投稿記事のメタデータは、記事の投稿時に、Firestore のデータベースに保存して、オリジナルの Markdown のファイルは、Firebase のストレージに保存してある前提です。 メタデータを保存している Firestore のコレクションは「sample」です。import {  collection,  doc,  onSnapshot,  query,} from "firebase/firestore";import { db } from "../lib/firebase";getList() {      const my_query = query(collection(db, "sample"));      const unsub = onSnapshot(my_query, (query_snapshot) => {        this.docs = [];        for (let i = 0; i < query_snapshot.size; i++) {          const doc =
0
カバー画像

Markdown を使う利点

Markdown を使う利点Markdown 形式で記事を書いて Vue で表示する方法を紹介しました。この方法だと、HTML などで記事を書く場合に比べると幾つかの利点があります。この記事では、Markdown で記事を書く利点について紹介します。記事の概要のデータを埋め込める!一つの大きな利点は、前回の記事でも紹介していますが、Markdown 形式の記事はそのままでも読みやすくなっています。 HTML ファイルの場合は、Web ブラウザを使って表示させる場合には、見やすく体裁も整えることが可能なので便利です。しかし、HTML 形式のファイルそのものを見た場合には、見出しや本文につけるタグがあるために、一般の人には読みにくいと言う欠点があります。別の利点は、記事の概要のデータを Markdown のファイルに埋め込んで簡単に利用できる点があります。 例えば、タイトルや投稿日時などを埋め込んで、Markdown を処理するパッケージプログラムで簡単に抜き出して利用できるのはとても便利です。 こうしたデータを「メタデータ(meta data)」と呼んでいます。このようなデータを埋め込むことは、HTML でも可能ですが、Markdown の方がより利用者に使いやすい形で利用できるようになっています。この記事では、Markdwon に記事の概要のデータを埋め込む方法と、その利用のやり方を紹介しています。Markdown にメタデータを埋め込むには最初に、Markdown 形式の記事にメタデータ、つまり、記事の概要に関するデータを埋め込む方法を紹介します。 書き方を簡単で、行の最初に
0
カバー画像

Vueを使ってMarkdownファイルを表示する

Vueを使ってMarkdownファイルを表示する前回は、Firebase ストレージに保存したファイルを Vue を使って表示する方法を紹介しました。これで簡単なブログなどのサービスを実現できます。今回は、HTML ではなく、Firebase のストレージに保存した Markdown のファイルを Vue で表示する方法を紹介します。こちらの方が、原稿を書く際書きやすく、そのままの形でも読みやすいというメリットがあって便利です!Markdown とは?Markdown は以前にもこの連載で取り上げていますが、マークアップ言語です。 そのままの形でも、比較的読みやすく HTML などに比べると初心者でも書き方を簡単に覚えられるので便利です。 便利なのは、この形式で書かれたファイルを公開されているモジュールで簡単に HTML に変換する事が可能になっている点です。 ブログなどの記事は、ある程度文章の形が決まっていて、特別な HTML を書く必要はあまりありません。そう考えると、原稿を Markdown で書いておいて、表示する際にプログラムで HTML に変換して表示するという方法はブログサイトを運用するには都合の良い仕組みです。プログラムの履歴を管理するのに、Git がよく利用されますが、Git をベースにオンラインでプログラム開発のプロジェクトを保存して、共有したり公開するのに広く利用されている GitHub のドキュメントも Markdown を採用しています。この記事では、これまで学習してきた Vue を使って、Firebase に保存した Markdown を表示する方法
0
カバー画像

Vue を使って Firebase ストレージのファイルを表示する

Vue を使って Firebase ストレージのファイルを表示する前回は Firebase のストレージの特定のフォルダに保存されているファイルの一覧を Vue を利用して表示する方法を紹介しました。この記事では、表示されたファイルの中から選択されたファイルの中身を表示する方法を紹介します。Firebase ストレージのファイルにアクセスするにはFirebase ストレージの機能の一部として、保存されているファイルのリンク(URL)を取得する機能がサポートされています。リンク(URL)がわかると、Javascript の基本機能「fetch()」を使えばファイルの中身を取得することができます。したがって、Firebase ストレージに保存されているファイルの中身を表示するには、以下の手順が必要になります。1. ファイルを選択する2. 選択したファイルのリンク(URL)を取得3. 取得したリンク(URL)を使ってファイルの中身を取得4. 取得したファイルの中身を表示の四つのステップです。ファイルを選択するには?いろいろなやり方がありますが、クリックされた場合の処理を行う関数に、「file」を渡してしまうのが簡単な方法です。前回の「src/views/HomeView.vue」に記述の追加を行います。<template>  <div>    <h1>HTML view</h1>    <div class="file-list">      <ul v-for="file in list.files" :key="f
0
カバー画像

Vue で Firebase ストレージに保存したファイルの一覧を表示する

Vue で Firebase ストレージに保存したファイルの一覧を表示する前回は Vue を使って Firebase のストレージにファイルを保存する方法を紹介しました。これは「管理者」としての機能です。今回は、Firebase のストレージに保存されたファイルを閲覧する前段階として、Firebase のストレージに保存されたファイルの一覧を表示するやり方を紹介します。今回実現する機能は?最初に、今回実現する機能を整理しておきます。 今回、実装するのは Firebase のストレージのフォルダに保存されたファイルの一覧を Vue で表示するというのが目的 d す。この記事では触れませんが次のステップとしては、表示したファイルの一覧の中から選択されたファイルを表示できる様にするために必要な機能という位置づけです。Firebase ストレージに保存されたファイルを取得するFirebase ストレージに保存したファイルの情報になるので、Firebase から必要な情報を取得することになります。 Firebase でサポートしている機能なので、基本的な関数(API)を呼び出すだけで簡単に取得できます。必要な関数は:* getStorage()* listAll()* ref() の三つです。「ref()」でファイルの一覧を取得したい、Firebase ストレージのフォルダへのリファレンス(簡単に言うと場所)を取得します。 ファイルの一覧を取得する方法は大きく二つのやり方がありますが、この記事では指定したフォルダに保存されている全部のファイルのリストを取得する方法を紹介します。もう一つの
0
カバー画像

Vue を使ってFirebaseのストレージにファイルを保存する

Vue を使ってFirebaseのストレージにファイルを保存するVue を使って Firebase のストレージにファイルを保存する前回の記事では、Vue でページ毎にアクセスの権限を使い分けるやり方を紹介しました。今回は、前回の実装を少し発展させて、「管理者モード」を考えてみます。この記事では、Firebase のストレージに管理者としてファイルをアップロードする方法を紹介します。管理者モードの利用例まずは、管理者モードで何をするかの例を紹介します。 例えば、ブログサービスを提供する事を考えた場合には、ブログの記事を投稿する機能と、投稿された記事を閲覧する機能が必要になります。この場合、ブログの記事を投稿するのは基本的にブログサービスの「管理者」が投稿するという形になります。この場合、管理者は「特定の利用者」になって、閲覧者(一般の利用者)は、それ以外の利用者というように分ける事ができます。この記事では、まずは、ファイルをインターネットのサーバーに保存する方法を紹介します。Firebase のストレージ機能を使うインターネットにファイルを保存するには、「保存する場所」が必要になります。今回は、この場所として Firebase のストレージ機能を利用する事にします。前回までに、Firebase のプロジェクトを作成しているので今回は Firebase のストレージ機能を新たに有効にします。これは、Firebase コンソールから可能です。最初はインターネット上に公開せずにテストするので、「テストモード」を選択すれば、当面はセキュリティールールを設定しないでも基本的なテストが可能
0
カバー画像

Vueでページ毎にアクセス権を設定する方法

Vueでページ毎にアクセス権を設定する方法Vue と Firebase を組み合わせて、利用者限定のサービスを実装する方法を紹介しました。実際の Web アプリケーションでは、アクセスできる人を限定したページと、誰でもアクセスできるページが混在する場合もたくさんあります。例えば、ブログのようなサイトを考えた場合は、記事を投稿するのは「管理者」だけで、閲覧は誰でもできるとうケースもたくさんあります。この記事では、ページ毎にアクセス権を設定する方法を紹介しています。Vue プロジェクトの作成最初に、Vue のサンプルプロジェクトを作成します。 今回の実装例では、* Vue Router* Pinia を利用します。 最初にサンプルプロジェクトを作成する際に組み込んで起きます。サンプルプロジェクトの作成にはViteを利用しています。 % npm init vueVue.js - The Progressive JavaScript Framework✔ Project name: … vue-firebase-sample✔ Add TypeScript? … No / Yes✔ Add JSX Support? … No / Yes✔ Add Vue Router for Single Page Application development? … No / Yes✔ Add Pinia for state management? … No / Yes✔ Add Vitest for Unit Testing? … No / Yes✔ Add Cypress for both Un
0
カバー画像

VueとFirebaseを使ってログイン機能を作るには?

VueとFirebaseを使ってログイン機能を作るには?Vue の基本を一通り学習したところで少し実践的な実装例を紹介します。この記事では、Firebase のユーザー認証機能を利用して、ログイン機能を Vue で作成する例を紹介します。Vue のプロジェクトを作成今回は、Vue Router や Pinia などを使わずにシンプルに、ホームページを表示するという簡単な例にしてみました。簡単に実装内容を説明すると:* ログインしていない場合は、ログインフォームを表示* ログインしている場合には、「Home.vue」を表示 という仕様にします。ログインフォームは再利用できるように「部品化」します。「src/App.vue」で表示の切り替えをするようにします。 「src/components/LoginForm.vue」でログインに必要な情報を入力するフォームを作成します。「src/view/Home.vue」がホームページになります。まずは、サンプルプロジェクトを作成します。$ npm init vueVue.js - The Progressive JavaScript Framework✔ Project name: … vue-firebase-sample✔ Add TypeScript? … No / Yes✔ Add JSX Support? … No / Yes✔ Add Vue Router for Single Page Application development? … No / Yes✔ Add Pinia for state management? …
0
カバー画像

変数の更新イベントが簡単に扱えるVue

変数の更新イベントが簡単に扱えるVueVue のフレームワークでは、変数の更新を検出して表示する内容を更新しています。この変数の更新検出の仕組みはフレームワークやプログラミング言語によって違う場合があります。この記事は変数の更新のイベントに関する仕組みについて更新しています。変数の更新の考え方最初に、結論を書いてしまうと、Vue のフレームワークの場合には、変数の更新の取り決めはシンプルです。 変数の値が変更されると、変更を Vue の変数を管理している仕組みが見つけて、表示を自動的に更新してくれます。 これも、Vue が初心者に向いている理由です。当たり前のような機能ですが、この仕組みはフレームワークやプログラミング言語で微妙に違います。 例えば、Vue と並んでよく利用されているフレームワーク React では少し事情が違います。これが「イミュータブル(immutable)」と「ミュータブル(mutable)」の違いによるものです。配列の例がわかりやすい!この辺りは、わかりにくい分野の一つです。 配列(array)を使った例がわかりやすいので、紹介します。配列は、同じ「形」のデータを複数まとめて保持できる変数の型です。Web 開発で利用されている Javascript でも「array」という形で活用できます。Javascript では、変数を宣言する際に幾つかの書き方がありますが、その中で「const」という書き方をよく使います。const a = [];const b = 7; の様に書きます。「const」というのは、「定数(constant)」という意味です。この場
0
カバー画像

PiniaでVue アプリのデータを一括管理

PiniaでVue アプリのデータを一括管理Vue の部品の間でデータをやり取りする方法を、Vue 公式チュートリアルで学習しました。しかし、部品を呼び出す階層が深くなったり、Vue Router などを使う場合には、データの受け渡しが面倒になる場合があります。このような場合には、Vue のアプリ内で一括してデータの管理ができると便利です。この記事では、Vue の公式サイトで推奨されているパッケージ(モジュール)の「Pinia」を紹介します。Pinia とは?Pinia は、Vue の「部品」間でデータを共有するためのモジュールです。 同じような機能を提供するモジュールは他にもありますが、2022 年 4 月現在、Vue の公式ページで推奨されている、「ストアライブラリ」です。(*)日本語の公式サイトでは、従来から利用されてきた「Vuex」が推奨されていますが、英語の Vue のサイトでは、「Pinia」が推奨されています。Vuex でも Pinia のどちらも Vue で利用可能ですが、初心者には、Pinia の方がシンプルな実装なので簡単に導入できると思います。Vite のテンプレートを利用して、Vue のサンプルプロジェクトを作成する場合には、プロジェクト作成時にこの「Pinia」を予め組み込む事が可能です。他の似たような仕組みに React と組み合わせて利用される事の多い「Redux」があります。Vue でも Redux を利用することは可能ですが、使いやすさを考えると、「Pinina」か「Vuex」を利用する方が便利です。ストアライブラリを利用する利点Web アプリ
0
カバー画像

Vue Router の部品にデータを渡すには?

Vue Router の部品にデータを渡すには?Vue Router は、一般的な Web サイトのように、Web ブラウザで「ページ」を指定して表示する事ができるので、Web アプリを作る場合でも便利な場合が多くなります。この記事では、Vue Router の「ページ」に相当する「部品」にデータを渡す場合にはどうすれば良いかを紹介します。部品にデータを渡す基本的な方法Vue の部品(子)に呼び出し元(親)からデータを渡す場合には、Vue の公式チュートリアルで学習したように「props」を使って渡します。Vue Router を利用する場合でも、Vue のデータを渡す仕組みは同じなので基本的なやり方は同じです。ところが、Vue Router を利用する場合には、HTML 部分に直接「部品」の記述を書く必要がないので、どのようにデータを渡すのかがよくわからない場合があります。例えば、Vite を利用して、Vue のサンプルプロジェクトを Vue Router を使う設定で作成した場合には、「HomveView」と「AboutView」の二つの「ページ」がつくられます。この例では、「AboutView.vue」は次のような記述になっています。// (AboutView.vue)<template>  <div class="about">    <h1>This is an about page</h1>  </div></template><style>@media (min-width: 10
0
カバー画像

Vue Router を使ったプロジェクトを Firebase で公開するには?

Vue Router を使ったプロジェクトを Firebase で公開するには?Vue Router は Vue を使った Web アプリで、ページ毎に表示を切り替える場合に利用されます。ところが、設定によっては、「ページが見つからない」(404エラー)になる場合があります。原因は、Web サイトのページの切り替え(ルーティング)にあります。この記事では、Firebase を利用して、Vue Router を利用した、Vue アプリを公開する方法を紹介しています。ルーティングの仕組みWeb サイトで表示するページを切り替える仕組みを「ルーティング」と呼んでいます。 簡単にいうと、Web ブラウザで指定したリンク(URL)によって、表示を切り替える事ができますが、この切り替えの仕組みをルーティングと呼んでいます。 この「切り替え」を行なっているのは、通常の Web サイトでは、Web サイトの情報を持っているサーバー(Web サーバー)が行なっています。Web ブラウザは、指定されたリンク(URL)を Web サーバーに送って、表示する情報を Web サーバーから受け取って表示をしています。Vue の表示の仕組みVue は「フロントエンドのフレームワーク」の一つで、「Web ブラウザで表示を管理する仕組み」です。 一般的に Vue で作成した Web アプリをインターネットで公開する場合には、Viteを使って Vue のプロジェクトを作成した場合には以下のコマンドを実行して公開用の情報(イメージ)を作成します。 (*)この連載では、Viteを Vue のサンプルプロジェクト(テン
0
カバー画像

Vue Routerを利用する

Vue Routerを利用する「Vue Router」を使うと、Vue を使って、ページ毎の表示が簡単にできる様になります!この記事は、「Vue Router」の基本的な使い方を紹介しています。Vue の基本は「1ページ」前の記事でも触れていますが、Vue などのフロントエンドのフレームワークの表示の基本は「1ページ」です。 基本になる HTML のページに、Vue が表示させる「部品」を組み込んで表示させるというのが基本的な仕組みになっているのが理由です。 しかし、通常の Web サイトの様に、ページ単位で表示を作れると便利なので、ページ毎の「部品」を作成して、アプリを作る場合も多くなっています。前回は、Vue の基本機能である「v-if」を使って表示するページを切り替える方法を紹介しました。実は、Vue は、こうしたページ毎の表示をサポートするパッケージ(モジュール)を予め用意していて、ページ毎の表示を簡単に行うことが可能です。この記事では、そのパッケージ(モジュール)の、「Vue Router」の使い方を紹介します。一番簡単な方法は?「Vue Router」を一番簡単に使う方法は、Vue のプロジェクトを作成する際に、「Vue Router」を使う事を予め選択する方法です。 予め、選択する事で、プロジェクト作成時に必要な設定を行なってくれるので、あとはページを追加する感じで利用する事ができます。以前紹介した、「npm init vue」を利用して Vue のプロジェクトを作成する場合には、以下のような感じで実行されますが、その際に、「Add Vue Router」の質問の
0
カバー画像

Vue のページの考え方

Vue のページの考え方Vue の公式チュートリアルの例では、作成したのは基本的に「1ページ」の Web アプリでした。この記事では、Vue フレームワークの「ページ」の考え方について紹介します。基本は「1ページ」!Vue フレームワークを利用した場合は、Web アプリのページは基本的に「1ページ」になります。 公式チュートリアルでは、「メインのページ (App.vue)」から「部品(ChildComp.vue)」を呼び出すような例も学習したと思いますが、これも基本的には「1ページ」のアプリです。「部品(ChildComp.vue)」も、メインのページの一部として表示されているからです。理由は簡単で、Vue のフレームワークがやっていることは、元になるページに作成した「Vue」の「部品」を Vue が埋め込んで表示をしているからです。Vue では「メインのページ(App.vue)」も、「部品(ChildComp.vue)」も「Vue の部品」として扱われています。したがって、npmなどのパッケージ管理アプリを使って Vue のアプリを開発する場合は、「index.html」というファイルが元になるページで、Vue はこのページに表示を埋め込む仕事をしているだけです。これが、 Vue や React などフロントエンドのフレームワークを利用して開発した Web アプリが「1ページアプリ」と呼ばれている理由でもあります。複数のページを扱うには?では、Vue のフレームワークを利用して複数のページを持った Web アプリは作れないのかという疑問が出てくると思います。 結論から言うと、
0
カバー画像

CSS の手抜き 〜 Bootstrap

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

Vue のプロジェクトをインターネットで公開する

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

Vue を実際に動かしてみる!

これまでは、Vue の公式チュートリアルのページ上でコードを入力して動かしていましたが、実際に利用するにはこのままでは、Vue を利用する事ができません。今回は、公式チュートリアルの前半で学習したような、1ページで機能を実現するようなケースを考えてみます。インターネットに公開する方法Vue で開発したアプリをインターネットに公開する方法は幾つかあります。 今回は、一番簡単な方法として、「HTML ファイル」で公開する方法を紹介します。 HTML ファイルならば、通常の Web ページを公開するサービスを利用すればインターネットに公開する事が可能です。 ほとんどの場合は、PC で HTML ファイルを作成して、Web サイトをホスティングしているサーバーにコピー(アップロード)すれば公開できます。今回は、インターネットに公開する方法ではなく、HTML のファイルを作成する方法を紹介します。HTML ファイルの基本(*)「<!--」と「-->」の間は、HTMLの記述には関係ありません。この間にはメモのような事を書くことができます。プログラミングでは「コメント」と呼ばれます。Vue の書き方にも、基本的な枠組みがあったように、HTML にも同じように基本的な枠組みがあります。<!DOCTYPE html><html>    <head>        <!-- ヘッダー情報をここに書きます -->    </head>    <body>        <!-- HTMLの本体をここに書きます
0
カバー画像

Vite でプロジェクトを作る

Vite でプロジェクトを作る従来は、Vue CLI や create-react-app などのスクリプトを利用してサンプルのプロジェクトを作っていました。最近は、「Vite」というビルドツールがよく利用されているようなので簡単に紹介します。色々なフレームワークで利用可能React や Vue などのフレームワークを利用する際は、多くの場合は、パッケージ管理アプリのnpmなどを利用して開発するケースが多くなっています。もちろん、HTML に組み込む形で、利用する事も可能ですが、多様なモジュールを利用する場合も多く余り現実的ではありません。以前は、Vue の場合は、「Vue CLI」や、React の場合は、「create-react-app」などのスクリプトを利用してサンプル(テンプレート)のプロジェクトを作って利用するというのが一般的でした。これに対して、Vite を利用すると、Vue でも React などのフレームワークでも、同じような要領でサンプルのプロジェクトを作成することができて、開発用のサーバーや公開用のイメージの作成もできるという結構便利なツールです。簡単な使い方使い方は極めて簡単です。$ npm create vite と入力するだけです。コマンドラインで細かい指定をすることもできますが、単純に上のコマンドを実行すると、プロジェクト名や、利用するフレームワークを聞いてくるので、質問に答えて行くと目的のサンプルプロジェクトを作成できます。プロジェクトを作成した後に、プロジェクトのフォルダに移動して$ npm install を実行して、必要なモジュールをインス
0
カバー画像

Vue の公式チュートリアル

Vue の公式チュートリアルVue のデフォルトバージョンが Version 3.x になりました。久々に Vue の公式サイトに行ってチュートリアルを見てみました。Vue のデフォルトバージョン前回は、Vue を学習する場合、Version 2.x を学習するか、Version 3.x を学習するかを選ぶ必要があるという話をしました。少し時間をかけて学習をする場合、長期的には、Version 3.x に移行していくので初めて学習する場合で、特に就職先やプロジェクトがらみでどちらでも良い場合は、Version 3.x を学習する事をお薦めするという話を書きました。Vue の Version 3.x は、最初のバージョンは、2020 年 9 月 18 日にリリースされていて、Version 3.1 が 2021 年 7 月 7 日に、Version 3.3 が 2021 年 8 月 5 日にリリースされています。これまでは、Version 2.x が Vue のデフォルトバージョンでしたが、2022 年 2 月 7 日に Version 3.x になりました。デフォルトバージョンとはどういうことかというと、特に指定しないで「vue」を CDN や、パッケージ管理アプリで指定すると、自動的に Version 3.x が利用されるようになります。これまでは、これが Version 2.x でした。今後は、Version 2.x を利用する場合は、明示的に Version 2.x を指定する必要があります。これまでは、デフォルトバージョンが Version 2.x だったので、Vers
0
カバー画像

Vue の学習

Vue の学習フロントエンドのフレームワークの学習で初心者が React か Vue で迷ったら、とりあえず Vue をお勧めすると書きました。この記事では、Vue の学習についてもう少し詳しく触れてみたいと思います。Vue のフレームワークフロントエンドのフレームワークで React と Vue で迷うことは多いと思います。どちらを学習するかは、置かれている状況で変わってきます。例えば、就職を目指す場合、希望する会社が React を扱っている場合、学習するのは当然 React を学習した方が就職できる可能性は高くなります。 初めて学習する場合は、就職などの理由がない場合特にどちらでも良いので迷いやすいという事です。その場合は、学習しやすい方を選んだ方が学習は早く進められると言う事です。Vue の方が学習しやすい理由はいくつかありますが、ポイントとなるのは:* 基本機能を組み込むのを前提に設計されている* HTML/CSS/Javascript を独立に記述できる* HTML/CSS/Javascript の基本に近い 逆に言うと、React は逆という事です。* 組み込む基本機能を限定していない(自由な分、慣れないと設定が面倒)* Javascript の中に HTML を書く感じ(JSX)* HTML の記述がベースだが、Vue よりは違いがやや多い という感じで、実は大差がないのですが初心者の場合、やや難しく感じる場合が多いと思います。これが、Vue を進める「僅かな」違いです。Vue の学習にも選択が必要ところで、Vue を学習する事を決めた場合でも、もう一つ選択する
0
カバー画像

React が面倒な理由

React が面倒な理由フロントエンドのフレームワークは、React と Vue がよく利用されています。どちらを学習した良いのかを迷う人も沢山いらっしゃいます。基本的に大きな違いはありませんが、React の方がやや面倒な部分があります。この記事では、React が面倒だと思う人が多い理由を紹介します。基本パッケージのコンセプト一番の大きな違いは、基本パッケージの考え方です。 簡単に言ってしまうのならば、React は Javascript の中に HTML に近い記述(JSX)を書けるようにしたパッケージという事です。 一方で、Vue の方は、フロントエンドの開発の基本的な仕組みという感じです。人によって表現の仕方が多少違っていますが、React の場合は、フレームワークというより、「ライブラリ」というような表現をする人がいます。こちらの方が、フレームワーク(仕組み)というより、React の実態に合っているのかもしれません。一方で、Vue の方は、フレームワーク(仕組み)に近いコンセプトになっています。これでも、まだわかりにくかもしれませんのよね? もう少し、簡単に言うのならば、Vue は色々な機能が予め詰め込まれています。一方で、React の方は、色々な事をやるのには、外部のパッケージを追加していく必要があるという感じになっています。大きな違いは何処に?よく利用する機能で見てみると* データの一括管理(Redux / Vuex)* 仮想 URL(React Router / Vue Router) あたりが違います。データの一括管理は、複数の「部品」でデータを共有する
0
カバー画像

効果的な Web 開発の学習のやり方

効果的な Web 開発の学習のやり方プログラミングの学習のやり方には色々ありますが、この記事では Web 開発の上手いやり方を考えてみました。Web 開発の基本は?当然ですが、Web 開発の基本は、HTML と CSS になります。 従って、いずれにしても、HTML と CSS の基本は学習する必要があります。 これは、ページの記述をするのに必要最低限の内容です。これに加えて、実際のデータを処理するためには、プログラムを書く必要があります。これには、Javascript が必要になります。最初に学習する際は、とりあえずバックエンドの開発は必ずしも必要はないので、まずはバックエンドの件は「今すぐに学習する必要はない」と割り切って先送りすると考える事にします。もう一つは、フレームワークです。全て、Javascript で書くとなると大変大きな労力です。そう考えると、フロントエンドのフレームワークを学習の候補に入れておく方が開発がスムーズに進みます。このように考えると、Web アプリの開発に必要な学習項目は:* HTML* CSS* Javascript* フロントエンドのフレームワーク と言う事になります。始める前に考える事一応、学習項目が揃いました。ではもう少し、具体的な内容を決めて行くのが次のステップです。普通に考えると、一つ一つ順番に学習して行くと言うのが一般的な手順です。 しかし、HTML、CSS、Javascript、フロントエンドのフレームワークも学習する内容が沢山あります。 時間を十分にかけられる場合は、ある程度順番に学習していけば良いので、まずは、HTML と CS
0
カバー画像

短期間で Web アプリを作れるようになるには?

短期間で Web アプリを作れるようになるには?プログラミングの学習を始めてどれくらいで Web アプリが作れるようになるかという質問をよく頂きます。どんな Web アプリを作るかにもよりますが、シンプルな Web アプリならば 1 ヶ月の勉強でも十分に可能です。この記事では、プログラミングの学習を始めて 1 ヶ月で Web アプリを作るための方針について考えてみました。(*)この記事は、Windows10 で開発を行うことを想定して書いています。Mac や Linux でも基本的には同じですが、利用するコマンドや、ダウンロードするファイルなどが若干異なります。シンプルにする事が重要1 ヶ月という限られた時間で Web アプリを作るには、シンプルにする事がとても重要です。 ここで言う Web アプリは、商品として販売するようなアプリではなく、機能を優先したアプリという前提にします。 商品としてお金を頂いて提供する場合には、見かけも重要ですし、十分なテストも必要です。勿論、これらを含めた上で 1 ヶ月で完成させることも可能ですが、まずは欲張らずにアプリの機能を実現して、最低限の見栄えのアプリを作る事にします。Web アプリのコーディングをするのに必要な物は:* HTML* CSS* Javascriptです。1 ヶ月で Web アプリを作るために、必要最低限の学習に集中する事が必要になります。そこで、最初は「CSS」は無視して考えます。 基本的に、CSS は HTML で記述された Web ページの体裁を整えたりするのに使用します。実際は、体裁以外にもいろいろできますが、最初は体
0
カバー画像

Firebase を使ったサービスの管理アプリを Electron で作る!

Firebase を使ったサービスの管理アプリを Electron で作る!Firebase のストレージとデータベースの機能を利用して Web サイトを利用する際に必要になる管理用のアプリを Electron を利用して作成する方法を紹介します。どうて Electron を使うのか?Firebase の機能を利用したサービスを作る場合、管理用の機能が必要になる場合がたくさんあります。 管理用のためのアクセスと一般の利用者のアクセスは違う場合が多く、管理用のアクセスではサイトに記事を投稿したり、投稿の変更(修正)をしたり、不要な記事を削除するなど、通常の利用者とは違う操作が必要になります。これを行うのは限られた利用者(ユーザー)のみで、この権限を悪用されるとサイトの内容が改変されたりしてセキュリティ上の問題となります。もちろん特定のユーザーとしてユーザー認証(ログイン)したユーザのみの利用にすることは言うまでもありません。しかし、パスワードが破られるとアクセスが可能になってしまいます。完全なセキュリティ対策は無いものの、もう少し高いセキュリティを考えると、管理用の機能はインターネットに公開しないと言う対策は一つの方法です。つまり、インターネットではなく管理用の PC にアプリを入れて管理するという方法の方がより安全ということになります。インターネットから管理できる方が便利ですが、安全を優先する場合にはデスクトップアプリの方が良いということになります。そこで、デスクトップアプリを Electron を利用して作る方法を取り上げてみました。Electron の正体は何か?ここで E
0
カバー画像

Firebase ホスティングはプログラミングとの相性も抜群です!

Firebase ホスティングはプログラミングとの相性も抜群です!Firebase ホスティングは、LP との相性が良いことは既に紹介しましたが、勿論プログラミングとの相性も抜群です。Firebase の他の機能である、データベースやストレージと組み合わせて、React や Vue といったフロントエンドのフレームワークと組み合わせれば本格的な Web アプリケーションを短期間で開発する事が可能です。Firebase の他の機能との連携を考えると、一番相性が良いのは Web アプリケーションという事になります。React や Vue と連携する!React や Vue はフロントエンドのフレームワークと呼ばれる仕組みで、Web ブラウザで動作する UI などを作成するのに適した仕組みです。HTML/CSS と Javascript を組み合わせれば、特にフレームワークを利用しなくても Web アプリケーションを作成することは可能です。しかし、React や Vue などのフレームワークを利用すると、より効率的に UI を開発することができるので便利です。一方で、実際のデータなどの処理は Javascript で書くことになりますが、データを保存する必要がある場合は、通常は Web サーバー側で用意したデータベースなどを利用する必要があります。WordPress の場合は、Web サーバー側で、PHP のバックエンドサービスと、SQL データベースを利用してこうした機能を提供する仕組みになっています。Firebase を利用すると、こうしたバックエンドのサービスの機能やデータベー
0
カバー画像

簡単にわかる Web サーバーの仕組み?

簡単にわかる Web サーバーの仕組み?Web サーバーはインターネットなどのネットワーク上で Web サイトのサービスを提供するためのサーバーです。「サーバー」という言葉はよく利用されますが、簡単に言えば「何かのサービスを提供する」という意味です。 Web サーバーの場合は、インターネットの Web サイトの仕事を提供する「物」ということになります。実際は、Web サイトのサービスを提供するためのシステム(コンピュータとソフトウエア)をまとめて Web サーバーと呼ぶ場合が多いようです。Web サイトの仕組みWeb サイトの仕組みを簡単に説明すると、Web サイトの情報を保存しているコンピュータとその情報をネットワークを通じて提供するためのソフトウエアで成り立っています。Web サーバーはネットワークを経由して送られてくる、Web ブラウザからのリクエストに対して、リクエストされたページ(これが URL と呼ばれる物です)の情報を提供するようになっています。このネットワーク上で Web ブラウザと Web サーバーでやり取りするための仕組みを「プロトコル」と読んでいて、Web サーバーの場合「HTTP」というプロトコルを利用しています。Web ブラウザが表示できるのは、「HTML」と呼ばれる方法で書かれた情報です。従って、基本は、要求された HTML の情報を渡すのが Web サーバーの仕事になります。HTML ファイルには、その体裁を記述した CSS ファイルや、画像(写真や動画、イラスト)のファイル、また Javascript のファイルなどが含まれているので、そうした情
0