Laravel8でCMSを作るチュートリアル(6) ユーザーロール（権限）の設定 前回に続いて、Laravel8を使用して、コーポレートサイトでよくありそうなのお知らせを管理するCMSを作るチュートリアルの6回目です。（たぶん最終回） 今回はユーザーにロール（権限）を設定し、権限によってアクセスできるページを制限したいと思います。 投稿日2021年01月26日 更新日2021年01月26日 作る機能 投稿一覧＆詳細ページ 管理画面へのログイン機能 投稿管理（CRUD）機能 ユーザーと投稿の関連付け(多対一:HasMany) 投稿のタグ分け(多対多:ManyToMany） ユーザーロール（権限）の設定 データベースの修正 ユーザーテーブルにroleという権限用のカラムを追加します。 database/migrations/XXXX_XX_XX_XXXXXX_create_users_tabl

jQueryで指定した要素にclass,idを追加する 要素にclassやidを割り当てるにはhtmlで直接指定するのが確実ですが、大量の要素やクリックイベント後に処理したい場合は、プラグラムで割り当てる必要があります。 この記事ではjQueryを使用して、さまざまな状況下で各要素にclassやidを追加してみます。 投稿日2010年12月24日 更新日2011年04月02日 id、classを割り当てるためのメソッド 次のような構造のhtmlがあるとします。 html <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> </ul> たとえば、ulに「style-ul」というidを、liには「style-li」というclassを割り当てるとします。 「attr」メソッドを使用すれば、属性の追加

Laravel8でシンプルなCMSを作るチュートリアル[2020年版] Laravel8を使用して、コーポレートサイトでよくありそうなのお知らせを管理するCMSを作るチュートリアルです。 投稿日2020年11月26日 更新日2021年01月26日 以前「Laravel5.4でシンプルなCMSを作るチュートリアル」というのを書いたのですが、バージョンが古くなったりしているので新しいバージョンで書き直した記事になります。 作る機能 投稿一覧＆詳細ページ 管理画面へのログイン機能 投稿管理（CRUD）機能 ユーザーと投稿の関連付け(多対一:HasMany) 投稿のタグ分け(多対多:ManyToMany） ユーザーロール（権限）の設定) インストール 最初にLaravelをComposerでインストールします。 バージョン指定しない場合、現在（2020年10月）の最新バージョンである8がインストー

React.js + TypeScript でTodoアプリを作ってみる TypeScriptもReactもちょっとわかってきた！　と思って最初に作るのはやっぱりTodoアプリですよね（？）。 ということで React.js + TypeScript でTodoアプリつくってみます。 投稿日2020年01月15日 更新日2020年01月17日 環境構築 node.jsは入っていることとします。今回はcreate-react-appで始めます。 $ npx create-react-app todo-ts --typescript インストールが終わったら。下記を実行します。 $ cd todo-ts $ npm start ブラウザが起動して何か表示されたら準備完了！ 完成イメージ 今回作成するTodoアプリのイメージです。 この規模だとコンポーネント分けると逆に面倒そうですが、練習も兼ね

jQueryで入力フォームの可変項目を増減する度にname属性を採番する タイトルちょっと何言ってるかわかりませんが、フォームの入力項目をjQueryで増減させたりすることがあるかと思うのですが、その際name属性に指定されている配列のindexを採番し直す方法をご紹介します。 投稿日2020年09月22日 更新日2020年09月22日 HTML 次のようなHTMLがあるとします。 追加ボタンをクリックするとリストが一つ増え、削除ボタンをクリックするとリストから項目が削除されます。 name属性にインデックスが割り当てられているのがわかります。 このインデックスを例えば２つ目の項目が削除された場合でも0,1となるようにします。 <div class="items"> <button class="add-btn">追加</button> <ul class="item-list"> <li

Laravel7で新しくなったコンポーネントの使用方法 すでにLaravel8が出ていますが、Laravel7で新しくなったコンポーネントの書き方をご紹介します。 投稿日2020年11月02日 更新日2020年11月02日 準備 ルーターでルートでindexというビューファイルが読み込まれるようにします。 routes/web.php Route::get('/', function () { return view('index'); }); resources/viewsにindex.blade.phpファイルを作成します。 resources/views/index.blade.php <h1>コンポーネントのテスト</h1> ルートにアクセスして「コンポーネントのテスト」が表示されることを確認してください。 今回はこのファイルに作成したコンポーネントを配置していきます。 簡単なコン

既存のサイトにモダンな感じで React.js + TypeScript を導入する とりあえずReactをはじめるたい時はCreateReactAppとか使うと簡単に始められるのですが、基本SPA用なので、すでにあるサイトに導入とかバックエンドフレームワークに導入とか難しかったりします。 そこでWebpackを使用して既存のサイトにReactを導入する方法をご紹介します。 投稿日2020年08月26日 更新日2020年09月08日 前提条件 予めnode.jsをインストールしておいてください。 npmの初期化とモジュールのインストール 適当なプロジェクトディレクトリを作ったらnpm initでpackage.jsonを作ります。 $ npm init -y 次にWebpack関係のモジュールからインストール $ npm i -D webpack webpack-cli typescrip

Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版] React.jsの状態管理ライブラリはReduxが有名ですが、結構複雑だったりステートを一つ更新するだけでもタイプ量が多くなってしまうというデメリットもあります。 そこでこの記事ではRedux Toolkitというライブラリを使用して、もう少し簡単に状態管理する方法をご紹介します。 投稿日2020年01月27日 更新日2020年01月29日 環境は react : 16.12 typescript : 3.7 @reduxjs/toolkit : 1.2 react-redux : 7.1 でお送りします。 この記事でやること 基本的に以前作成したTodoアプリにRedux Toolkitを導入します。 Todoアプリについては下記記事を参照ください。 React.js + Typ

