現行バージョン10(執筆時は9)のLaravelのドキュメントに記載されているのは(1), (2)の方法です。本文書では(2)のLaravel環境下にInertia.jsを利用する方法について説明を行っています。Laravel BreezeやLaravel Jetstreamを利用することでInertia.js + Vueを利用することができますが本文書ではパッケージを利用しない方法を中心に解説しています。 macOSにLaravel 9をインストールして動作確認を行っています。 Laravelプロジェクトの作成 Inertia.jsをインストールする前にLaravelプロジェクトを作成する必要があります。Inertia.jsではJavaScriptを利用するため事前にNode.jsがインストール済みである必要があります。 本文章ではLaravelプロジェクトの作成はlaravel new

最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo

2022年4月22日 サイト全体は Laravel で構築しつつ、ブログや更新情報だけ WordPress を使いたい、というニーズって結構あると思います。WordPress を Laravel の外にインストールして、サブドメインとかで運用する方法もありますが、今回は Laravel のディレクトリ構造の中に WordPress をインストールして共存させることをゴールとします。使用している Laravel のバージョンは 6.x、WordPress は 5.9 です。 Laravel は、/var/www/laravel/ 以下に、WordPress は、Laravel 内の /public/wp/ 以下にそれぞれインストールし、https://example.com/blog/ 以下を WordPress で管理する想定で説明します。ディレクトリ構造が違う場合は適宜読み替えてくださ

FilamentはTALL技術を基盤とするLaravelの拡張パッケージの１つです。 TALLとは、以下の４つの技術の頭文字を取ったものです。 Tailwind CSS Alpine.JS Laravel Livewire Filamentは、データの表示、編集、削除、検索などの一般的な管理作業をサポートするコンポーネントを提供し、簡単にカスタムの管理ダッシュボードを作成することができます。 Laravelの開発環境でお馴染みのLaravel Sailを使用します。 docker desktopをインストールし立ち上げた状態で、Laravelのプロジェクトを作成しましょう。 # cmsとして作成 curl -s "<https://laravel.build/cms>" | bash sailコマンドのエイリアスを作成しておくとコマンドが短く打てますので、ぜひ設定しておいてください。 #

Laravel10のドキュメントには記述されていませんがLaravel10でも認証ライブラリのLaravel UIパッケージを利用することができます。現在も更新が行われておりビルドツールにはViteもサポートしています。 Laravel UIはLaravelのバージョン6から登場しFrontend Scaffoldingとしてドキュメントにインストール方法が記述されていましたがLaravel8からJetstream, Breezeが登場しドキュメントには記載されなくなりました。 Laravel8からは認証機能を利用する場合にはLaravel BreezeまたはLaravel Jetstreamパッケージをインストールする必要があります。Breezeパッケージを利用するためにはInertia.js(Vue, React), Livewire、Alpine.js、Jetsreamパッケージでは

趣旨 エンジニア界隈からは何かと不評な WordPress ですが、一定の需要があることは認めざるを得ません。 何と言っても管理画面のユーザビリティは非常に運用者満足度が高く、 定番プラグイン Advanced Custom Field (特に有料版の Repeater や Flexible Content) を組み合わせた管理画面を見慣れている運用者に対して、 同等の使い勝手をスクラッチで提供するのは並大抵のことではありません。 しかし、複雑な検索機能や認証機能を有するサイトなど、高機能なサイトを開発するとなると、 WordPress で保守しやすいコードを書くのはまた至難の技です。 そこで、 管理画面は WordPress の管理画面を利用する フロント画面は Laravel で作る という発想に至りました。 勘所 本記事のテーマは大きく3つです。 Laravel + WordPres

Laravel9のバージョン9.2からデフォルトのビルドツールがWebpack(Laravel Mix)からViteに変更になりました。Viteはフロントエンドツールとして現在爆発的に人気のあるツールでViteを利用することでフロントエンド開発のスピードを加速させることができます。対象対象はLaravel、Reactを利用した経験がある人なのでLaravel, Reactについての細かな設定は含まれていません。対象はLaravel、Vue.js 3を利用した経験がある人なのでLaravel, Vue.jsについての細かな説明は含まれていません。 Vite環境でVueを利用するためにはいくつかの追加設定が必要なので本文書ではその手順について説明を行っています。 Laravel + Vite + Vue.js 3環境の構築に興味がある人はぜひ参考にしてください。 Laravelプロジェクトの作

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

