カスタム投稿でタクソノミーのタームとWPコアのタグを別々に扱う方法

みなさんこんにちは、AoiSakuyaです。
今回はWrodPressのカスタム投稿でタクソノミーのタームとWPコアのタグを別々に扱えるようにする方法を紹介していこうかと思います。
※紹介する内容は、タームとタグを同時に使用した際にタクソノミーのタームだけを取り出したい場合には使えると思います。

カスタム投稿のタクソノミーのタームとWPコアのタグについて

まず、カスタム投稿のタクソノミーのタームとWPコアのタグについてですが、基本的には同じような扱いをされるものになっています。なので、タクソノミーのタームを取り出そうとした際にはタグも一緒に取得されてしまいます。この際に注意が必要なのが、タグを付けたカスタム投稿では、「タクソノミー」ではなく「タグ」の方で取得されるという点です。
ただし、タクソノミーのタームが全く取れないというわけではないので安心してください。
※上記はあくまでも私個人の解釈なので参考程度に考えてください。

タクソノミーのタームとWPコアのタグを別々に扱う方法

今回はタクソノミーのタームとWPコアのタグを別々に扱い、タクソノミーのタームのみを取り出す方法を紹介していきます。
紹介すると言っても、長いソースコードを書くわけでもなくたった数行で終わります。ただし今回の方法はpost(投稿)をループを使って出力して、一覧などを作成する際に記事と一緒にタグではなくタクソノミーのタームを出力したい場合を前提としています。

それではソースコードを書いていきます。
タクソノミーのタームを表示させる前の部分に以下のソースコードをを入れて取得してみてください。

// 投稿のIDを取得
$post_id = get_the_ID();
// 投稿タイプを取得
$post_type = get_post_type();
// 投稿のタクソノミーを取得
$taxonomies = get_taxonomies(array('object_type' => [$post_type]));
// タクソノミーに属するタームを取得
$terms = get_terms($taxonomies);
// タクソノミーに属するタームを取得
$terms = get_the_terms($post_id, $taxonomies);
これでタグではなくその記事のタクソノミーのタームが取得できると思います。
あとは取得したものをforeachとかのループで取得し、echoとかで出力すれば表示することができます。もちろんget_term_link()でタームのリンクを取得することも可能です。

最後に

今回紹介したものはあくまでも一例ですので、もしかしたら他にいい方法があるのかもしれませんが、おそらく一番短いソースコードで取得できるので試してみてもいいと思います。

LaravelのプロジェクトをGitで管理しようとしたときにファイル等が足りなくなる悲劇

みなさんこんにちは。sakuyaです。

今回はLaravelのプロジェクトをGitにアップロードして、それを他のメンバーがクローンしたときに起こったことを書いていこうと思います。

何が起こったのか

今回メンバーが私がアップロードしたプロジェクトをローカルにクローンした際に、「php artisan serve」が使えなくなり、「auth」やマイグレーションも実行できなくなることがありました。最終的には何とか解決することができましたが、今回紹介する解決方法は暫定的なものなので参考程度もしくは解決するための1つの案程度に考えておいてください。

解決方法

今回の問題で重要なのがクローンしたプロジェクトに「vendor」のディレクトリがないことと「.env」のファイルがないことです。なので、この2つをプロジェクト内に存在させれば解決します。

まずは「vendor」のディレクトリを作るためにcomposerをインストールします。以下のコマンドをターミナルで入力してください。

composer install

上記のコマンドを実行すると「php artisan serve」でサーバーを起動することができるようになると思います。

次に「.env」ですが、これは自分のコンピュータ内で新たなプロジェクトを作成してそこから「.env」ファイルをコピーして、クローンしたプロジェクト内に持ってくる方が簡単だと思うので今回は持ってくる方で試してみてください。

上記の内容を試すと無事にデータベースへの接続ができマイグレーションも実行することができると思います。あと言い忘れていましたが、「.env」内のデータベース名などを書き換えることと「auth」を使うには「npm install」と「npm run build」をする必要もあるということをお忘れなく。

最後に

Gitへ何かのプロジェクトをアップロードする際は、管理ファイル(.envなど)はアップロードされません。また、「vendor」はGitの上限100ファイルを超えるためアップロードされません。なので、クローンした後はしっかりcomposerのインストールと事前に作ったおいたLaravelプロジェクトの.envファイルがあると安心かと思います。

FirebaseのStorageで画像をアップロードする時のタイプ指定で躓いた話し

皆様こんにちは。sakuyaです。

今回は、私がFirebaseのStorageを使って画像のアップロードをしたときのことを書いていこうかと思います。

そもそもFirebaseのStorageで何ができるのか

FirebaseのStorageでは、比較的簡単に画像などのアップロードやダウンロードといったこともできるものになっています。また、Googleが提供しているサービスで、制限はありますが無料で使えるので「手軽にはじめてみたい」という人にはお勧めできるのはないかと思います。

それでは本題

私は以前にFirebaseのStorageを使って画像のアップロード機能をNext.jsで作ろうとしたときがありました。その際に、公式のドキュメントを参考にしながら下記のように作っていきました。

※抜粋して表示しています。

const metadata = {
  contentType: 'image/jpeg',
};

 

