[2018/07/07 追記] 本記事ではChrome拡張について説明していますが、Firefox1やEdgeの拡張機能もほぼ同じ仕組みで動いています。 [2023/11/06 追記] #参考 ページを追加しました。 Chrome拡張。便利な機能を簡単に追加できるので使っている人も多いと思います。 ただ、インストール時の権限の注意書きが分かり難いので無条件に承認（追加）していることもあるのではないかと思われます。 そこで、本記事ではChrome拡張の権限の種類・確認方法の他、拡張がどこまで（悪いことを）できるのかとその対策を3段階の権限（危険性）レベルごとに紹介していきたいと思います。 便利だが危険性もあるChrome拡張 Chrome拡張をインストールすると、Webページを読むというブラウザ本来の機能だけでなく様々なことができるようになります。 例えば、Webメールの新着通知や記事などの
ウェブ系エンジニアにとってブラウザは、自分好みにカスタマイズして使い倒したい一種の仕事道具のような存在なのではないでしょうか？ 最近だと、純国産で多機能なブラウザ「Kinza」が登場し、国内でもエンジニア好みのブラウザが増えている印象。 とはいえ、やはり不動の人気を誇るのがGoogleの提供するChrome。これまで幾度となく、ネット上ではエンジニアにとってオススメのChrome拡張機能が紹介されてきましたが、今回改めてエンジニアにとって本当に必要であろう拡張機能を8つに厳選しました。 Chrome愛用のエンジニアはお見逃しなく！ 1. YSlow http://yslow.org/ エンジニア向けとしてよく紹介される王道の拡張機能「YSlow」。サイトパフォーマンス計測ツールであり、Webサイトの表示を高速化する際に役立ちます。 最近で言えば、このサイトスピードをいかに早くするか、ある意
みなさんブラウザは何を使っていますか。 僕はchromeです。 今回はchromeの検証の便利な機能を紹介したいと思います。 各種ショートカットキーはMacのものです。 何か便利小技が増えたら、ここに追記していこうかと思います。 1. 拡大縮小 拡大：「command」 + 「shift」 + 「+」 縮小：「command」 + 「-」 元の大きさに戻す：「command」 + 「0」 通常のブラウザの拡大・縮小と同じ 2. 上下キーで値の変更 Shift+↑ 10の増減 Alt+↑ 0.1の増減 3. 色をカラーピッカーから選択 カラーピッカーから色を選択できます。 さらに以前はchromeの拡張機能からしかできなかったような、サイト上から色を選択してとってくることもできます。 透明度も変更できる 4. minify化しているファイルを整形 minify化されているようなファイルを整形
4年近く前の2012年に僕が考えたChrome拡張機能を作るときのデザインパターンというエントリを書きました。最近参加したイベントで「よういちろうさんの拡張機能の記事見て作ってみました〜」と声をかけてくれた人がいて嬉しかったのですが、2012年のそのエントリは、すでに内容が古くなってしまっています。最近の状況を踏まえて、内容を新しくした「2016年度版」を書いてみようと思います。 変更しようと思った点は、以下です。 prototype.jsは使わず、ECMAScript 2015で書く。 Background Page(常駐型)ではなく、Event Page(非常駐型)にする。 そもそも最初のコードセットは自分で書かない。 本文やコード的には、2012年度版をコピペしています。 （この投稿の内容は、自分のブログエントリと同じです。） 前にいくつかのChrome拡張機能を作っていて、すでに数
私の購入したASUSのflipは35000円だった。 ※新型モデルのChromebook Flip C101PAの価格は40000円ほど。 経験上、Windowsでこの金額帯のPCを買うと必ずと言っていいほど失敗していたのだが、flipは安くて大当たりのPCだ。この金額でキビキビ動作してくれる…文句なんてあるはずがない！そしていま日々進化し続けており、Androidアプリが使えるようになり更に便利なマシンになった。 最後に：Chromebookという選択肢Chromebookを使ってみて何よりも驚いたのがChromeアプリが充実していたことだ。「ブラウザしか起動できない」と書くと頼り無さそうに見えるが、ブラウザのアプリケーションでノンクリエイターが日常的にやるようなことはできてしまう。またAndroidアプリについては使えるようになってからまだ日が浅くまだまだこれからといった具合だが、今後
作成：2016/07/11 更新：2017/04/16 Web制作 > 使い方 初めてデベロッパーツールを触る人でも分かるように、簡潔・シンプルに書きました。画像付きのチートシートのようなものですね。今回は初心者の方向けということでChromeデベロッパーツールの入門編。Chromeは最新版です。 エンジニア速報は Twitter の@commteで配信しています。 設定 背景色を黒にする タブの幅を変える エディタ エディタとして使う ローカルファイルのコードを整形する コンソール ログの閲覧・JavaScriptの入力や練習 エレメント 編集 CSS内の画像サイズと大きさを知る カラーフォーマットの変更 Breakpoints / クリックされた時のコードを見つける モバイル 回線速度のエミュレート 通信環境を選択 Androidデバッグ モバイルデバックの実機を増やす ネットワーク
SpellBookというChromeの拡張を作ってみました。 ブックマークレットを右クリックから起動できるようになる拡張です。 ツブヤキ、Like、はてぶ、Evernote、あらゆるものが指先ひとつでYouはShock!です。新しく拡張を作ったりインスコすることなく、様々な機能を右クリックで解決できます。 使用方法 １：Googleで、拡張をChromeにインストール。 ２：画面上部のバーにBookmarklets フォルダができる。 ３：このフォルダに、ブックマークレットを色々と突っ込む。 ４：右クリックメニューに SpellBook が追加され、右クリックからブックマークレットが起動できる。 SpellBookがオススメな理由 ・ブックマークレットなので、デバイス間やブラウザ間で同期ができる！ ・JavaScriptができれば、わざわざ拡張を作らなくても機能追加できる！ ・拡張よりも沢
以前、プラグインで拡張可能な文章校正ツール textlint で小説の作法を検証するための規則を作ったのですが、textlint はコマンドラインツールであるために利用するまでのハードルが高い状況でした。 Sublime Text や Atom などのプログラマ向けエディタを利用していれば、textlint のプラグインが使えたりするのですが、今回はより簡単に利用できるように Chrome の拡張機能として textlint をブラウザ上で使えるようにしてみました。 インストールはこちら: 【Chrome ウェブストア】 textlint: 文章チェッカー インストールすると、ページ内の編集領域で文章入力中にリアルタイムで校正してくれるようになります。（もちろん ON/OFF できます） textlint に最近追加された自動修正機能にも対応しているので、ボタン一発で自動で修正されたりしま
みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。 1. FireShot ダウンロードURL：FireShot ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。 2. PerfectPixel by WellDoneCode ダウンロードURL：PerfectPixel by WellDoneCode ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコ
Qoo10カテゴリのQoo10 BBIA Official_JPの新着クーポンコードの一覧を随時まとめています。 割引クーポンを見つけた日別にまとめており、記事の上にあるものが最新の割引クーポンになります。 Qoo10（キューテン）のショッ...
先日「Chrome デベロッパーツールの使い方」で華麗に使いこなすテクニックを紹介しましたが、それとは異なるデベロッパーツールの便利な使い方を紹介します。 Webサイトやアプリの制作時に、非常に役立つテクニックが満載です。 ※画像は元記事のものではなく、当方の環境のものを使用しています。 デベロッパーツールの便利な使い方 タブ「Elements」を選択 DOM要素を選択 右パネルのタブ「Computed」を選択 「Computed」には、選択したDOM要素に適用されている全てのスタイルが表示されます。そのプロパティの頭にある虫眼鏡アイコンをクリックすると、そのスタイルがあるCSSファイルとそのセレクタの指定を表示します。 これは大きなサイトを制作している時に、非常に有用です。
お前ら、この動画スマホで見てみろｗｗｗマジ凄すぎｗｗｗ 【配信とスマホがテレビを変える】 1： 名無し募集中。。。＠＼(^o^)／ ：2015/10/12(月) 20:49:03.18 ID:0.net 他のアイドルもパクれよ URL（スマホから閲覧の場合、アプリが起動します（多分）） https://www.youtube.com/watch?v=uYMGl5VXvWo 3： 名無し募集中。。。＠＼(^o^)／ ：2015/10/12(月) 20:51:35.12 ID:0.net なにこれすごい！ 2： 名無し募集中。。。＠＼(^o^)／ ：2015/10/12(月) 20:51:17.07 ID:0.net 今こんなことも出来るんだ 7： 名無し募集中。。。＠＼(^o^)／ ：2015/10/12(月) 20:53:19.16 ID:0.net なんだこれ面白い どういうカラクリだ
Web 開発者の方であれば今開いている Web ページにどのような技術が利用されているのか気になる事がありますよね。ソースを表示したり Developer Tools を起動したりして調べるのも良いですがさくっと確認するだけであれば BuiltWith Technology Profiler という拡張機能を利用するのが便利です。 この拡張機能を入れるとメニューバー上にアイコンが表示されるので、調べたい Web ページを開いてアイコンをクリックするだけです。 例えばこのブログだと上記のような感じに表示されます。 かなーり縦に長いので文字で書きますが以下のような情報を取得しています。 Web サーバの種類, バージョン ネームサーバ ホスティングしているサーバ CMS の種類, バージョン 使用しているフレームワーク 広告の種類 ユーザ統計情報(Google Analytics 等) Jav
Chromeのデベロッパーツールをプロのように使いこなすための20のテクニックを紹介します。 いやー、本当にデベロッパーツールは機能が豊富ですね。 How to use Chrome DevTools like a Pro 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 HTMLの要素をクイック編集 指定した行番号に移動 すべての子ノードを展開 デベロッパーツールの位置を変える CSSのセレクタによるDOM検索 Material Designとカスタムカラーパレット 複数のカーソル 画像をData URIとしてコピー 疑似クラスのトリガー 複数のコラムをドラッグで選択 「$0」で現在の要素を手に入れる 要素の表示 「Event Listeners」の表示 イージングのプレビュー Media Queriesの検証 ネットワークをフィルム
ドキュメント、スプレッドシート、スライドで Officeファイルを編集 [Chromeアプリ] https://goo.gl/sk2CaS 複数ユーザーによって同時にファイルの編集が可能で、その履歴を全て保存することができるGoogleドライブ。便利そうだなーと思いながらも、「まだ導入できないんだよねー」という方も多いのでは？ というわけで、まずはこれを気楽に導入してみることが可能な『ドキュメント、スプレッドシート、スライドで Officeファイルを編集』というそのまんま過ぎる名前のChrome拡張機能から。 Chromeに追加するだけで、既存のWord、Excel、PowerPoint などのOfficeファイルを Google ドキュメント、スプレッドシート、スライドで表示・編集することが可能になります。 編集後は元のフォーマットで保存もできるし、Googleドライブのファイルとしても
Despite having used Firefox in the past, having dipped my toes in the water with Safari and Opera, and even going totally crazy after using Internet Explorer for 10 minutes, somehow I always seem to come back to Chrome. And it's easy to see why. The number of Chrome plugins is huge, and when a developer makes a plugin, it always seems to be for Chrome only these days. Almost as if Firefox doesn't
いつでも、どこでもネットにアクセスできる昨今、ウェブページを印刷する機会は減っているかもしれません。でも、いざ印刷したらレイアウトやスタイルが崩れていて使えないものになっていたらユーザに申し訳ないですよね。紙の無駄使いになってエコじゃないですし。 ということで、今回は自分メモ的にプリントCSSの確認ツールのご紹介です。 Chrome DevToolsのメディアタイプのエミュレーション機能 以前は印刷プレビューで印刷用CSSを確認していましたが、なにせ効率が悪いので他の方法を探してみました。なんと、Chrome DevToolsにエミュレータ機能がついてたんですね。さすがです。 以下の手順で、そのエミュレーション機能にアクセスできます。 Chrome DevToolsを開く（⌘ + ⌥ + I） スマホ（device mode）アイコンをクリック drawerアイコンをクリックする （Emu
最速で データを売上に転換 ヒートマップ分析、アクセス解析、ページ編集、 A/Bテスト、WEB接客、パーソナライゼーションまで 1行のタグを設置すれば、ノーコードですべて実現。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く