#1ChatGPTだけで素人が本当にプログラムを書けるのか検証してみた - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます
#1ChatGPTだけで素人が本当にプログラムを書けるのか検証してみたのサムネイル

#1ChatGPTだけで素人が本当にプログラムを書けるのか検証してみた

2023年04月14日

このエントリーをはてなブックマークに追加

こんにちは!プログラマーのますみです!

 

最近世間を騒がせているChatGPT、私もよく使っているのですが、本当にすごい...

 

膨大な知識量を持つ人工知能で、大体の質問に的確に答えてくれます。

 

例えば私の地元、愛知県の観光名所について聞いてみると...

愛知県には数多くの魅力的な観光名所があります。その中でも代表的なものをいくつかご紹介します。

  1. 名古屋城:愛知県の中心部に位置する歴史的なお城で、天守閣からは名古屋市内を一望できます。

  2. 熱田神宮:縁結びの神様として有名な神社で、毎年6月には熱田神宮例大祭が開催されます。

  3. トヨタ博物館:自動車メーカーのトヨタが運営する博物館で、トヨタの歴史や技術を学べます。

  4. リニア・鉄道館:世界初の商用リニアモーターカー「リニア中央新幹線」の開発を担当するJR東海が運営する博物館です。

  5. 大須観音:日本三大不動明王のひとつで、多くの人々から信仰を集める寺院です。また、周辺には個性的な商店街が広がっています。

  6. 尾張旭市レゴランド・ジャパン:レゴブロックをテーマにした日本初のテーマパークで、子どもから大人まで楽しめる施設です。

  7. 三河湾沿岸国定公園:三河湾の海岸線を中心に広がる国定公園で、美しい自然と海岸の景観を楽しむことができます。

以上が愛知県の代表的な観光名所の一部です。他にも多くの魅力的なスポットがありますので、是非訪れてみてください。

ん?ちょっとまって?

レゴランド・ジャパンは全然尾張旭市じゃないよ!??

 

ChatGPTすごいよ!って紹介したかったのにいきなり間違えないでおくれよ...

 

という感じで、時々間違えてしまうかわいいChatGPTさんは、特にプログラミングに関しての知識が豊富と言われておりまして、昨今では

誰でもプログラムが書けるようになるからプログラマーの仕事がなくなる

と騒がれていますね

 

この問題については、私はまだ全然先の話かな~と思っています。

 

理由は

  • ChatGPTから的確な回答をもらうには的確な質問をする必要がある
  • 的確な質問をするにはプログラミングの知識がいる
  • 結局プログラミングの勉強しないといけない

からです!

 

ChatGPTの出現によって、プログラミングの学習がしやすくなって敷居が低くなったのも事実だと思いますが、かといってChatGPTに的確な質問ができるまでプログラミングの学習が続けられる人が増えるかというと

 

う~ん...

 

って感じです笑

 

なんですが、あくまでここまでは私が頭の中で思っていることなので、実際にプログラムの知識皆無な人がシステムを作れるのか検証してみようと思います!

 

とはいえプログラムの知識皆無な人を連れてくるのも大変なので、下記の条件で私がChatGPTを使ってシステムを作ってみようと思います!

 

条件

  1. 私はプログラムの知識が皆無なものとする
  2. 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる
  3. 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わない

これでもシステムが作れるのかやってみたいと思います!

 

作るものはシンプルにブログを作ってみようと思います。

あんまり複雑なものを作ると時間がかかって本業に支障がでちゃうからね...

  • ブログ記事投稿
  • ブログ記事の一覧を表示
  • ブログ記事を表示

ができたら完成!としましょう!

 

じゃあ最初の質問!

私はプログラムの知識皆無なので、この言語でこのライブラリ使ってブログ作りたい!とか書けませんから、とりあえず

ブログ作って

とだけ質問してみました

 

ブログを始めるのは素晴らしいアイデアです!ブログは自分のアイデアや趣味、経験、知識を共有し、世界中の人々とつながる手段です。以下はブログを始めるための基本的なステップです。

  1. 目的を明確にする:自分がブログで伝えたいこと、ターゲットとする読者層、ブログのスタイルやトーンなど、目的を明確にすることが重要です。

  2. ブログのテーマを選ぶ:自分が熱中していることや専門知識があること、あるいは読者にとって興味深いことをテーマにすると良いでしょう。

  3. ブログのプラットフォームを選ぶ:無料のプラットフォームとしては、WordPressやBlogger、Tumblrなどがあります。有料のものとしては、SquarespaceやWixなどがあります。

  4. ドメイン名を選ぶ:自分のブログに独自のドメイン名をつけると、読者にとってもブログの信頼性が高まります。

  5. コンテンツを作成する:ブログの中心となるのは、記事や写真、動画などのコンテンツです。自分のアイデアや興味に基づいて、常に新鮮で魅力的なコンテンツを提供するように心がけましょう。

  6. ソーシャルメディアで宣伝する:ブログを始めたら、ソーシャルメディア(Twitter、Facebook、Instagramなど)で自分の記事を宣伝することで、読者を増やすことができます。

以上が、ブログを始めるための基本的なステップです。自分のアイデアや興味を元に、自分らしいブログを作り上げていってください!

 

まあそうなるよね

ブログ作って だけだと質問の意味が広すぎて的確な答えを得られませんでした。

知識皆無でもプログラミングという単語はみんな知っていると思うので、質問を

ブログをプログラミングして作って

に変えてみます 

 

ブログをプログラミングして作るには、いくつかのステップが必要です。以下は一般的なステップです。

  1. 要件の定義:最初に、ブログに必要な機能と要件を決定します。たとえば、記事を表示するページ、記事を投稿するページ、コメント機能、ユーザー登録機能などが含まれます。

  2. デザインの決定:次に、ブログのデザインを決定します。これには、レイアウト、色、フォント、画像、ロゴなどが含まれます。

  3. フロントエンドの開発:HTML、CSS、JavaScriptを使って、ブログのフロントエンドを作成します。これには、画面上に表示される要素を配置し、スタイルを設定することが含まれます。

  4. バックエンドの開発:サーバーサイドのプログラミング言語を使用して、ブログのバックエンドを作成します。これには、データベースとの連携、フォームの処理、ユーザー認証などが含まれます。

  5. データベースの設計:データベースを設計し、必要なテーブルやフィールドを作成します。ブログの記事、ユーザー情報、コメントなどのデータを保存するために使用されます。

  6. テスト:ブログの機能が正しく動作することを確認するために、テストを実施します。これには、ユニットテスト、統合テスト、システムテストなどが含まれます。

  7. デプロイ:最後に、ブログを公開するために、Webサーバーにデプロイします。これには、ドメイン名の取得、サーバーの設定、SSL証明書の取得などが含まれます。

以上が、ブログをプログラミングして作るための一般的なステップです。プログラミング言語としては、PHP、Ruby、Python、Node.jsなどが一般的に使用されます。また、フレームワークとしては、WordPress、Django、Ruby on Rails、Expressなどが使用されることがあります。

結構いいんじゃない? 

フレームワークにWordPressが入っているのがちょっと疑問ではあるけど、なかなか的確な手順を教えてくれちゃった...

この手順を順番に質問攻めしていけば本当にブログが作れてしまうんじゃないか...

 

それでは続きと行きたいのですが、だいぶ長くなってしまったので次の投稿にしようと思います!

