2024年7月 webトピックス 2024年7月、個人的に気になった記事のまとめです。 投稿日2024年08月02日 更新日2024年08月02日

Posted: 2022.10.30 / Category: PHP / Tag: Laravel 一般ユーザーに表示するフロント画面と管理画面で大きくデザインがことなる場合アセットを分けたいとときがあると思います。 そこで今回はLaravel Viteでビルドの分け方をご紹介します。 Laravel Viteの使い方は下記も参考にしてください。 Laravelに新しく導入されたフロントビルドツール「Vite」でTypeScript+React開発環境を構築する方法 フォルダ構成 resources以下のcss,jsディレクトリにそれぞれback,frontを作成します。 resources ├ css │ ├ back │ │ └ app.css │ └ front │ └ app.css └ js ├ back │ └ app.js └ front └ app.js config設定

RECENT POSTS　/　POPULAR POSTS 2024年3月 webトピックス 2024年2月 webトピックス 2024年1月 webトピックス 2023年12月 webトピックス 2023年11月 webトピックス JotaiでReact状態管理してみる 2023年10月 webトピックス 2023年9月 webトピックス 2023年8月 webトピックス 2023年7月 webトピックス jQueryでスクロールすると表示する系いろいろ1,076,039jQueryでjsonデータを扱ってみる【入門編】502,513jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種410,937jQueryのanimateで自由にアニメーションできるようになろう388,932jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える29

RECENT POSTS　/　POPULAR POSTS 2024年3月 webトピックス 2024年2月 webトピックス 2024年1月 webトピックス 2023年12月 webトピックス 2023年11月 webトピックス JotaiでReact状態管理してみる 2023年10月 webトピックス 2023年9月 webトピックス 2023年8月 webトピックス 2023年7月 webトピックス jQueryでスクロールすると表示する系いろいろ1,076,039jQueryでjsonデータを扱ってみる【入門編】502,513jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種410,937jQueryのanimateで自由にアニメーションできるようになろう388,932jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える29

RECENT POSTS　/　POPULAR POSTS 2024年3月 webトピックス 2024年2月 webトピックス 2024年1月 webトピックス 2023年12月 webトピックス 2023年11月 webトピックス JotaiでReact状態管理してみる 2023年10月 webトピックス 2023年9月 webトピックス 2023年8月 webトピックス 2023年7月 webトピックス jQueryでスクロールすると表示する系いろいろ1,076,039jQueryでjsonデータを扱ってみる【入門編】502,513jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種410,937jQueryのanimateで自由にアニメーションできるようになろう388,932jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える29

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

Posted: 2019.01.18 / Category: HTML&CSS マウスオーバーすると奥行きのあるかのようにくるっと回転するフリップボタンを作ってみます。 See the Pen Flip Pen Navigation by webopixel (@webopixel) on CodePen. HTML タグはaタグの中にspanを入れてます。 span２つにして表裏にした方が直感的ですがマークアップ的に微妙な気がしたので、aにtitle属性を設定してCSSの擬似要素で裏側のボタンスタイルを作成することにします。 html <nav class="flip-nav"> <ul> <li class="nav01"> <a href="#" class="flip-btn" title="HOME"> <span>HOME</span> </a> </li> <li class

Posted: 2017.01.30 / Category: WebDesign CSSで設定するだけですぐに使えるアイコンフォントセットをまとめてみました。 Font Awesome Font Awesome は Bootstrap で採用されていることから一番有名なフォントセットなのではないでしょうか。 現在675個のアイコンを使用することができます。 ローディングなどCSS3でアニメーション設定されているアイコンもあります。 Font Awesome Foundation Icon Fonts 3 CSSフレームワーク Foundation で使用されいるアイコンです。 Foundation Icon Fonts 3 Ionicons Ionic という モバイルアプリを開発するフレームワークで使用されてます。 そのためiOS風なアイコンが多いです。 Ionicons linea ラ

Vue.jsでSVGのリピートパターン画像を作成するジェネレーターを作りました。 あるあるな感じではありますが、SVGのパターン画像を生成するジェネレーターを作成しましたのでご紹介を致します。 投稿日2019年03月20日 更新日2019年03月20日 動作環境 Google Chrome、Firefox、Safariの最新版で使えます。 （パターンSVGはIE11、Edgeでも表示できます。） SVG Pattern Maker 使い方 右パネルからパターンの種類やサイズや色などが選択できます。 今の所「丸」「四角」「ライン（線）」が作れます。 右下にデータ形式のコピーボタンとSVGファイルのダウンロードボタンがあるので書き出して使用してください。 データ形式でコピーしたものは、普通のSVGファイルと同じようにbackground: url()に入れれば表示できます。 css .svg-