React製静的サイトジェネレーターGatsby使ってみた GatsbyはReactで開発された、静的サイトジェネレーターです。 この記事ではGatsbyのとりあえず始め方の部分だけご紹介します。 投稿日2019年10月11日 更新日2019年10月11日 静的ファイルジェネレーターとは 静的ファイルジェネレーターとはプログラマブルに書いたソースを静的なHTMLファイルに書き出すツールです。 そしてGatsbyは単なる静的ファイルジェネレーターではなく、SSRやAMPなどのモダンな技術が最初から組み込まれています。 競合ツールとしては、同じJavaScript製としてはNuxt.jsや、Rubyで作られたJekyllなどがあります。 公式サイトに比較がまとめられてますので参考にしてください。 Gatsby vs JAMstack frameworks インストール npxでインストールでき

React入門（TypeScript版） 最近のReactはTypeScriptで書かれているのをよく見るようになりましたね。ということでTypeScriptでReactの基本的なところを学んでみましょう。 投稿日2019年11月26日 更新日2019年11月29日 TypeScriptの基礎に関してはこちらの記事も参考にしてください。 さらっとTypeScript入門 環境構築 node.jsは入っていることとします。今回はcreate-react-appで始めます。 TypeScriptの場合はオプションに--typescriptを指定します。 $ npx create-react-app react-lesson --typescript インストールが終わったら。下記を実行します。 $ cd react-lesson $ npm start ブラウザが起動して何か表示されたら成功で

型の指定は変数名の後に:（コロン）を付けてその後に型名（アノテーション）を付けます。 let message :string = 'こんにちは'; たとえば数値型（number）で宣言した型に文字列を入れようとするとエラーになります。 VSCodeだとリアルタイムに注意してくれます。 配列 基本変数名の後に型名を指定するだけなのでそれほど難しいことはないですが、配列はちょっと書き方で迷いますよね。 これは、型名の後にブラケット（[]）を付けます。 let numbers1: number[] = [ 1, 2, 3 ]; let numbers2: Array<number> = [ 1, 2, 3 ]; 配列と似たような型でtuple型というのがあります。これは固定数で複数の型を指定することができます。 例えば入れられる変数を「数値」「文字列」「数値」の順で制限したい場合次のようになりま