次回はさっきのChatGPTの回答の

  1. 要件の定義

からやっていきます!

 

それでは次の投稿もお楽しみに~

よかったらSNSシェアお願いします!

facebookで共有する このエントリーをはてなブックマークに追加
#1ChatGPTだけで素人が本当にプログラムを書けるのか検証してみたのサムネイル

この記事を書いた人

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!

ますみ

愛知県在住の20代プログラマーです!

プログラミングと無縁の専門学校を卒業して働き出しましたが、コロナ禍でほぼ無職に...

無職時代に独学でプログラミングを勉強して、未経験からめでたくプログラマーとして採用していただけました。

このブログを見た方が、わたしが独学で勉強していた時期に悩んでいたことで悩まないように...そう願いながら情報を発信しています!

おすすめレンタルサーバー


当サイトはXserverを利用しています。 HTML、CSSで作成したホームページはもちろん、wordpress、Laravel等で作成した高度なアプリケーションも利用可能です!

おすすめ記事


#3ChatGPTだけで素人が本当にプログラムを書けるのか検証してみた

こんにちは!プログラマーのますみです!今回はChatGPTだけで素人が本当にプログラムを書けるのか検証してみたの三回目の記事です!一回目の記事はこちら二回目の記事はこちらこの検証の条件は 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わない作るものは下記の機能をもったブログとしました ブログ記事投稿 ブログ記事の一覧を表示 ブログ記事を表示前回はデータを保存していくところ、データベースのセットアップをする工程で終わりましたので、その続きからやっていきます!さて、前回はデータベースについての質問をして、このような回答が返ってきましたMySQLサーバーを起動する方法は、オペレーティングシステムによって異なりますが、一般的には以下の手順になります。 MySQLサーバーをインストールするまず、MySQLサーバーをインストールする必要があります。MySQLはオープンソースのため、公式サイトから無料でダウンロードできます。インストール手順はOSによって異なるため、MySQLの公式ドキュメントを参照してください。 MySQLサーバーを起動するMySQLサーバーを起動するには、OSによって異なる方法がありますが、一般的には以下のようになります。 LinuxやmacOSの場合:ターミナルを開いて、以下のコマンドを入力します。sudo systemctl start mysql Windowsの場合:コマンドプロンプトやPowerShellを開いて、以下のコマンドを入力します。net start mysql MySQLサーバーに接続するMySQLサーバーが起動したら、MySQLクライアントを使用してMySQLサーバーに接続することができます。一般的には、以下のコマンドを使用して接続します。mysql -u ユーザー名 -p ユーザー名には、MySQLに接続するためのユーザー名を指定します。このコマンドを実行すると、パスワードを要求されます。以上の手順でMySQLサーバーを起動し、接続することができます。まずは一番のMySQLサーバーをインストールする からやってみましょう!公式サイトからダウンロードしてねと書いてありますが、検索エンジンは使わない縛りなのでChatGPTに公式サイトを聞いていきます!MySQLの公式サイトを教えてChatGPTの回答MySQLの公式サイトは以下のURLからアクセスできます。https://www.mysql.com/ありがとね、自分で調べろよって思うよね...それではダウンロードしていきたいのですが、MySQLの公式サイトのどこからダウンロードできるのかも聞いちゃいましょうMySQLの公式サイトからどうやってMySQLをダウンロードできますかChatGPTの回答はこちらMySQLをダウンロードする手順は以下の通りです。 MySQLの公式サイト(https://www.mysql.com/)にアクセスします。 ナビゲーションバーの「Downloads」をクリックします。 ダウンロードページが表示されます。ここで、利用したいMySQL製品を選択します。 製品を選択すると、OSやバージョン、エディションなどの情報を選択できます。必要な情報を選択し、「Download」をクリックします。 ダウンロードページに移動し、MySQLのライセンス契約に同意したことを確認します。同意する場合は「Accept License Agreement」にチェックを入れます。 OSに応じたインストーラーをダウンロードします。 ダウンロードが完了したら、インストーラーを実行します。インストーラーに従って、MySQLをインストールします。 以上の手順でMySQLをダウンロードしてインストールすることができます。といった感じで、公式サイトのどこをクリックしてダウンロードすればよいか教えてくれました。ですが、私は今3の利用したいMySQL製品を選ぶ知識が無いので、公式サイトの文字をそのままコピーしてChatGPTに質問を投げてみましょう利用したいMySQLの選び方がわかりません どこをクリックすればいいですか MySQL Enterprise Edition MySQL Enterprise Edition includes the most comprehensive set of advanced features, management tools and technical support for MySQL. Learn More Customer Download Trial Download MySQL Cluster CGE MySQL Cluster is a real-time open source transactional database designed for fast, always-on access to data under high throughput conditions. MySQL Cluster MySQL Cluster Manager Plus, everything in MySQL Enterprise Edition Learn More Customer Download (Select Patches Updates Tab, Product Search) Trial Download MySQL Community (GPL) Downloads ChatGPTの回答はこちらMySQLを選ぶ際のポイントは、利用目的や利用方法、規模、予算などによって異なります。以下のリストから自分の目的に合ったMySQL製品を選んでください。 MySQL Enterprise Edition: 高度な機能とツール、技術サポートを提供する商用製品です。大規模な企業向けの利用に向いています。 MySQL Cluster CGE: リアルタイムなトランザクション処理を高速に行うことができるオープンソースのデータベースです。高い信頼性を求める企業向けに利用されます。 MySQL Community Edition: オープンソースで、無償で利用できるMySQL製品です。小規模のWebアプリケーションや個人的なプロジェクトなどに向いています。 利用目的や規模によって異なるため、ご自身の用途に合った製品を選択してください。詳しくは、MySQLの公式サイトの製品紹介ページ(https://www.mysql.com/products/)を参照してください。なるほどまあ無料のやつにするよねなんせ私はいまプログラミングの知識が皆無なので、価格ですべて決めます。実際今回作りたいものは無料版で充分ですしというわけでMySQL Community (GPL) Downloads をクリックしてみますするとこんなページに飛びました。訳がわからないのでChatGPTに聞いてみますMySQL Community Editionを選びました MySQL Yum Repository MySQL APT Repository MySQL SUSE Repository MySQL Community Server MySQL Cluster MySQL Router MySQL Shell MySQL Operator MySQL NDB Operator MySQL Workbench MySQL Installer for Windows C API (libmysqlclient) Connector/C++ Connector/J Connector/NET Connector/Node.js Connector/ODBC Connector/Python MySQL Native Driver for PHP MySQL Benchmark Tool Time zone description tables Download Archives この画面ではどうすればいいですかこの質問では無料版を選んだことを伝え、あとは先ほどの画像の文字をそのまま書き込んでいますChatGPTの回答はこちらMySQL Community Editionをダウンロードする場合、以下の手順を実行してください。 MySQL Community Serverをクリックします。 ページの一番下にある「Looking for previous GA versions?」というリンクをクリックして、利用したいバージョンを選択します。 ダウンロードしたいパッケージの形式(zip、tar.gz、rpm、deb)を選択します。 OSの種類に応じて、適切なパッケージをダウンロードします。MySQL Community Serverのダウンロードが完了したら、インストール手順に従ってMySQLをインストールしてください。現在Looking for previous GA versions?というボタンはありませんでしたので、その旨を伝えました。申し訳ありません、MySQL Community Editionのダウンロードページが更新されたため、以前の手順が変更されている可能性があります。最新版のMySQL Community Editionをダウンロードする方法は、以下の通りです。 MySQL Community Serverをクリックします。 ページの下部にスクロールして、Generally Available (GA) Releasesという項目を見つけます。 GAリリースの下にある「Select Version」をクリックして、利用したいバージョンを選択します。 Select Operating Systemで自分のOSを選択します。 Downloadボタンをクリックして、MySQL Community Serverをダウンロードします。以上の手順でMySQL Community Serverをダウンロードできます。こんなに他力本願な質問攻めをしておきながら 謝らせてしまった...良心が痛んできます...ChatGPTの回答ではGenerally Available (GA) Releasesという項目を見つけてくださいと書いてありますが、この項目もありませんでした。ChatGPTの知識は少し古いらしいので、現在のMySQLの公式サイトの状態は知らないわけですね...ということで、検証の条件は 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わないとしたのでこの条件ではChatGPTの回答のみでブログを作ることはできないという結果でした。最終的にはMySQLのセットアップの段階でストップしてしまいましたね。ただこれだけでは味気ないので、MySQLのセットアップは済んでいるものとして、続きをChatGPTの回答のみで書いてみようと思います!それでは続きは次回の記事で!お楽しみに~

