【ブログ一覧】 - ますみのブログ

ますみのブログ

パソコンとかプログラミングに関するあれこれ発信してます
人気記事
人気記事

簡単に管理画面を作れる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それでは次の投稿もお楽しみに!

2023年04月22日

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それでは次の投稿もお楽しみに!

2023年04月22日

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それでは次の投稿もお楽しみに!

2023年05月01日

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それでは次の投稿もお楽しみに!

2023年04月25日

Read More

【サンプルあり】コピペOK!丸を使ったボタンのホバーアニメーション

こんにちは!エンジニアのますみです!先日は四角いデザインの背景色が濃いときに使いたいボタンデザインを紹介しましたので、今回は丸をテーマにやってみたいと思います!丸いボタンはアニメーションの選択肢が増えるメリットがあるので、思わず目を引くアニメーションでクリック率を上げることができるのがいいですね!ただ、配置をしっかり考えないとおさまりが悪くなってしまうので、サイト全体のレイアウトに合うように四角いボタンと使い分けてみてください!紹介するソースコードはコピペで自由に使っていただいて大丈夫です!なのですがTwitterのリプライとかで一言いただけると今後の励みになります!『使いました!』って言ってもらえたらすごく嬉しいので、よろしくお願いします!1. くるっと回転丸いボタンのメリットは回転させても違和感が少ないところですね!transform: rotate(360deg)として、時計回りに一回転するアニメーションです!BUTTON.button { width: 6rem; height: 6rem; display: flex; justify-content: center; align-items: center; border: 1px solid gray; border-radius: 3rem; background-color: white; color: #ff7473; font-weight: bold; cursor: pointer; transition: 0.6s;}.button:hover { transform: rotate(360deg);}2. ころころ転がる矢印矢印がころころと、下線を引きながら転がっていくアニメーションです!矢印を画像等に置き換えたりして、好みの矢印のデザインにしてもいいですね!BUTTON.button { position: relative; display: flex; align-items: center; color: white; cursor: pointer;}.button span { margin-left: 1.6rem;}.button::before { content: "→"; position: absolute; left: -10%; display: flex; justify-content: center; align-items: center; width: 1.6rem; height: 1.6rem; border-radius: 0.8rem; color: #ffc952; background-color: white; transition-duration: 1.5s;}.button:hover::before { transition-duration: 1s; transform: rotate(720deg); left: 110%;}.button::after { content: ""; position: absolute; left: 1.6rem; bottom: 0; width: 0; height: 2px; background-color: white; transition-duration: 1s; transition-delay: 0s;}.button:hover::after { width: calc(100% - 1.6rem); transition-delay: 0.1s;}3. 強調したい箇所に使いたい目を引くアニメーションぶわっと広がるように見えるアニメーションです!要素の大きさ自体は変わっていないので、周りの要素に影響を与えないのが◎主張が激しいので使いすぎると目がチカチカしますからほどほどに~BUTTON BUTTON BUTTON.button { width: 6rem; height: 6rem; background-color: white; border-radius: 50%; color: #47b8e0; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; font-weight: bold;}.button .inner-1,.button .inner-2 { position: absolute; overflow: hidden; display: flex; justify-content: center; align-items: center; font-weight: bold;}.button .inner-1 { width: 0%; height: 0%; background-color: #47b8e0; border-radius: 50%; color: white; z-index: 10; transition: 0.3s;}.button .inner-2 { width: 0%; height: 0%; background-color: white; border-radius: 50%; color: #47b8e0; z-index: 20; transition-delay: 0.15s; transition-duration: 0.3s;}.button:hover .inner-1,.button:hover .inner-2 { width: 100%; height: 100%;}4. 角から色が変わるエフェクト四角いパターンはこちらの記事で紹介しましたが、今回は丸のバージョンです!円の中心を角に合わせないとおかしなことになってしまうので、アニメーションで円を拡大しながら中央を角に合わせる工夫が必要です!角に丸がちょこっとあるのがかわいくてお気に入りのデザインです!BUTTON.button{ padding: 0.4rem 2rem; color: white; font-weight: bold; border: 1px solid white; position: relative; cursor: pointer; z-index: 1; transition: 0.4s; overflow: hidden;}.button:hover{ color: #34314c;}.button::before{ content: ""; width: 2rem; height: 2rem; left: -1rem; top: -1rem; background-color: white; position: absolute; z-index: -1; transition: 0.4s; border-radius: 50%;}.button:hover::before{ width: 12rem; height: 12rem; left: -6rem; top: -6rem;}.button::after{ content: ""; width: 2rem; height: 2rem; right: -1rem; bottom: -1rem; background-color: white; position: absolute; z-index: -1; transition: 0.4s; border-radius: 50%;}.button:hover::after{ width: 12rem; height: 12rem; right: -6rem; bottom: -6rem;}最後まで見ていただきありがとうございます!丸い形のメリットを生かしたアニメーションを考えてみました!CSSについてこんなことを記事にしてほしい!等ありましたら、Twitterのコメントなどで教えてください!それでは次の記事もお楽しみに!

2023年04月19日

Read More

Laravelのmake:migrationでテーブル名を指定して作成する方法

こんにちは!エンジニアのますみです!本日はLaravelのmake:migrationコマンドを実行するときに、テーブル名をあらかじめ指定しておく方法を解説します!覚えておくとちょっと便利!目次 テーブルを新しく作る場合(Schema::create) マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成される コマンドを追加してテーブル名を指定することもできる テーブルをアップデートする場合(Schema::table) マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成される コマンドを追加してテーブル名を指定することもできるそれではさっそく見ていきましょうテーブルを新しく作る場合(Schema::create)コマンドを打ち込んだだけでこのようなusersテーブルを作るひな形が生成されている状態にしていきます。public function up(){ Schema::create('users', function (Blueprint $table) { $table-id(); $table-timestamps(); });}マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成されるたとえばこのようにコマンドを入力すると自動でテーブル名付きのひな形が生成されますphp artisan make:migration create_usersマイグレーションファイル名がcreate_から始まる場合は自動でテーブル名を読み取り、Laravelがひな形を作ってくれます。ちなみにcreateUsersのようにキャメルケースでファイル名を指定してもひな形が生成されます。php artisan make:migration createUsersパスカルケース(CreateUsers)でもひな形が生成されます。php artisan make:migration CreateUsersケバブケース(create-users)ではひな形は生成されませんでした。php artisan make:migration create-usersこの項目のまとめ createからファイル名が始まることが条件 〇 スネークケース(create_users)ではひな形が生成される 〇 キャメルケース(createUsers)ではひな形が生成される 〇 パスカルケース(CreateUsers)ではひな形が生成される ケバブケース(create-users)ではひな形は生成されないコマンドを追加してテーブル名を指定することもできる通常このようにコマンドを打つとひな形は生成されませんがphp artisan make:migration usersこのように--create=テーブル名とするとひな形が追加されます。php artisan make:migration users --create=usersこの項目のまとめ --create=テーブル名をコマンドに追加でひな形が生成できるテーブルをアップデートする場合(Schema::table)public function up(){ Schema::table('users', function (Blueprint $table) { // });}テーブルを更新する場合はこのようなひな形を作ります。マイグレーションファイル名によっては自動でテーブル名付きのひな形が生成されるこちらもマイグレーションファイル名によっては自動でひな形が生成されます。php artisan make:migration add_to_usersこのようにadd_to_から始まるファイル名を指定すると自動でひな形が生成されます。先ほど同様、スネークケース(add_to_)、キャメルケース(addTo)、パスカルケース(AddTo)であればひな形が生成されます。ケバブケース(add-to-)はやはりひな形は生成されません。この項目のまとめ add to からファイル名が始まることが条件 〇 スネークケース(add_to_users)ではひな形が生成される 〇 キャメルケース(addToUsers)ではひな形が生成される 〇 パスカルケース(AddToUsers)ではひな形が生成される ケバブケース(add-to-users)ではひな形は生成されないコマンドを追加してテーブル名を指定することもできるこのように--table=テーブル名をコマンドに追加することでひな形付きのマイグレーションファイルを生成することができます。php artisan make:migration update_users --table=usersこの項目のまとめ --table=テーブル名をコマンドに追加でひな形が生成できる最後まで読んでいただきありがとうございました!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月23日

Read More

【CSS入門】書いて覚える『:hover』の使い方

こんにちは!エンジニアのますみです!本日はマウスホバー時に要素の見た目を変化させることができる:hoverの使い方を解説していきます!魅力的なWebサイトを作るには欠かせないテクニックです!この記事では実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方をマスターすることができます。是非、ブックマークして学習に役立てていただけたら幸いです。目次 :hoverの基本 枠線の色を変えたいときの注意点 transitionを指定してアニメーションにする ホバー時によく使われるアニメーション box-shadowで影をつける transformでボタンそのものを動かすそれではさっそく見ていきましょう!:hoverの基本BUTTON.button { background-color : } .button:hover { background-color : } セレクタ:hoverと書くことで、マウスホバー時のスタイルを指定できます。上の例では、.buttonクラスを持つ要素の背景色が通常時にはwhite、マウスホバー時には#D2ECFFになるように指定されています。#D2ECFFの部分を好きなカラーコードに書き換えてみると、マウスホバー時の背景色が変わることがわかります。例えば#D2ECFFをredに書き換えてみてください。ボタンにマウスカーソルを当てると背景色が赤に変わります。枠線の色を変えたいときの注意点BUTTON.button { background-color : } .button:hover { border : } 上の例のように、マウスホバー時のみ枠線を表示したいときには注意が必要です。ボタンにマウスカーソルを当てると、枠線は表示されますが画面がガタつくことがわかると思います。これは通常時の枠線の太さが0pxになっているため、ホバー時にボタンのサイズが変わってしまうことが原因です。BUTTON.button { background-color : border : } .button:hover { border : } このように通常時には透明な枠線を指定しておくことで、マウスホバー時のガタつきを防ぐことができます。線の太さは通常時、ホバー時どちらも同じ値を指定してください。transitionを指定してアニメーションにするBUTTON.button { background-color : transition : } .button:hover { background-color : } 通常時のクラスにtransition: 秒数とすることで、ホバー時のスタイルに変化するまでにかかる時間を指定できます。エディターのtransition: 0.3sを変更してtransition: 1sとすると、ボタンの色が変化するまでにかかる時間が長くなることがわかります。ホバー時によく使われるアニメーションbox-shadowで影をつけるBUTTON.button { transition : } .button:hover { box-shadow : } マウスホバー時に影をつけるにはbox-shadowを使います。box-shadowはbox-shadow: 影の位置(横) 影の位置(縦) 影のぼかし度 影の色のように書けます。上のエディターで、box-shadowを6px 6px 8px lightblue とすると、ボタンの右下に水色の影をつけることができます。影の位置が0以外、transitionで秒数を指定していると、上のままでは影がボタンの位置から徐々にホバーで指定した位置に影が伸びていきます。あらかじめ通常時に、ホバー後の位置と同じ透明の影を指定しておくことで、影がその場からふわっと現れるアニメーションにできます。BUTTON.button { transition : box-shadow : } .button:hover { box-shadow : } あえて影の位置を動かすエフェクトも面白いと思います。数値を色々変えてみて試してみてください!transformでボタンそのものを動かすBUTTON.button { transition : box-shadow : } .button:hover { box-shadow : transform: } atransformを使用すると、指定した要素を移動したり、形を変えたりすることができます。上の例ではtranslateYという縦方向の位置をずらすプロパティを指定して、ホバー時にボタンが5px上方向に動くようにしています。transformには他にも、要素を拡大するscale、要素を回転させるrotateなどのホバーアニメーションに使いやすいプロパティがたくさんあります。上のエディターのtransformにscale(1.1)を指定すると、ホバー時にボタンが1.1倍になることがわかります。また、エディターのtransformにrotate(360deg)を指定すると、ホバー時にボタンが1回転します。最後まで読んでいただきありがとうございました!プログラミング学習は反復して覚えていくことが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月23日

Read More

CSSで角丸の作り方を実際にコードを書きながら覚えよう

こんにちは!エンジニアのますみです!本日は枠線の角を丸くすることのできる、border-radius属性の書き方を解説します!よく使うCSSの書き方ですので覚えておきましょう!この記事ではborder-radiusの基本的な使い方、応用した使い方をマスターすることができます。さらに実際にCSSをこのページ上で書くことができるので、プレビューを見ながら使い方を覚えることができます。是非、ブックマークして学習に役立てていただけたら幸いです。テーマ Webサイトデザインに必須のborder-radius属性の使い方をマスターできる内容 実際にスタイル属性を書くことが可能な記事なので、深く理解して使いこなすことができる内容目次 基本の角丸 値を2つ指定した場合 値を3つ指定した場合 値を4つ指定した場合 角ごとに分けてCSSを書く方法 正円を作る方法 複雑な角丸を指定する方法 border-radiusの基本的な仕組み border-radius属性のみで書く場合 角ごとに分けて書く場合それではさっそく見ていきましょう。基本の角丸サンプル.box { border : border-radius : } 上のようにborder-raduisに角丸のサイズを書くことで、丸みの帯びた四角形を作ることができます。borderとborder-radiusの値は編集可能なので、実際に値を変えてみながら使い方を覚えてみてください。指定した値が大きくなればなるほど滑らかな角になります。値を2つ指定した場合200px 200px.box { border : border-radius : } 2つの値を指定するとborder-radius : 左上と右下 右上と左下のように、対角線上の角に対して角丸の大きさを指定することができます。値を3つ指定した場合200px 200px.box { border : border-radius : } 3つの値を指定するとborder-radius : 左上右上と左下右下のように角丸の大きさを指定することができます。値を4つ指定した場合200px 200px.box { border : border-radius : } 3つの値を指定するとborder-radius : 左上右上右下 左下のように、左上から時計回りに角丸の大きさを指定することができます。角ごとに分けてCSSを書く方法200px 200px.box { border-top-left-radius : border-top-right-radius : border-bottom-right-radius : border-bottom-left-radius : } このように各角ごとに分けて角丸の大きさを指定することもできます。シンプルな角丸であればborder-radiusのみでよいかもしれませんが、複雑に値を指定する場合はこっちのほうがわかりやすいかもしれません。正円をつくる方法200px 200px.box { border : border-radius : } ボックスのサイズの半分の値をborder-radiusに指定すると正円を作ることができます。例のボックスのサイズは200pxの正方形なので、100pxと指定しても正円になります。複雑な角丸を指定する方法ぐにゃっとした複雑な図形を書くことにもborder-radiusを使います。少し仕組みがややこしいので基本的な仕組みから解説していきます。border-radiusの基本的な仕組み角丸をどのように指定しているかを細かく見てみましょう。これまでborder-radiusで指定していた長さは、各角丸の半径です。border-radiusで複雑な角丸を作る際には、この半径を横と縦に分けて指定することで実現できます。それでは早速具体的なやり方を見てみましょう。border-radius属性のみで書く場合200px 200px.box { border-radius : } 例のように / で区切って横の半径と縦の半径を指定します。/ の前は横の半径、 / の後は縦の半径となっています。border-radius: 横の半径/ 縦の半径また、 / の前も後ろも、先ほど基本の角丸で解説した通り 値が1つの場合はすべての角 値が2つの場合は左上と右下 右上と左下 値が3つの場合は左上右上と左下右下 値が4つの場合は左上右上右下 左下という順番で角丸が適用されます。角ごとに分けて書く場合200px 200px.box { border-top-left-radius : border-top-right-radius : border-bottom-right-radius : border-bottom-left-radius : } それぞれの属性に2つの値を指定することでborder-top-left-radius : 横の半径 縦の半径というように指定することができます。最後まで読んでいただきありがとうございました!border-radius属性をマスターするには反復して学習することが大切です!是非ブックマークして学習に役立ててみてください!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月21日

Read More

#1わたしが未経験からエンジニアになるまで - プログラミングに出会う前のお話 -

こんにちは!プログラマーのますみです!何回かにわけて、わたしについてと、わたしが未経験からエンジニアになるまでにやったことについてお話していこうと思います!このブログを見てくださっている方々の中にはわたしが何者なのか気になっている人もいらっしゃるかと思います(いるのかな?)何回かにわけて、わたしについてと、わたしが未経験からエンジニアになるまでにやったことについてお話していこうと思います!拙い文章ですが、よかったら見ていってあげてください🙇♀️プログラミングに出会うまで小さい頃のわたしは、ピアノを弾くのと絵を描くのが好きな子供でした。当時の将来の夢は漫画家になることそんな感じの子供でしたから、プログラミングとは無縁...という訳ではなく、小さなきっかけは過ごした環境にあったんだなと思います。父の影響でパソコンが身近にある環境だった父はカメラが趣味で、よく写真を撮ってもらっていました。父には、インターネット上で知り合ったカメラ愛好家仲間がいて、時々オフ会に出掛けたりするほどの熱の入れようでした。カメラ愛好家仲間の間で、撮った写真をインターネット上にアップして見てもらうという文化があったようで、父も自分のサイトを立ち上げ、撮った写真を公開して運用していました。そんな父がいる環境にいたわたしは、父に教えてもらいながら自分の絵を公開するホームページを作って運用していました。しっかりプログラムを書くことはしていませんでしたが、パソコンとインターネットが身近にある環境で過ごしておりました。吹奏楽部に入部して学生時代を過ごす漫画家になりたい!という幼少期の夢も忘れかけていたころ、友達に誘われて吹奏楽部に入部することになりました。それから小学生、中学生と音楽に触れながら学生時代を過ごします。顧問の先生が熱心な方だったので、学校内のイベントやコンクールはもちろん、地域のイベントや県外の演奏会、テーマパークで演奏したり、たくさんのステージに立つことができました。そんな音楽に囲まれた学生時代を過ごしているうちに、エンタメ業界に惹かれていきます。エンタメ系の専門学校に進学詳しくは伏せますが、わたしは高校卒業後はエンタメ系の専門学校に進みました。専門学生時代は勉強に学校のイベントに、とても忙しかったですが、大好きな業界の勉強だったので本当に楽しい日々でした。厳しい業界ですが、在学中から少しずつ仕事をもらうことができ、卒業後はそのままエンタメ業界に進みます。このまま順調にいくかと思いきや、思わぬ悲劇が起こりました...続く

2023年04月14日

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サーバーをインストールするをやってみましょうそれでは今回はこの辺で!次回の記事もお楽しみに!

2023年04月15日

Read More

未経験からエンジニアになった私が、採用後に『勉強しておけばよかった...』と後悔したこと

こんにちは!エンジニアのますみです!私は独学で未経験からエンジニアになることができたのですが、エンジニアに採用していただいてから『勉強しておけばよかった...』と思ったことをいくつかお話ししていこうと思います!一人で学習しているとなかなか気づけないポイントだと思いますので、プログラミングを学習している方は是非参考にして、ご自身の学習に役立ててみてください!一人で勉強していると、チームで開発するための知識が身につかなかった一番大きいのはこれですね...少し具体的にお話しすると、会社で開発をするときはよっぽど複数人で一つのプロジェクトを作っていくんですよねそしてプロジェクトに関わっているエンジニアはそれぞれ別の機能を制作していく感じになるんです例えばTwitterのようなSNSを作っているとしたら Aさんはレイアウトを作って! Bさんは投稿を保存する処理を作って! ますみさんはユーザー登録機能を作って!みたいな感じで、それぞれ作業を進めていきますこの時に発生するとマズい問題はいくつかありますが、まず同じファイルを編集してしまうことが発生しかねませんもしも私が『ユーザー登録機能を作る』を担当なのに、気まぐれで『このレイアウトのほうがお洒落だから編集しちゃお』とやってしまうと、本来レイアウトを担当していたAさんの編集したファイルと私の編集したファイルの変更がバッティングして...大変なことになりますこの例は極端ですが、起こりうるパターンとしてはファイルを役割ごとにしっかり分けられていないことが原因で、変更がバッティングしてしまうことがありますどういうことかと言うと、例えばレイアウトを担う部分と処理を担う部分がごちゃごちゃになっていたり、一つのファイル内で全然関係ない複数の処理をおこなっている場合などです一人で勉強している時はやってしまいがちなのですが、これでは変更がバッティングしてしまう可能性が高くなってしまうんです...なので、一人で制作物を作っている時も、ファイルごとに役割をしっかり分けて作っていく習慣をつけていくのが大切だと思います!簡単なところで言うと、もし今htmlにスタイルもjavascriptもごちゃごちゃにしてしまっているのであれば、まずはそれらをhtml、css、javascriptと分けることから始めてみてください!次のステップは、それらがそれぞれどんな役割を担っているのかを意識する感じですね!例えば HTML 骨組み CSS レイアウト、装飾 Javascript 処理という風にざっくりわけられますねそしてそれらが干渉しないように意識しながら制作をしてみてください!ん?HTMLファイルの中でこの処理してるの気持ち悪いな...と思えるようになってきたらレベルアップです!ということで、私が『勉強しておけばよかった...』と後悔したことの一つをお話ししました!もっと掘り下げてお話ししたいことがたくさんあるので、シリーズにしようかな...こんなことについて話してほしい!等ありましたら、Twitterのコメントで教えてください!それでは次の投稿もお楽しみに!

2023年04月15日

Read More

【WordPressが使えるレンタルサーバー】最安値はどこ?初期費用も加味した価格ランキング!

レンタルサーバー選びって大変ですよねさまざまな会社がレンタルサーバーを運営していてプランもたくさんあります。私が調べた範囲だけでも72種類のプランがあったので、実際は100は余裕で超える種類があるでしょう。この記事はコスパ良くWordPressのサイトを運用したい方に向けて書いています。レンタルサーバーは長期契約をすることで大幅にコストを抑えることができます。しかし、契約してみたもののWordPressが使えなかった!となっては大きな無駄遣いです。あなたはWordPressでサイトを立ち上げてブログを書く、収益を得る等が本来の目的のはずです。レンタルサーバー選びに時間がかかってしまってはもったいないです!当記事は18社72種類のプランの中から初期費用込みで安く使えるWordPress可のレンタルサーバーを紹介します。月額での価格比較ランキングサイトはたくさんありますが、初期費用も計算したランキングはあまり見かけませんねもういろんなレンタルサーバーのホームページを見比べて価格を計算する必要はないですさっさとレンタルサーバーを決定してWordPressサイトを立ち上げ、本来の目的を達成しましょう!*レンタルサーバー公式サイトに『WordPress可』と記載のあるプランを紹介します。*価格等のデータはブログ執筆時のものです。契約前に公式サイトで価格等をしっかり確認してください。目次 今回比較するレンタルサーバー WordPressが使えるレンタルサーバー価格ランキング WordPress可のレンタルサーバーコスパ1位 : リトルサーバー ミニプラン リトルサーバーミニプランのメリット リトルサーバーミニプランのデメリット WordPress可のレンタルサーバーコスパ2位 : ロリポップ!ライトプラン ロリポップ!ライトプランのメリット ロリポップ!ライトプランのデメリット WordPress可のレンタルサーバーコスパ3位 : リトルサーバー ワードプラン リトルサーバー ワードプランのメリット リトルサーバー ワードプランのデメリット おすすめはロリポップ!ミニプラン まとめ 最も安く使えるWordPress可のレンタルサーバーはリトルサーバーミニプラン おすすめはロリポップ!ライトプラン 番外編 当サイトで利用しているレンタルサーバーそれではさっそく見ていきましょう今回比較するレンタルサーバー以下のレンタルサーバーのプランを比較していきます。レンタルサーバー名プラン数ミライサーバー8種類Winserver3種類GIGAレンタルサーバー4種類99YENレンタルサーバー5種類ConoHa WING3種類リトルサーバー4種類ロリポップ!4種類XREA 2種類ColorfulBox 8種類mixhost 3種類エックスサーバー 3種類ABLENET 3種類ヘテムル 1種類JETBOY 6種類バリューサーバー 3種類グランパワー 3種類Just-Size.Networks 2種類CORESERVER 7種類18社全72種類のプランで検証していきます。この中から公式サイトにWordPress可と記載のあるものからランキングを作成しました。また、セットアップが簡単にできるかどうかも加味しています。それでは最も低コストで運用できるプランを見ていきましょうWordPressが使えるレンタルサーバー価格ランキングレンタルサーバー名プラン料金(月)リトルサーバーミニプラン176円~(12カ月契約)ロリポップ!ライト220円~(36カ月契約)リトルサーバーワードプラン221円~(12カ月契約)Just-Size.Networks サブドメインプラン239円~(12カ月契約)リトルサーバーリトルプラン276円~(12カ月契約)Just-Size.Networks エコノミープラン343円~(12カ月契約)リトルサーバービッグプラン456円~(12カ月契約)ColorfulBox BOX2484円~(36カ月契約)グランパワー ソロ500円~(12カ月契約)JETBOY ミニ514円~(12カ月契約)ColorfulBox BOX1528円~(36カ月契約)ロリポップ!ベーシック550円~(36カ月契約)WordPress可のレンタルサーバーコスパ1位 : リトルサーバー ミニプランWordPressが使えるレンタルサーバープラン最安値はリトルサーバーのミニプランです。リトルサーバーは低コストで使えるプランが充実しており、さらに数クリックでWordPressのインストールを完了できる機能もついてきます。無料お試し期間が10日間もあるので、その間にテストすれば失敗する可能性を防げますリトルサーバーミニプランのメリット低コストで運用できる72種類のプランの中で最も低コストで運用することができます。特にWordPressのサイトで収益を得ることが目的の場合、レンタルサーバーの費用はできるだけ抑えて収入を増やしたいところですよねリトルサーバーのミニプランなら初期費用加味でひと月あたり176円で運用することが可能ですので、マイナスを極限まで抑えることができます無料お試し期間がある登録から10日間は無料で利用することができます。試しにWordPressのセットアップをしてこの期間中にテストをしておけば、無駄にコストを払う危険が減らせます数クリックでWordPressのセットアップが可能リトルサーバーのミニプランではコントロールパネルから数クリックでWordPressのインストールが可能です。セットアップに数日かかってしまえばその期間中のコストがもったいないですよね...簡単にセットアップを完了できるということは、余計な出費が減るということでもあります。リトルサーバーミニプランのデメリット表示速度が若干遅めミニプランではPHP高速化設定が行えません。PHP高速化設定をするとWordPress等のサイトを素早く表示することができます。サイトの表示が遅いことはSEO評価を下げる原因になるので、アクセス数が減少する可能性があります。アクセス数を伸ばしていきたいのであれば、上位グレードのプランで契約したほうが良いです容量が少ないミニプランの容量は20GBとなっています。使い方にもよりますが、ブログに使った画像ファイルやWordPress本体、バックアップ等のデータのことを考えると、300記事くらいでいっぱいになる可能性があります。ということは1日1投稿するのであれば1年で365投稿になります。つまり1年も使えないわけです。長期的に運用を続けたいのであれば、少なくとも100GBは容量が欲しいところです。100GBの容量がある最安プランは次に紹介するロリポップ!ライトプランですので、こちらも検討してみるといいでしょうWordPress可のレンタルサーバーコスパ2位 : ロリポップ!ライトプランロリポップ!は低コストかつ知名度も高く安心して使えるレンタルサーバーです。運用はGMOグループが行っています。大きな企業が運営しているという点はレンタルサーバー自体がサービスを終了する可能性が少ないという安心感もあります。ロリポップ!ライトプランのメリット充分な容量があるなんとロリポップ!ライトプランはファイル容量が160GBあります。よほどのことがなければ容量がいっぱいになってブログが更新できなくなった!ということにはならないでしょう。何年もサイトの運用をしていていよいよいっぱいになってしまっても、その頃にはある程度収益を得ることができいるはずですし、プランのアップグレードをすれば問題ないでしょう。ちなみにロリポップ!のプランの1つ上のグレードでもひと月550円と低価格で運用することができます。低コストで運用できるひと月あたりの価格が220円と非常に低価格で運用することができます。36カ月契約の長期契約の価格ですが、その分ハイスペックな機能を低価格で使えるというわけです。サイトは基本的には長く運用していくものなので、長期契約でサーバーを借りるのは全然ありだと思います。どれくらいハイスペックかというと、先ほど容量は最低100GBは欲しいという話をしましたが容量100GB以上で次に安いプランはひと月の価格が倍以上します。ということは価格の倍くらいの価値があるプランとも捉えられますので、コスパは最強クラスです。WordPress簡単インストール機能搭載ロリポップ!ライトプランには、簡単な設定をすればWordPressのインストールが完了するWordPress簡単インストール機能を搭載しています。WordPressを自力でセットアップするのは中々大変なので、素早くセットアップして運用をスタートさせられるのは大きなメリットになります。無料お試し期間があるロリポップ!ライトプランも10日間の無料お試し期間があります。この間に動作確認をしておけばレンタルサーバー選びに失敗して無駄にお金を払うといった危険はなくなりますので、とりあえず登録して動作確認してみるのもいいでしょう。ロリポップ!ライトプランのデメリット正直、目立つデメリットが見つかりませんでした...笑ですがいいポイントばかりお話ししても逆に不安になると思いますので、いくつか感じたことをお話しします長期契約が必要ひと月あたり220円で利用するには36カ月の契約をする必要があります。基本的にはサイトは36カ月くらいは運用していくと思いますので問題ないと思いますが、短期間で利用したい場合は少々価格があがります。WordPressサイトを複数運営するのは厳しい多くのレンタルサーバーでは、複数のサイトを一つのプランで運用することができます。ロリポップ!ライトプランでも複数サイトを運用することは可能ですが、WordPressで複数サイトのサイトを運用するのは厳しいです不可能ではありませんが、プログラミングの知識が若干必要になります。ミスをするとサイト自体が動かなくなってしまう危険もあるため、むやみに挑戦しないほうが良いでしょう。動画を大量にアップロードするには不向きロリポップ!のライトプランのファイル容量は160GBとなっています。WordPressのバックアップ等のデータも容量を消費するため、実質160GBすべて使えるというわけではありません。動画を大量にアップロードする必要があれば、もう少し容量に余裕のあるプランにすると良いでしょう。さて、それでは3位まで見ていきましょう。次はリトルサーバーのワードプランです。名前の通り『WordPressが使いやすいように』というコンセプトのプランになりますWordPress可のレンタルサーバーコスパ3位 : リトルサーバー ワードプランランキング1位のリトルサーバー ミニプランの一つ上のグレードになります。WordPressサイトを運用する上で嬉しい機能を充実させたプランになります。また、ミニプラント同じく10日間の無料お試し期間があるのもいい点ですねリトルサーバー ワードプランのメリットワンクリックで簡単WordPressインストールができるミニプランよりも簡単にWordPressをインストールすることができます。素早くサイト運用をスタートできることは周りより一歩リードできるということです。サイトを早く運用させたい方にピッタリのプランですPHP高速化設定が利用可能ミニプランでは利用できなかったPHP高速化設定が利用できます。WordPressサイトを高速で表示させることが可能になり、離脱率を減らし、SEOの面でも有利になります。サイトが高速で表示できることはアクセス数増加につながりますので、これは大きなメリットになりますリトルサーバー ワードプランのデメリット容量が少ないワードプランの容量は30GBになっています。ミニプランよりは多いですが、一年以上運用するとなると厳しいでしょう。おすすめはロリポップ!ミニプランさて、WordPressが使えるレンタルサーバー価格ランキングの上位3つのプランを詳しく見てみました。この中で私のおすすめはロリポップ!ミニプランです。サイト運用で重要な部分であるレンタルサーバーの容量が充分にあり、価格に対して使える容量のコスパがめちゃくちゃいいです。デメリットは長期契約が必要な点と、複数のWordPressサイトを運用するのが難しい点でしたが、基本的には長期的にサイトは運用していきますし複数WordPressサイトを持つケースは少ないでしょう。まとめ最も安く使えるWordPress可のレンタルサーバーはリトルサーバーミニプランメリット コストを最大限抑えられるため、収益をプラスにできる可能性が上がる 10日間の無料お試し期間があるため、その間に動作確認をすれば失敗を防げる WordPressのセットアップが簡単で、素早くサイト運用をスタートできるデメリット 表示速度が遅め、アクセス数減少につながる可能性もある 容量が少ないため、1年間の運用でもいっぱいになってしまう可能性があるおすすめはロリポップ!ライトプランメリット コストを最大限抑えられるため、収益をプラスにできる可能性が上がる 10日間の無料お試し期間があるため、その間に動作確認をすれば失敗を防げる WordPressのセットアップが簡単で、素早くサイト運用をスタートできるデメリット 長期契約が必要なため、短期間の運用が目的であれば不向き 複数のWordPressサイトを運用したい場合に不利というわけで、WordPressが使えるレンタルサーバー価格ランキングでした!あなたのレンタルサーバー選びのお役に立てたら幸いです!では次の記事もお楽しみに!番外編 当サイトで利用しているレンタルサーバー当サイトはXserverを利用しています。 ひと月あたりの価格は990円~と今回ご紹介したプランと比べると高くなっていますが、それに見合う価値を感じたのでXserverを利用しています。特筆すべきなのが表示の速さです。Xserverは高速でサイトを表示するための機能が充実しており、圧倒的な速さでユーザーの離脱を防ぎます。SEOの観点からも高速でサイトを表示できることはとても重要なポイントです。少々コストはかかりますが、本気でサイトの運用を考えているのであればXserverを使うことを強くおすすめします。 また、10日間の無料お試し期間がありますので、本記事で紹介した低価格で利用できるサーバーとの使用感を比べてみるのもいいと思います。

2023年05月10日

Read More

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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