const storageRef = ref(storage , 'images/' + image.name);
const uploadTask = uploadBytesResumable(storageRef, image, metadata);
まあ、分かる人が見ればすぐに気づくとは思いますが、metadataの部分でタイプの指定をして、アップロードをする際にそれをあてはめています。

上記ではmetadataでタイプの指定をしているのですが、この部分をinpuptタグでfileタイプを使う際にacceptで複数指定をするのと同じように指定すると、エラーで正しいタイプでアップロードすることができませんでした。私の指定の仕方がよくない可能性もあるので絶対にできないとは言えないですが、実装する際は皆さまお気をつけください・・・。

最後に

今回ご紹介した内容ですが、最終的にはちゃんと画像のアップロード機能を実装することができたので、特に問題はなかったです。でも、最低限タイプ等の指定はしておかないと、画像として認識されないタイプでアップロードされてしまうので気を付けてください。※1

※1 少し補足説明

const uploadTask = uploadBytesResumable(storageRef, image, metadata);

タイプの指定も大事ですが、上記のように書いた際にimageの部分は指定しなくてもアップロード自体はできます。ただし、アップロードしたい画像のデータをimageに入れているので、その部分が空白だとデータがない状態でアップロードしてしまうために画像として認識されません。

 

LaravelでRESTfulを使って開発したら結構便利だった件

皆様こんにちは。sakuyaです。

今回はLaravelでRESTfulサービスを使ったときのことを書いていこうと思います。

そもそも「REST」、「RESTful」とは何?

RESTは分散型システムを構築するための考え方で、インターネットのあちこちにプログラムが分散して存在したときに、それらが相互にやり取りしながら動くようなシステムにするにはどういう仕組みにしたらいいかの答えの1つらしいです。

で、RESTfulサービスは、情報の取得や送信などの基本的な操作のしかたが統一されているため、他のプログラムから簡単にアクセスしてサービスを利用できるようになっているそうです。
※私も初めて使うときに調べた程度なので詳しいことは分かっていないです。

それではここから本題

私が個人的に開発をしている時に、RESTfulを使って「RESTコントローラー」を以下のコマンドを打って作りました。

$php artisan make:controller MemoController --resouce

すると、一覧表示のindex、新規作成のcreateとstore、レコード表示のshow、更新処理のeditとupdate、削除処理のdestroyが自動で作られました。

今まで手書きだったのが自動生成されてめっちゃ便利だ!

と、そのときの私は思いました。まあ、最後の「--resouce」の部分があることで自動生成されることに後で気づくのですが・・・。

上記を作った後に、ルート情報を登録しないといけないので以下をWeb.phpに追記する。

Route::resouce('memo' , 'MemoController::class');

これでMemoControllerで自動生成された分すべてのルーティングを登録することができました。

手書きでルーティング情報をWeb.phpに追記していくよりだいぶ楽に実装できるのでお勧めです。

それぞれの処理にアクセスする方法

index → /コントローラ

create → /コントローラ/create

store→ /コントローラ

show → /コントローラ/ id(番号)

edit → /コントローラ/ id(番号)/edit

update → /コントローラ/ id(番号)

delete → /コントローラ/ id(番号)

※storeはPOST送信、updateはPUT/PATCH送信、deleteはDELETE送信です。

最後に

今回のでRESTfulがいかに便利なものなのか伝わったでしょうか。最低限、手書きよりは簡単にコントローラやルーティングなどが実装できることが伝わればいいかと思います。

 

Laravel9でAuth関連ファイルを生成した後にnpm installができない時の対処法

Laravel9で認証機能を実装しようとしたときにnpm installコマンドが正常に動かなかったので、そこまでの流れとその解決方法を紹介していきます。

laravelで認証機能を実装するため、以下のコマンドを打ちました。

$composer require laravel/ui

その後にAuth関連ファイルを生成する(今回はvueで生成)

$php artisan ui vue --auth

そして次に打つコマンド

$npm install
$npm run build ← これはnpm installが正常に動作した後に実行するコマンド

もしくは

$npm install && npm run build

ここまで打った時点で以下のようなエラーが出た。

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: vite@4.0.2
npm ERR! node_modules/vite
npm ERR!   dev vite@"^4.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/plugin-vue@3.2.0
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   dev @vitejs/plugin-vue@"^3.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

上記のエラーは、インストールしているパッケージが古いためにでているエラーではないかと考えました。

そのため、package.jsonに記載させれているパッケージをすべて以下のコマンドを打ってアップデートしてみました。

$npm install -g npm-check-updates
$npm-check-updates -u
$npm update

これでアップデートは完了したので、再度npm installとnpm run build(npm install && npm run build)を実行してみました。

すると、npm installとnpm run buildを実行してもエラーが起こることなく正常に終わらせることができました。

あとは実際にサーバーを動かして確認してみる。

以下のコマンドでサーバーを起動させる。

$php artisan serve

その後に127.0.0.1:8000/homeにアクセスすると、ちゃんとログイン画面が表示されました。

最後に

composerでlaravel/uiをインストールする前やしてすぐにアップデートをしてAuth関連ファイルを生成しても、npm install(もしくはnpm install && npm run build)をしたときの結果は同じでした。なので、少し手間はかかりますが今回のようなエラーにはとりあえずでも使えると思います。