こんにちは、ssmzと申します。 MMDモデル（pmxファイル）を持っていれば、ブラウザ上でモデルを表示させて鑑賞することができるdoll roomというサイトを作っています。 紹介がてら書いたnoteがあるので興味がありましたら読んでみてください。 前回の記事でRay-MMD風の表現をボタンひとつで簡単に適用できるようにならないか、ということについて触れました。 あれから色々調整して行くうちに、「ユーザーが細かく調整できるようにすれば良くない？」と思うようになりました。 というのもモデルによって質感がまちまちで、設定を決め打ちにしてしまうと薄く見えてしまったり何かと問題がありました。 ユーザーが細かく調整できるように「高度なオプション」という項目を追加しました。 ※doll roomではMMDや3Dの知識がなくても直感的にモデルを表示、操作できることを目的にしています。ので、この機能を使

音が良かったり思い入れがあったりでなかなか他に移れないリモコン機能の無いアンプもボリューム調整の遠隔操作ができます！ ソニーは、MESHレシピ及び投稿が、正確であるかどうか、有用なものであるかどうか、確実なものであるかどうか、ご使用になる皆様の目的に合ったものかどうか、安全なものであるかどうか、第三者の著作権、商標権等の知的財産権、財産、プライバシーもしくは肖像権その他の権利を侵害していないか等につきましては、一切保証致しません。したがって、MESHレシピ若しくは投稿を利用される際は、皆様の責任で利用してください。

Visual StudioでWebAPIを作成してついでにSvelteと一緒にデバッグしようと思ったのだけれど、色々試行錯誤したときのメモ。 Visual Studioのテンプレートでsvelteを使えるのがあったのだけれど、うまく動かなかったので自分でいろいろと頑張った。 ちなみに、Svelte自体のデバッグが、Visual Studioのエディタからできるわけではないです。 あくまでWebAPIとSvelteで作ったSPAが連携してうまく動いているのを確認できる程度です。 実行環境 Windows 10 nodejs .net 6.0 git LinuxやMacでは試していませんが、.netのプロジェクトフォルダのサブフォルダにnpmのプロジェクトを作成するだけなので、多分同じように動くと思います。 WebAPIのプロジェクトを作成 dotnet new webapi -au None

うえむーです。 今回はhacoCMS×SolidJsについてお話しをしていきたいと思います。 まずは、hacoCMSについて説明していきます。 hacoCMSとは？ hacoCMSとはシーサー株式会社が開発したmicroCMS・Newtと同じAPI型のヘッドレスCMSです。 コンテンツ管理のためサーバー管理は一切不要で、アカウント登録するだけでそのサービスがご利用できます。 ヘッドレスCMSとは ヘッドレスCMSの「ヘッド」はビュー(表示する画面)を表すものであり、ヘッドレスなのでビューがないものです。 つまりビューがないCMSです。 hacoCMS(ヘッドレスCMS)の特徴 hacoCMS及びヘッドレスCMSの特徴には以下のような特徴があります。 表示速度が速い マルチデバイスに対応できる(コンテンツをWeb、iOSアプリ、Androidアプリetc..) サイトを部分的にCMS化できる

リライブシャツすごすぎワロタｗｗｗｗｗｗ【リライブシャツを買ってみたらガチだった。】 リライブシャツ 着るだけで「身体機能をサポートする」怪しいシャツがガチだった。 YouTubeやSNSでバズってた「リライブ...

"""Keep running colab runtime. Usage: - `py running.py -u {active google colab's url}` - `py running.py -u {active google colab's url} -s True` --- KazutoMakino """ import os import random import sys import time import traceback import webbrowser from argparse import ArgumentParser from datetime import datetime, timedelta from pathlib import Path from pprint import pprint import pyautogui as pg im