Read More

#4ChatGPTだけで素人が本当にプログラムを書けるのか検証してみた

こんにちは!プログラマーのますみです!今回はChatGPTだけで素人が本当にプログラムを書けるのか検証してみたの三回目の記事です!一回目の記事はこちら二回目の記事はこちら三回目の記事はこちらこの検証の条件は 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わない作るものは下記の機能をもったブログとしました ブログ記事投稿 ブログ記事の一覧を表示 ブログ記事を表示実は前回の記事で、ChatGPTの知っているMySQLのセットアップに関する情報が古く、この条件ではブログを完成することはできないという結果になっているのですが、せっかくなのでMySQLのセットアップは済んでいるものとして続きをやっていこうと思います!二回目の記事で、phpという言語で書かれたプログラムをChatGPTに書いてもらっていたので、それを作成していきたいと思います。まずはnew_post.phpを作っていきますそしてbackend.phpを作っていきますbackend.phpの続きindex.phpとpost.phpも作ってねと回答でいわれていたので作っていきましょうindex.phppost.phpという感じで四つのファイルを作っていくわけですが、プログラミングの知識が皆無な私だったらパソコンのどこにこれらのファイルを置いておくでしょうか...答えはデスクトップにどん!ですさて、4つのファイルをすべて作りました。早速作ったファイルを実行していきたいのですが、プログラミングの知識が皆無だったらphpファイルの実行のやり方がわからないはずなのでChatGPTに聞いてみましょうphpはどうやって実行するのですか?回答PHPは、サーバーサイドのスクリプト言語であり、ウェブサイトの開発に広く使用されています。PHPスクリプトを実行するには、次の手順に従うことが一般的です。 PHPのインストール:まず、PHPをサポートするWebサーバーにPHPをインストールする必要があります。一般的に、Apache、Nginx、IISなどのWebサーバーが使用されます。 PHPスクリプトの作成:次に、PHPスクリプトを作成します。お好みのテキストエディタを使用して、.php拡張子を付けた新しいファイルを作成し、PHPコードを書き込みます。 Webサーバーの設定:Webサーバーを構成して、PHPスクリプトを実行するように設定する必要があります。これには、Webサーバーの設定ファイル(httpd.confなど)の変更が必要な場合があります。 PHPスクリプトの実行:Webサーバーを起動し、WebブラウザでPHPスクリプトにアクセスすることで、PHPスクリプトを実行できます。たとえば、ローカルホストでPHPを実行する場合は、Webブラウザでhttp://localhost/yourscript.phpと入力することができます。 以上が一般的なPHPスクリプトの実行手順です。ただし、環境やプロジェクトによっては、さまざまな方法でPHPを実行することができます。ざっくり回答を要約すると、phpは必要なものをいろいろインストールしてセットアップしないと動かせないので、それらのセットアップをしてくださいねと言っています。MySQLのセットアップでこの検証は失敗してしまっているので、今回はうまくいってほしいところ...さっきの回答に続けて、この質問を送信しましたPHPのインストールのやり方を教えてください回答PHPのインストール方法は、使用しているオペレーティングシステムによって異なりますが、一般的な手順を以下に示します。Windowsの場合: PHPの公式サイト(https://windows.php.net/download/)から、使用しているWindowsに合わせたPHPのバージョンをダウンロードします。 ダウンロードしたファイルを解凍し、任意の場所に配置します。たとえば、C:\phpに配置することができます。 PHPを使用するWebサーバー(Apache、IISなど)をインストールして構成します。PHPをApacheに統合する場合は、PHPのインストールフォルダ内にあるphp.iniファイルをApacheの設定ファイルに追加する必要があります。 インストールが正常に完了したかどうかを確認するために、コマンドラインでphp -vを実行して、PHPのバージョンが表示されることを確認します。macOSの場合: Homebrewを使用してPHPをインストールすることができます。ターミナルで次のコマンドを実行します。 Copy code brew install php PHPが正常にインストールされたかどうかを確認するために、ターミナルでphp -vを実行して、PHPのバージョンが表示されることを確認します。Linuxの場合: システムのパッケージマネージャーを使用して、PHPをインストールすることができます。たとえば、Ubuntuの場合は、次のコマンドを実行します。 sqlCopy code sudo apt-get update sudo apt-get install php PHPが正常にインストールされたかどうかを確認するために、ターミナルでphp -vを実行して、PHPのバージョンが表示されることを確認します。これらは一般的な手順であり、環境によって異なる場合があります。また、Webサーバーに統合する必要がある場合は、Webサーバーの設定ファイルの変更が必要になる場合があります。使用しているOSによって インストールのやり方が変わってくるのですが、各OSでのphpのインストール方法を教えてくれました。私はwindowsを使っているので、一番最初のWindowsの場合で試してみましょう。それでは今回はこれくらいで、続きは次回やってみたいと思います!ではまた~次回の投稿もお楽しみに~

Read More

#2ChatGPTだけで素人が本当にプログラムを書けるのか検証してみた

