ますみのブログ

ますみのブログ

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

Javascriptの楽譜描画ライブラリ『VexFlow』を試してみる

この記事は情報をまとめている最中の項目もあります。ご了承ください...五線譜の描画まずは空の五線譜を描画してみましょう。typescriptimport Vex from "vexflow";const { Renderer, Stave } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble"); stave.setContext(context).draw();}scoreRenderer();サンプルのコードはtypescriptでのソースコードになっています。音部記号ト音記号const stave = new Stave(10, 40, 400);stave.addClef("treble")addClefにtrebleを指定します。へ音記号const stave = new Stave(10, 40, 400);stave.addClef("bass")addClefにbassを指定します。ハ音記号const stave = new Stave(10, 40, 400);stave.addClef("alto")addClefにaltoを指定します。タブ譜const stave = new Stave(10, 40, 400);stave.addClef("tab")addClefにtabを指定します。その他音部記号vexflowの音部記号に関するソースコードはこのようになっていました。 return { treble: { code: 'gClef', line: 3, point: 0, }, bass: { code: 'fClef', line: 1, point: 0, }, alto: { code: 'cClef', line: 2, point: 0, }, tenor: { code: 'cClef', line: 1, point: 0, }, percussion: { code: 'restMaxima', line: 2, point: 0, }, soprano: { code: 'cClef', line: 4, point: 0, }, 'mezzo-soprano': { code: 'cClef', line: 3, point: 0, }, 'baritone-c': { code: 'cClef', line: 0, point: 0, }, 'baritone-f': { code: 'fClef', line: 2, point: 0, }, subbass: { code: 'fClef', line: 0, point: 0, }, french: { code: 'gClef', line: 4, point: 0, }, tab: { code: '6stringTabClef', point: 0, }, };addClefにtenor、percussion等の値も指定できるようです。拍子記号const stave = new Stave(10, 40, 400);stave.addTimeSignature("4/4");addTimeSignatureに拍数/音符の形式で値を指定すればOKです音符を描画するtypescriptimport Vex from "vexflow";const { Renderer, Stave, StaveNote, Voice, Formatter } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("bass").addTimeSignature("4/4"); stave.setContext(context).draw(); // ↓追加 const notes = [ new StaveNote({ keys: ["c/4"], duration: "q" }), new StaveNote({ keys: ["d/4"], duration: "q" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" }), ]; const voice = new Voice({ num_beats: 4, beat_value: 4 }); voice.addTickables(notes); new Formatter().joinVoices([voice]).format([voice], 350); voice.draw(context, stave); // ↑追加}scoreRenderer();ソースコード後半のこの部分はバランスよく音符を配置するためのもののようです。const voice = new Voice({ num_beats: 4, beat_value: 4 });voice.addTickables(notes);new Formatter().joinVoices([voice]).format([voice], 350);new Voice({ num_beats: 拍数, beat_value: 音符});という形式になっており、各値は拍子記号と同じ数値を指定してください。ここで指定した長さと、音符全体の長さが合わないと描画できないようです。音符の描画const notes = [ new StaveNote({ keys: ["c/4"], duration: "q" }), new StaveNote({ keys: ["d/4"], duration: "q" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" }),];StaveNoteを使用し、配列で定義していきます。音の高さkeysで音の高さを指定します。音名(小文字)/オクターブという形式の文字列の配列を使用します。臨時記号は別で指定するようなので、c#/4のように指定しても描画されません。ちなみに音部記号を自動で判別してくれないので、音符ごとにclefというキーを追加する必要があります。stave.addClef("bass").addTimeSignature("4/4");//...const notes = [ new StaveNote({ keys: ["c/4"], duration: "q", clef: "bass" }), new StaveNote({ keys: ["d/4"], duration: "q", clef: "bass" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q", clef: "bass" }),];音の長さdurationで音の長さを指定します。qは四分音符です(quarter)。数値でも指定できるようなので、こちらの方が楽そうです。const notes = [ new StaveNote({ keys: ["c/4"], duration: "8" }), // 八分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "2" }), // 二分音符 new StaveNote({ keys: ["c/4"], duration: "4" }), // 四分音符];連桁は別途指定する必要があります。休符休符はdurationで指定した音の長さの後にrを追加しますconst notes = [ new StaveNote({ keys: ["b/4"], duration: "8r" }), // 八分休符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "2" }), // 二分音符 new StaveNote({ keys: ["c/4"], duration: "4" }), // 四分音符];休符の位置は音の高さの影響を受けるため、連桁があったりした場合は調整していきます。基本的にはト音記号であればkeysはb/4を指定しておけば綺麗な位置に表示できます。臨時記号ソースコード冒頭にAccidentalを追加しますconst { Renderer, Stave, StaveNote, Voice, Formatter, Accidental } = Vex.Flow;各音符にaddModifier(new Accidental(臨時記号))という形式で指定します。const notes = [ new StaveNote({ keys: ["c#/4"], duration: "4" }).addModifier(new Accidental("#")), // シャープ new StaveNote({ keys: ["c##/4"], duration: "4" }).addModifier(new Accidental("##")), // ダブルシャープ new StaveNote({ keys: ["cb/4"], duration: "4" }).addModifier(new Accidental("b")), // フラット new StaveNote({ keys: ["cbb/4"], duration: "4" }).addModifier(new Accidental("bb")), // ダブル♭];チュートリアルにはkeysにも臨時記号を指定していますが、描画には影響しません。付点import Vex from "vexflow";import { Dot } from "../../node_modules/vexflow/src/dot";const { Renderer, Stave, StaveNote, Formatter, Accidental } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble").addTimeSignature("4/4"); stave.setContext(context).draw(); const notes = [ dotted( new StaveNote({ keys: ["e##/5"], duration: "8d", }).addModifier(new Accidental("##")) ), new StaveNote({ keys: ["eb/5"], duration: "16", }).addModifier(new Accidental("b")), dotted( new StaveNote({ keys: ["eb/4", "d/5"], duration: "h", }), 0 /* add dot to note at index==0 */ ), dotted( new StaveNote({ keys: ["c/5", "eb/5", "g#/5"], duration: "q", }) .addModifier(new Accidental("b"), 1) .addModifier(new Accidental("#"), 2) ), ]; Formatter.FormatAndDraw(context, stave, notes); function dotted(staveNote, noteIndex = -1) { if (noteIndex 0) { Dot.buildAndAttach([staveNote], { all: true, }); } else { Dot.buildAndAttach([staveNote], { index: noteIndex, }); } return staveNote; }}scoreRenderer();情報まとめ中連桁import Vex from "vexflow";import { Dot } from "../../node_modules/vexflow/src/dot";const { Renderer, Stave, StaveNote, Formatter, Beam } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble").addTimeSignature("4/4"); stave.setContext(context).draw(); const notes1 = [ new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), ]; const notes2 = [ new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), ]; const allNotes = notes1.concat(notes2); const beams = [new Beam(notes1), new Beam(notes2)]; Formatter.FormatAndDraw(context, stave, allNotes); beams.forEach((b) = { b.setContext(context).draw(); });}scoreRenderer();情報まとめ中

