サンプルご紹介

2024.06.12 2021.03.28

本ブログで解説したコードやメソッドを使って作成したWebアプリ・サンプルページをご紹介します。

サンプルサイトで、実際に試せます♪

ぜひ、遊んでみてくださいね。

Laravel・Vue.js・ChatGPTを連携させたクイズアプリ【AIでクイズ作成】
機械学習モデル使用・日本企業の月収予想アプリ
ChatGPTと連携させたメニュー考案Webアプリ【今日のメニュー】
LaravelとInertiaとVue.js で作成したクイズアプリ
Laravelで作成したスケジュール調整アプリ【スケジュール合わせ隊】
Laravel Jetstream 二段階認証機能おためしサイト
Laravel会員制フォーラムサイト Laravel8/Bootstrap版
Laravel会員制フォーラムサイト Laravel9/Breeze・Tailwind CSS使用
LaravelにGoogleチャートを搭載【リアルタイム投票機能付】
LaravelにPDFファイルダウンロード機能搭載
Laravelに無料エディタ【Summernote】搭載
PHP掲示板

Laravel・Vue.js・ChatGPTを連携させたクイズアプリ【AIでクイズ作成】

URL	https://gptquiz.oshietenet.net/
使用技術	Laravel（Inertiaパッケージ）、Vue.js、ChatGPT
機能	AIでクイズ作成作成したクイズを実施正解率とスピードに基づいたランキング表示

以前作ったクイズアプリに手を加えています。LaravelとVue.jsとChatGPTを連携させて作成しました。キーワードを入れると、AI（ChatGPT）がクイズを作ってくれます。クイズに回答すると、正解率とスピードに基づいてランキングが表示されます。ほかの人が作ったクイズも試せます。

ぜひ遊んでみてくださいね。

機械学習モデル使用・日本企業の月収予想アプリ

URL	https://salary-predict.cms-sample-site.xyz/
使用技術	scikit-learn, Python, Flask
機能	年齢・職種・役職・会社規模・学歴から月収を予測

政府統計の総合窓口のデータを使用して月収予測モデルを作成。

これをWebアプリに組み込みました。当初はStreamlit Cloudに設置していました。無料で良いのですが、利用者がいないと非アクティブになってしまったりなど不便だったので、現在はエックスサーバーに設置しています。

エックスサーバーにPythonのWebアプリを設置するのは初めてだったので、少々苦労しました。

同じ苦労をする方がないよう、下記記事に、PyhonのWebアプリをエックスサーバーにデプロイする方法として方法をまとめています。

エックスサーバーにPythonのWebアプリをデプロイ【Miniconda、Flask、FastCGIを使用】

エックスサーバーにはPythonが入っていますが、デフォルト設定ではroot権限がないため、直接pipコマンドを使えません。本記事では、エックスサーバー上でPython製のWebアプリをデプロイする手順について説明します。ま...

参考コードはGitHubにも公開中です。

GitHub - junko5/salarypredict: app code on Streamlit

app code on Streamlit. Contribute to junko5/salarypredict development by creating an account on GitHub.

ChatGPTと連携させたメニュー考案Webアプリ【今日のメニュー】

URL	https://cooking.oshietenet.net/
使用技術	Laravel10使用、ChatGPT、PexelsとAPI連携
機能	メニュー考案機能メニューに沿った画像表示機能日本語・英語サポート

ChatGPTとLaravelを連携させたWebアプリです。材料を入れると、ChatGPTがメニューを作成してくれます。さらに、Pexelsによって、メニューに合った画像も表示されます。

ChatGPTとの連携方法、コードの組み方は、下記をご覧ください。

LaravelでChatGPTとDALL·E 2 のAPIを使用：AIに文章と画像を作ってもらう方法

Laravelを使って、OpenAIのChatGPTとDALL·E 2 を使ったWebアプリを開発してみました。食材を入れると、メニューを考えてくれて、さらにメニューに合った画像を作ってくれるWebアプリです。今回のコードを...

ChatGPT APIを使ってLaravelと連携：Webアプリを作成する方法を解説

ChatGPTのAPIを使ってLaravelで「食材を入力するとレシピを考えてくれる」Webアプリを作りました。 APIを使ったChatGPTとLaravelとの連携方法とコードの組み方、API利用料についての注意点をご紹介します。 ...

LaravelとInertiaとVue.js で作成したクイズアプリ