こんにちは!プログラマーのますみです!今回はChatGPTだけで素人が本当にプログラムを書けるのか検証してみたの二回目の記事です!一回目の記事はこちらこの検証の条件は 私はプログラムの知識が皆無なものとする 私はChatGPTに説明してもらったプログラミング用語はその都度覚えて使うことができる 私が覚える用語はChatGPTの回答からのみで、Google等の検索エンジンは一切使わない作るものは下記の機能をもったブログとしました ブログ記事投稿 ブログ記事の一覧を表示 ブログ記事を表示それでは前回の続きの 要件の定義からやっていきます!一回目の記事の冒頭で ブログ記事投稿 ブログ記事の一覧を表示 ブログ記事を表示ができたら完成ということに決めたので、要件の定義はこれで充分!なのでブログ記事投稿ブログ記事の一覧を表示ブログ記事を表示ができるブログをプログラミングして作りたいと質問してみます!ChatGPTの回答はソースコードを書いてくれた...回答文が非常に長いので要約すると データベースの設計をする 記事の投稿フォームを作成 記事をデータベースに保存するための処理を作成 記事一覧ページを作成 記事詳細ページを作成をしてね、ということで、それぞれのページのソースコードを書いてくれました。データベースというのはデータを保存しておくところなんですが、保存するには下準備が必要でして、ChatGPTはその下準備をするためのソースコードを書いてくれましたCREATE TABLE posts ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, title VARCHAR(255) NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) );これをSQL文と呼んだりします後の部分は見た目とデータを保存する、ロードする部分が書かれていますね記事の投稿フォームはこんな感じ、sqlとphpで書いていく感じかな※ここにはブログの見た目のプログラムが書いてあったのですが、保存できない形式の文字だったので載せられませんでした...すごい...だけど...私は今プログラミングの知識が皆無ですからSQL文を書かれてもどうすればいいのかわからないのだなのでSQL文をどうすればいいのか質問してみましょう。CREATE TABLE posts ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, title VARCHAR(255) NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) );これはどうすればいいんですか?我ながら頭の悪そうな質問文ですねChatGPTの回答はこうですこれはMySQLのクエリ文で、postsテーブルを作成するためのものです。このクエリを実行するには、MySQLサーバーに接続してから、クエリを実行する必要があります。 MySQLサーバーに接続するMySQLサーバーに接続するには、以下のコマンドを実行します。cssCopy codemysql -u ユーザー名 -p ユーザー名には、MySQLに接続するためのユーザー名を指定します。このコマンドを実行すると、パスワードを要求されます。 データベースを作成する以下のコマンドを実行して、新しいデータベースを作成します。phpCopy codeCREATE DATABASE データベース名; データベース名には、作成するデータベースの名前を指定します。 データベースを選択する以下のコマンドを実行して、作成したデータベースを選択します。phpCopy codeUSE データベース名; テーブルを作成する最後に、以下のクエリを実行して、postsテーブルを作成します。sqlCopy codeCREATE TABLE posts ( id INT UNSIGNED NOT NULL AUTO_INCREMENT, title VARCHAR(255) NOT NULL, content TEXT NOT NULL, created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (id) ); これで、postsテーブルが作成されます。優しいよね...こんな雑な質問でも親身になって答えてくれるChatGPT...こんな検証に突き合わせてしまってごめんね...これには何が書かれているかといいますと、さっき少しだけお話ししたデータベースにはいろいろ種類があるのですが、その中の一種のMySQLというデータベースにまず接続して、回答の手順でプログラムを実行していくといいよ!ということが書いてあります。ところがMySQLは簡単に使えるものではなく、パソコンにインストールして面倒なセットアップを終わらせないと使えません。私は今プログラミングの知識が皆無ですし、パソコンもなんのセットアップが済んでいない想定で検証をしているので、MySQLのセットアップのやり方も教えてもらわないといけませんねですが、無知な私はMySQLにセットアップがいることすら知りません。なのでこんな質問にしてみましたMySQLサーバーってなんですか?先ほどの回答の中で、一番最初に目につく知らない用語はMySQLサーバーなので、自然にこの質問をすることになるんではないでしょうか回答はこちらMySQLサーバーは、データベースを管理するためのソフトウェアです。MySQLは、オープンソースのリレーショナルデータベース管理システムであり、多くのWebアプリケーションやサーバーサイドのアプリケーションで使用されています。MySQLサーバーは、MySQLクライアントからのリクエストを受け付け、データベースの操作を行います。MySQLクライアントは、コマンドラインツールやGUIツール、プログラムなどからアクセスできます。MySQLサーバーは、データベースの作成や削除、テーブルの作成や削除、レコードの挿入や更新、クエリの実行などの様々な操作を行うことができます。また、MySQLサーバーは、多数のユーザーやアクセス制御の設定なども行うことができます。なるほど、MySQLサーバーについて丁寧に教えてくれました。ですがこれでは肝心のブログ作成は進みませんので質問を少し変えてみますMySQLサーバーはどうやって起動しますか?ChatGPTの回答はこちらMySQLサーバーを起動する方法は、オペレーティングシステムによって異なりますが、一般的には以下の手順になります。 MySQLサーバーをインストールするまず、MySQLサーバーをインストールする必要があります。MySQLはオープンソースのため、公式サイトから無料でダウンロードできます。インストール手順はOSによって異なるため、MySQLの公式ドキュメントを参照してください。 MySQLサーバーを起動するMySQLサーバーを起動するには、OSによって異なる方法がありますが、一般的には以下のようになります。 LinuxやmacOSの場合:ターミナルを開いて、以下のコマンドを入力します。sudo systemctl start mysql Windowsの場合:コマンドプロンプトやPowerShellを開いて、以下のコマンドを入力します。net start mysql MySQLサーバーに接続するMySQLサーバーが起動したら、MySQLクライアントを使用してMySQLサーバーに接続することができます。一般的には、以下のコマンドを使用して接続します。mysql -u ユーザー名 -p ユーザー名には、MySQLに接続するためのユーザー名を指定します。このコマンドを実行すると、パスワードを要求されます。以上の手順でMySQLサーバーを起動し、接続することができます。この回答を要約すると、MySQLをパソコンにインストールして、セットアップが済んだらターミナルにこのコマンドを打つといいよと書いてありますねプログラミングの知識が皆無だったら、おそらくターミナル、コマンドという用語もなじみが薄いと思います。簡単に説明すると、ターミナルは映画でハッカーとかがいじってる黒い画面のアレです。コマンドは黒い画面のアレに打ち込む文字ですね簡単に説明しすぎ?なにはともあれ、まずはChatGPTの回答にあったMySQLサーバーをインストールするをやってみましょうそれでは今回はこの辺で!次回の記事もお楽しみに!

Read More

簡単に管理画面を作れるlaravel-adminのセットアップ方法を解説

