どうも。みずかず(@mizukazu_1)です。

今回は趣味の一つである釣りの釣行記です。
今後はこういった趣味関連の記事も書いていこうかなと思っています。

2月の潮周りのよいタイミングで何回かバチ抜け釣行に行ってきました。
計4,5回くらい行ったかな？
バチが結構抜けてる日も多かったのですが残念ながら釣れたのは2月20日の一日だけでした。

この記事を書いてるのが3月下旬でして、3月も2回くらいバチ抜け釣行に行ってるのですが自分は全然ダメです。
ハクが多く入ってきてる日もあってバチが抜けても食わないっていうこともありました。

2月20日から約1ヵ月ほど経っていて、なおかつ当日の状況をメモしていないので思い出しながら書いていきます、、、！

当日の状況

この日は大潮後の中潮2日目でした。
タイドグラフを遡れなくて分からないのですが満潮時刻がだいたい18:30～19:00だったと思います。

釣り場に着いたのが満潮と同時くらいでその時はあまり流れが効いておらず、釣りを始めて少ししてから流れ出してそのタイミングでバチも抜け始めてポツポツライズが出るっていう状況でした。

バチの量

バチの量は程よい感じでした。
バチソーメンを恐れていたのですが後中2日目で川幅も広いこともあり釣りにならない！っていうレベルで抜けることはありませんでした。

時合いがくる

釣りを始めて約1時間くらいしてバチも流れ始めてきてライズが出るようになります。
このタイミングで釣ることが出来ました。
3キャッチ、1匹目が82cmのランカーでした。

人生初ランカーを釣ることができたのでめちゃくちゃテンション上がりました！！

使用したルアー

ノガレ160F 銀粉チャートブラックベリー
ヒソカ120F オレンジパールギーゴ

ノガレは引き波系のルアーで巻き抵抗はほぼないので若干苦手意識がありましたが今回の釣行で間違いなくバチ抜けシーズンの1軍ルアーへと昇格されました、、、！！

ヒソカは今回の釣行で初めて使ったのですがバチ抜けだけじゃなくて他のシーズンでも使えそうだなっていう印象を受けました。
なによりオレンジパールギーゴのカラーがすごくいい。めっちゃ好き。

ヒットしたシチュエーション

ノガレもヒソカも投げてほとんど放置してる間に釣れました。
流れが結構あったので投げて糸ふけだけ回収するようなイメージでリールを巻いていても勝手に流れて勝手に水を掴んで勝手にアクションしてくれるっていう感じです。

もう少し詳しく書いておきます。

1匹目ですがノガレをクロスに投げてそのまま放置してました。
糸ふけだけ回収する感じです。

バチ抜けてるかな～と思い足元をライトで照らして見てたんですがその時にルアーがダウンに入ったくらいのあたりでライズ音。
自分のルアーかもしれないと思って一応合わせたらロッドがグッとしなりヒット。

82cmのパワフルなランカーシーバスでした。

2匹目はヒソカを投げてゆっくり巻きつつ基本放置。
ダウンに入ったまま放置してさっきと同じように足元のバチを見てたらルアーの方向からライズ音。
合わせを入れてヒット。

3匹目はヒソカをアップにキャスト。
着水してすぐにライズ。
合わせを入れてヒット。

こんな感じの使い方をしてました。
最近思ったことなんですが、想像してるより全然巻かない方が魚は釣れるなっていう。
シンペンとかバイブレーションとかも巻き抵抗を受けないくらいで巻いてる方が反応が良かったりします。(個人の意見です)

使用タックル

ロッド：シマノ ディアルーナ86ML
リール：シマノ 24ヴァンフォードC3000XG
PEライン：ピットブル 8+ 0.8号
リーダー：FLUORO SHOCK LEADER 16lb

最後に

今回のバチ抜け釣行は3本キャッチ内ランカー1匹ゲットできたので最高に楽しかったです。

ノガレ、ヒソカは巻かずとも釣れるということが分かり、これはおそらくこの2つのルアーに限ったことではなくてバチ抜けルアー全般に当てはまるんじゃないかと。とても学びの多い釣行でした。

今年の川バチは終了しましたが今年は港湾でのくるくるバチ、ハクパターンもしっかりやろうかなと考えてます！

ブログ自体は全然更新してないしアクセス数もないのでいいんですが何となく気になったのでエラー対応してみました。