2023年05月22日

人気記事

簡単に管理画面を作れる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日

注目記事

Javascriptの楽譜描画ライブラリ『VexFlow』を試してみる

この記事は情報をまとめている最中の項目もあります。ご了承ください...五線譜の描画まずは空の五線譜を描画してみましょう。typescriptimport Vex from "vexflow";const { Renderer, Stave } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble"); stave.setContext(context).draw();}scoreRenderer();サンプルのコードはtypescriptでのソースコードになっています。音部記号ト音記号const stave = new Stave(10, 40, 400);stave.addClef("treble")addClefにtrebleを指定します。へ音記号const stave = new Stave(10, 40, 400);stave.addClef("bass")addClefにbassを指定します。ハ音記号const stave = new Stave(10, 40, 400);stave.addClef("alto")addClefにaltoを指定します。タブ譜const stave = new Stave(10, 40, 400);stave.addClef("tab")addClefにtabを指定します。その他音部記号vexflowの音部記号に関するソースコードはこのようになっていました。 return { treble: { code: 'gClef', line: 3, point: 0, }, bass: { code: 'fClef', line: 1, point: 0, }, alto: { code: 'cClef', line: 2, point: 0, }, tenor: { code: 'cClef', line: 1, point: 0, }, percussion: { code: 'restMaxima', line: 2, point: 0, }, soprano: { code: 'cClef', line: 4, point: 0, }, 'mezzo-soprano': { code: 'cClef', line: 3, point: 0, }, 'baritone-c': { code: 'cClef', line: 0, point: 0, }, 'baritone-f': { code: 'fClef', line: 2, point: 0, }, subbass: { code: 'fClef', line: 0, point: 0, }, french: { code: 'gClef', line: 4, point: 0, }, tab: { code: '6stringTabClef', point: 0, }, };addClefにtenor、percussion等の値も指定できるようです。拍子記号const stave = new Stave(10, 40, 400);stave.addTimeSignature("4/4");addTimeSignatureに拍数/音符の形式で値を指定すればOKです音符を描画するtypescriptimport Vex from "vexflow";const { Renderer, Stave, StaveNote, Voice, Formatter } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("bass").addTimeSignature("4/4"); stave.setContext(context).draw(); // ↓追加 const notes = [ new StaveNote({ keys: ["c/4"], duration: "q" }), new StaveNote({ keys: ["d/4"], duration: "q" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" }), ]; const voice = new Voice({ num_beats: 4, beat_value: 4 }); voice.addTickables(notes); new Formatter().joinVoices([voice]).format([voice], 350); voice.draw(context, stave); // ↑追加}scoreRenderer();ソースコード後半のこの部分はバランスよく音符を配置するためのもののようです。const voice = new Voice({ num_beats: 4, beat_value: 4 });voice.addTickables(notes);new Formatter().joinVoices([voice]).format([voice], 350);new Voice({ num_beats: 拍数, beat_value: 音符});という形式になっており、各値は拍子記号と同じ数値を指定してください。ここで指定した長さと、音符全体の長さが合わないと描画できないようです。音符の描画const notes = [ new StaveNote({ keys: ["c/4"], duration: "q" }), new StaveNote({ keys: ["d/4"], duration: "q" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" }),];StaveNoteを使用し、配列で定義していきます。音の高さkeysで音の高さを指定します。音名(小文字)/オクターブという形式の文字列の配列を使用します。臨時記号は別で指定するようなので、c#/4のように指定しても描画されません。ちなみに音部記号を自動で判別してくれないので、音符ごとにclefというキーを追加する必要があります。stave.addClef("bass").addTimeSignature("4/4");//...const notes = [ new StaveNote({ keys: ["c/4"], duration: "q", clef: "bass" }), new StaveNote({ keys: ["d/4"], duration: "q", clef: "bass" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q", clef: "bass" }),];音の長さdurationで音の長さを指定します。qは四分音符です(quarter)。数値でも指定できるようなので、こちらの方が楽そうです。const notes = [ new StaveNote({ keys: ["c/4"], duration: "8" }), // 八分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "2" }), // 二分音符 new StaveNote({ keys: ["c/4"], duration: "4" }), // 四分音符];連桁は別途指定する必要があります。休符休符はdurationで指定した音の長さの後にrを追加しますconst notes = [ new StaveNote({ keys: ["b/4"], duration: "8r" }), // 八分休符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "16" }), // 十六分音符 new StaveNote({ keys: ["c/4"], duration: "2" }), // 二分音符 new StaveNote({ keys: ["c/4"], duration: "4" }), // 四分音符];休符の位置は音の高さの影響を受けるため、連桁があったりした場合は調整していきます。基本的にはト音記号であればkeysはb/4を指定しておけば綺麗な位置に表示できます。臨時記号ソースコード冒頭にAccidentalを追加しますconst { Renderer, Stave, StaveNote, Voice, Formatter, Accidental } = Vex.Flow;各音符にaddModifier(new Accidental(臨時記号))という形式で指定します。const notes = [ new StaveNote({ keys: ["c#/4"], duration: "4" }).addModifier(new Accidental("#")), // シャープ new StaveNote({ keys: ["c##/4"], duration: "4" }).addModifier(new Accidental("##")), // ダブルシャープ new StaveNote({ keys: ["cb/4"], duration: "4" }).addModifier(new Accidental("b")), // フラット new StaveNote({ keys: ["cbb/4"], duration: "4" }).addModifier(new Accidental("bb")), // ダブル♭];チュートリアルにはkeysにも臨時記号を指定していますが、描画には影響しません。付点import Vex from "vexflow";import { Dot } from "../../node_modules/vexflow/src/dot";const { Renderer, Stave, StaveNote, Formatter, Accidental } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble").addTimeSignature("4/4"); stave.setContext(context).draw(); const notes = [ dotted( new StaveNote({ keys: ["e##/5"], duration: "8d", }).addModifier(new Accidental("##")) ), new StaveNote({ keys: ["eb/5"], duration: "16", }).addModifier(new Accidental("b")), dotted( new StaveNote({ keys: ["eb/4", "d/5"], duration: "h", }), 0 /* add dot to note at index==0 */ ), dotted( new StaveNote({ keys: ["c/5", "eb/5", "g#/5"], duration: "q", }) .addModifier(new Accidental("b"), 1) .addModifier(new Accidental("#"), 2) ), ]; Formatter.FormatAndDraw(context, stave, notes); function dotted(staveNote, noteIndex = -1) { if (noteIndex 0) { Dot.buildAndAttach([staveNote], { all: true, }); } else { Dot.buildAndAttach([staveNote], { index: noteIndex, }); } return staveNote; }}scoreRenderer();情報まとめ中連桁import Vex from "vexflow";import { Dot } from "../../node_modules/vexflow/src/dot";const { Renderer, Stave, StaveNote, Formatter, Beam } = Vex.Flow;function scoreRenderer(){ const div = document.querySelectorHTMLDivElement("#container"); if(!div){ return; } const renderer = new Renderer(div, Renderer.Backends.SVG); renderer.resize(500, 500); const context = renderer.getContext(); const stave = new Stave(10, 40, 400); stave.addClef("treble").addTimeSignature("4/4"); stave.setContext(context).draw(); const notes1 = [ new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), ]; const notes2 = [ new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), new StaveNote({ keys: ["c/4"], duration: "8"}), ]; const allNotes = notes1.concat(notes2); const beams = [new Beam(notes1), new Beam(notes2)]; Formatter.FormatAndDraw(context, stave, allNotes); beams.forEach((b) = { b.setContext(context).draw(); });}scoreRenderer();情報まとめ中

