効果的な管理画面を デザインをするために 避けるべき5つの罠
Building a mindful relationship with digital media for zillennials prone to anxiety
Building a mindful relationship with digital media for zillennials prone to anxiety
面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします。 管理画面を作る動機 ここではTonamelの管理画面について、考えて導入したことを書きます。 tonamel.com Tonamelはゲーム大会やイベントを開催するためのプラットフォームです。We
サービスの管理画面を継続的に改善するためのReact Hook FormとZod活用術 - Mirrativ Tech Blog
こんにちは！ミラティブのフロントエンドエンジニア どじねこ です。 今回は、ミラティブを支える社内向けの管理システムにおいて、機能開発の体験を改善する取り組みを「MUI と Zod、React Hook Form の活用術」としてご紹介させていただきます。 前提 ミラティブでは、他の多くの Web サービスと同様に配信者さんの登録した情報や配信の履歴を管理する社内向けのシステムが存在しています。 特に管理システムのフロントエンドにおいては、その特性上入力フォームの実装がその大半を占めています。 日々の機能開発においては、そうした管理システムに実装された入力フォームの新規実装や機能拡張が行われています。 課題 一般的な入力フォームでは、画面の初期描画の際にすでに設定済みの値をフォームに適用する初期化処理や、入力された内容を検証して必要に応じてエラー表示するバリデーション処理が必要です。 ミラ
管理画面を作るフレームワークrefineを使って、Next.jsで管理画面を作ってみた | DevelopersIO
管理画面って作るのめんどくさくないですか？そんなわけでrefineを使ってみました。 refineは、管理画面を作成するためのReactベースのフレームワークです。refineを使ってNext.jsな管理画面を作ってみました。 管理画面って作るのめんどくさくないですか？ 管理画面は一般的に、データのCRUD（Create, Read, Update, Delete）が行えるデータの管理画面として使われることが多いです。 そうすると、一覧画面があって、データの登録画面があって、データの編集画面があって、データの削除画面があって、データの詳細画面があって…、という感じで大体似たような画面を作ることになります。 そういった手間を軽減するために、refine を試してみました。 refine は、管理画面を作成するためのReactベースのフレームワークです。 refine | Open-sourc
レジストラ管理画面への不正ログイン起因とみられるドメイン名ハイジャックについてまとめてみた - piyolog
2024年6月3日、夢展望は子会社であるトレセンテの公式サイトで使用しているドメイン名の移管処理が何者かによって行われ、ドメイン名が乗っ取られた可能性が高いと公表しました。ここでは関連する情報をまとめます。 レジストラ提供の管理画面に不正アクセスか 被害にあったのはトレセンテが公式サイトで使用をしていたドメイン名trecenti.com。第三者が海外のドメイン管理会社へこのドメイン名の移管処理を行ったことで、同社の公式サイトに接続できない状況が生じた。 同社公式サイトでは、来店予約の際に顧客情報*1の取得をしているが、データは別サーバーで管理しているため、同社の顧客情報の流出は確認されていない。また同社が運営するECサイトも別のドメイン名（trecenti.net）で運営しているため、こちらにも影響はないとしている。 同社が被害に気付いたのは問題の移管処理から2日後の31日9時15分頃で、
対象読者 CSSテンプレートで管理画面開発をしようとしている方 とにかく早く管理画面を作りたい方 管理画面開発の進め方で悩んでいる方 この記事の背景 私はローコードで管理画面を構築できる『クエリア』を作っています。 私自身もエンジニアなので、世の中のエンジニアには、メインのプロダクト開発に100%のリソースを使っていただきたいという思いでクエリアを開発しています。 最近では、お客様も増え、良いフィードバックをいただける機会も増えてきました。 その中で、BootstrapなどのCSSテンプレートを利用するよりも、ローコードで管理画面や社内ツールを開発したほうが便利になる可能性があるということを、もっと多くの方に知っていただきたいと思ったのが、この記事を書こうと思った経緯です。 CSSテンプレートも結局フロントエンドエンジニアの仕事 CSSテンプレートも結局はフロントエンドエンジニアの手を動か
KARTE 管理画面のパフォーマンスの監視をするにあたって考えたことや Datadog の活用のポイント、改善で取り組んだことについて紹介します。
Ant Designで始める管理画面開発
こんにちは、Ubieデザインエンジニアの takanoripです。 最近はずっと社内管理画面を開発しており、そのフロントエンド開発にAnt Design（Antd）を採用してみたので感想と注意が必要なポイントについてまとめました。 Ant Design？ Ant DesignはAnt Group（中国アリババグループの金融関連会社）が開発しているUIライブラリです。現在はReactのコンポーネントや周辺ライブラリが公開されています。 なぜAntdを選択したか 今回の管理画面開発でAntdを採用した理由は次の6つです。 コンポーネントの種類が十分豊富であること できる限り新規でコンポーネントを作らずに実装が進められることが重要 特にRange PickerやComboBoxなど複雑Form用コンポーネントが充実していること アントグループが開発をしていて十分に歴史があり現在も活発に開発がされ
ありがたいことに継続的にご利用者様の数・ご活用頂く業務の幅が増え、積み上がるご要望に日々追いつくべく開発に邁進しております。 今回は先日ベースマキナがリリースした「ロール機能」に付随するお話です。 ベースマキナでは、以前から管理画面上で呼び出す処理ごとに、ユーザーやユーザーのグループ単位で実行を許可する機能があるなど、ガバナンス要求に答える機能を揃えてきました。 今回修正が行われたのはそれとは別のレイヤーで、ベースマキナ上の管理者向けの設定（接続先のデータベースやAPIの情報や、処理の登録、ユーザー追加など）を行う権限を細分化 & グルーピング設定を紐づけられるようにした、というものです。 この機能は成果物で見るとシンプルなのですが、権限管理にまつわる設計・開発はいつも魔物に立ち向かうようなもので、混迷を極めます。 そして、こと管理画面開発となるとその難易度は他の開発よりも高い、というのが
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その経験
#フロントエンド #設計 TL;DR 「管理画面」と一言で呼ぶのが悪い 本当は同じでないものを同じ技術で作ろうとするのが悪い ------ だいたい世の中で「管理画面」と言った場合2つの要素がある 主に toC のサービスを想定 ここではユーザー向けではなく、社内の運営メンバー向けのページ 典型的には /admin のような URL にまとめられがちなやつ 1. 開発者向けの画面（コンソール、ダッシュボード…） phpMyAdmin や #Prisma Studio みたいなもの あるいは ↑ をもう少し社内のメンバー向けに使いやすくしたもの #Rails Admin とかはこの用途で出てきがち 画像が見れるように、とかね 漠然と「管理者」が特権的な操作をする（ユーザーデータを見るとか）のに使う 2. カスタマーサポートやマーケター向けの画面（問い合わせ対応、チケット管理、審査…） ユーザ
「動画のエンコードはどうすればいい？」と言われたので「YouTubeにアップロードして動画管理画面からダウンロードすればいい」と教えたら驚かれた
たび @mesotabi 「動画のエンコード、どのソフトが良い？」って言われたので「YouTubeに非公開動画としてアップロード、動画管理画面からダウンロードすればいい具合に互換性も高いMP4になって落ちてくるよ」って教えたらびっくりされた 俺もびっくりした pic.twitter.com/uTfLzGQErN
こんにちは、CyberFight DX 事業本部で web フロントエンドエンジニアをしている久保です。CyberFight DX 事業本部は複数のエンタメサービスを開発、運用するFANTECH本部に所属しています。今回は、管理画面を対象に WebAssembly ( Wasm ) を導入した事例をご紹介します。 FANTECH 本部では技術ブログでの発信を強化しており、最近では下記のような記事を投稿しています。ぜひご一読ください。 Cloud Run サイドカーで Fastly の Prometheus Metrics を収集して Grafana で可視化する reminder-lintでFeature Flagsの削除漏れを防ぐ マルチリージョンで稼働する内製Feature Flagsの実装 私たちのプロダクト WRESTLE UNIVERSE では、ユーザー対象のキャンペーンを実施す
社内管理画面のデザインもプロダクトデザイン
PdMというキャリアがUXデザイナーの頭によぎったとき スポットライトをどう当て、 どうシステムを見つめるか
当社が運営する求人情報サイト「バイトル」に掲載している株式会社サンライズワークス（以下、当該掲載企業）の応募者情報管理画面への不正ログインが発生し、不正ログインを行った第三者（以下、当該第三者）により当該掲載企業への応募者のうち20名の応募情報の一部と、不正ログインに使用したIDおよびパスワードが外部へメール送信されたことが判明いたしました。そのため、当該掲載企業への応募者の方は、当該第三者および送信されたIDおよびパスワードを用いてアクセスした者に、応募情報を閲覧された可能性があります。 関係者の皆様には多大なるご迷惑とご心配をおかけすることとなり、深くお詫び申し上げます。 現在、鋭意調査を続けておりますが、現時点で判明している事実および本件への対応について以下のとおりご報告いたします。 ■概要 当社が運営する求人情報サイト「バイトル」において、当該掲載企業のIDおよびパスワードを取得し
業務用管理画面開発ツール「Querier」が無料プランを開始
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Hotwire を使って管理画面を簡単にプチSPA化する - Kaigi on Rails 2023
https://kaigionrails.org/2023/talks/yamataka/
初心者ブロガーのブログ挫折回避方法！ブログのアクセス数の少ないうちはGoogle AnalyticsやGoogle Adsenseのアクセス解析や収益管理画面は絶対見るな！心が折られるのでひたすら記事を書こう！
アクセス数の無いうちはGoogle Analyticsや Adsenseのアクセス解析は見るな！ 初心者ブロガーに必要なことはアクセス数の無いうちはGoogle AnalyticsやGoogle Adsenseのアクセス解析は絶対見るなということです。それは一体何故か！？ 答えは簡単で単純！やる気が無くなるだけだから！(笑) これはGoogle Adsense等の報酬やクリック数確認の画面等でも言えますが、それを見てブログをさらに頑張ろう！ とかのモチベーションになるのはある程度のアクセス数と収益が出るようになってからです。 単純な話Analyticsのリアルタイムの人数0とかAdSenseのクリック数0とかを見ても、何クソ負けるか！でブログをガムシャラになって書こうと思う人ってあまりいないと思うのです(笑) これがブログを始めて儲からないからでみんな辞めていく原因の大半になって来ると思い
当社が運営する求人情報サイト「バイトル」に掲載している株式会社アローズコーポレーション（以下、当該掲載企業）が管理するアカウント（以下、本アカウント）を用いた応募者情報管理画面への不正ログインが発生し、不正ログインを行った第三者（以下、当該第三者）により当該掲載企業への応募者のうち12名の応募情報の一部と、不正ログインに使用したIDおよびパスワードが外部へメール送信されたことが判明いたしました。そのため、当該掲載企業への応募者の方は、当該第三者および送信されたIDおよびパスワードを用いてアクセスした者に、応募情報を閲覧された可能性があります。現在のところ、当該応募情報を利用した二次被害の申し出は受領しておりません。 関係者の皆様には多大なるご迷惑とご心配をおかけすることとなり、深くお詫び申し上げます。 現在、鋭意調査を続けておりますが、現時点で判明している事実および本件への対応について以下
デカすぎるレンダリング負荷を持つ管理画面をノーコードでメチャクチャ軽い動作にしたい！！ - Qiita
useTransitionのHookを利用してレンダリングと実際の更新タイミングをズラすことで、UIに触れない時間を限りなくゼロにしています 以下の記事の内容にありますuseRefのアンチパターンにも抵触しないので、より素晴らしい改善を実施いただきました！ ネットスーパーの管理画面を改善したい はじめまして！ イオンリテールという、AEONグループの総合小売業の企業で働く渡邊と申します。 総合小売業とは衣・食・住・H&BCに各テナントを合わせた広い領域を扱う小売業となります。そこで現在私はネットスーパーの新規事業検証に関する部署におり、本記事ではそこの現場作業に必要なデータを登録するための管理画面の不満と改善点を記事にしてみました！！ 実際に改善活動を実行できたわけではなく、まあおそらくこうだよねというところの机上論的ではありますが、現場も苦労しているんだよということでお読みいただけると嬉
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
俺の管理画面 2023年冬 - KAYAC Engineers' Blog
管理画面開発にCSSテンプレートを使うのはもうやめよう
Datadog を使った KARTE 管理画面パフォーマンス改善の取り組み
権限管理は大事で、難しい。特に、管理画面においては。｜Seiji Takahashi@ベースマキナ
【2024年6月版】管理画面のUIデザインにおける25の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
「管理画面はシンプルなフロントエンドが良い」は本当か？ - fsubal
管理画面にWasm入れてみた | CyberAgent Developers Blog
求人掲載企業の管理画面への不正ログインに関するお詫びとお知らせ | ディップ株式会社
髙橋𝕏羚@社会で起こっている闇を暴く匿名ライター👁️👨💻 on X: "「はてなブログ」の有料プランでした。フローレンスの事を書き始めて約一ヶ月くらいですかね。突然アクセス出来なくなり、管理画面を見たら2〜3枚目の通り〝このブログははてなにより非表示に設定しています〟と。そして書いて公開してもネットに上げられない状態になりました。色々調べましたが該当す… https://t.co/nQQA4zlGQV"
（続報）求人掲載企業の管理画面への不正ログインに関するお知らせ | ディップ株式会社