今回の方法はLION BLOG公式が出してるものではないのでもし同じようにやってみる人がいる場合は自己責任でお願いします。

どんなエラーが出てたか

エラーはこんな感じです。

Fatal error: Uncaught Error: Call to undefined function create_function()

create_function()という関数がないよーって言われてますね。

調べてみるとこのcreate_function()という関数がPHP8.1では削除されたみたいです。

https://www.php.net/manual/ja/function.create-function.php

なのでテーマの中で使用されているcreate_function()を代わりのものに置き換える必要があります。

create_function()は2箇所で使用されている

LION BLOGのテーマのコードを検索するとcreate_function()が使われているところが2箇所あります。

functions.phpの4514行目と4611行目です。

add_action( 'widgets_init', create_function( '', 'return register_widget( "AdWidgetItemClass" );' ) );

add_action( 'widgets_init', create_function( '', 'return register_widget( "Popular_Posts" );' ) );

解決方法

create_function()を無名関数に置き換える

create_function()は動的に関数を作成する関数です。

PHP8.1では無名関数が使えるので以下のようにadd_actionの第二引数に直接関数を渡します。

add_action( 'widgets_init', function() { return register_widget( "AdWidgetItemClass" ); } );

add_action( 'widgets_init', function() { return register_widget( "Popular_Posts" ); } );

これでエラーが出なくなりブログが正常に動作しました。

最後に

今回の対応は公式がサポートしているやり方ではないのでもし同じ対応をする場合には自己責任でお願いします。
サイトを復旧させたい場合などの応急処置には良さそうですが実運用するには望ましくないと思われます、、、

今後も同じようなエラーが出てくると思いますので早めに他のテーマに変更するのがおすすめです。

「Vike」って知ってますか？
Viteで開発するアプリケーションをもう一段階強化できるものでViteを使用してSSRやSSGなど好きなレンダリングをすることができるようになります。

元々はViteで使用するプラグイン vite-plugin-ssr というものだったらしいのですが名称変更をしたみたいです。

Vite × ReactでSSGを使いたいなと思って探してたところ見つけたのですが動的ルートに対してのSSGに少しだけハマったのでこちらに記しておこうと思います。

今回はVikeを使用してSSGをする方法を書くのでVikeの紹介や詳しい使い方などは割愛します。

公式ドキュメント
Vike

SSGさせるために設定を変更する

まずSSGさせるためにはVikeの設定をSSG用に変える必要があります。

vite.config.jsのvikeプラグインの引数をprerender: trueに設定。

// vite.config.js
 
import vike from 'vike/plugin'
 
export default {
  plugins: [
    vike({ prerender: true })
  ]
}

これでビルドするとpages配下に対応したhtmlファイルが生成されます。

ただこれだけだと /category/@id のような動的ルートに対してのhtmlファイルは作成されません。

参考
https://vike.dev/pre-rendering#how-to-pre-render

動的ルートをSSGさせる

動的ルートをSSGするにはビルドプロセスの中でvike側に動的ページのパスのリストを渡してあげる必要があります。

onBeforePrerenderStart() というフックが用意されているのでこれを使います。
名前的にはプリレンダリングつまりhtmlを生成する処理の前に差し込む処理のことだと思います。

// /pages/movie/+route.js
// Environment: Node.js
 
export default '/movie/@movieId'

// /pages/movie/+onBeforePrerenderStart.js
// Environment: Node.js
 
export { onBeforePrerenderStart }
 
async function onBeforePrerenderStart() {
  const movies = await Movie.findAll()
  const moviePageURLs = movies.map(movie => '/movie/' + movie.id)
  return moviePageURLs
}

ドキュメントのコードをそのまま持ってきました。
パスを配列に詰めてreturnしてるだけですね。

実際のコードに当てはめてみた

今回作成していたサイトには /category/@slug という動的ルートがありましたのでドキュメントの通りに以下のようにファイルを作成しました。

// /pages/category/+route.js
 
export default '/category/@slug'

// /pages/category/+onBeforePrerenderStart.js
 
export { onBeforePrerenderStart }

import { categories } from '../../../constants';
 
async function onBeforePrerenderStart() {
  const categoryPageURLs = categories.map(category => `/category/${category.slug}`)
  return categoryPageURLs
}

エラーが発生する

ここで少しハマりました。
ドキュメントの通りにファイルを作成したのですが以下のようなエラーが出ました。