2023年05月22日

CSS入門

【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日

プロンプトエンジニア

Zero-Shotプロンプティングとは?わかりやすく解説!

こんにちは!エンジニアのますみです!本日はZero-Shotプロンプティングについて解説していきます!Zero-ShotプロンプティングとはZero-Shotプロンプティングとは回答例などを含まないプロンプトで人工知能(AI)に回答を求めることです。わかりやすく回答例としましたが、サンプルと言ったほうが本来の意味合いに近いですプロンプトとは、人工知能(AI)に対してどんな質問や指示を出すか、どんな言葉を使って話しかけるかを決めることです。プロンプトにはAIから的確な回答を得るために、回答例を書いておくテクニックがあります。プロンプト以下の質問に答えてください。回答は1. 材料名、2. 材料名の形式で答えてください質問: 目玉焼きの材料を教えてください。回答: 1. 卵質問: 苺ジャムの材料を教えてください。AIの回答回答: 1. 苺、2. 砂糖上の例では以下の質問に答えてください。回答は1. 材料名、2. 材料名の形式で答えてください質問: 目玉焼きの材料を教えてください。回答: 1. 卵質問: 苺ジャムの材料を教えてください。この部分が回答の例になります。Zero-Shotプロンプティングでは質問: 目玉焼きの材料を教えてください。の部分が無い状態でAIに回答を求めます。Zero-Shotプロンプティングの例プロンプト次の様子を最高、普通、最低に分類してください大好物の焼肉を食べてお腹いっぱい回答最高上記の例では回答例(サンプル)が無くてもAIが適切な回答をしてくれました。AIは事前に学習された大量のデータから、大好物の焼き肉を食べてお腹いっぱいな状況は最高だ!と推測できるように学習されているということです。シンプルな質問であればこのように回答例(サンプル)をプロンプトに含まないZero-ShotプロンプティングでもAIは的確な文章を出力します。複雑な質問にはZero-Shotプロンプティングは不向き回答の形式を具体的に指定したい等、複雑な指示の場合はAIから欲しい回答を得られない可能性が高いです。その為、指示の内容によっては回答例(サンプル)を含むプロンプトを使う必要があります。回答例(サンプル)を含むものはFew-Shotプロンプティングと言う少数の回答例(サンプル)を含むプロンプトでAIに回答を求めることをFew-Shotプロンプティングと言います。プロンプト以下の質問に答えてください質問 : 目玉焼きの材料をリスト形式で教えて回答 : 1. 卵質問 : 苺ジャムの回答をリスト形式で教えて回答 :AIの回答1. 苺2. 砂糖3. レモン汁回答 : 1. 卵の部分が回答例(サンプル)になります。まとめ Zero-Shotプロンプティングとはサンプル無しのプロンプトでAIに回答を求めること シンプルな指示であればZero-Shotプロンプティングでも的確な回答を得られる 複雑な指示にはZero-Shotプロンプティングは不向き最後まで読んでいただきありがとうございます!質問や、こんなことを記事にしてほしい!というのがありましたらTwitterのコメント等で受け付けていますので、お気軽にどうぞ!ますみ - 愛知県在住の20代プログラマー - | @mashmy_98それでは次の投稿もお楽しみに!

