【Chrome拡張機能】はてなブックマークのフィルタリングを可能にする「はてなNG」と公式アドオンの紹介 - えむしとえむふじんがあらわれた
こんにちは、えむしです。最近、はてなブックマークでお困りの方が多いようなので、こういう解決方法もありますよ、と言うご紹介のエントリーです。 はてなNG はてなブックマークでアイキャッチを変更 アイキャッチの変更方法 はてなのお知らせ はてなNGだけだとちょっと短いので、公式のアドオンも軽く触れていきます。 はてなNG フィルタリングでブックマークを快適にできます。 この機能拡張、以外と知られていないんじゃ無いかと思います。 chrome.google.com 使い方を見ていきましょう。 下の画像は検索窓に当サイトのURLが入っていまして、表示されている記事は全て当サイトの記事になっています。 解説 画像で見ていきますよ。 画像ではサイトの例を紹介していますが、NGワード、NGIDの設定も可能です。 結果 上のNGサイトには、当サイトのURLを入力しました。さあ、この状態で、上のアドオンのフ
手軽にブラウザ上の操作を録画できる拡張機能「HYFY」 | ライフハッカー・ジャパン
「HYFY」は手軽にブラウザ上の操作を録画できる拡張機能です。ワンクリックで録画を開始できます。マウスポインタも録画され、クリックしたところは波紋が表示されるのでマウス操作も把握しやすいですよ。Webサイトの使い方などに使えそうです。 以下に使ってみた様子を載せておきます。まずHYFYへアクセスしましょう。Google Chromeに拡張機能をインストールしましょう。インストール後、録画したいWebページを開きましょう。 「Start Recording」から録画を開始できます。ブラウザ内での操作がすべて録画されますよ。また、マイクの音声も記録されているので、口頭で操作を解説することもできます。 録画したデータはその場でHYFYのサーバへアップロードされ、共有用のリンクが生成されます。ブラウザ上の操作を手軽に録画・共有することができるので、ぜひ一度お試しください。 HYFY （カメきち）
【これ神】Chromeのテキストフィールド内の文字列をSublime Textでリアルタイムに編集できる拡張機能「GhostText」 – 和洋風KAI
次に、Sublime Text 3を起動して、Package Controlを開きます。↓↓ Install Packageをクリックします。↓↓ GhostTextと入力して、GhostTextをクリックすればインストール完了です。↓↓ GhostText for Chromeの使い方。 まず、テキストフィールドのあるページにアクセスします。 そして、Chromeの右端にある、GhostTextアイコンをクリックします。↓↓ こんなボックスが表示されるので、編集したいテキストフィールドにカーソルを当てます。↓↓ すると、テキストフィールドが青く囲われて、↓↓ Sublime Textにテキストフィールド内の文章が反映されます。なんて便利な！↓↓ さて、GhostTextが凄いのはこれだけじゃなく、なんとSublime Textで編集した文字がリアルタイムにChromeのテキストボックスに
ウェブデザインの勉強に！サイトのトレースを爆速化するツール5選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのみやです。 僕の地元では電車のドアは手で開閉します。襖のように左右に手で開けるのですが、未だにこの癖が残っていてたまに手を持っていかれます。 ところでデザイナーの皆さんは、どのようにウェブデザインを勉強していますか？ 僕は最近、ウェブサイトのトレースを始めました。 トレースとは、実際のウェブサイトをキャプチャしてその上から全く同じサイトを作っていく作業のことになります。 実際に手を動かしながらサイト構造やトンマナを学べるため、非常に効果的な勉強法です！ 今回はこのトレースを効率良くおこなうためのツールをご紹介します。 ウェブサイトの勉強で何をすればいいか分からない方や、なかなか時間が取れない方などにおすすめです！ Google Chrome拡張機能 サイトのキャプチャに便利な『Awesome Screenshot』 https://chrome.google.com
文書校正ツール textlint の Chrome 拡張を作った - もなでぃっく
以前、プラグインで拡張可能な文章校正ツール textlint で小説の作法を検証するための規則を作ったのですが、textlint はコマンドラインツールであるために利用するまでのハードルが高い状況でした。 Sublime Text や Atom などのプログラマ向けエディタを利用していれば、textlint のプラグインが使えたりするのですが、今回はより簡単に利用できるように Chrome の拡張機能として textlint をブラウザ上で使えるようにしてみました。 インストールはこちら: 【Chrome ウェブストア】 textlint: 文章チェッカー インストールすると、ページ内の編集領域で文章入力中にリアルタイムで校正してくれるようになります。（もちろん ON/OFF できます） textlint に最近追加された自動修正機能にも対応しているので、ボタン一発で自動で修正されたりしま
HTMLとCSSでのデザイン実装に必須なブラウザに画像を重ねて表示してくれるブラウザ拡張PerfectPixel | jMatsuzaki
HTMLとCSSでのデザイン実装に必須！ブラウザに画像を重ねて表示してくれるブラウザ拡張「PerfectPixel」！ 2016年1月8日投稿 カテゴリ：HTML/CSS 著者: jMatsuzaki 私の愛しいアップルパイへ WebサイトやWebサービスを作るときに時間がかかるのがデザインの実装ではないでしょうか。特に、デザイナーさんがデザインカンプを用意してくれている場合には、画面と画像を交互に見ながら実装しなければならないため、正確にHTMLとCSSを実装するのは骨の折れる作業です。 とはいえ、せっかくデザイナーさんが作ってくれたのであれば1px単位で正確に実装したいという気持ちもあるでしょう。そこで役立つのがWebブラウザ上に画面を透過表示してくれるChrome拡張機能「PerfectPixel」です。 ▼公式サイト ▼Chrome版ダウンロード https://chrome.go
タスク管理ツール「Trello」をもっと便利にするChrome拡張機能まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは段田です。 最近、タスクツールの「Trello」を使い始めました。 このツール、付箋を使うような管理方法で直感的に使いやすく、かなり良いタスクツールです。 ※あくまで個人の感想です。 また、TrelloはChromeブラウザの拡張機能で機能を追加することができ、タスク管理の手助けになります。 そこで、今回はTrelloを使うときにおすすめしたいChromeブラウザの拡張機能を紹介したいと思います。 Trelloとは？ 簡単にTrelloの説明をします。 https://trello.com/ Trelloは、海外製の無料タスク管理ツールです。 個人はもちろんチームでの利用も可能で、タスクを複数人で共有することもできます。弊社でも一部チームではTrelloでタスク管理してたりします。 PCはWebブラウザから利用でき、スマホの場合でもiPhoneとAndroidでそれぞれアプリが用
PhotoshopでのUIデザインが楽になる！レイヤーの作業を便利にする無料の機能拡張 -LayerCraft
PhotoshopでWebページやアプリのUIデザインをしている時に役立つ、レイヤー作業が便利になる無料の機能拡張を紹介します。 各ページのデザインを作るためにヘッダとフッタだけがあるPSDにしたい、ナビゲーションやボタンなどパーツのみのPSDが欲しい、スマホ用の画像を書き出したい、などいろいろです。
デザインチェックに！ ワンクリックでUser Agentを切り替えられるchrome拡張機能 | ライフハッカー・ジャパン
「ExtensionUser-Agent Switcher for Chrome」はワンクリックでUser Agentを切り替えられる拡張機能です。Safari、IE、Firefox、Operaなど主要なブラウザに加え、iPhone、iPadのUser Agentに切り替えることができます。スマホ用のデザインチェックなどで使えそうですね。 以下に使ってみた様子を載せておきます。まずExtensionUser-Agent Switcher for Chromeへアクセスしましょう。Google Chromeにインストールしましょう。 このようにアイコンをクリックして、切り替えたいUser Agentを選択すればOK。アイコンバッヂに現在適用されているUser Agentが表示されるのでわかりやすいです。Google Chromeのデベロッパーツールでも変更できますが、拡張機能を入れている方が
ライバルサイトのアクセス数や使用しているWebサービスを調査するためのツール類まとめ
横田です。自分が見ているWebサイトやブログが、どのようなCMSやホスティングサービス、広告ビーコンを埋め込んでいるのか気になる人もいると思います。それが商売敵であるライバルサイトであれば、さらにそう思うでしょう。 今回は、自分が見ているサイトのアクセス数や利用しているWebサーバ、CMSなどのミドルウェア、利用しているビーコン、利用しているホスティンクなどを調査するためのツール/サービス群をご紹介します。気になるサイトがあれば、これらのツールを利用して、どのようなサービスを利用してWebサイトを作っているか、調べてみましょう。 《1 どのような広告・アクセス解析が埋め込まれているか知りたければ Ghostery》 商用のWebサイトには、広告用のビーコンやアクセス解析用のビーコンなど、様々なWebビーコンが埋め込まれています。このようなビーコンを検知するにはGhosteryを利用すると良
文字の上にカーソルを置くだけでフォント名やサイズを特定、試し打ち＆ダウンロードも可能な「Fontface Ninja」
ウェブサイト上で「このフォントいいなあ」と思った時にカーソルをかざすだけでフォントの種類やサイズを知ることができ、さらにその場でフォントの文字を試し打ち＆サイズの変更などが可能で、わざわざフォントのダウンロードページを開かなくても閲覧していたウェブサイト上からフォントのファイルをダウンロードまでできてしまうというGoogle Chrome拡張機能＆Safariプラグインが「Fontface Ninja」です。 Fontface Ninja http://fontface.ninja/ Fontface NinjaはGoogle Chrome拡張機能とSafariプラグインがあり、ブックマークレットは現在開発中のようです。今回はGoogle Chrome拡張機能を使用してみます。 Google ChromeでChrome ウェブストアのFontface Ninjaのページを開きます。 右上に
スマホ版のウェブデザインをクリック一発で確認できるChrome拡張機能「MobileLayouter」
使い方はいたってシンプル。スマホ版のウェブデザインを確認したいページにアクセスし、右上のツールバーで確認したいスマホの端末をクリックするだけ↓↓ このようにサクッとスマホ用のページを見ることができます。↓↓ あとがき @isloopをフォローする かなり便利な拡張機能ではあるのですが弱点もあります。 まぁMobileLayouterが悪いわけじゃなくChrome自体の問題なのですが、ウィンドウの横幅が400px以上に小さくならないのですね。 したがってパーフェクトにiPhonenでのデザインを確認できないのがたまにキズではあります。（画面幅は320pxに出来ます。） まぁ、iPhone 6からどえらく画面が広くなるみたいですけど・・・。 あぁホントにデカクなるのかなぁ。Storyboardの分岐が増えてしまうがな・・・。ﾊﾅｼｿﾚﾀ 【関連】AutoPatchWork - 分割してるページ
Photoshopをより便利に利用できる無料プラグインいろいろ
2013年12月17日 Photoshop, 便利ツール デザイナーにはかかせないツール、Adobe Photoshop。Creative Cloudになってどんどん便利になってきましたね！そんなPhotoshopをさらに使いやすくしてくれる無料プラグインが多数配布されています。私はPhotoshop CC ver. 14を使用しており、そのバージョンで使えるプラグインを中心に紹介していきます！ ↑私が10年以上利用している会計ソフト！ Photoshopプラグインの使い方 最新版のAdobe Extension Managerをダウンロード＆インストール ダウンロードしたPhotoshopプラグイン（.zxpファイル）をダブルクリック 自動的にAdobe Extension Managerが起動するので、そのままプラグインをインストール。自動的に起動しない場合はAdobe Extensi
CSSを編集して自動保存できるChromeの拡張機能「DevTools Autosave」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です。 突然ですが、皆さんはどうやってWebページを組んでますか？ 僕は、HTMLの骨組みをひと通り書き終え、それからChromeで直接CSSを書いていきます。個人的には、ChromeはCSSをリアルタイムでいじれるので便利です。 しかし、この手法で組むと、CSSを追加、編集するたびに、いちいちコピペを連発しなければならない。しかもその後ちゃんとコピペしきれているか別タブで確認して・・・。 これは、NO GOODです！ 「編集したCSSをそのまま保存できたらなあ。」と誰もが思うことでしょう。ブラウザのセキュリティ上、そのような機能は永遠に提供されないと思われますが。 と、思ったのは誤算でした！ なんと、Chromeが開発者向けに「Chrome DevTools Autosave」という名の拡張を出しているんです！これを使えば、編集したCSSがそのまま保存されます！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
スマホやパソコンで遠くのパソコンを操作できるChrome拡張機能｜Mac - 週刊アスキー