Error: [vike][Wrong Usage] URL /category/work provided twice by the onBeforePrerenderStart() hook (/pages/category/+onBeforePrerenderStart.ts). Make sure to provide the URL only once instead.

同じURLが複数出てるから1回だけにしろ的な感じですかね？
うーん、ちょっとよく分からん。

ってことでvikeの公式リポジトリの中に例がいくつかあるので解決策のヒントがないか探しに行きました。

ここです↓

https://github.com/vikejs/vike/tree/main/examples

解決方法

+route.js
+onBeforePrerenderStart.js

この2つのファイルの配置場所を変えることで解決しました。

/category/+route.js
/category/+onBeforePrerenderStart.js

↓

/category/index/+route.js
/category/index/+onBeforePrerenderStart.js

このようにindexというディレクトリを作ってその中に入れることで解決しました。

https://github.com/vikejs/vike/tree/main/examples/react-full/pages/star-wars/index

解決した理由がよく分からないのですが↑のディレクトリ構造を見て真似してみたら解決した！って感じです。

この辺りが調べても出てこないしissueもなかったのでハマりました、、、

けどこれで動的ルートに関しても無事にSSGさせることができました。

最後に

今回はvike × ReactでSSGさせる方法を書きました。

React要素全然出てこなかったな、、、
SSGさせる方法というよりどっちかっていうとエラー解決記事になってる気がする。

次回はもう少し詳しい説明とか機能とか書きたい。(触り始めたばかりだけど)

自分が今まで作成した成果物の見直しをしようかと思ってまず手始めにブックマーク管理ツールから手を付けたんですけどエラーが出まくっていてまともに動作していないことに気づいたんですね。

約4年くらい前にPHPで作った↓のツールです。
PHP覚えたてくらいの時にスクラッチで作ってみたものです。
ブックマーク管理ツール

ちなみにその時に書いた記事がこちらです。

【PHP】ブックマーク管理ツールを作ってみた

XSERVERでホスティングしているので多分PHPのバージョンが上がったことで動作しなくなったのだと思います。

そこでエラーを修正しようとしたんですけど今のPCにPHPの実行環境がなくPHPを動かせない、、、

ちょうど数日前にLaravelの実行環境を作ろうと思ってDockerを触ってたのでそのノリでPHPが動作する環境も作っちゃえ！ってことでDockerで作成しました。

前に友人に借りた本をざっくり一周したのと何個かコンテナ作ったりしたレベルかつ
フロントエンドがメインで業務でもDockerを使っていないので全然知識がないです、、、

なので今回の手順を備忘録がてらここに書き記しておこうと思います！
ここ2年くらいブログも書いていなかったのでリハビリも兼ねて！

docker-compose.ymlを作る

こちらが今回作成したdocker-compose.ymlです。
めちゃくちゃシンプルです。

version: "3"

services:
  php:
    image: php:latest
    volumes:
      - ./src:/var/www/html
    ports:
      - "8080:8080"
    command: php -S 0.0.0.0:8080 -t /var/www/html

上から順番に説明していきます。

version

これはdocker-compose.ymlのバージョンです。
composeファイルと呼ばれバージョン毎の書き方があるみたいです。
今回は一番最新の使用の3を使用しました。

service

作成するコンテナを書きます。
ここではphpという名前のコンテナを作成しています。

image

php:latest つまりphpの最新バージョンのimageを取得してきます。
ローカルに該当のimageがあればローカルから、なければDockerHubから取得します。

volumes

マウントするディレクトリを指定します。
コンテナ上のディレクトリとローカルのディレクトリを同期させます。
ここではdocker-compose.ymlと同階層のsrcディレクトリにコンテナ上の/var/www/htmlディレクトリをマウントしています。

ports

ポートフォワーディングの指定をします。
ローカルの8080ポートをコンテナの8080ポートに同期させます。
これでローカルの8080ポートにアクセスするとコンテナの8080ポートにアクセスできるようになります。

command

コンテナが起動した時に実行するコマンドを指定します。
phpのビルトインサーバーを立ち上げています。

最後に

今回はDockerでPHPのなるべく小さい実行環境を作りました。
webサーバーを使わなくてもPHPだけで簡易的なwebサーバーを立ち上げて実行できるからすごい楽でした。