2023年04月24日

わたしが未経験からエンジニアになるまで

#2わたしが未経験からエンジニアになるまで - 無職とプログラミングとの出会い -

こんにちは!プログラマーのますみです!今回はわたしが未経験からエンジニアになるまでのお話、二回目の記事です。一回目の記事はこちら一回目をもう読んでくださった方、ありがとうございます!こんな私についてのお話ですが、もう少し続きますのでよかったら見ていってあげてください!それでは続きエンタメ業界で仕事をスタート専門学校を卒業した私はエンタメ業界の仕事をスタートしました。厳しい業界ですが、少しずつ周りに認めてもらい、楽しく忙しく、充実した日々を過ごしていました。仕事を始めてから数年、世間を揺るがす出来事が起こります。コロナ禍でほぼ無職に2019年、新型コロナウイルスが猛威をふるい、たくさんの業界が大打撃を受けました。エンタメ業界もコロナ禍で大打撃を受け、わたしは殆どの仕事を失ってしまい、実質無職となってしまいます...細々と仕事はあったので、ギリギリ生きていくことはできましたが、暇だし、これからどうしようかと不安な日々を過ごしていました。そんな頃、世間ではコロナが大流行する裏で、別の大流行も発生していました。空前の『プログラミング始めよう!』ブーム偶然なのか、コロナ禍で在宅ワークという言葉が流行っていたからなのか、世の中のSNSの広告はプログラミングスクールの広告であふれていました。私の目にも当然プログラミングという言葉が飛び込んできて、幼少期にホームページを運用していた記憶がよぎり、またやってみようかな?と独学で勉強をスタートします。実質無職だった私は、エンタメ業界に使っていたエネルギーと時間をプログラミングの学習に存分に費やしました。お金もありませんでしたので、プログラミングスクールには通わず、ほとんどの情報はインターネットで検索して得ていました。唯一お金を使っていたプログラミング学習系のサービスはProgateというサービスでした。何度も挫折しそうになりながらも意地で学習を続けるありがたいことに、プログラムに関する情報は大体インターネットで調べたら出てきました。ですが、専門用語だらけでわかりづらかったり、書いてある情報が古くてエラーが出てきたり、英語の情報しかなかったりして、何度も挫折しかけました...そのころから『もっとわかりやすく情報を発信して、私と同じことで悩む人を減らしたい!』という気持ちが芽生え始めていました。何日も同じエラーに悩まされたりと苦しい日々でしたが、それでも私がプログラミングの学習を続けられた理由があります。この理由は未経験から採用に至った重要なポイントでもあると思います。それは...続く