こんにちは!エンジニアのますみです!本日はlaravel-adminのセットアップのやり方を解説します!laravel-adminとは PHPフレームワーク『Laravel』用の管理画面用ライブラリ 管理人用テーブル、管理画面のレイアウト、CRUDが一瞬で作れる リレーションにも対応した便利なフォームが既に準備されているlaravel-adminの公式ドキュメントはこちら目次 インストール コマンドで管理人のアカウントを作成する Modelから管理画面を作成する 管理画面にログインしてルーティングの設定を完了するインストールcomposerを使ってインストールしますcomposer require encore/laravel-admin:1.*インストールが完了したら以下のコマンドを実行しますphp artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"configディレクトリ内にadmin.phpが作成されます。admin.phpを編集して管理画面に関する様々な設定を行うことができます。その後、以下のコマンドを実行してセットアップを完了しますphp artisan admin:installこのコマンドを実行するとapp/Adminapp/Admin/Controllers/HomeController.php app/Admin/Controllers/AuthController.php app/Admin/Controllers/ExampleController.phpapp/Admin/bootstrap.phpapp/Admin/routes.phpが作成されます。特に編集することが多いのはapp/Admin/routes.phpです。このファイルを編集してテーブルごとのルーティングを定義します。app/Admin/Controllers/ExampleController.phpはサンプルとして作成されるだけなので消してしまっても良いです。コマンドで管理人のアカウントを作成する以下のコマンドを実行すると管理人アカウントを作成できます。php artisan admin:create順番にユーザーネーム、パスワード、名前を聞かれるので入力していきます。 Please enter a username to login: ますみ Please enter a password to login: Please enter a name to display: ますみこのように表示されたら完了です。User [ますみ] created successfully.http://localhost:8000/adminにアクセスして、先ほど設定したusernameとpasswordを入力してログインできます。管理画面ダッシュボードはこんな感じです。Modelから管理画面を作成するlarave-adminはadmin:makeコマンドを使用して管理画面を作成できます。php artisan admin:make 作成するコントローラー名 --model=モデルのパス例えばこのようなモデルがあったなら?phpnamespace App\Models;use Illuminate\Database\Eloquent\Factories\HasFactory;use Illuminate\Database\Eloquent\Model;class Blog extends Model{ use HasFactory; protected $fillable = [ 'title', 'text' ];}こんな感じでBlogモデルの管理画面を作成できます。php artisan admin:make BlogController --model=App\\Models\\Bloglaravel-adminは自動でテーブルのカラムを読み込み管理画面を設定してくれますが、マイグレーションを行う前に上記のコマンドを実行してしまうと、空のコントローラーが作成されてしまいます。ターミナルには親切にapp/Admin/routes.phpにこのコードを追加してねと表示されると思います。INFO App\Admin\Controllers\BlogController [C:\Users\mashmy\laravel-admin\app/Admin/Controllers/BlogController.php] created successfully.Add the following route to app/Admin/routes.php: $router-resource('blogs', BlogController::class);app/Admin/routes.phpに上記のソースコードを追加しないと、作成したBlog用管理画面にアクセスできません。app/Admin/routes.php?phpuse Illuminate\Routing\Router;Admin::routes();Route::group([ 'prefix' = config('admin.route.prefix'), 'namespace' = config('admin.route.namespace'), 'middleware' = config('admin.route.middleware'), 'as' = config('admin.route.prefix') . '.',], function (Router $router) { $router-get('/', 'HomeController@index')-name('home'); $router-resource('blogs', BlogController::class);});このようにルーティングの設定をします。コントローラーを作成するたびにapp/Admin/routes.phpを編集してルーティングの設定を行っていきます。作成されたコントローラーはこんな感じで、カラムを自動で読み込みセットアップしてくれています。?phpnamespace App\Admin\Controllers;use App\Models\Blog;use Encore\Admin\Controllers\AdminController;use Encore\Admin\Form;use Encore\Admin\Grid;use Encore\Admin\Show;class BlogController extends AdminController{ /** * Title for current resource. * * @var string */ protected $title = 'Blog'; /** * Make a grid builder. * * @return Grid */ protected function grid() { $grid = new Grid(new Blog()); $grid-column('id', __('Id')); $grid-column('title', __('Title')); $grid-column('text', __('Text')); $grid-column('created_at', __('Created at')); $grid-column('updated_at', __('Updated at')); return $grid; } /** * Make a show builder. * * @param mixed $id * @return Show */ protected function detail($id) { $show = new Show(Blog::findOrFail($id)); $show-field('id', __('Id')); $show-field('title', __('Title')); $show-field('text', __('Text')); $show-field('created_at', __('Created at')); $show-field('updated_at', __('Updated at')); return $show; } /** * Make a form builder. * * @return Form */ protected function form() { $form = new Form(new Blog()); $form-text('title', __('Title')); $form-textarea('text', __('Text')); return $form; }}このままではブログの管理画面にはアクセスできません。管理画面から作成した管理ページを表示するための設定を行う必要があります。管理画面にログインしてルーティングの設定を完了する管理画面にログインしたら画面左側のメニューからMenuをクリックします。表示された画面で先ほどコマンドで作成したBlog用管理画面へのルーティングを設定します。Parentはメニューのどこに表示するかを指定できます。ROOTにした場合は左側のメニューバーにそのまま表示されます。この状態で例えばAdminを設定すると、メニューバーのAdmin内のリストに追加されます。Titleは好きな名前で大丈夫ですが、URLはテーブル名を指定する必要があります。今回はParentにROOTを指定したので、メニューバーにアイコンが追加されました。作成されたアイコンをクリックまたはマウスカーソルを当てると、指定したタイトルのボタンが表示されます。今回はTitleはブログと指定したのでブログと表示されます。ボタンをクリックするとブログ用の管理画面にアクセスできました。右上のNewボタンをクリックすると編集画面にアクセスできます。編集画面は既にTitleとText用のフォームが自動で設定されています。素晴らしい...データを保存する処理も自動でやってくれているので、このまま編集してSubmitをクリックすれば入力したデータがデータベースに保存できます。おしまいこんな感じで簡単に管理画面のセットアップができました!Laravelの管理画面用ライブラリの中では有名なものだと思っているのですが、意外と記事が無かったので解説記事を書いてみました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

Read More

文字が一文字ずつ現れるアニメーションの作り方【HTML、CSS】

こんにちは!エンジニアのますみです!本日はCSSで作れる文字が一文字ずつ表れるアニメーションの作り方とサンプルを紹介します!目次 一文字ずつペラペラ現れるアニメーション 文字が下からスライドして現れる 文字が上からふわっと降ってくる 一文字ずつ横からスライドして現れるそれではさっそく見ていきましょう一文字ずつペラペラ現れるアニメーションS a m p l e T e x t再生HTMLdiv span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: text-animation 0.8s forwards; transform: rotateY(90deg);}@keyframes text-animation { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); }}@keyframesはCSSでアニメーションを定義できるプロパティです。transformと:hoverや:focus等の疑似クラスの組み合わせでもアニメーションは作成可能ですが、@keyframesは より複雑なアニメーションが作れる マウスホバーやフォーカス等の操作に関係なくアニメーションをスタートできるといったメリットがあります。Sample Textという文字を一文字ずつspanで区切り、文字ごとにアニメーションをスタートするタイミングを変えることで順番に文字が現れるアニメーションを作ることができます。文字が下からスライドして現れる再生HTMLdiv class="container" span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.container { overflow: hidden;}.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: llfsdi-text-animation 0.8s forwards; transform: translateY(3rem);}@keyframes text-animation { 0% { transform: translateY(3rem); } 100% { transform: translateY(0rem); }}基本的な部分は先ほどと同様、@keyframesとanimation-delayによるアニメーション開始時間の調整で作ることができます。親要素にoverflow : hiddenを指定して、文字が下の方にいる時に表示されないようにします。文字が上からふわっと降ってくる再生HTMLdiv span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: llfsdi-text-animation 0.8s forwards; transform: translateY(-1rem); opacity: 0;}@keyframes text-animation { 0% { opacity: 0; transform: translateY(-1rem); } 100% { opacity: 1; transform: translateY(0rem); }}こちらのサンプルでは透明度を調整するopacityも追加しました。他のアニメーションにもopacityを追加するとふわっと現れるアニメーションになります。お好みでカスタマイズしてみてください。一文字ずつ横からスライドして現れる再生HTMLdiv span class='text'span style="animation-delay: 0s"S/span/span span class='text'span style="animation-delay: 0.2s"a/span/span span class='text'span style="animation-delay: 0.4s"m/span/span span class='text'span style="animation-delay: 0.6s"p/span/span span class='text'span style="animation-delay: 0.8s"l/span/span span class='text'span style="animation-delay: 1s"e/span/span span class='text'span style="animation-delay: 1.2s" /span/span span class='text'span style="animation-delay: 1.4s"T/span/span span class='text'span style="animation-delay: 1.6s"e/span/span span class='text'span style="animation-delay: 1.8s"x/span/span span class='text'span style="animation-delay: 2s"t/span/span/divCSS.text-container { overflow: hidden;}.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; overflow: hidden;}.text span{ display: block; animation: llfsdij1-text-animation 0.8s forwards; transform: translateX(-2rem);}@keyframes text-animation { 0% { opacity: 0; transform: translateX(-1rem); } 100% { opacity: 1; transform: translateX(0rem); }}一文字ずつ横スライドして現れるように見せるには、HTMLも修正する必要があります。テキストをさらに一階層深い要素にし、テキストの親要素にoverflow : hiddenを指定してテキストが横から現れて見えるようにする必要があります。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