Dockerは普段全然使わないから覚えても少し経つとすぐに忘れてしまうんですよね、、、
今年は個人開発でバックエンドも実装していく予定なので積極的にDockerを使ってインフラの構築やバックエンドの構築を行っていきたいです。

今ならChatGPT先生もいるから自分の管轄外の分野にチャレンジするハードルもだいぶ下がりましたよね。

ブログももう少し書いていきたい、、、

どうも。みずかず(@mizukazu_1)です。

XSERVERでFTP接続をした際に「ディレクトリリスト表示の取り出しに失敗しました」というエラーが表示されるという事象が起きました。

原因は難しいことではなかったので備忘録がてら残しておきます。

どんなエラーが出たか

FileZillaを使用してFTPでXSERVERに接続した際に以下のようなエラーが発生しました。

パスワードも通っているのになぜかディレクトリの一覧が表示されない、、、

原因

原因は引っ越しをしたためIPアドレスが変わったことでした。

いつ設定したのか分からないのですが、XSERVER上でFTP制限設定というものが設定されていました。
FTPで接続出来るIPアドレスを指定する設定で、今まで使用していたIPアドレスがそこに設定されていたおかげでFTP接続出来ていたようです。

今回は引っ越しをしてIPアドレスが変わったので接続が出来なくなったみたいです。

なので、新しいIPアドレスを設定してあげれば接続できるようになります。

FTP制限設定の仕方

まずXSERVERのサーバーパネルにログインします。
そこにFTP制限設定の項目があるのでクリック。

次にドメインを選択します。

次にFTP接続許可IPアドレス追加をクリック。

現在のIPアドレスを追加するを選択して確認画面へ進むボタンをクリック。

追加するボタンをクリックして設定完了です。

これで無事にFTP接続出来るようになります。

最後に

接続出来なくて一瞬焦りましたが、そんなに難しいことじゃなくて良かったです。

ただFTP制限設定ってXSERVER側で勝手にやってくれてるんですかね、、、
知らないうちに設定されていたのでその辺も調べてみようと思います。

みずかず

めでたしめでたし

どうも。みずかず(@mizukazu_1)です。

少し前に新規でFirebaseプロジェクトを作成したらJavaScriptSDKのバージョンが8から9に変わっていて
それに伴って書き方も変わったので困惑するということがありました。

今はFirebaseを使っておらず今後ももうしばらく触る予定が無いので忘れないようにざっくりまとめておこうと思います。

v8での書き方

認証機能を実装できるFirebase Authを例にしてみます。

v8では以下のような書き方でした。

import firebase from 'firebase/app';
import 'firebase/auth';

const firebaseApp = firebase.initializeApp({});
const auth = firebaseApp.auth();
auth.onAuthStateChanged(user => {});

Authの部分を丸々importしています。
これだと使わないものまでimportすることになるので若干無駄です。

v9での書き方

v9では以下のような書き方をします。

import { initializeApp } from 'firebase/app';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

const firebaseApp = initializeApp({});
const auth = getAuth();
onAuthStateChanged(auth, user => {});

firebase/authからimportするのはv8と一緒なのですが、v9では使いたいものだけをimportします。
ここでいうとinitializeApp 、getAuth、onAuthStateChanged の3つですね。

この書き方はauthだけでなくfirestoreやstorage等の他のサービスでも同じです。
get<サービス名>になるだけなので覚えやすいかと思います。

2つバージョンの違いを簡単にまとめる

上で書いたことと少し被りますが、v8は全部まとめてimportをします。
逆にv9では使いたいメソッド等を個別にimportします。

効率の面でいってもv9の方式の方がなんとなく良さそうだなと思いますよね。

実際にファイルサイズで言ってもv8よりv9の方が断然小さいみたいです。

注意点

厄介な点がありましてv8とv9には互換性がありません。

なので元々v8で開発していたものをv9にバージョンアップするとあちこちでエラーが発生します。

くれぐれもいきなりv8からv9へのアップデートはやめておいた方が良いです、、、

また、npm installするとデフォルトでインストールされるのはv9のようです。

Compatライブラリについて

一応救済措置としてcompatという公式が出している互換用ライブラリがあります。

これを使用する事でv9でv8の書き方が出来ます。

例を以下に書いておきます。

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import { onAuthStateChanged } from 'firebase/auth';

const firebaseApp = firebase.initializeApp({});
const auth = firebaseApp.auth();
onAuthStateChanged(auth, user => {});