2023年04月15日

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

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

2023年04月14日

javascript入門

【javascript入門】関数を使ってみよう!

こんにちは!プログラマーのますみです!今回はjavascriptで関数を使う方法をご紹介します!javascriptはこちらのサイトで簡単に動かしてみることができます!JSFiddle是非実際にプログラムを書いてみながら変数の使い方を覚えてみてください!関数ってなに?関数は複数の処理をまとめて実行するためのブロックです。同じ処理を何度も実行する必要がある場合や、大規模なプログラムを管理するために役立ちます!javascriptで関数を使う方法javascriptではこのように書くことで関数を定義できます!function example(){// ここに処理を書く}例の関数は、example() と書くことで処理を使いまわすことができます!function example(){ console.log(処理2);}console.log(処理1);example();console.log(処理3);上記の例を実行すると処理1処理2処理3と出力されたと思います!この例ではいまいち感じがつかみづらいと思うので、引数、戻り値という概念も覚えていきましょう!引数ってなに?関数は値を受け取って、その値に対して処理を行うことができます。function example(count){ console.log(処理 + count);}先ほどの関数をこのように書き換えて、関数を呼び出すときにexample(1)というようにかっこの中に値を書くことで、関数に値を処理してもらうことができます。function example(count){ console.log(処理 + count);}example(1);example(2);example(3);上記の例を実行すると処理1処理2処理3と出力されたと思います!この時に関数が受け取る値を引数(ひきすう)と言いますfunction example(count これを引数という){ console.log(処理 + count);}戻り値ってなに?関数はreturn 値と書くことで、関数を呼び出した箇所に値を返すことができますfunction example(count){ return count + 1;}この例では受け取ったcountに1を足してreturnで値を返しています。function example(count){ return count + 1;}console.log(example(1));console.log(example(2));console.log(example(3));これを実行すると234と出力されたと思います!この時に関数が返す値を戻り値(もどりち)と言いますfunction example(count){ return count + 1 戻り値;}関数を使うメリット関数を使うメリットは、変更があった時に変更箇所が少なく済み、人為的ミスを減らすことができる点です!使うメリットは変数と似ていますね!例えばこのようなソースコードがあったとしますlet price = 1000;let product = { name : トマト, price : 150}console.log(price + 円);console.log(2000 + 円);console.log(product.price + 円);この例ではオブジェクトという書き方を使っています。オブジェクトについて知りたい方はこちらの記事をご覧ください!例のソースコードを実行すると1000円2000円150円と出力されたと思います。例えば『価格yenという書き方に変えよう』という変更点があったときに、上記のソースコードだと3か所を修正することになります。let price = 1000;let product = { name : トマト, price : 150}console.log(price + 円);console.log(2000 + 円);console.log(product.price + 円);これがもしも数百行にわたる規模のソースコードだった時には変更点が何十か所と出てきてしまい、大変だし人為的ミスも起こりやすくなっていまいます...そこで関数を使った書き方をしておくとfunction formatPrice(price){ return price + 円;}let price = 1000;let product = { name : トマト, price : 150}console.log(formatPrice(price));console.log(formatPrice(2000));console.log(formatPrice(product.price));変更点はこの一か所で済みますfunction formatPrice(price){ return price + 円;}このように書き換えることでfunction formatPrice(price){ return price + yen;}let price = 1000;let product = { name : トマト, price : 150}console.log(formatPrice(price));console.log(formatPrice(2000));console.log(formatPrice(product.price));一か所の変更点ですべての出力を修正することができました!今回はjavascriptでの関数の使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月15日

【javascript入門】オブジェクトを使ってみよう!

こんにちは!プログラマーのますみです!今回はjavascriptでオブジェクトを使う方法をご紹介します!javascriptはこちらのサイトで簡単に動かしてみることができます!JSFiddle是非実際にプログラムを書いてみながらオブジェクトの使い方を覚えてみてくださいね!オブジェクトってなに?オブジェクトとは、プログラムの中で扱うデータを、そのデータに適した形でまとめたものです!例えば、javsacriptの場合は、以下のようにオブジェクトを定義することができます!const product = {    name : "トマト",    price : 150}例ではトマトという商品の情報をproductという変数に定義しています。このようにまとまった情報を一つの変数で管理できるため、さまざまな処理が書きやすいメリットがあります!オブジェクトを使った処理を書いてみよう!それではオブジェクトを使った処理の例を書いてみますね!const product = {    name : "トマト",    price : 150}console.log("商品名は" + product.name + "です");console.log("価格は" + product.price + "です");こんな感じで、オブジェクトに格納された値を使うには、オブジェクト名前.オブジェクトの中身の名前という感じで、.(ドット)で区切って値を取り出すことができます!オブジェクトはこのように二階層、三階層というようにも定義できるのですがconst product = {    name : "トマト",    price : 150,    shop : {        name : "八百屋"    }}この場合はproduct.shop.nameというように、productの中のshopの中のnameといった感じで指定していけば大丈夫です!そして、オブジェクトは配列に格納することもできます。const products = [    {        name : "トマト",        price : 150    },    {        name : "にんじん",        price : 120    }];javascriptの配列についての記事はこちらを是非読んでみてください!それではまず、商品の情報を順番に表示してみましょう!const products = [    {        name : "トマト",        price : 150    },    {        name : "にんじん",        price : 120    }];products.map((product) = {    console.log("商品名は" + product.name + "です");    console.log("価格は" + product.price + "です");});これを実行してみると商品名はトマトです価格は150です商品名はにんじんです価格は120ですと表示できたと思います!それではこれを、商品名のリストと合計価格を表示するようにしてみましょう!少し複雑になりますが、こんな感じです!const products = [    {        name : "トマト",        price : 150    },    {        name : "にんじん",        price : 120    }];let productList = "";let totalPrice = 0;products.map((product) = {    productList += product.name + "\n";    totalPrice += product.price;});console.log("商品リスト\n" + productList);console.log("合計価格\n" + totalPrice + "円");javascriptでは、+=と書くと対象の変数の値に追加するという書き方ができます。これを実行してみると商品リストトマトにんじん 合計価格270円と表示されたと思います。こんな感じで、オブジェクトを使うことでデータをひとまとめに管理し、わかりやすいコードを書くことができます!今回はjavascriptでのオブジェクトの使い方を解説しました!このブログは、わたしがプログラミングを学習し始めたころに悩んでいたポイントをわかりやすく記事にして、わたしと同じ悩みを持つ方が少しでも減るように!と思って運用しています!共有やお気に入り登録していただけたら励みになりますので是非よろしくお願いします!それでは次の記事もお楽しみに!

2023年04月14日

laravel-admin

簡単に管理画面を作れる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日

ますみ

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

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

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

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

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


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

ますみ

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

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

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

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