Read More

Laravelのページネーションを自分でデザインする

こんにちは!エンジニアのますみです!本日はLaravelのページネーションを自分でデザイン、カスタマイズする方法を解説します!目次 まずは普通に表示 Viewテンプレートを変更する アプリ全体のページネーション用Viewテンプレートを変更する 自作のページネーション用Viewテンプレートを編集する テンプレートを自分でデザインする際に重要なプロパティ一覧 $paginator-hasPages() $paginator-onFirstPage() $paginator-currentPage() $paginator-lastPage() $paginator-perPage() $paginator-total() $paginator-count() $paginator-firstItem() $paginator-lastItem() $paginator-hasMorePages() $paginator-nextPageUrl() $paginator-previousPageUrl() デフォルトのテンプレートをアレンジして使うまずは普通に表示div {{ $collection-paginate(24)-links() }}/divLaravelはデフォルトでtailwindcssのテンプレートを使用しています。とりあえず表示させたいのであればCDNをヘッダーに追加して確認してみてください。https://tailwindcss.com/head script src="https://cdn.tailwindcss.com"/script/headこんな感じで表示されたらOKです。Viewテンプレートを変更するlinks()のかっこの中にViewテンプレートのパスを指定します。resources/views/components/paginate.blade.phpにテンプレートを作成した場合はcomponents.paginateをかっこの中に書きます。div {{ $collection-paginate(24)-links('components.paginate') }}/divこれでページネーションのテンプレートが指定したbladeファイルに置き換わります。アプリ全体のページネーション用Viewテンプレートを変更する上の書き方は、bladeファイルごとにページネーション用Viewテンプレートを指定できます。もしページごとにページネーションのテンプレートを変える必要がなく、統一してもよいのであれば、app/Providers/AppServicePrivider.phpを編集してアプリ全体のページネーション用Viewテンプレートを変更しておきましょう。app/Providers/AppServicePrivider.php?phpnamespace App\Providers;use Illuminate\Pagination\Paginator; // 追加use Illuminate\Support\ServiceProvider;class AppServiceProvider extends ServiceProvider{ /** * Register any application services. * * @return void */ public function register() { // } /** * Bootstrap any application services. * * @return void */ public function boot() { Paginator::defaultView('components.paginate'); // 追加 }}自作のページネーション用Viewテンプレートを編集するViewテンプレートには、ページ送りに関する情報が$paginaterに格納されて送られます。blade上で@dump($paginator)とするとプロパティを見ることができます。テンプレートを自分でデザインする際に重要なプロパティを解説します。テンプレートを自分でデザインする際に重要なプロパティ一覧$paginator-hasPages()コレクションの要素数がpaginate(数値)の数値以上あり、ページ送りをする必要があるかをbooleanで返します。基本的には1ページ目にすべてのデータを表示できたらページネーションボタンを表示する必要はないため、ページネーションボタンを表示するかどうかを判定するのに使えます。使用例@if ($paginator-hasPages()) {{-- ここにページネーションボタンを作成 --}}@endif$paginator-onFirstPage()現在のページが最初のページかどうかをbooleanで返します。最初のページにいる場合は、前のページのリンクを無効にする必要があるためこのプロパティを使用して判定することができます。使用例@if ($paginator-onFirstPage()) span戻る/span@else a href="{{ $paginator-previousPageUrl() }}"戻る/a@endif$paginator-currentPage()現在のページの番号を返します。使用例span{{ $paginator-currentPage() }}ページ目/span$paginator-lastPage()最後のページの番号を返します。使用例span{{$paginator-lastPage()}}ページ中{{ $paginator-currentPage() }}ページ目です/span$paginator-perPage()1ページあたりの表示件数を返します。使用例span{{$paginator-perPage()}}件ずつ表示/span$paginator-total()コレクションの総数を返します。使用例span全{{$paginator-total()}}件/span$paginator-count()現在のページに表示される要素数を返します。使用例span{{$paginator-count()}}件表示/span$paginator-firstItem()現在のページの最初の要素の番号を返します。使用例span{{$paginator-firstItem()}}~{{ $paginator-lastItem() }}を表示しています/span$paginator-lastItem()現在のページの最後の要素の番号を返します。使用例span{{$paginator-firstItem()}}~{{ $paginator-lastItem() }}を表示しています/span$paginator-hasMorePages()現在のページが最後のページではない場合、つまり次のページがある場合にtrueを返します。最後のページにいる場合は、次のページのリンクを無効にする必要があるためこのプロパティを使用して判定することができます。使用例@if($paginator-hasMorePage()) ​a href="{{ $paginator-nextPageUrl() }}"次へ/a@endif$paginator-nextPageUrl()次のページのURLを返します。使用例​a href="{{ $paginator-nextPageUrl() }}"次へ/a$paginator-previousPageUrl()前のページのURLを返します。使用例 a href="{{ $paginator-previousPageUrl() }}"戻る/aデフォルトのテンプレートをアレンジして使うphp artisan vendor:publish --tag=laravel-paginationこのコマンドを実行すると、resources/views/vendor/pagination/にLaravelのデフォルトのテンプレートが作成されます。resources/views/vendor/pagination/ default.blade.php simple-default.blade.php bootstrap-5.blade.php simple-bootstrap-5.blade.php bootstrap-4.blade.php simple-bootstrap-4.blade.php tailwind.blade.php simple-tailwind.blade.php semantic-ui.blade.php bulma.blade.php生成されたテンプレートは、既にページ数に応じたボタンの無効化判定などがされており、これを元にアレンジして使うのもおすすめです。最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

Read More

人気記事


簡単に管理画面を作れるlaravel-adminのセットアップ方法を解説

