2022年版 Web制作が捗るChrome拡張機能14選 | Pulp Note
Chrome拡張機能には便利なものが多く、特にWeb制作時には積極的に利用しています。昨年も紹介しているのですが、2022年に入ってChrome拡張機能の見直しをして現在よく利用しているものだけで再構成してみたところ、無駄が減り使いやすくなりました。2022年版のおすすめChrome拡張機能を14個紹介します。 Toby for Chrome Chromeを利用しているとかならず出てくるタブ開きすぎ問題。パソコンが重くなる原因の一つで、タブは開きすぎない方が良いです。その問題を解消するのがChrome拡張機能 Toby for Chrome。ついつい増えがちなタブを一括で管理することができます。 私は、案件ごとにSPACESを用意し、関連ページや参考ページをタブで開いてまとめてブクマしています。ドラッグ&ドロップで並べかえができたり、SPACES内に複数のフォルダを用意できるので、タブ管理
VS Code 拡張機能を実装する第一歩を踏み出すために「Get Started: Your First Extension」を試した - kakakakakku blog
「VS Code 拡張機能」ってどう実装するんだろう．最近 VS Code を使う場面が多いため，便利な拡張機能にコントリビュートしたり，自分用に拡張機能を作ったりする機会もありそう．さらに今まで TypeScript をほとんど書いたことがなく，書く機会を探していたという側面もある．今回は VS Code ドキュメントに載っている「Get Started: Your First Extension」を試してみた． code.visualstudio.com 雛形を自動生成する まず，Yeoman を使って雛形となる「Hello World Sample」を自動生成する．今回はドキュメントの通りに TypeScript で HelloWorld という名前の「VS Code 拡張機能」を作ることにした． $ npm install -g yo generator-code $ yo cod
まだVSCode拡張機能探しで消耗してるの？ VSCodeの拡張機能は意外と簡単につくれるよ！！ - Qiita
TL;DR VSCode拡張機能おすすめ記事がバズる度に「確かに便利なんだけど 自分が求めているのと違うんだよね〜」となる人向けに いっそのこと自分で拡張機能つくろうぜ👀 というのがこの記事の趣旨。 そしてVSCodeの拡張機能は思っている以上に簡単に作れるってことを全人類に知って欲しい！！ （拡張機能開発を活発化してIDE最強の座を揺るぎないものにするのが目ry Jetbrainsは高いよ 重いよ） また、JS初心者のいい題材にもなると思う！？ 例題としてステータスバーにSlack通知ボタンを配置して、即座にコード（任意のメッセージ）を送信できる拡張機能を挙げる。 開発環境構築 VSCodeが提供しているAPIを使うことでわりかし簡単にいじれる。また、面倒な開発環境も数コマンドで整ってしまう。 （Node.js環境構築済み前提 まだな人はMacならHomebrewからのnodenv経由
Visual Studio Code はじめての拡張機能開発 - Qiita
最近、Visual Studio Codeを使い始めました。 主に、メモ程度の文書作成ですが、Markdpwn形式で作成して、まとめています。Previewが簡単に見れるのがいいですね。 さて、本題ですが、ほしい機能が見つからなく、拡張機能を作ることができるので、作ってみたいと思います。といっても、作り方がわからないので、HelloWorldです。 Hollo worldを表示する拡張機能 ここに書くサンプルは、、公式サイトに載っています。 公式サイト Example - Hello World 開発環境 Windows 10 Pro 1607 Visual Studio Code v1.4 node.js v6.3.1 環境構築 Node.js まずは、Node.jsが必要なので、インストールをします。 Node.jsには、LSTとCurrentがありますが、そろそろ、LSTになりそうな
macOS Safariを12にしたらはてなブックマーク機能拡張がなくなった際の解決法
macOSでSafariが12にバージョンアップしました。喜びいさんでアップデート後、どんな機能が追加されたのかとわくわくしながら起動すると、こんなダイアログが…。 人によって違うと思いますが、私の場合は10個くらい機能拡張がやられた気がします。使っていないものもあったので大半は良いのですが、はてなブックマーク機能拡張が使えなくなったのが痛いです。ということで解決法。 はてなブックマーク機能拡張をダウンロード はてなのサイトから機能拡張をダウンロードします。 Safariでも快適ブックマーク！はてなブックマークSafari拡張登場！ 機能拡張を解凍 ターミナルを開いて、~/Downloads に移動します。 機能拡張はドキュメントなどのフォルダに移動しておいた方が良いはずです（未検証）。ダウンロードから消してしまうと動かなくなるかも。 Safariで開発者メニューを追加 Safariの環境
Your First Extension
Version 1.91 is now available! Read about the new features and fixes from June. In this topic, we'll teach you the fundamental concepts for building extensions. Make sure you have Node.js and Git installed. First, use Yeoman and VS Code Extension Generator to scaffold a TypeScript or JavaScript project ready for development. If you do not want to install Yeoman for later use, run the following com
Overview · Adobe XD Plugin Reference
This XD Plugin documentation is out of date. Find updated documentation on Adobe.io. Plugin APIs Bring new features and capabilities to XD Shape the future of design by creating plugins for yourself, your team, or the world. To share a plugin for all XD users, submit it to Adobe. After review, you’ll be published in the XD Plugin Manager. Figure: Develop: API documentation, code tutorials, and sam
初めてのBrackets拡張機能の作成 | Adobe Developer Connection
読者は、BracketsまたはEdge Codeに関する知識があり、JavaScriptを十分に理解している必要があります。 必要なアドビ製品 Brackets（JavaScript、HTML、CSSで記述されたオープンソースのWeb用コードエディター）。 新しいオープンソースのWeb用コードエディターであるBracketsでは、拡張性が重視されています。実際、Quick Open（すぐに開く）、Quick Edit（すぐに編集）、HTML Code Hinting（HTMLコードヒント）などの中心的な機能のいくつかは拡張機能として実装されています。 Bracketsのアーキテクチャは高度にモジュール化されており、Bracketsのメインコードをできる限り的を絞ったものに保ちながら、高いカスタマイズの可能性を提供することによって、問題点の分離を実現しています。これは、現代のWeb開発者のニ
Google Chrome拡張機能のアクセシビリティチェックツール"Alix"が便利すぎた - Qiita
Google Chrome拡張機能のアクセシビリティチェックツールAlixが簡単便利でかなり使えたので紹介します。 概要 Alixはa11y.cssを元にしたChrome拡張HTML lintツールで、閲覧中のHTMLコードにチェック用のCSSを当てることによってアクセシビリティ上のエラーを検証し、マークアップに関するアドバイスをしてくれます。 Chrome ウェブストア GitHub 使い方 Chromeを立ち上げ、Chrome ウェブストアよりインストールします。 Chromeの右上に><という形をしたAlixのアイコンが表示されるのでクリック。 すると設定画面が表示されます。 LanguageはEnglishを（残念ながら日本語はありません）選択。 通知レベルはEverything（旧式の書き方、注意とエラー、アドバイス）, Obsolete Stuff, Warnings & Er
これはオススメしたい！『Google Chrome』拡張機能12選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ ディレクターのともぞうです！ あっというまに夏が終わり、気づけば今年も残り少なくなってきて焦ります……。 今回は、業務効率化でかかせない Google Chrome の拡張機能をご紹介します！ 気が早いですが、年末の忙しい時期に向けて効率化を図りましょう！ 業務効率編 開いているページを一気に共有！ – Copy All Urls https://chrome.google.com/webstore/detail/copy-all-urls/djdmadneanknadilpjiknlnanaolmbfk 開いているタブのURLをクリップボードにコピーしてくれます。複数の URL を共有したいときに便利です。 デザイン確認後に修正してほしい URL のみをコピーしたりするときに利用します。 1クリックでページ全体のスクショができる – Full Page Screen Cap
Adobe Application Extension SDK
ADOBE® CREATIVE CLOUD® 2014 USING THE ADOBE EXTENSION SDK 2014 Adobe Systems Incorporated. All rights reserved. Using the Adobe Extension SDK Adobe, the Adobe logo, Creative Cloud, Creative Suite, Dreamweaver, Fireworks, Flash, Flex, InDesign, InCopy, Illustrator, Photoshop, Premiere, and Prelude are either registered trademarks or trademarks of Adobe Systems Inc. in the United States and/or oth
Bracketsの拡張機能を作成して痒い所は自分で掻いてみる
皆様、いかがお過ごしであろうか？ 最近仕事をしている夢ばかり見る野地である。悪夢か。 最近職場でPhpStormを使用するようになり、とりあえずCtrlを押しながら関数名をクリックすると定義元までジャンプする機能に驚愕した。 自分は今まで Dreamweaver Brackets Visual Studio という作業環境の変遷をたどってきたのだが、なるほど、Twitter上を始め様々なところで一流な方々が褒めちぎる理由も分かるという感想だ。JetBrainsさん、ヤバいっす。 しかしいくら機能に優れているとしてもIDEとしての宿命か、やはり重い……というのも正直なところだ。 そんなわけで、ちょっとしたコードの修正や普通の文章を書く際は未だにBracketsを愛用している。 実質使っていた期間は一番長く、軽快さや拡張の気楽さで、浮気しつつもやっぱり好きなエディタだが、今回はそんなBrack
こんな簡単でいいの？便利すぎるPhotoshopのプラグイン23選
デザイン制作の大半をPhotoshopで作業する人も多くいらっしゃいます。 そんなPhotoshopですから、自分仕様に環境を整えておくことで作業の快適具合も大きく変わってきます。 今回は、Photoshopでの作業を効率化する使い勝手の良いプラグインを28個に絞りご紹介します。 フォトショッププラグインとは、標準機能を拡張するファイルのことです。必要に応じてインストールすることで作業効率を飛躍的にアップさせることが可能です。 全てインストールする必要はありませんが、気になるものがあれば是非一度使ってみてください。 便利すぎるPhotoshopのプラグイン23選 1.Velositey http://dandkagency.com/extensions/velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなど
Photoshop HTML Block
If you like this plugin, take a look also to the Photoshop Browser Preview
指定距離移動・複製
Move Items at the Set Distance は、選択しているオブジェクト群をあらかじめ指定しておいた数値で移動・複製するスクリプトです。 ドキュメント毎に数値を保存することができるので、案件によって変わる、頻繁に使用する数値を登録しておくと便利です。指定した数値は「//script」というレイヤー内にパスアイテムを自動で作成し、そのパスアイテムの大きさで管理されます。 オプションを設定したり移動・複製を実行するダイアログスクリプト以外にも、ダイアログスクリプトで指定したオプションをダイレクトに実行する個別のスクリプトも同梱してあります。 スクリプトには ショートカットキーを割り振る ことをオススメします。 Move Items at the Set Distance 実行時 単位 現在開いているドキュメントの単位。 指定距離移動 移動距離の指定。4つまで指定可能。数値はド
素早く画像書き出しできるillustrator向けスクリプト - Two hats
12/11追記・・・JPEG書き出し追加とファイル名の拡張子が重なる場合のバグを修正しました。 9/10追記・・・保存先指定と、オブジェクト名からファイル名を付ける機能を追加しました 以前、画像切り出し用のスクリプトを作成しましたが、スクリプトの宿命というか実行するたびに「ファイル＞スクリプト＞何々スクリプト」という操作の手間があってビミョーに使いにくい操作性になっていました。 なんとかもっと簡単に書き出しできるようにならないか・・・と色々と調べていくうちに、スクリプトだけでもExtensionのような常駐型のウィンドウで作れるということが分かり、これを使ってより使いやすいスクリプトとして作り直しました。 このスクリプトのコンセプトは「とにかく、手間なく素早く書き出す！！」です。設定や書き出す前の下準備などは最小限に抑え、ワンクリックで書き出せる！ぐらいの気持ちで設計しました。UIもかなり
illustratorでUIデザイン：画面遷移図作成スクリプト - Two hats
illustratorでUIデザインをし始めると便利だなーと思うところが幾つかあります。 その内、個人的に押しなのは「アートボード」です。 1つのファイルで複数の画面を作成・管理することができ、一覧性が高いのでアプリの全体を俯瞰しつつ１つ１つの画面を作成していくことができます。 但し、単に画面が並べてあるだけなので画面遷移図のような並びにできたら便利だろうなと思いついてスクリプトを作成してみました。 画面遷移図.jsx Githubにもアップしてみました。github.com 使い方 例として、画面検討するためにワイヤーフレームの画面構成図をillustratorで作ったとします。 単に作っただけだと下図のように並んでいるだけです。 1.アートボードに画面遷移図用のタグをつける 「パネル>アートボード」でアートボードパネルを開き、名前にタグを埋め込んでください。タグと言っても難しいことはあ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
Frontity - The React Framework for WordPress
Brackets拡張機能スニペット