知っておくと仕事が捗る便利ツール17選 - Qiita
はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s
VPSや自宅サーバーにインストールしたいSaaS代替Webアプリ38選
シェアウェア（という表現はおいておいてのやつ。https://anond.hatelabo.jp/20230124045812）の記事が面白かったので、自分の得意分野の領域でいろいろ紹介します。 基本的に、SaaSのサービスは便利だけど、あれもこれもと契約していったらサブスク破産するので、 ものによってはセルフホストした方がいいと思ってる派。 Dropbox/GoogleDrive/box代替 NextCloudもともとownCloudっていうDropbox代替があったんだけど、そこから分派して今も機能開発が続いている。 興味深いのはLAMP構成なので、VPSや自宅サーバーじゃなくても、レンサバで動くのがいいよね。 データ保存領域はオブジェクトストレージ（S3互換）も利用できるので、例えばWasabiなんかと契約してお安く済ませてしまうのも全然アリかと。 Trello代替 Wekan最近は
フロント開発をするときにブックマークしておくと役立ちそうなオンラインツールまとめ - Qiita
概要 フロント開発をするとき、レイアウトやアニメーション、その他CSS等の生成をしてくれるWebツールのまとめです。 使いやすそうなツールがあれば追記していく予定です。 ドキュメント類 何はともあれドキュメントは読む癖をつけて、正しい使い方ができるようになるのが良いでしょうということで mdn (Mozilla Developer Network の略) ウェブ標準ドキュメント 個人ブログやQiita内で「こう使うといい！」って書いてあってもその内容自体が間違っている可能性もあるので、より正確な情報を得るにはmdnを参照する Can I use ブラウザごとにCSSやjsの標準関数等が使用可能かどうか一覧表示してくれる ジェネレーター系 Interactive CSS Grid Generator Gridを使ったレイアウトをGUIで作り、コード生成できる そのレイアウトをもとにCodeP
便利なツールが登場！ 画像をWebPとAVIFに変換・最適化、SVG, PNG, JPG, GIF画像の軽量化・最適化ができるオンラインツール -Optimize Images
次世代の画像フォーマットとして注目されているWebPとAVIF、Webサイトやアプリでよく使用されるSVG, PNG, JPG, GIFの変換・軽量化・最適化ができるオンラインツールを紹介します。 IEのサポートがなくなると、WebPが画像フォーマットの主流になりそうですね。 Optimize Images Optimize Imagesは、画像（SVG, PNG, JPG, GIF）の最適化と圧縮、画像の新しいフォーマット（WebPやAVIF）への変換と最適化が簡単にできるオンラインツールです。 WebPとAVIFは高い圧縮率を備えたフォーマットです。 WebPは簡単に言うとPNG, JPG, GIFの良いとこ取りのフォーマットで、24ビットのフルカラーをサポートしています。高画質の透過PNGのサイズが大きくなってしまうことやGIFアニメーションで色数が少ない悩みも解決します。IE以外の
はじめてのFigma使い方ガイド 基本からプロトタイプ共有まで完全デザイン
Figmaをこれからはじめようというひとがまず知っておきたい、基本の機能や使い方を網羅した完全ガイド2022年版。 ウェブサイトのデモデザインを実際に作成しながら、Figmaの基本となる使い方を一緒に学びましょう。 この記事が読み終わったとき、Figmaの基本的なツールの使い方はもちろん、ウェブデザイン制作の具体的な進め方や、動きのあるプロトタイプの作成、チームによる共有やリアルタイム同時編集まで、一連の流れをまとめています。 コンテンツ目次 1. Figmaを使う前準備 2. Figmaの基本的な使い方について 3. 背景デザインの作成 4. グリッドレイアウトの追加 5. 基本ツールでロゴの作成 6. ナビメニューの作成 7. ヒーローセクションの作成 8. 3カラムレイアウトの作成 9. プロトタイプ機能の使い方 10. Figmaの使い方はアップデート継続中 Figmaを使う前準備
いろんなサービスを勝手に連携させるオープンソースのタスク自動化ツール「Huginn」を使ってみた
さまざまなウェブサービスを連携して作業を自動化してくれるツールにはIFTTTやZapierなどさまざまなものが存在しています。その中でも、「Huginn」はオープンソースで開発されており、自分でサーバーを立てることでデータを傍受される心配なく利用できる自動化ツールとのことで、実際に使ってみて使い勝手を試してみました。 GitHub - huginn/huginn: Create agents that monitor and act on your behalf. Your agents are standing by! https://github.com/huginn/huginn Huginnのページによると、一番簡単なのはDockerを利用したセットアップとのこと。DockerがインストールされたPCのターミナルで「docker run -it -p 3000:3000 hugin
シンプルで使いやすいのが登場！ UIのデザインで役立つ、色に関する便利なツールがまとめて利用できる -hue.tools
指定したカラーの色相、さまざまな詳細情報、混色・ブレンド・変換・グラデーションなどを生成できるオンラインツールを紹介します。 最近のUIデザインで見かける複数のカラーを使用した美しいグラデーションを生成したり、そのカラーを使用したUIデザインや写真素材なども表示され、色に関する便利なツールがまとめて利用できます。 hue.tools hue.tools -GitHub hue.toolsの特徴 hue.toolsはカラーを操作するためのシンプルなツールで、そのカラーの詳細情報、そのカラーを使用したデザインや写真、混色・ブレンド・変換などを簡単に利用できます。MITライセンスで、商用プロジェクトでも無料で利用できます。 hue.toolsには、4つの機能が用意されています。 info 指定したカラーをさまざまな色空間やフォーマットに変換 Dribble、Behance、Pexelsなどで同じ
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
【2021年永久保存版】全部知ってる？WEB関係の人なら知らなきゃ損なツール&サービス50選 | Moriricca Media
今回はWEB関係の人なら知らないと損！なくらい便利なツールやサービスを、50個まとめて、利用目的別にご紹介します。 2021年になりましたが、近年より良いサービスが開発されたものもあります。ご自身のニーズにあわせ、並行して利用して頂くのがおすすめです。 この記事では古くなった情報は新しいものに書き換え、時代の流れに沿った最新サービスだけをビッシリと集めさせて頂きました。 今回は２万字の大ボリュームでお届けします！ 一部、個人的な経験談も混じえてご紹介するので、お急ぎの方はこのブログをブックマークし、ポイントだけ押さえて後からじっくりWEBサービスを見て頂けると幸いです。 クライアントにツールを提案したりもできますので、隙間時間にでもゆるりと読んで頂ければと思います。 それではお楽しみください！ （この記事が良いと思ったら自由にシェアしてね） ★サイト解析に使えるツール・サービス 「WEBサ
動画や映像、アニメーションGIFの背景を自動分析し、背景だけを削除できる無料オンラインツール -Unscreen
.mp4、.webmの動画や映像、アニメーションGIFの背景を自動分析し、背景だけを映像から削除できる無料オンラインツールを紹介します。 通常はグリーンスクリーンで撮影しないと背景を削除できませんが、簡単に背景のない映像を作成できます。 Unscreen Unscreenは、動画や映像から背景を削除できるオンラインツールです。操作も非常に簡単で、動画や映像をUnscreenが100％自動的に分析するので、ピクセルを選択したり、カラーを選択したり、マスクをペイントしたりする必要はありません。 サポートする動画のフォーマットは、下記の通り。 .mp4 .mov .webm .ogg .gif（アニメーションGIF） ファイルサイズや解像度に上限はありませんが、大きなファイルや高解像度は処理に時間がかかります。出力形式は、アニメーションGIFとアニメーションPNGとシングルフレームで、将来的には
DropboxもSlackもたった1つのアプリで！Webサービスを統合管理できるmacOS用アプリ「Station」
SlackやGoogleドキュメント、Dropboxなど、便利なサービスが次々に登場しますが、それらが乱雑になって、結局使うのをやめてしまった。 そんな経験はありませんか？ 確かに、Webサービス・Webアプリケーションであれば、ブックマークに保存しておけばいい話です。 しかし、後で読み返したいたくさんの情報の中に、そうしたプロダクトのURLが混ざっていること自体に不快感を持っているひともいるかもしれません。 ところが、もしDropboxもSlackも、GoogleカレンダーもHerokuも、PocketもWordPressさえも、1つのアプリケーションに統合して、タブで切り替えるだけで簡単に立ち上げることができたら、どうでしょう？ それを可能にしたのが、今回ご紹介する便利なアプリ「Station」です。 今回は、その名の通り*この1本で仕事が完結しそうなmacOS用のWorkstatio
追伸。そろそろおまえもstationでslackやWebアプリを一括管理をするように。 母より - Qiita
みなさん、slackを開きすぎてブラウザのタブが煩雑になったりしていませんか？ gmailやtwitter,GoogleDrive,githubのタブを開いたり閉じたりめんどくさくないですか？ stationを使うと、Webアプリを一括管理できて、ブラウザで見るより効率化できます。 自分はプログラム歴13年、フリーランス歴4年の@望月と申します。 stationをもう6ヶ月以上使っていて、とても良いアプリだと感じたので紹介しようと思いました。 stationを使う事でブラウザでWebアプリ開きすぎ問題を解決しました。 今回はstationの概要と登録したアプリ、使用感を紹介します。 stationは誰でも簡単に使えるので、アプリを一括管理して効率化しましょう！ stationってなに？ https://getstation.com/ stationはモダンな人の為のスマートワークステーショ
Station • One app to rule them all
One app to rule them allStation is the first open-source smart browser for busy people. A single place for all of your web applications.
The Collaborative API Development Platform
Announcing Kong Insomnia 9.3 with after-response scripting, global environments, folder-level configuration, and more. Design, debug, test, and mock APIs locally, on Git, or cloudBuild better APIs collaboratively for the most popular protocols with a dev‑friendly UI, built-in automation, and an extensible plugin ecosystem. Get Started for Free
Shibu's Diary: cURL as DSLとは何だったのか。あるいは細かすぎて伝わらないcURL as DSL。
渋日記@shibu.jp 渋川よしきの日記です。ソフトウェア開発とか、ライフハックを中心に記事を書いていきます。 By Jeremy Brooks under CC BY-NC 先日、cURL as DSLというツールを公開しました。その後、何度も同じような質問を受けたりしたので、ブログにまとめてみます。 なぜこのツールを作ったの？ RESTfulというものは大分一般的になってきました。HTTPでAPIを提供というのもよく見かけます。ですが、僕はこのRESTfulというやつが嫌いです。 GETのURLをシェアすればいつでも同じページがある(変な状態を持たない)、みたいな思想はいいんですが、HTTPのAPIはどうも使いにくい。ドキュメントのHTTPのサンプルを見て、ドキュメントをじっくり読み込んで、パラメータをJSONやらXMLで組み立ててボディに乗っけて(しかも大抵パラメータがアホのように
Diagramly - Draw Diagrams Online
Flowchart Maker and Online Diagram Software draw.io is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy™ and Lucidchart™ files . Loading... Please ensure JavaScript is enabled.
スケジュール作成を簡単に！無料ツールのGantterを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちはディレクターのはるかです。 突然ですが、皆さんはスケジュール作成ツールを使用していますか？ 私は今までずっとExcelでスケジュール作成をしていたのですが、スケジュールに調整が入ったりすると、修正するのが大変で… もっと手軽にスケジュールを作成、調整したいと思い、 Gantterを使ってみました。 ちなみにGantterを選んだ理由は 無料である事。 日本語表記である事。 GoogleDriveと連動できる事。 の3つです。 特にGoogleDriveに連動できると社内（チーム）で共有がしやすいので、私にとってこの点は結構重要でした。 今回はこちらの基本的な使い方をご紹介します。 Gantterの使い方 1. サイトへ http://www.gantter.com/ 今回はGoogleDriveで使用しますので、「gantter editions」から「FOR Google Dr
「今何時？」から「IPアドレスは？」まで一気に解決する情報収集補助ツール9選
さまざまな情報の入手に役立つインターネット。しかし広大なネットの中から、必要な情報をすばやく得るためには、調べ方のコツを知っておく必要がある。なるべく少ない手順で、かつ正確な情報をすばやく入手するための方法を把握しておくことは、ビジネスでもプライベートでも、必須の知識と言っていいだろう。 今回は、ウェブサイトや画像の情報をはじめ、サーバやウェブサイトのデータ、さらにはその評判といった各種情報をすばやく入手するための、便利なツール群をまとめて紹介する。ひとつずつ調べていてはどれだけ時間があっても足りない場合も、これらのツールを使えば効率的に情報を得られる。ぜひさまざまなシーンで活用してほしい。 ◇世界11都市のタイムゾーンを手軽に調べられる「Every Time Zones」 「Every Time Zones」は、世界11都市の現在時刻を手軽に把握できるサービス。現在時間をドラッグすれば各
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
BLOGOS サービス終了のお知らせ