こんにちは!エンジニアのますみです!本日はlaravel-adminのセットアップのやり方を解説します!laravel-adminとは PHPフレームワーク『Laravel』用の管理画面用ライブラリ 管理人用テーブル、管理画面のレイアウト、CRUDが一瞬で作れる リレーションにも対応した便利なフォームが既に準備されているlaravel-adminの公式ドキュメントはこちら目次 インストール コマンドで管理人のアカウントを作成する Modelから管理画面を作成する 管理画面にログインしてルーティングの設定を完了するインストールcomposerを使ってインストールしますcomposer require encore/laravel-admin:1.*インストールが完了したら以下のコマンドを実行しますphp artisan vendor:publish --provider="Encore\Admin\AdminServiceProvider"configディレクトリ内にadmin.phpが作成されます。admin.phpを編集して管理画面に関する様々な設定を行うことができます。その後、以下のコマンドを実行してセットアップを完了しますphp artisan admin:installこのコマンドを実行するとapp/Adminapp/Admin/Controllers/HomeController.php app/Admin/Controllers/AuthController.php app/Admin/Controllers/ExampleController.phpapp/Admin/bootstrap.phpapp/Admin/routes.phpが作成されます。特に編集することが多いのはapp/Admin/routes.phpです。このファイルを編集してテーブルごとのルーティングを定義します。app/Admin/Controllers/ExampleController.phpはサンプルとして作成されるだけなので消してしまっても良いです。コマンドで管理人のアカウントを作成する以下のコマンドを実行すると管理人アカウントを作成できます。php artisan admin:create順番にユーザーネーム、パスワード、名前を聞かれるので入力していきます。 Please enter a username to login: ますみ Please enter a password to login: Please enter a name to display: ますみこのように表示されたら完了です。User [ますみ] created successfully.http://localhost:8000/adminにアクセスして、先ほど設定したusernameとpasswordを入力してログインできます。管理画面ダッシュボードはこんな感じです。Modelから管理画面を作成するlarave-adminはadmin:makeコマンドを使用して管理画面を作成できます。php artisan admin:make 作成するコントローラー名 --model=モデルのパス例えばこのようなモデルがあったなら?phpnamespace App\Models;use Illuminate\Database\Eloquent\Factories\HasFactory;use Illuminate\Database\Eloquent\Model;class Blog extends Model{ use HasFactory; protected $fillable = [ 'title', 'text' ];}こんな感じでBlogモデルの管理画面を作成できます。php artisan admin:make BlogController --model=App\\Models\\Bloglaravel-adminは自動でテーブルのカラムを読み込み管理画面を設定してくれますが、マイグレーションを行う前に上記のコマンドを実行してしまうと、空のコントローラーが作成されてしまいます。ターミナルには親切にapp/Admin/routes.phpにこのコードを追加してねと表示されると思います。INFO App\Admin\Controllers\BlogController [C:\Users\mashmy\laravel-admin\app/Admin/Controllers/BlogController.php] created successfully.Add the following route to app/Admin/routes.php: $router-resource('blogs', BlogController::class);app/Admin/routes.phpに上記のソースコードを追加しないと、作成したBlog用管理画面にアクセスできません。app/Admin/routes.php?phpuse Illuminate\Routing\Router;Admin::routes();Route::group([ 'prefix' = config('admin.route.prefix'), 'namespace' = config('admin.route.namespace'), 'middleware' = config('admin.route.middleware'), 'as' = config('admin.route.prefix') . '.',], function (Router $router) { $router-get('/', 'HomeController@index')-name('home'); $router-resource('blogs', BlogController::class);});このようにルーティングの設定をします。コントローラーを作成するたびにapp/Admin/routes.phpを編集してルーティングの設定を行っていきます。作成されたコントローラーはこんな感じで、カラムを自動で読み込みセットアップしてくれています。?phpnamespace App\Admin\Controllers;use App\Models\Blog;use Encore\Admin\Controllers\AdminController;use Encore\Admin\Form;use Encore\Admin\Grid;use Encore\Admin\Show;class BlogController extends AdminController{ /** * Title for current resource. * * @var string */ protected $title = 'Blog'; /** * Make a grid builder. * * @return Grid */ protected function grid() { $grid = new Grid(new Blog()); $grid-column('id', __('Id')); $grid-column('title', __('Title')); $grid-column('text', __('Text')); $grid-column('created_at', __('Created at')); $grid-column('updated_at', __('Updated at')); return $grid; } /** * Make a show builder. * * @param mixed $id * @return Show */ protected function detail($id) { $show = new Show(Blog::findOrFail($id)); $show-field('id', __('Id')); $show-field('title', __('Title')); $show-field('text', __('Text')); $show-field('created_at', __('Created at')); $show-field('updated_at', __('Updated at')); return $show; } /** * Make a form builder. * * @return Form */ protected function form() { $form = new Form(new Blog()); $form-text('title', __('Title')); $form-textarea('text', __('Text')); return $form; }}このままではブログの管理画面にはアクセスできません。管理画面から作成した管理ページを表示するための設定を行う必要があります。管理画面にログインしてルーティングの設定を完了する管理画面にログインしたら画面左側のメニューからMenuをクリックします。表示された画面で先ほどコマンドで作成したBlog用管理画面へのルーティングを設定します。Parentはメニューのどこに表示するかを指定できます。ROOTにした場合は左側のメニューバーにそのまま表示されます。この状態で例えばAdminを設定すると、メニューバーのAdmin内のリストに追加されます。Titleは好きな名前で大丈夫ですが、URLはテーブル名を指定する必要があります。今回はParentにROOTを指定したので、メニューバーにアイコンが追加されました。作成されたアイコンをクリックまたはマウスカーソルを当てると、指定したタイトルのボタンが表示されます。今回はTitleはブログと指定したのでブログと表示されます。ボタンをクリックするとブログ用の管理画面にアクセスできました。右上のNewボタンをクリックすると編集画面にアクセスできます。編集画面は既にTitleとText用のフォームが自動で設定されています。素晴らしい...データを保存する処理も自動でやってくれているので、このまま編集してSubmitをクリックすれば入力したデータがデータベースに保存できます。おしまいこんな感じで簡単に管理画面のセットアップができました!Laravelの管理画面用ライブラリの中では有名なものだと思っているのですが、意外と記事が無かったので解説記事を書いてみました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

Read More

文字が一文字ずつ現れるアニメーションの作り方【HTML、CSS】

こんにちは!エンジニアのますみです!本日はCSSで作れる文字が一文字ずつ表れるアニメーションの作り方とサンプルを紹介します!目次 一文字ずつペラペラ現れるアニメーション 文字が下からスライドして現れる 文字が上からふわっと降ってくる 一文字ずつ横からスライドして現れるそれではさっそく見ていきましょう一文字ずつペラペラ現れるアニメーションS a m p l e T e x t再生HTMLdiv span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: text-animation 0.8s forwards; transform: rotateY(90deg);}@keyframes text-animation { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0deg); }}@keyframesはCSSでアニメーションを定義できるプロパティです。transformと:hoverや:focus等の疑似クラスの組み合わせでもアニメーションは作成可能ですが、@keyframesは より複雑なアニメーションが作れる マウスホバーやフォーカス等の操作に関係なくアニメーションをスタートできるといったメリットがあります。Sample Textという文字を一文字ずつspanで区切り、文字ごとにアニメーションをスタートするタイミングを変えることで順番に文字が現れるアニメーションを作ることができます。文字が下からスライドして現れる再生HTMLdiv class="container" span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.container { overflow: hidden;}.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: llfsdi-text-animation 0.8s forwards; transform: translateY(3rem);}@keyframes text-animation { 0% { transform: translateY(3rem); } 100% { transform: translateY(0rem); }}基本的な部分は先ほどと同様、@keyframesとanimation-delayによるアニメーション開始時間の調整で作ることができます。親要素にoverflow : hiddenを指定して、文字が下の方にいる時に表示されないようにします。文字が上からふわっと降ってくる再生HTMLdiv span class='text' style="animation-delay: 0s"S/span span class='text' style="animation-delay: 0.2s"a/span span class='text' style="animation-delay: 0.4s"m/span span class='text' style="animation-delay: 0.6s"p/span span class='text' style="animation-delay: 0.8s"l/span span class='text' style="animation-delay: 1s"e/span span class='text' style="animation-delay: 1.2s" /span span class='text' style="animation-delay: 1.4s"T/span span class='text' style="animation-delay: 1.6s"e/span span class='text' style="animation-delay: 1.8s"x/span span class='text' style="animation-delay: 2s"t/span/divCSS.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; letter-spacing: -0.15rem; animation: llfsdi-text-animation 0.8s forwards; transform: translateY(-1rem); opacity: 0;}@keyframes text-animation { 0% { opacity: 0; transform: translateY(-1rem); } 100% { opacity: 1; transform: translateY(0rem); }}こちらのサンプルでは透明度を調整するopacityも追加しました。他のアニメーションにもopacityを追加するとふわっと現れるアニメーションになります。お好みでカスタマイズしてみてください。一文字ずつ横からスライドして現れる再生HTMLdiv span class='text'span style="animation-delay: 0s"S/span/span span class='text'span style="animation-delay: 0.2s"a/span/span span class='text'span style="animation-delay: 0.4s"m/span/span span class='text'span style="animation-delay: 0.6s"p/span/span span class='text'span style="animation-delay: 0.8s"l/span/span span class='text'span style="animation-delay: 1s"e/span/span span class='text'span style="animation-delay: 1.2s" /span/span span class='text'span style="animation-delay: 1.4s"T/span/span span class='text'span style="animation-delay: 1.6s"e/span/span span class='text'span style="animation-delay: 1.8s"x/span/span span class='text'span style="animation-delay: 2s"t/span/span/divCSS.text-container { overflow: hidden;}.text { display: inline-block; font-size: 2rem; font-family: "Ryumin ExtraBold KL"; overflow: hidden;}.text span{ display: block; animation: llfsdij1-text-animation 0.8s forwards; transform: translateX(-2rem);}@keyframes text-animation { 0% { opacity: 0; transform: translateX(-1rem); } 100% { opacity: 1; transform: translateX(0rem); }}一文字ずつ横スライドして現れるように見せるには、HTMLも修正する必要があります。テキストをさらに一階層深い要素にし、テキストの親要素にoverflow : hiddenを指定してテキストが横から現れて見えるようにする必要があります。最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

