私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難易度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪い影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その
商用のプロジェクトでも無料で利用できる、管理画面・ダッシュボードのレイアウトやUIコンポーネントが揃ったテンプレートを紹介します。 このテンプレートを使用すると、管理画面・ダッシュボードで必要なコンテンツを簡単に作成できます。 Stisla 管理画面・ダッシュボードに特化されたUIコンポーネントがほとんどすべて揃ったテンプレート。 30以上のサードパーティのライブラリと統合、多くのコンポーネントを簡単に利用できます。 HTML5とCSS3で記述されており、すべてのモダンブラウザでサポートされています。 Bootstrap 4をベースに、Flexboxでレイアウトされています。 一部のコンポーネントにはより簡単にやり取りするために、JavaScript APIを使用。 MITライセンスで、商用プロジェクトでも無料で利用できます。
独自Webアプリや社内ツールが作り放題のオープンソース開発環境「ToolJet」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、さまざまなWebサービスやデータベースと連携して、独自のWebアプリなどを手軽に開発できるサービスをご紹介します！ データソースの連携や画面デザインなどはドラッグ＆ドロップの操作で簡単に構築が可能で、ロジックやイベント処理などもわずかなJavaScriptを利用するだけで開発できるのが特徴です。 オープンソースで開発が進められており、セルフホストすることで大きな制限もなく活用できるのでご興味ある方はぜひ参考にしてください。 【 ToolJet 】 ■「ToolJet」の使い方 それでは、「ToolJet」をどのように使えばいいのか詳しく見ていきましょう！ まずはメールアドレスを入力したら【Create an account】ボタンをクリックして無料のユーザー登録を済ませておきます。 メールアドレス宛にユーザー登録用のリンクが送付されるの
バックエンド Web API に管理画面/管理機能を追加するアーキテクチャパターン - valid,invalid
プレゼンテーションレイヤ、いわゆるフロントエンドがクライアントサイドで実装・実行されるアーキテクチャ (注 1) において、管理画面/管理機能をあとから追加する際にどのような実装パターンがあるのかを整理してみます。 注 1: Presentation Domain Separation の実践の中でも、物理的にプレゼンテーションロジックとドメインロジックを分離しているアーキテクチャです。 用語の整理 プレゼンテーションレイヤ 三層アーキテクチャにおける、システムの利用者へユーザインターフェイスを提供する層です。本記事では"フロントエンド"とほぼ同義で使います。 OSI 参照モデルの第六層ではないです。 バックエンド Web API とは プレゼンテーションを持たない Web API (HTTP プロトコルを用いてネットワーク越しに呼び出すアプリケーション) とします。 プレゼンテーションレ
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
Vuestic AdminはVue.jsベースのオープンソースな管理画面テンプレートです。40以上のUIコンポーネントも同梱されています。 コンポーネントを含むレイアウトは完全なレスポンシブ対応となっています。管理画面系のコンテンツによく必要とされるコンポーネントは概ね揃えられているので、1から作るよりはかなり工数を減らせそうです。 細かい部分のサポートの充実 更にVuestic AdminはJSONファイルによる他言語化対応、MEDIUMライクなテキストエディターの搭載など、ユーザーフレンドリーな設計となっています。 細かい部分もサポートしてくれているのは嬉しいですね。これだけ揃っても完全にOSSなのは貴重かもです。 ライセンスはMITとの事です。 Vuestic AdminOn Github
こんにちは、CX事業本部Delivery部サーバーサイドチームのmorimorkochanです。 突然ですが「あぁ〜管理画面作るのめんどくせ〜」って思うことはないですか？ 例えばRDBと接続されたRESTfulなAPIサーバーを作っていて、一部の管理者向けに管理画面を作りたいが管理画面にこだわりがない場合などなど。 そんな時に便利なのが、Admin.jsです。Admin.jsは管理画面を簡単に作成できるフレームワークです。オープンソースとして公開されており、クラウドにデプロイされているサービスを利用する場合は月額料金がかかりますが手動でサーバーに組み込んでデプロイする場合は無料です。 Admin.jsを使うと、RDBで管理される各テーブルごとにCRUD画面を簡単に作成することができます。これによってRDBと同じプロパティを何度も定義したり同じようなCRUDコードを何度も記述する必要はありま
react-admin-template https://github.com/delprzemo/react-admin-template react-admin-templateの特徴 「react-admin-template」は、以下で構成されたオープンソースの管理画面です。巨大なリファクタリング/クリーニングを回避するため、コア機能のみ提供するコンセプトになっています。 ・React ・jQueryなし ・TypeScript ・React Hooks ・Redux react-admin-templateをインストールします $ git clone https://github.com/delprzemo/react-admin-template.git React-Admin-Template # リポジトリをダウンロード $ cd React-Admin-Template
一休.com レストランを開発している所澤です。この記事は一休.comアドベントカレンダーの10日目の記事です。 先日、一休.comレストランの管理画面をリニューアルしました。 この記事ではその際にAPIの実装方法として採用したGraphQLについてフロントエンド視点で利点や使い所について述べます。 GraphQLについて以下の記事がわかりやすかったです。 「GraphQL」徹底入門 ─ RESTとの比較、API・フロント双方の実装から学ぶ - エンジニアHub｜若手Webエンジニアのキャリアを考える！ 短いまとめ 新しくAPIサーバーを書くなら是非GraphQLで！ というくらい良かった Apolloのエコシステムに乗り切らなくてもいい。ふつうのRESTfulなAPIサーバーの代わりに、くらいの気軽さでGraphQLを採用してもいい プロジェクトの概要 今回リニューアルした一休.comレ
マイクロサービスで管理画面が乱立する問題と対策
こんにちは、qsona (twitter) です。 マイクロサービスアーキテクチャを指向するとき、(主に社内向け)管理画面をそのままサービスごとに作っていくと、マイクロサービスの数だけ管理画面が乱立するという課題があります。FiNC においては、それにより実際に以下のような問題が発生しました。 ユーザの追加/削除や権限管理がとても大変ユーザ(CS対応者)がどこの管理画面を使えばわかりにくい本記事では、 FiNC においてこれらの問題に対してどう対処してきたか、歴史とともに紹介します。 tl;dr各マイクロサービスで管理画面を作ること自体はよい。統一管理画面は開発のコストがかかりワークしなかった認証を中央管理にする権限管理は各サービス固有のドメイン知識だが、中央で一覧/変更できる状態になっていると便利マイクロサービスの横断的関心事への対処は、「標準」を意識する黎明期から、問題が起こるまでFi
WordPressは機能として実装できないものはないのではないか、と思えるくらい自由度が高く多機能なCMSです。一方で多機能であるが故に管理画面のメニューも多く、サイトによっては使っていない機能なのに導線が残っていたり、設定画面に到達するまで階層が深かったり、操作が複雑だとユーザーに使いにくい管理画面だと思われてしまいます。 この記事では私が普段の制作でよく行うWordPressの管理画面のカスタマイズ方法について、独自で実装するものとプラグインを導入して実現するものを合わせて18個、ソースコードと解説を交えながらご紹介します。エンジニアだけでなくデザイナーやディレクターの方も「こんなことができるんだ」と知っておくだけで、より使いやすい管理画面に仕上げていくことができると思うので、ぜひ参考にしてみてください。 その1. ログインページのロゴを変更する 以下のログインページのWordPres
メルペイの社内向け管理画面を振り返る
Merpay Advent Calendar 2019 の 13 日目は、メルペイフロントエンドチーム の @tanakaworld がお送りします。 メルペイの管理画面は 2019 年 2 月のサービスローンチに先立ち、2018 年 11 月にリリースされました。私は 2018 年 8 月に入社してから一貫して管理画面開発に関わり、様々な機能開発・運用を行ってきました。その中でフロントエンドエンジニアとして関わったいくつかのプロジェクトをピックアップしてご紹介します。 目次 はじめに メルペイのフロントエンドチーム メルペイの社内向け管理画面 プロジェクトの振り返り 審査業務効率化プロジェクト マイクロサービス分割プロジェクト 課題感 分割の方針 分割後のアーキテクチャ Component v2.0 リニューアルプロジェクト 課題感 デザインポリシー 開発フロー 社内向け管理画面で今後注
Nuxt.js + FastAPIを使ったデータエンジニアリングなデモ作り - 社内勉強会でデブサミのデモをしました - JX通信社エンジニアブログ
（今更ですが）新年あけましておめでとうございます！ JX通信社でシニア・エンジニアをしています, @shinyorke（しんよーく）と申します. 最近は週に2, 3回, ジムで10kmちょい走っています.*1 JX通信社のエンジニアチームでは, 月に一度みんなが集まる月次勉強会というイベントがあります（基本的に第2金曜日開催）*2. tech.jxpress.net ※過去の開催レポです 2020年初（かつ, 飯田橋オフィス最後*3）の勉強会は, 「普及したいことや年末年始に勉強したことなどを発表するLT大会」 ということで, 私は デブサミ2020登壇時に披露するデモアプリを披露 弊社プロダクトでも使っているFastAPI僕もやりました&Nuxt Core UI ええやで！っていう布教 （ちょっとだけ）野球選手の評価指標を紹介 という発表をさせてもらいました. このエントリーではそんな発
「JX通信社Advent Calendar 2019」7 日目の記事です。昨日は、鈴木（泰）さんの「CodePipelineを用いたLambdaのデプロイについての所感」でした。 フロントエンドエンジニアの渡辺です。今回は社内の管理画面のUIの話です。 はじめに 管理画面、特に社内向けの画面を作る際は、プロダクト側とは少し事情が異なり、 それぞれのコンポーネントのデザインにあまりこだわらない 機能面や、使い勝手の優先度が高い などの事情があります。なので、UIとしては、「このフレームワークに乗っかっておけばコンポーネントが揃っている」という状態が理想です。 JX通信社の管理画面はVue.jsを使っているケースが多く、その際のUIフレームワークにはiViewを使っています。 特徴 基本的にデザインがシンプル カスタマイズできる項目が多い 少し特殊な用途(無限スクロール、ツリー構造のチェックボ
A robust admin template utilizing Vue 3, Vite, Pinia, and Tailwind CSS. It's a modern, MIT-licensed template designed for building efficient, responsive, and fast-loading admin interfaces. Tailored to speed up development, Vuestic Admin integrates the latest web technologies for a seamless experience.
openmediavaultを使ってラズパイでNASを自作してみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ BiTTチームのキー坊です。 今日はお題の通りNASを作っていこうと思います。 というのも、この記事を書いている2021年5末で、Googleフォトの無料利用が終了するということもあり新しいストレージ先を探しています。NASもその候補の一つですが、値段高いものが多いため手が出しにくいですよね。 うちにも稼働しているNAS（QNAP TS−231P）があるのですが、そろそろ容量逼迫が見え始めてます。調べてみると自作で安く仕上げることができるようなのですが、やはりパフォーマンス面が心配ですよね。 その辺りの疑問にお答えするような記事にしましたので、最後まで読んでもらえると嬉しいです！ 僕と同じようなストレージ難民な方いましたら、ぜひ参考にしていってください。 用意するもの ラズパイ4（ラズパイ3でも動作すると思いますが、LANが遅いので非推奨） データ保存用USB接続HDD NA
ここ数年、WordPress のシェアも右肩上がりで、知名度も上がっており、利用される方も多くなってきています。 また、Webサイトの体を成すまでは比較的スムーズに誰でも進められることが多いこととインターネット上にある WordPress の情報の多さなどもあり、クラウドソーシングサービスなどで安価に制作をしてくれる方に依頼し、納めてもらうというというケースも多いと聞きます。 しかし、少々ウェブ制作を学ばれた方が安価に制作を請け負い、最低限の品質を持たないWebサイトを納められて困ってしまう依頼者（発注者）も多いようで、そういった流れでのお困りごとの相談も少なくありません。 僕個人としても、WordPress はとても好きなプロダクトですので、そのプロダクトに関わったがために（WordPressでウェブサイトを作ってもらったがために）不幸になる方がみえるのは心苦しい部分も感じていました。
こんにちは。 ココナラ法律相談という弁護士の先生方と相談したい悩みのあるユーザーのマッチングサービスを担当しているエンジニアの高崎と申します。 法律相談開発チームでは、一般に公開されているユーザーの利便性向上はもちろんのこと、社内のメンバーが利用する管理画面への継続的な改善を行っています。 ココナラ法律相談開発チームでは、RefineというReactベースの管理画面構築用フレームワークを利用して、ココナラ法律相談の管理画面を効率よく再構築しました。 その結果リプレイス作業を通して様々なメリットがあったので、共有したいと思います。 リプレイスの背景 ココナラ法律相談は、2016年にリリースされ、サービス開始から早7年が経過しました。お陰様で順調にユーザー数を増やし、現在では全社の約10%の利益を生み出すサービスに成長することが出来ました。 引用: 2022年8月期通期決算説明資料 ビジネス面
【超簡単】WPでブロックエディタを自作できる、ACFとは？手順も解説 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！「御徒町」を「つれづれまち」と読んでいたバックエンドエンジニアのまうみです。 今回はみんな大好きなWordPressプラグイン「Advanced Custom Fields PRO」（以下、ACFと省略）を使った、自作ブロックエディタの設定方法を紹介したいと思います。 ブロックエディタを自作する方法はいくつかあります。しかし、Reactの知識やjsをbuildするための環境構築が必要ですし、WordPressの実装経験がある方でも、ハードルが高い印象を受けるかもしれません。 また、WordPress本体のアップデートに合わせてメンテナンスをしていく必要もあります。いくらブロックエディタ自体の利便性が良くても、制作やメンテナンスにコストがかかるのは極力避けたいですよね。 そういったハードルをACFを使用することで解決し、簡易的にブロックエディタを開発することが可能です。ゼロからブ
【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」 | バシャログ。
こんにちは、koyaです。 在宅勤務で自宅PCでAdobe製品を開きながら作業することが多くなり、メモリが足りなくなってしまったので16GBから48GBにアップグレードしました。めちゃくちゃ快適です。 最近はChromeだけでもメモリをたくさん使ってしまうので16GBだと足りなくなってしまいましたね… 今回はブロックエディタに独自のブロックを追加する事が出来る「Block Lab」を紹介します。 インストール プラグインの追加から検索、または以下のサイトからダウンロードしてインストールします。 wordpress.org 公式サイト 使用方法 インストールをするとサイドバーの一番下に「Block Lab」が追加されるので、ここからメニューを開くことが出来ます。 All Blocksを開くとデフォルトで「Example Block」が下書き状態で追加されています。 「Example Bloc
WordPressの管理画面でお客様に応じて出したくないっていうメニューもあるかと思います。プラグイン等でも削除できたりしますが、functions.phpからも簡単に削除できるので一覧でまとめてみました。 メニュー消す系のプラグインを使いたくない人や、部分的な非表示なのでプラグイン使うまでもないって案件で参考にしてあげてください！ 管理画面のメニューを消す方法 WordPress管理画面のメニューには「サイドメニュー」と「アドミンバー」の2つのメニューエリアがあります。 ぞれぞれの消し方を見ていきましょう！ サイドメニューを消す方法 サイドメニューはWordPress管理画面の左側に出ているメニューですね。管理画面の中で一番利用頻度の高いメニューかと思います。 サイドメニューは、admin_menuのアクション内でremove_menu_pageによって対象のメニューを指定してあげればO
ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. WordPressのサイトを運用していると、「テンプレートファイルのコードを触ることなく管理画面で簡単に更新できるようにしたい」と感じたことはないだろうか。 そういった要望は、管理画面の中にカスタムフィールドを作ることで実現できる。 その方法の中でも Advanced Custom Fields プラグインを使うことで、簡単にカスタムフィールドを作成することができるだけでなく、複雑な要件を満たすことも可能になる。 WordPressの公式プラグインには、いくつかカスタムフィールドプラグインが存在しているが、ここでは Advanced Custom Fields の全フィールドタイプを徹底解説していく。 ※WordPressバージョン5.2
WordPressテーマを自作・カスタマイズする時に、よく管理画面にオリジナルのメニュー画面を設けたい時があるかと思います。 たとえば、サイトの使い方を管理画面に記載したかったり、サイト全体の設定を管理画面で分かりやすく一括管理したい場合などにオリジナルメニューを設けます。 今回はそんなオリジナルメニュー画面の作り方について見ていきたいと思います。 WordPress管理画面に独自のメニューを作る参考：管理メニューの追加 – WordPress Codex WordPressの管理画面に以下のようなオリジナルのメニュー画面を作っていきます。 メニュー作成は、トップレベルメニューと、サブレベルメニューがあります。 上の大見出しが、親となるトップレベルメニュー、その下がサブレベルメニューになります。 「add_menu_page」「add_submenu_page」を使用して制作します。 トッ
【WordPress】独自のブロックを簡単に作成できるプラグイン「Block Lab」ー後編 | バシャログ。
こんにちは、koyaです。 今回は前回の続きを書きます。 前回のおさらい 前回はプラグインでブロックのフィールドを作成するところまでをやりました。 上の画像のようにブロックエディタ上のフィールドに値を入力して、いざブロックに反映しようとすると画像のようなエラーが出た状態になっている状態で終わりました。 ブロックエディタでのエラーの解消 上記のエラー文では「Block rendered as empty.block-lab-editor__ssr」と表示されています。 ブロックをレンダリングしようとしましたが中身が空でした。と言われていますね。 プラグイン入力した状態では入力画面は作りましたが、ブロックの中身やデザインは設定されていない状態です。 これを解消するためにブロックの中身を作成していきます。 ブロックはテーマディレクトリの下にblocksディレクトリを作成し、その中にブロックごとに
2021年8月24日 Wordpress WordPress 5.8が公開され、ウィジェットの扱いが大きく変わって早1ヶ月。皆さんうまくウィジェットとお付き合いできていますか？レイアウトが崩れたりHTMLの構造がおかしくなっちゃったりの不具合をどうにかする方法や、そもそも元のウィジェットに戻したい！という方向けに記事にしてみます。 ↑私が10年以上利用している会計ソフト！ ブロックベースのウィジェットだとHTML構造がおかしくなる WordPress 5.8のウィジェット使ってみたら出力HTMLがこんなことになるんだなー。クライアントが操作したらどうなっちゃうんだろなー。機能制限するしかないかなー。。。 pic.twitter.com/kJZrUYwNAC — Mana (@chibimana) July 28, 2021 見出しやテキストなどのブロックを単純に並べただけだと、HTMLの構
WordPress5.0から導入された新しいエディタ「Gutenberg(ブロックエディタ)」ですが、慣れると非常に便利で使い勝手が良いです。一度慣れてしまうと旧エディタには戻れないですね。 Gutenbergで記事を書く際、編集画面の見出しや本文にはGutenberg用のデフォルトスタイルが当たっています。すごく見にくいわけではないですが、なるべく実際にブログを表示した時に近い状態で編集したいと思う方は多いのではないでしょうか。 そんなわけで今回は、Gutenbergの編集画面に独自のスタイル(CSS)を適用する方法をご紹介したいと思います。この方法を使えば、実際の表示と同じような見た目で記事を編集することができるようになります。 Gutenbergの編集画面に独自のスタイルを適用する方法 Gutenbergの編集画面に独自のスタイルを適用する方法は、2通りの方法がありますので、それぞれ
こちらの投稿から約4か月。php8でいこうと思ったけど、phpmy adminでエラー出まくったのでphp7.4で行くことに。新しいことやろうとすると、なかなか足並み揃わんもんです。— 世界のアオキ??ベーシックインカム希望 (@aoki_monpro) March 17, 2021php8でいこうと思ったけど、phpmy adminでエラー出まくったのでphp7.4で行くことに。新しいことやろうとすると、なかなか足並み揃わんもんです。ようやくリリースできる事ができました。こちらのリンクからご覧いただく事ができます。最新クーポン情報はこちら今回はこれまで以上のボリュー... 以下 Laravel 5.5 実施時の情報になります。 インターネット上で写真や情報をやりとりできるような 『Webアプリ』や『Webサービス』では、 使う人(ユーザー)がログインして、 自分専用の管理画面から記事を投
WordPress で最大アップロードサイズを変更する方法を紹介します。 例えば、2MBを超えるファイルをアップしたい時に便利な方法です。 functions.php に変更を加える方法 php.ini に変更を加える方法 サーバーの設定を確認 WordPress 側で最大アップロードサイズの変更を試す前に、まずはサーバーの設定を確認してください。 XSERVER やロリポップなどの主要なサーバーでは、サーバーの管理画面でファイルのアップロードサイズを管理している場合があります。 functions.php に変更を加える方法 WordPress でファイルの最大アップロードサイズを変更する方法を紹介します。 例えば、アップロードサイズを 5MB まで引き上げたい場合は、次のコードを functions.php に追加します。 /* WordPressで最大アップロードサイズを変更する
システム開発課の今門です。 前回はWordPressの新しいエディタ、ブロックエディタとはどんなものなのかを紹介しました。 今回はブロックエディタのチューニングについて話します。 現在、WordPressのコア開発の中心はブロックエディタになっています。アップデートがあるたびに、ブロックエディタの新しい機能が追加され、ブロックの数も増えています。 高機能・多機能になるのはもちろん喜ばしいことですが、管理画面のUIも複雑になり、一部の機能しか使わないような場合には、操作性はすこぶる悪くなってしまいます。必要なもののみを取り入れ、不必要なものを表示しないようにチューニングすることで、操作性は格段に向上します。 そのためのTipsをいくつかご紹介します。 [Tips 1] 特定の投稿タイプのみ、ブロックエディタを有効にする [Tips 2] 必要なブロックのみを表示する [Tips 3] ブロッ
作成した再利用ブロックをまとめて確認したいときなどに見る再利用ブロック一覧へ容易にアクセスできるようにする方法です。 テーマやブロックなどの開発中で頻繁に確認するようなときは地味に便利だと思います。 メニューに追加する イメージのように「投稿」メニューの上に新たに「再利用ブロック」というメニューを追加し、クリックで再利用ブロック一覧ページに遷移するようにします。 実装にはfunctions.phpへ下記を記述し、名称を変えたい場合は第2引数、アイコンを変えたい場合は第6引数を任意のものに変更してください。 また、表示位置を変更したい場合はサンプルコード内で4としている部分を任意の数値に変更してください。 add_action( 'admin_menu', 'add_wp_block_menu' ); function add_wp_block_menu() { add_menu_page(
[Laravel5] 管理者/ユーザーのログインを別々に実装する(MultiAuth) | MONSTER DIVE
以前このブログでは「Laravel初心者講座」というシリーズを連載？していたのですが、あの頃はまだLaravel4でした。 しばらく扱っていなかった間にLaravel5になり、すっかり垢抜けて進化してしまいました。 今回、仕事でちょっとしたログイン絡みのシステム構築の機会があったので、久しぶりにLaravelネタを投下してみます。 管理者とユーザのログイン窓口が別で、それぞれ管理したい。よくあるパターンですね。 Laravel5の標準のログイン認証パッケージはよくできているのですが、多少面倒なステップを踏む必要があります。 インストールは省略します！ 初期設定 インストールディレクトリの.envを編集して、DBの接続情報を入力しておきます。 DB_CONNECTION=mysql DB_HOST=MySQLのhost DB_PORT=MySQLのポート番号 DB_DATABASE=DB名
![[Laravel5] 管理者/ユーザーのログインを別々に実装する(MultiAuth) | MONSTER DIVE](https://cdn-ak-scissors.b.st-hatena.com/image/square/03306352b721cb8f93ae21d192a1cb1702869a6a/height=288;version=1;width=512/https%3A%2F%2Fwww.monster-dive.com%2Fshare%2Fimg%2Fog_img.png)
ネットで物を売るとき、アイテムが1～2個であればメモとペンで管理できますが、アイテム数が増加すると発送手続き・在庫管理・問い合わせ対応などがしっちゃかめっちゃかになってしまうことは容易に想像できます。簡単にネットショップを開設でき、かつ自分好みの「売り方」で収益をあげることが可能なイージーマイショップでは、自動で在庫管理してくれ、発送手続きはすっきりと手順化され、問い合わせ対応もスムーズに行える仕組みとなっているとのこと。多機能が売りのイージーマイショップの使いやすさはいかほどなのか、実際に確かめてみました。 ネットショップ開業はイージーマイショップ | セット販売やオーダーメイド商品に強いネットショップ構築 https://www.easy-myshop.jp/ 目次 ◆実際に商品の注文を受け付けてから発送までの流れはこんな感じ ◆配送方法の指定もらくちん＆種類豊富 ◆品切れになっても「
「再利用ブロック」を活用してみよう
以下は、Chloe Bringmanna が書いた WordPress.org 公式ブログの記事「Did You Know About Reusable Blocks?」を訳したものです。 誤字脱字誤訳などありましたらフォーラムまでお知らせください。 このチュートリアルは Joen Asmussen @joen が作成しました。 WordPress のブロックエディター (別名 Gutenberg) には「再利用ブロック」という機能があります。後で使うために保存され、一箇所で編集できるブロックです。 こんなことをしたいと思ったことはありませんか ? 投稿やページをまたいで同じスニペット (断片) を再利用すること。複雑なレイアウトを保存して、1つの投稿から別の投稿にコピー & ペーストする手間を省くこと。 再利用ブロックは、これらのことを可能にします。 つまり、テンプレートみたいなもの ?
Custom Post Type UIなどを使ってカスタム投稿タイプを追加した場合、管理画面でカスタム投稿の一覧を開くとタイトル順で投稿が並びます。 通常の投稿だと日付の降順に並んでいて、新しい記事が上にくるのでわかりやすいですね。 カスタム投稿でも日付の列をクリックすれば日付順にソートされるのですが、一覧を開き直すとまたタイトル順に戻ります。 そこで今回は、カスタム投稿も通常の投稿と同じように、デフォルトで日付順に並べ替える方法をご紹介したいと思います。 WordPress管理画面上でカスタム投稿一覧の並びを日付順に変更する方法 管理画面上の投稿一覧もpre_get_postsを使って簡単に並び替えすることができます。 具体的には、適用しているテーマのfunctions.phpに以下を追加します。 function admin_custom_posttype_order($wp_quer
こんにちは。koyaです。 テレワークを機に自宅を引っ越しました。 自宅にいる時間が長くなると広い部屋が欲しくなりますよね。通勤時間を気にしなくていいので物件探しも幅が広くてよかったです。 OculusQuestやSwitchを所持していても狭い部屋だとやれることが限られていたのでとても快適です。 今回はWordPress5.5で追加された「ブロックパターン」を使う上で外せないと思っているプラグインの紹介をします。 そもそも「ブロックパターン」とは？ カスタムフィールドで言う繰り返しフィールドのようなもので、事前に設定した複数のブロックを一括で呼び出すことができます。 似たようなページを複数作る際に、同じブロックを何度も組む必要性が無くなるので非常に便利です。 ブロックパターンのオススメプラグイン Custom Block Patterns こちらのプラグインを使用することで、記事作成と同
こんにちはfujiharaです。自宅のwifi環境に中継機を導入したら ネットワーク環境が劇的に変化してマジすげぇと感動しています。 今回はカスタムタクソノミーを追加したときに、管理画面で親なし・チェックボックスにする 方法をご紹介します。 方法 カスタムタクソノミーを通常追加するときには以下のコードで 実現すると思います。(詳細オプションは省いて、無名関数で実装しています) add_action( 'init', function () { register_taxonomy( 'bashalog', 'post', [ 'label' => 'バシャログ', ] ); } ); 上記で追加されると以下のようになります。テキストフィールドで追加していく方法 まずはこれをチェックボックスにします。meta_box_cb に post_categories_meta_boxを指定 add_a
国内ASP唯一のレンタルECサイトプラットフォーム 「aishipRENTAL」を試しみたらやりたいこと全部できた。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
国内ASP唯一のレンタルECサイトプラットフォーム 「aishipRENTAL」を試しみたらやりたいこと全部できた。 こんにちは、Webディレクターのともぞうです。 いきなりですがWebサイトをゼロから制作するって大変ですよね。特にECサイト……。 さらに近年増えてきたのが、 カーシェアや民泊などシェアリングエコノミーの盛り上がりにより、年々大きくなるレンタル市場。特にファッション業界では、結婚式やパーティーに来ていくドレスだけでなく、普段着もレンタルして常に最新のものを！という人も増えてきたそう。さらにキャンプ用品や家具、ドローン、GoPro、カメラ、自転車など様々な業種でのレンタルが盛り上がっているとのこと。 同年代の20代女性に聞いてみたところ、結婚式に来ていくドレスをネットでレンタルして、毎回違う格好で参加することが当たり前になっているそうです。 このような時代の変化により、レンタ
Advanced File Managerは、サーバーのファイル編集ができるWordPressプラグインです。 WordPressの設置ディレクトリにあるファイルをプラグインの機能で自由に操作できます。PHP・HTML・JavaScriptなどのテキストファイルをエディタで編集する機能も搭載されています。 このプラグインは、ドラッグ＆ドロップ操作でファイルを移動させることができ、GUI操作のFTPソフトと同じような画面操作でサーバー上のファイルを編集できます。サイトメンテナンスの際に利用すると役に立つプラグインです。 管理画面の設定で日本語を選択すれば、ファイル編集画面を日本語表記にすることもできます。 はじめに このプラグインが優れていること WordPressを設置したサーバーにあるファイルを編集できる。 ドラッグ＆ドロップ操作でファイルを移動できる。 GUI操作のFTPソフトと同じよ
WordPressの自動保存を停止する方法 | 株式会社LIG
こんにちは、ディレクターのエリカです。 WordPressの自動保存、便利ですよね？ しかし、今回は、あえてこれを停止する方法について調べました。 自動保存とは WordPressには、公開前の記事を編集しているときに、その内容を定期的に保存してくれます。意図せず、入力中にブラウザを閉じてしまったり、他のページに遷移してしまったりした場合や、また、入力中の記事を他のユーザーに引き継いだときにも自動保存され、同じ記事の編集画面を開いたときに、自動保存された入力内容を復元するか選択することができるようになります。 また、 Command/Control + S のショートカットで任意のタイミングで自動保存を実行することもできます。 ちなみに、初期状態では、自動保存は有効で、60秒間隔で、入力の自動保存を試みます。 こうなると、データベース上には大量のデータが記録されていくものかと思いますが、自
WordPress（Gutenberg）のカテゴリーやタグをラジオボタンに変更できるプラグインを紹介するよ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
バックエンドエンジニアのハルです。 今回は、WordPressの新しい投稿エディタ「Gutenberg」カスタマイズの小ネタを。旧エディタでのカスタマイズ方法が使えなかったので、このプラグインが使いやすかったよの報告記事です。 タクソノミー（カテゴリー）は基本的に複数選択するものですが、たまにラジオボタンにしたいときがあります。 旧エディタの場合は直接jsでHTMLを変更してカスタマイズしてたりしてましたが、新しいエディタであるGutenbergからはその方法が使えず、簡単にできなくなってしまいました。 こうなったらプラグインを使ったほうが楽なので、いくつか試した結果、一番よさそうだと思ったプラグイン「Radio Buttons for Taxonomies」を使った方法をご紹介します。 サンプルのカスタム投稿とカスタムタクソノミーを用意する 練習用にカスタム投稿とカスタムタクソノミーを用
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
管理画面のUIデザインにおける20の改善ポイント | knowledge / baigie
管理画面用のレイアウトやUIコンポーネントがほとんどすべて揃った、商用利用無料のHTMLテンプレート -Stisla
Vue.jsベースのオープンソースな管理画面テンプレート・「Vuestic Admin」
Admin.jsを使って面倒な管理画面をサクッと作ろう | DevelopersIO
React+TypeScriptでできたミニマルな管理画面「react-admin-template」
新管理画面のAPIにGraphQLを採用した話 - 一休.com Developers Blog
WordPressの管理画面を使いやすくする簡単カスタマイズ18選 | knowledge / baigie
管理画面向けのVue.jsのUIフレームワーク、iViewについて - JX通信社エンジニアブログ
Vuestic Admin — Vue 3 admin template
WordPress納品前チェックリストを作りました | オレインデザイン
Refineでココナラ法律相談管理画面を作り直した話
【完全網羅】WordPress管理画面のメニューをプラグインなしで消す方法 | HPcode（えいちぴーこーど）
Advanced Custom Fieldsの全フィールドタイプを徹底解説
【WordPress】管理画面にオリジナルのメニュー画面を作る方法
WordPress 5.8から追加されたブロックベースのウィジェットとの付き合い方
Gutenberg(ブロックエディタ)の編集画面に独自のスタイル(CSS)を適用する方法
【Laravel】マルチログイン(ユーザーと管理者など)機能を設定してみた【体験談】
WordPress で最大アップロードサイズを変更する方法 - by Takumi Hirashima
WordPressのブロックエディタのチューニング - シナプス技術者ブログ
WordPress：管理画面にGutenbergの再利用ブロック一覧へのリンクを追加する方法
自分好みにネットで物を売る方法と手順を最適化できる「イージーマイショップ」で実際に物を売るとこんな感じ
WordPress管理画面上でカスタム投稿一覧の並びを日付順に変更する方法
【WordPress】ブロックパターンおすすめのプラグイン | バシャログ。
【WordPress】カスタムタクソノミーを親なしのチェックボックスで追加する | バシャログ。
Advanced File Manager: サーバーのファイル編集ができるWordPressプラグイン
blog.livedoor.jp/zeedlimitedlights
diamond.jp
nordot.app
newspicks.com
photoshopvip.net
jp.reuters.com