この部分に注目です。

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

firebaseとapp、authの間にcompatを入れます。

こうすることでv8の書き方が使えるようになります。

最後に

やっぱり破壊的なアップデートは少し戸惑いますね、、、

事前に情報を集めていて知っていた場合ならいいんですがいきなりだとびっくりします。

今回はとりあえずざーっと走り書きしてしまったので説明が足りない点等があると思うので
今後少しずつ追記していこうと思います。

参考にしたサイト

これからFirebaseでプロジェクトを始めようとする全ての人が知っておくべきこと v8→v9リリース
React+Typescript+Firebase v9

どうも。みずかず(@mizukazu_1)です。

テーマの修正をしていた際にカスタム投稿の編集画面でカテゴリーが表示されないということがありました。
こんな感じです。

解決方法もすごく単純なことだったので忘れないように書き残しておきます。

カスタム投稿、カスタムタクソノミーの設定をしているのになぜか表示されない

カスタム投稿の設定、カスタムタクソノミーの設定はしているのですが、なぜか編集画面にカテゴリーが表示されませんでした。

カスタム投稿

カスタムタクソノミー

解決方法

原因としてはカスタムタクソノミーの設定にshow_in_restの設定をしていなかったことでした。

クラシックエディタならどうかな～と思ってGutenbergを一旦OFFにしたらカテゴリーが表示されたので、調べてみたらどうやらカスタムタクソノミーの設定にもshow_in_restの設定をしなければいけないということが分かりました。

teratailのこちらの質問を参考にしました。

「カテゴリ」「タグ」が表示させたい。

まとめ

Gutenbergのカスタム投稿編集画面でカテゴリーが表示されない場合にはカスタムタクソノミーの設定にshow_in_restを追加すること。

解決してから考えるとなんだこんなことかと思うんですけど悩んでる最中はどこが原因なのか見当がつかなくて辛いです。

意外と見落としがちなところなので忘れ内容にしようと思います。

どうも。みずかず(@mizukazu_1)です。

今回はnode.jsの管理ツールであるnvm(node version manager)でバージョンを切り替える方法を書いていきます。
nodebrewというツールもあるんですがnvmの方が人気みたいですね。

今更感のある記事になるとは思いますが、自分の備忘録がてら残しておきます。

nvmのインストール

Windowsを使用しているのでからhttps://github.com/coreybutler/nvm-windows/releases/からsetup.zipをダウンロードしてインストールを進めていきます。
(ここでインストールするものはWindows用に最適化されているらしく厳密にはnvmとは同一ではないらしいです。)

ページの下の方にダウンロードリンクがあります。

ダウンロードが出来たらzipファイルを解凍して中の実行ファイルを叩いてインストールしていきます。

I acccept the agreementにチェックを入れてNextボタンをクリック。

インストールするフォルダを選択してNextボタンをクリック。

シンボリックリンクの指定は特に変更せずNextボタンをクリック。

Installボタンをクリック。

node.jsをすでにインストールしている場合にはダイアログが表示されます。
管理対象に含めるかどうか聞かれるのではいをクリック。

インストールが完了したらFinishボタンをクリックして終了です。

インストールされているかの確認

コマンドプロンプトを起動して「nvm」と入力します。

バージョンが表示されていれば正しくインストールされています。

nvmで管理しているnode.jsの確認方法

nvm listで現在管理しているnodeを確認する事が出来ます。

nvm list

最新のnode.jsをインストールしてみる

nvm install latestで最新のnode.jsをインストールすることが出来ます。

nvm install latest

これで最新のnode.jsがインストールされました。
今回だと17.4.0ですね。

nvm listで確認してもバージョンが1つ増えてることが確認できます。
ちなみに＊が付いているものが現在使用しているバージョンになります。

バージョンの切り替えを行う

nvm use バージョンで切り替えることが出来ます。

nvm use 17.4.0

無事に切り替えが出来てますね。

nvm use 〇〇〇をした際にエラーが出る場合

exit status 1: (文字化け)のようなエラーが出ることがあります。
インストール先のフォルダパスにスペースが含まれているとこのようなエラーが出るようです。

ただ、パスにスペースが含まれていなくても出る場合があり、その時は管理者権限でコマンドプロンプトを立ち上げて操作すると問題なく切り替えが出来ました。

最後に