URL	https://quiz.createmore-prj.com/play/quiz
使用技術	Laravel9・Vue3・Inertia使用
機能	クイズ作成機能クイズプレイ機能ランキング機能

LaravelとVue.jsとInertiaを使ったクイズ作成アプリです。正解率と回答時間でスコアが算出されます。学習理解度チェックに使えます。

上記画像をクリックしていただくと、サンプルのLaravelの理解度チェッククイズを楽しんでいただけます。

LaravelとVue連携用に、Inertiaを利用しています。Inertiaの使い方は、下記記事で紹介しています。

Inertia（イナーシャ）ってなに？メリットは？LaravelとVueを連携させたい人のために説明

Inertiaは、サーバーサイド（フロントエンド）とクライアントサイド（バックエンド）をつなぐためのツールです。わたしはLaravelとVue3を連携させたい時に使い始めましたが、すごく便利だと感じています。本記事では、「L...

Laravel BreezeにInertiaをインストールする方法：LaravelとVue3でSPAを手軽に作りたい人向け

Laravel Breezeをインストール時にInertia（イナーシャ）を入れると、Vue3をLaravelで使う時に必要な設定を行ってくれる上、デフォルトの認証部分等すべてVueで手軽に作れます。 LaravelとVue3でSPA...

Laravelで作成したスケジュール調整アプリ【スケジュール合わせ隊】

URL	https://s-calendar.create-more.net/
使用技術	Laravel8、Bootstrap
機能	講師と生徒のスケジュール調整用に作成しました。　①講師が予約可能な日時を設定　②生徒に予約用のURLを送信　③生徒が第一候補から第三候補を選択　マニュアル：https://create-more.net/scheduletool_manual/

URL

https://s-calendar.create-more.net/

使用技術

Laravel8、Bootstrap

機能

　講師と生徒のスケジュール調整用に作成しました。

　①講師が予約可能な日時を設定

　②生徒に予約用のURLを送信

　③生徒が第一候補から第三候補を選択

　マニュアル：https://create-more.net/scheduletool_manual/

自分が欲しくて作りました。コンサルなどで使用しています。記事内での説明が作れないまま今に至ってしまっておりますが＾＾；　もし日時調整で毎回悩んでいたら、使ってみてくださいね。

【使い方】

①講師が予約可能な日時を設定します。15分刻みで、15分から2時間までの時間帯を設定できます。予約用のオリジナルURLが生成されます。

②あとは、このURLを生徒さんたちに送るだけ。第一～第三希望の日時まで選んでもらいます。

Laravel Jetstream 二段階認証機能おためしサイト

URL	https://faq.createmore-prj.com/register
使用技術	Laravel9・Jetstream Livewire版
機能	Jetstreamの二段階認証おためし

Laravel Jetstream版は、二段階認証機能等、高度な機能が搭載されたパッケージです。

実際にどんなふうに機能するのか、お試しできるサイトがこちらです。

サイトの使い方はこちら。

Laravel Jetstream版の使い方解説・デモサイトで二段階認証も試せます

Laravel Jetstream版の機能を解説した記事を取り揃えています。 Jetstream版の特徴は、なんといっても、高い認証機能。二段階認証がデフォルトでついてきます。でも、一体どんな風に使えるんだろ。実際に二段階認証...

上記ページに、Jetstreamのインストール方法や使い方に関する記事のリンクも入っています。

Laravel会員制フォーラムサイト Laravel8/Bootstrap版

URL	https://forum.addisteria.com/login
使用技術	Laravelバージョン8・Bootstrap使用
機能	お問い合わせフォーム投稿機能・コメント機能会員管理機能

【Laravelの教科書】のLaravel8版テキストで作成するフォーラムサイトのサンプルです。

下記の記事の中でも、機能搭載方法を一部ご紹介しています。

Laravel会員制フォーラムサイト Laravel9/Breeze・Tailwind CSS使用

URL	https://members.createmore-prj.com/
使用技術	Laravelバージョン9/Breeze・Tailwind CSS使用
機能	お問い合わせフォーム投稿機能・コメント機能会員管理機能

【Laravelの教科書】のLaravel9版テキストで作成するフォーラムサイトのサンプルです。

詳しくはこちらをご覧ください。

LaravelにGoogleチャートを搭載【リアルタイム投票機能付】

URL	https://forum.addisteria.com/dango/chart
使用技術	Laravelバージョン8, Google Chart API
機能	投票機能 Googleパイチャートで統計結果表示