脱jQueryの道その２:あの機能は素のJavaScriptでどうやるんだろ編 脱jQueryの道の第二弾です。プラグインを使うまでもない小さな機能はjQuery使わない場合どう書くんだろう。ということでやてってみたいと思います。 投稿日2019年04月18日 更新日2019年04月19日 アニメーションはJavaScriptで制御する方法もありますが、極力CSSでおこないます。 ちなみに脱jQueryの道 第一弾はこちら。 脱jQueryの道 初級編 タブメニュー ディスプレイnoneとblockをフェードインで切り替えたいときはキーフレームアニメーション使うと簡単です。 JavaScript (() => { document.querySelectorAll('.tab-block').forEach((tabContents) => { let activeIndex = 0; c

Laravel+Vue.js+VuexでフロントのCRUDを作成 LaravelでSPAなタスク管理アプリ作る日記4回目です。前回はLaravelでWebAPIのCRUDを作成したので、今回はこのAPIをVue+Vuexで使用してフロント側のCRUDを作っていきます。 投稿日2018年11月14日 更新日2018年11月14日 使用環境 Laravel 5.7 jwt-auth 1.0.0-rc3 vue: ^2.5.7 element-ui: ^2.4.8 vue-router: ^3.0.1 vuex: ^3.0.1 この記事は下記の続きです。 Laravel + JWTAuth + Vue.js でAPIログイン認証の実装 Laravel + Vue.js にVuexを導入する LaravelでCRUD APIを作成する 完成イメージはこんな感じです。 ストアの作成 ストアから作成し

Laravel + Vue.js にVuexを導入する 前回はLaravel + Vue.js でJWT認証をやりましたが、状態管理があれだったので、今回はVuexを導入してもう少しちゃんとにやってみたいと思います。 投稿日2018年10月19日 更新日2018年10月19日 この記事は下記の続きです。 Laravel + JWTAuth + Vue.js でAPIログイン認証の実装 ストアの作成 これがないと始まりません、npmでVuexをインストールします。 $ npm install vuex --save 最初にStoreファイルから作成していきましょう。 新たにstoreディレクトリを作成し、その中にindex.jsを作成します。 resources/js/store/index.js import Vue from 'vue'; import Vuex from 'vuex';

database/migrations/00000_create_contacts_table.php <?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateContactsTable extends Migration { public function up() { Schema::create('contacts', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->string('email'); $table->string

Laravel + JWTAuth + Vue.js でAPIログイン認証の実装 Laravel + JWTAuthでAPIログインを実装して、Vue + VueRouter で簡易的に使用するところまでやってみます。 投稿日2018年10月11日 更新日2019年05月29日 Laravel認証の設定 最初にLaravel側を作っていきましょう。 artisanで標準のWeb認証機能をサクッと作ります。 ターミナルで下記コマンドを実行します。 $ php artisan make:auth $ php artisan migrate シーダーでダミーのユーザー情報も登録しておきます。 database/seeds/UsersTableSeeder.php <?php use Illuminate\Database\Seeder; class UsersTableSeeder extend

Canvasをアナログ手書き風に描画できるJSライブラリ「Rough.js」 アナログタッチ風のCanvas&SVGを描画できるJavaScriptライブラリ「Rough.js 」をご紹介いたします。 投稿日2018年01月09日 更新日2018年01月09日 ライブラリのダウンロード 下記URLの「Download .zip」ボタンからダウンロードします。 Rough.js ダウンロードしたらrough.min.jsを読み込みます。 <script type="text/javascript" src="https://roughjs.com/builds/rough.min.js"></script> 使い方 canvasタグを適当なidでマークアップします。 <canvas id="rough-canvas"></canvas> rectangleで四角、circleで円を描画します

その他カラムや詳細については下記サイトをご確認ください。 データベース構造 – WordPress Codex 日本語版 WordPressでSQLを記述する場所 素のPHPですと、データベースを利用するために初期設定をしてとかいろいろあるのですが、WordPressがインストールされている環境なら、すぐにSQLを書いてデータを取得することができます。 テンプレートの中ならどのファイルでも$wpdbが使用できますので下記のように記述します。 WordPress Template $results = $wpdb->get_results('ここにSQL文を書きます。'); print_r($results); // 結果を表示 テンプレート外ならwp-load.phpをインクルードすれば使用できます。 require_once('wp-load.php'); $results = $wpd

JavaScriptの配列とオブジェクトの扱い方 JavaScripの配列とオブジェクトって同じように操作できることがあったり、できない部分があったりと色々と混乱する部分があるのでまとめてみた次第であります。 投稿日2017年11月21日 更新日2017年11月21日 初期化 配列を使用するのに必ず必要な初期化の方法。 配列は角括弧（ [] ）で囲みます。 配列 // 空の配列で初期化 var arr = []; // 初期値を入れた初期化 var arr = [100, 200, 300]; // 文字列と混在していても問題ない var arr = [100, 'abc', 300]; 続いてオブジェクトの初期化。 オブジェクトはキーとバリューをセットにして扱います。 オブジェクトは波括弧（ {} ）で囲みます。 オブジェクト // 空のオブジェクトで初期化 var obj = {};

Laravelでユーザー登録時に確認メールを送る「Laravel Email Confirmation」 Webサービスではユーザー登録時にメールアドレスが正しいか確認する方法として、確認メールを送信してURLをクリックして登録という流れがよくあります。 Laravelパッケージの「Laravel Email Confirmation」を使用すると簡単に作成できるのでご紹介いたします。 投稿日2017年10月30日 更新日2017年10月30日 Laravel 5.5 bestmomo/laravel-email-confirmation 1.1 を使用します。 インストール＆準備 最初にartisan make:authでLaravel標準のユーザー認証用のファイルを生成。 php artisan make:auth コンポーザーでLaravel Email Confirmationをイ