nvm等の周辺技術は使う時には忘れてることが多いのでこうやって残しておくのが吉ですね。

1. Windowsはzipファイルから、Linuxはcurl等でnvmをインストール
2. nvm useを使用して対象のバージョンに切り替える
3. 必要があればnvm installを使用して好きなバージョンをインストール

最低でもこれくらいを覚えておけば良いかなと思います。

結構忘れがちなので定期的にこの記事を見直そうと思います。

どうも。みずかず(@mizukazu_1)です。

ブログでは紹介していないのですが以前、Vueで自作ブログなるものを作りました。

こんな感じのブログです。
Vueだけで作っていて記事のデータ等はローカルで保存しています。

改良点はたくさんあるのですが一応ブログとしては成り立っています。

今回はこの自作ブログを少し改良してWikiもどきのサイトを作成しました。

どういった使い方をしていくか、どんな風に動いているかなどを紹介していこうと思います。

作成したもの

UIに関しては自作ブログを踏襲して作成しています。
UIフレームワークはVuetifyを使っているのでデフォルトでマテリアルデザインになっています。

左のカテゴリーから記事をクリックすると右側に記事の本文が表示されます。
まあ良くあるWikiみたいな感じですね。

記事自体はMarkdownで書いて、表示する際にHTMLに変換しています。
なのでサクサク記事を書けるのがとても良いです。

どんな仕組みで動いているか

ホスティングはNetlifyを使っています。Githubと連携させているのでリモートにプッシュするだけで自動でデプロイしてくれます。
Vueのビルドの際に記事の情報を保持するpost.jsonとナビゲーションバーを作成しているnavigation.jsonを作成するスクリプトを仕込んでいます。

仕組みに関してざっくり説明すると、ローカルで記事を書く→Githubにプッシュ→Vueのビルド&jsonを作るスクリプトが走る→デプロイ完了

みたいな感じです。

jsonを作成する際にファイルの操作(読み込みや書き込み)をする必要があり、Vueだとファイル操作が出来ないのでスクリプトを仕込む事で一旦node.jsにその辺りを任せています。

記事の書き方

VSCodeを開いてローカルの.mdファイルを修正していきます。

こんな感じですね。
プロジェクト内に記事を保存しておくフォルダを作成してその中に記事を置いています。

記事が書けたらリモートにプッシュするだけです。

プッシュするとスクリプトが走り以下の2つのjsonが作られます。

記事の情報を保持するpost.json

ナビゲーションを作成するnavigation.json

記事を増やしたり減らしたりするとnavigation.jsonのpostsが動的に変わるのでサイドバーのリンクも動的に変わる仕組みになっています。

スクリプトについて

Vueのビルド時にスクリプトが走ると言いましたが実際にはこんな感じです。

画像の処理は一部分なのですが、Markdownファイルを読み込んで上で紹介した2つのjsonファイルを作成します。

このスクリプトをpackage.jsonに登録しておいて、npm run buildする時に一緒に動かしています。

分かりづらい部分もあると思いますがざっくりこんな感じで動いています。

このサイトの使い道について

このサイトは個人の技術知見メモみたいな感じで使おうと思っています。

覚えたことや気になることをメモ代わりに書いていってある程度溜まってきたらブログの記事にしようかと。

もっと機能を付けたり改良していけばさらに使いやすくなると思うのでその辺りのアップデートも頑張っていこうと思います！
とか言っていつもやらずに新しいもの作ってたりするんですよね、、、

最後に

今回作成したVue製のWikiもどきのサイトですがソースに関してはGithubで公開しています。

ソースはこちら

ソースを公開している理由としてはVueに興味があるけどみんなどんな感じで作っているんだろう？という疑問を少なからず持っている人がいると思ったからです。

実際に僕自身もVueを触りたての時は思いました。

自分で何かを作ってみたいけど先に他の人がどんな感じで作っているのか見てみたいと。

でも案外個人で作成している物のソースって無かったりします、、、

なのでソースを公開してそういった疑問を持っている人がいた時に役に立てばいいな～～と思っています。
大したコードは書いていないので偉そうなことは言えませんが、、、笑

あと最後になぜWikiもどきなのかというとWikiにしては機能が少なすぎるからです！！！
Wikiと言えば色々な人が編集できるのですがこのサイトは自分だけです。

Wikiと名乗るには少し機能不足なのでしばらくはWikiもどきと名乗ります。