Read More

Laravelのページネーションを自分でデザインする

こんにちは!エンジニアのますみです!本日はLaravelのページネーションを自分でデザイン、カスタマイズする方法を解説します!目次 まずは普通に表示 Viewテンプレートを変更する アプリ全体のページネーション用Viewテンプレートを変更する 自作のページネーション用Viewテンプレートを編集する テンプレートを自分でデザインする際に重要なプロパティ一覧 $paginator-hasPages() $paginator-onFirstPage() $paginator-currentPage() $paginator-lastPage() $paginator-perPage() $paginator-total() $paginator-count() $paginator-firstItem() $paginator-lastItem() $paginator-hasMorePages() $paginator-nextPageUrl() $paginator-previousPageUrl() デフォルトのテンプレートをアレンジして使うまずは普通に表示div {{ $collection-paginate(24)-links() }}/divLaravelはデフォルトでtailwindcssのテンプレートを使用しています。とりあえず表示させたいのであればCDNをヘッダーに追加して確認してみてください。https://tailwindcss.com/head script src="https://cdn.tailwindcss.com"/script/headこんな感じで表示されたらOKです。Viewテンプレートを変更するlinks()のかっこの中にViewテンプレートのパスを指定します。resources/views/components/paginate.blade.phpにテンプレートを作成した場合はcomponents.paginateをかっこの中に書きます。div {{ $collection-paginate(24)-links('components.paginate') }}/divこれでページネーションのテンプレートが指定したbladeファイルに置き換わります。アプリ全体のページネーション用Viewテンプレートを変更する上の書き方は、bladeファイルごとにページネーション用Viewテンプレートを指定できます。もしページごとにページネーションのテンプレートを変える必要がなく、統一してもよいのであれば、app/Providers/AppServicePrivider.phpを編集してアプリ全体のページネーション用Viewテンプレートを変更しておきましょう。app/Providers/AppServicePrivider.php?phpnamespace App\Providers;use Illuminate\Pagination\Paginator; // 追加use Illuminate\Support\ServiceProvider;class AppServiceProvider extends ServiceProvider{ /** * Register any application services. * * @return void */ public function register() { // } /** * Bootstrap any application services. * * @return void */ public function boot() { Paginator::defaultView('components.paginate'); // 追加 }}自作のページネーション用Viewテンプレートを編集するViewテンプレートには、ページ送りに関する情報が$paginaterに格納されて送られます。blade上で@dump($paginator)とするとプロパティを見ることができます。テンプレートを自分でデザインする際に重要なプロパティを解説します。テンプレートを自分でデザインする際に重要なプロパティ一覧$paginator-hasPages()コレクションの要素数がpaginate(数値)の数値以上あり、ページ送りをする必要があるかをbooleanで返します。基本的には1ページ目にすべてのデータを表示できたらページネーションボタンを表示する必要はないため、ページネーションボタンを表示するかどうかを判定するのに使えます。使用例@if ($paginator-hasPages()) {{-- ここにページネーションボタンを作成 --}}@endif$paginator-onFirstPage()現在のページが最初のページかどうかをbooleanで返します。最初のページにいる場合は、前のページのリンクを無効にする必要があるためこのプロパティを使用して判定することができます。使用例@if ($paginator-onFirstPage()) span戻る/span@else a href="{{ $paginator-previousPageUrl() }}"戻る/a@endif$paginator-currentPage()現在のページの番号を返します。使用例span{{ $paginator-currentPage() }}ページ目/span$paginator-lastPage()最後のページの番号を返します。使用例span{{$paginator-lastPage()}}ページ中{{ $paginator-currentPage() }}ページ目です/span$paginator-perPage()1ページあたりの表示件数を返します。使用例span{{$paginator-perPage()}}件ずつ表示/span$paginator-total()コレクションの総数を返します。使用例span全{{$paginator-total()}}件/span$paginator-count()現在のページに表示される要素数を返します。使用例span{{$paginator-count()}}件表示/span$paginator-firstItem()現在のページの最初の要素の番号を返します。使用例span{{$paginator-firstItem()}}~{{ $paginator-lastItem() }}を表示しています/span$paginator-lastItem()現在のページの最後の要素の番号を返します。使用例span{{$paginator-firstItem()}}~{{ $paginator-lastItem() }}を表示しています/span$paginator-hasMorePages()現在のページが最後のページではない場合、つまり次のページがある場合にtrueを返します。最後のページにいる場合は、次のページのリンクを無効にする必要があるためこのプロパティを使用して判定することができます。使用例@if($paginator-hasMorePage()) ​a href="{{ $paginator-nextPageUrl() }}"次へ/a@endif$paginator-nextPageUrl()次のページのURLを返します。使用例​a href="{{ $paginator-nextPageUrl() }}"次へ/a$paginator-previousPageUrl()前のページのURLを返します。使用例 a href="{{ $paginator-previousPageUrl() }}"戻る/aデフォルトのテンプレートをアレンジして使うphp artisan vendor:publish --tag=laravel-paginationこのコマンドを実行すると、resources/views/vendor/pagination/にLaravelのデフォルトのテンプレートが作成されます。resources/views/vendor/pagination/ default.blade.php simple-default.blade.php bootstrap-5.blade.php simple-bootstrap-5.blade.php bootstrap-4.blade.php simple-bootstrap-4.blade.php tailwind.blade.php simple-tailwind.blade.php semantic-ui.blade.php bulma.blade.php生成されたテンプレートは、既にページ数に応じたボタンの無効化判定などがされており、これを元にアレンジして使うのもおすすめです。最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

Read More