[B! GUI] miguchiのブックマーク

PlaywrightのVSCode拡張を使って効率的にテストを書く

この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright

miguchi 2023/10/25

リンク

rubio-radio - Rubyで作るシンプルなGUIラジオアプリ - Qiita

はじめに Rubyを使ってシンプルなGUIのラジオアプリを作った。 Glimmer-DSL-LibUI を利用した。概要 RadioBrowserのTopVote500がテーブルに表示される。インプットボックスに打ち込むと、ラジオ局をインクリメンタルサーチできる︵Glimmer-DSL-LibUIの機能︶再生ボタンを押すとコマンド(デフォルトではVLC)が起動してラジオを再生する。ポイントと感想 GUIのポイントは、テーブルのインクリメンタルサーチだが、これはGlimmer-dsl-libuiの標準機能を使った。テーブルのColumnの幅の調節ってできるんだろうか？ Glimmer-DSL-LibUI 自動でテーブルの変更を検知して更新してくれるようだ。ラジオ局は https://www.radio-browser.info のAPIを叩いて取得している。 TopVoteから取

miguchi 2022/08/02

GUI
ruby

リンク

Powerful GUI for Firestore - Firefoo

Download Free Trial Available for Mac, Windows, Linux Free 14-day trial No credit card required Import & ExportImport and export collections to CSV and JSON. Download backups of your database and transfer data across projects or to the emulator. Powerful Admin PanelView and edit your data in a table, tree or as JSON. Rename and copy collections and documents, query Firestore from JavaScript. Secur

miguchi 2021/05/29

リンク

宣言的UIはReact Hooksで完成に至り、現代的設計論が必須の時代になる - Qiita

この記事は、ある程度以上の規模のGUI開発において、React Hooks以後の宣言的UIにより、大規模開発に用いられる設計論に完全に対応できるようになり﹁ビジネスロジックの変更や追加﹂に対応するコストを低く保つこと︵技術的負債の抑制︶ができるようになったことを解説するものです。技術的負債の抑制には、技術的負債の原因となりがちな﹁広範囲の密結合﹂と﹁適切な疎結合を保つ仕組みの欠如﹂が欠かせません。それをカバーするのが、大規模開発をクリーンに行える設計論︵ここでは﹁現代的な設計論﹂とよぶもの︶です。クリーンアーキテクチャなんかでGUIによく適用されるHumble Object Patternのようにプレゼンテーションとビューを分離する必然性が無くなるでしょう。ポイントはある程度以上の規模で開発するなら設計論をうまく使い設計しないと、技術的負債を抱え込む︵ビジネスロジックの変更や追加に対

miguchi 2021/03/28

リンク

Kubernetes IDEのLensを使ってみる - Qiita

1. Lensとは LensはKubernetesクラスターにリソースをデプロイ・モニタリングするためのIDE︵統合開発環境︶です。 OSSのソフトウェアでMac、Windows、Linuxで使用することが可能です。 Githubのスターが5000以上、ユーザー数が27万人︵2020年 6/19時点︶と人気のツールとなっています。 2. Lensの良い点 •　ダッシュボード上でKubernetesのコマンドを使用せず、リソースをデプロイすることができる。︵kubectlコマンドだとミスを犯しやすいし、リソースを監視しながらデプロイする場合では分かりづらいことも多々あリます。︶ •　Prometheusと連携して、複数クラスターをモニタリングすることができる。 •　ダッシュボードがカッコよくて分かりやすい。特に、Kubernetesに慣れていない人にとってはGUIで網羅的にリソースを監視し

miguchi 2020/12/24

リンク

GoでGUIをつくる🎋

miguchi 2020/06/09

リンク

【図解】ElectronのBrowserProcessとRendererProcessにハマったのでモジュールとの関係を図にした - Qiita

︻図解︼ElectronのBrowserProcessとRendererProcessにハマったのでモジュールとの関係を図にしたElectron はじめにJSをほぼほぼ書いたことない私がElectronでアプリを作りながらJavaScriptを勉強すれば、JSに触れられて、HTML＆CSSの理解を深められて、今HotなElectronもできて一石四鳥じゃんと思いアプリを作り始めました。しかし、BrowserProcessとRendererProcessの関係︵あとJS自体の仕様も関係ある？︶で勘違いしてハマりにハマったので、理解したイメージを図にします。ドキュメントにはちゃんと文章で書いてありますが、イメージとしてつかんだ方がわかりやすかったです。動作確認したElectronのバージョンは 0.37.8 です。イメージ図こんな感じです。解説は後述してます。 Electronとは

miguchi 2016/05/19

リンク

Photon - Electron開発者要注目のOS X風UIツールキット | ソフトアンテナ

元々GitHubのAtomエディタのために開発されたデスクトップアプリ作成用フレームワーク﹁Electron﹂。HTML/CSSといったWeb系技術を使って、クロスプラットフォームのデスクトップアプリを開発可能なため、多くの開発者の注目を集めています。本日紹介する﹁Photon﹂は、このElectron用の便利なコンポーネントを多数収録したUIツールキットです(GitHub、Hacker News)。ツールバー、タブ、ナビゲーション、リスト、ボタン、フォーム、テーブルといった、GUIアプリ作成に必要なさまざまなコンポーネントを、アプリケーションに素早く組み込むことができます。コンポーネントの見た目もOS X風でクールです。以下ご紹介。バーヘッダーとフッターを組み込むことができます。バーとアクションバーにボタンを設置してアクションを定義することもできまうｓ．バーとタブタブを

miguchi 2015/10/15

リンク

フロントエンド開発が捗るHTTP通信モニタリングツール「Charles」を使いこなす

はじめに﹁Charles﹂はHTTPのプロキシ・モニタを行えるGUIのツールです。似たようなツールとしてはFidllerが代表的ですが、CharlesはUIや操作性がシンプルです︵その分機能は限定的です︶。﹁HTTPをモニタする﹂というとなんだか取っ付きにくそうに感じるかもしれませんが、Charlesを使うことでその認識は大きく変わります。今回はこのツールのさまざまな使い方をWebフロントエンドの開発視点から紹介していきたいと思います。その便利さから弊社のWebフロントエンド開発チームにはなくてはならないツールとなっています。 Charlesとは Charlesは公式サイトの説明にもある通り、HTTPプロキシ／HTTPモニタを行うツールです。機能を大きく分類するとできることはその2点だけですが、かゆいところに手が届く細かな機能を多く持っています。公式サイトから引用すると、機能としては以下