みずかず

いつか機能が充実してWikiを名乗れる日が来ることを祈っています。

どうも。みずかず(@mizukazu_1)です。

今回はVueで作ったアプリをFirebase上にデプロイする方法を書いていきます。

今更なんですけど最近Firebaseを触り始めて、Vueプロジェクト作成→Firebaseへのデプロイがとても簡単だったんですよね。簡単とはいえどこかに書き留めておかないと忘れてしまうので備忘録がてらここに残していきます。

まずはVueプロジェクトを作成

VueCLIはインストールしている前提で書いていきます。

いつものコマンドでVueプロジェクトを作成していきます。

vue create firebase-test

こんな感じで聞かれるので特に設定するものが無いとか、テスト的に動かしてみたい方はdefaultを選択します。

僕はいつも使うものをテンプレートで登録しています。
Sassとbabelとvue-routerですね。

個人開発の時はlint系ははうざいので入れていません、、、笑

一旦プロジェクトのビルド

プロジェクトが出来たら一旦ビルドしてホスティング用のファイルを作成します。

npm run build

これでルート直下にdistというフォルダが出来ます。

Firebaseでプロジェクトの作成

FirebaseはGoogleのアカウントがあればプロジェクトの作成をすることが出来ます。

新しくアカウントを作成してもいいですし、今あるアカウントを使用しても良いと思います。

ログインするとこんな画面になります。

プロジェクトを作成を押します。

プロジェクト名を決めて規約に同意にチェックを入れ、続行ボタンを押します。

今回はテストで作成するので「このプロジェクトでGoogleアナリティクスを有効にする」のチェック外します。

アナリティクスを有効にすると次の画面でどのアカウントを使うか聞かれるので選択します。

このままプロジェクトを作成を押します。

ローディングの画面が走って

プロジェクトが作成されます。

続行を押して次へ進みます。

VueアプリとFirebaseを連携させる

コンソールのトップ画面になるのでVueアプリ(ウェブサイト)の場合は赤枠のコードのアイコンを押します。

アプリのニックネームには分かりやすいようにVueのプロジェクト名を登録します。

デプロイをするにはFirebase Hostingを使うので「このアプリのFirebase Hostingも設定します」にチェックを入れます。
下のドロップダウンはサイトのURLになります。デフォルトのままで大丈夫です。

アプリを登録を押します。

赤枠のスクリプトをVueアプリのheadタグに埋め込みます。
/public/index.htmlのheadタグでOKです。

次へを押します。

npm install -g firebase-tools

上記のコマンドでFirebase CLIをインストールします。
インストールが出来たら次へを押します。

プロジェクトのルートでfirebase loginコマンドを打ってください。
ブラウザが開いてどのGoogleアカウントを使用するか聞かれるので先ほどプロジェクトを作成したアカウントを選択します。

次にfirebase initを行うのですが、対話形式で色々聞かれるのでその辺りを書いていきます。

firebase initで初期化を行う

firebase init

プロジェクトのルートで上記のコマンドを打ちます。

Are you ready to proceed?に対してはYesで大丈夫です。
単に進める準備OKですか？と聞かれているだけなので。

今回はデプロイをするためにFirebase Hostingが必要なのでHostingの欄にチェックを付けます。

矢印で移動してスペースでチェックを付ける事が出来ます。

エンターを押して次へ進みます。

Please select an optionに対しては一番上の「Use an existing project」を選択します。

先ほど作成したプロジェクトが表示されるのでそのままエンターを押します。

どのフォルダをデプロイするのか聞かれるのでdistと打ち直します。

残りの質問にはとりあえず全てNoで答えています。
デプロイ自体には特に問題はありません。

デプロイしてみる

firebase deploy

これでFirebaseにデプロイされます。

こんな感じでDeploy complete！の文字が表示されれば無事にデプロイされています。

FirebaseコンソールのHostingからサイトのURLにアクセスしてVueのウェルカムページが表示されればOKです。

まとめ

大まかにこんな感じの3つのステップでデプロイまで持っていけます。
正直、レンタルサーバー借りてデプロイするよりお手軽だと思います！

今回はFirebaseのホスティングの機能しか触れませんでしたが他にもストレージやDBなどいくつかの機能があるのでそちらの記事も書いていこうと思います。

どれも便利なので個人開発にはオススメです！