vuex-persistedstateでログイン認証の永続化 Vue.js + Vuexでログイン機能を作るだけだと、ブラウザをリロードすると初期化されログアウトした状態になってしまいますね。 vuex-persistedstate というライブラリを使用するとストアの永続化を簡単に実装することができます。 投稿日2018年11月26日 更新日2018年11月26日 データの永続化について JavaScriptでログイン情報を保持するには基本的にはローカルに保存する仕組みを作る必要があります。 ローカルに保存する仕組みとしてはクッキーが有名ですが、最近ではWebStorageを利用するのが一般的なようです。 WebStorageの中でもlocalStorageとsessionStorageがありますが、localStorageはブラウザを閉じてもデータを保持するのに対して、sessionS

Vue.js + Vuexでストアの絞り込み検索（フィルター） LaravelでSPA（タスク管理アプリ）作る日記5回目です。今回はVuexのStateに対して絞り込み検索を実装します。 投稿日2018年11月21日 更新日2018年11月21日 この記事は下記の続きです。 Laravel + JWTAuth + Vue.js でAPIログイン認証の実装 Laravel + Vue.js にVuexを導入する LaravelでCRUD APIを作成する Laravel+Vue.js+VuexでフロントのCRUDを作成 完成イメージはこんな感じです。 ストアの作成 ストアから見ていきます。 tasksステートは実際はサーバーから受け取るデータなので実際は空ですが、データ構造は次のようになっています。 resources/js/store/modules/task.js const state

Posted: 2018.06.20 / Category: javascript / Tag: Vue 前回は一つの要素に対してトランジションアニメーションをしましたが、今回はリストなど複数の要素に対してトランジションをしてみます。 アニメーションしないリストの追加・削除・ソート 最初にアニメーションを使わない簡単なリストの追加・削除・ソート機能をざっくり作成してみます。 <div id="app"> <button v-on:click="addItem">追加</button> <button v-on:click="removeItem">削除</button> <button v-on:click="order = order * -1">並び替え</button> <ul> <li v-for="item in sortedItems" v-bind:key="item.id"

Enter/Leave とトランジション一覧 — Vue.js ざっくり分けると、表示時はenterで、非表示時はleave系のクラスが付与されます。 これを理解したうえでフェードイン・フェードアウトのスタイルを作成してみましょう。 /* アニメーション中のスタイル */ .v-leave-active, .v-enter-active { transition: opacity 1s; } /* 表示アニメーション */ .v-enter { opacity: 0; } .v-enter-to { opacity: 1; } /* 非表示アニメーション */ .v-leave { opacity: 1; } .v-leave-to { opacity: 0; } opacity: 1はデフォルトの値なので省略して、下記サンプルのようにもできます。 トランジションのクラス名を変更する tr

既存のサイトにモダンな感じで 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.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アプリのイメージです。 この規模だとコンポーネント分けると逆に面倒そうですが、練習も兼ね

React入門 WordPressの次世代エディターのGutenbergはReactで作られているらしいですよ。 ということですので、Reactちょっとはじめてみました。 投稿日2018年08月17日 更新日2018年08月17日 開発環境の構築 Reactはスタティックなファイルを読み込んでも始めることはできますが、JSXとかES6とかで書くのがスタンダードになってますので、その辺りの環境を作っていくことから始めます。 とりあえずNode.jsは入っているものとします。 create-react-appというFacebookが提供しているパッケージがありますので、これを利用すると始めやすいと思います。 適当なディレクトリでターミナルから下記を実行してtestというプロジェクトディレクトリを作成します。 $ npx create-react-app test npxというのがあまり見慣れま

読み込みが完了できないと致命的な場合はrequire、問題ない場合はincludeを、ページで一つだけ表示する場合はonceを付ける、複数表示の場合は付けないという使い分けになるかと思います。 指定日にコンテンツを切り替える クライアントワークだと何日の0時に更新したいといった要望は結構ありますね。 その場合、日付機能を使えば指定した日にコンテンツを切り替えることができます。 <?php date_default_timezone_set('Asia/Tokyo'); $date_now = strtotime(date('Y-m-d H:i')); if ($date_now < strtotime('2018-03-15 00:00')) : ?> <p>2018年3月16日 0時まで表示</p> <?php else: ?> <p>2018年3月16日 0時以降に表示</p> <?p

Posted: 2021.10.24 / Category: PHP / Tag: Laravel, Next.js, React Laravel8にReactのフレームワークNext.jsを使う方法をご紹介します。 プロジェクトの作成 今回はLaravelとNext.jsの2つのディクトリを作ります。 最初に空のディレクトリを作り、カレントにします。 $ mkdir laravel-next $ cd laravel-next Laravelのインストール。ディレクトリ名はapiにします。 $ composer create-project laravel/laravel api 次はNext.jsのインストール $ yarn create next-app --typescript プロジェクト名を聞かれるのでclientにします。 ? What is your project nam

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