数年ぶりにChrome拡張のつくりかたを調べた。 本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite
こんにちは。虎の穴ラボのH.Hです。 突然ですが、皆さんは普段使っているブラウザは何でしょうか？ 私は普段からChromeを使っており、このブログもChromeを使って書いています。 先日ある拡張機能をChromeに入れるにため機能の説明を読んでいました。 説明の中にGithubのURLが記載され拡張機能のソースコードが公開されており、JavaScriptなどの知識があれば作成可能とわかりました。 またGoogleから簡単な拡張機能を作成するチュートリアルも公開されていました。 そこで、チュートリアルで公開されている拡張機能の実際に作ってみることにしました。 今回は拡張機能の作成した時の手順とデバッグの方法を説明していきます。 Chromeの拡張機能とは Chrome機能はChromeウェブストアなどからChromeに追加することで、標準には無い機能の追加を行うものです。 chrome.g
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? gulpで使うプラグインやnpmモジュールをピックアップ 更新履歴 2016-03-11 更新 2014-07-25 gulp-bower-files がdeprecateされていた。代替は main-bower-files 2014-07-24 gulp-connect がdeprecateされた。代替は後継の gulp-webserver 2014-06-29 gulp-clean の箇所を修正（shinnn様にご指摘いただきました。感謝！m(_ _)m） プラグイン 今は使わない方が良いプラグインリスト - gulpjs/plug
gulpで普段使っている(使っていた)モジュールをまとめてみました。 本当はHTML/CSS/JSや関連ツールのモジュールも載せたかったのですが、長くなりそうなのでユーティリティとして使っているものだけを先に記事にしました。 一応、ここで紹介するgulpプラグインに関してはブラックリストに入っていない事を確認済みです。 ちなみに、Qiita内だと下記の記事がまとまっていて大変参考になると思います。 gulp.js その4 プラグイン一覧 - Qiita 僕がGulpで使っているプラグインとnode.jsモジュール一覧 - Qiita サンプルのGitHub https://github.com/yuichiroharai/gulp-sample ここで使用しているサンプルは全てGitHubにて公開しています。 実際に実行してみるとイメージが掴みやすいかと思います。 gulp-plumber
デザインの指示書やスタイルガイドを作成するのは、なかなか時間がかかりますよね。 使用している要素のサイズやマージンやカラーやフォントなどの情報を自動で取得したり、コメントを添えたり、指示書やスタイルガイドをプロジェクトのメンバーと共有できる「Zeplin」を紹介します。 1プロジェクトまで完全無料、2つ以上から有料ですが、機能制限などは一切ありません。 Zeplin Zeplinの特徴 Sketchでの下準備 Zeplin ソフトウェア版 for OS X Zeplin ブラウザ版 for OSX, Win, Linux Zeplinのインストール Zeplinの特徴 Zeplinは、Sketchで作成したデザインリソースから指示書やスタイルガイドなどを自動で生成するソフトウェア（無料）とオンラインサービス（無料と有料）です。 無料と有料の違いはプロジェクト数だけで、機能はまったく一緒。
パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇所に対して 下記のような記述で処理を実行させます。 ◆SCRIPT $(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); }); この記述の場合は、ページをスクロールして 「.point」とクラス付けされた要素の位置に辿り着いたら その要素に対してフェ
Slice 1 - Image 1 Slice 1 - Image 2 Slice 1 - Image 3 Slice 1 - Image 4
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連 SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
普通のデザインツールだと、サイズ指定は「px」を使用している人がほとんどでしょう。固定値のデザインをするのであれば、ピクセルで何も困りませんが、レスポンシブの相対値のデザインに適しているとは言えません。 Sketchでサイズ指定を「%」でできるプラグインを紹介します。 キャンバス・グループ・兄弟要素に対して、相対的にサイズを指定できます。
GitHubのUIは先進的で、かなり見やすいものです。初心者にも分かりやすく使いやすいのですが、毎日のようにGitHubを使っている人たちにすればもっと素早くファイルを見ていけるようにしたいと思うでしょう。 そこで使ってみたいブラウザ機能拡張がOctotreeです。ブラウザ画面の左側にファイルブラウザ機能が追加されます。 Octotreeの使い方 OctotreeはGoogle Chrome、Firefox、Safari向けに機能拡張/アドオンが提供されます。 インストールされた状態で任意のリポジトリに行くと、このようにファイルツリーが左側に表示されるようになります。 フォルダを開いてより深い階層のファイルへも素早くアクセスできます。 左側の表示ではブランチを切り替えられませんが、通常のGitHub側でブランチを切り替えると左側のツリーもそれに伴ったものに変更されます。また、プライベートリ
Sublime Textのさまざまなパッケージの中から、利用シーン別におすすめのものを紹介。また、Sublime Textのパッケージの基本的な使い方として導入方法や有効化／無効化、削除の方法も説明する。 ← 前回 連載 INDEX 今回はSublime Textのさまざまなパッケージの中から、特におすすめのものを紹介する。 Sublime Textのパッケージ Sublime Text自体はオープンソース・ソフトウェアではないが、内部機能を操作するためのAPI（API Reference - Sublime Text 3 Documentation）が公開されている。また、メジャーなスクリプト言語であるPythonのランタイムが搭載されているので、誰でもパッケージを作成できる。 そのため、パッケージの作成は盛んで、2014年12月時点登録されている公式パッケージは2600以上となっている
ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
最初のコードはinputやtextareaでの値の変更時にIME入力中でなければ独自のイベントを発火するというものでしたが、IE系では「contenteditable="true"」を設定したエレメントでinputイベントが発火しないという他のブラウザとの差異がありましたので全面的に書き直しました。 最初のコードも旧コードとして残しておきます。 はじめに 以前jQueryでIME入力確定時にイベントを発行するという記事を投稿しましたが、inputやtextarea inputやtextarea、「contenteditable="true"」を設定したエレメントでの値の変更を監視するという面では不十分だった為、新たに書き直したものを公開します。 なお、2016年1月13日以降はWindowsVistaはIE9、その他はIE11のサポートのみとなる為、今回作成したものはIE9以降のサポートと
今作っているアプリのリソースを作っているところ。アプリのスクリーンショットを撮影して、広告はそのままだとアレだからモザイクかけたいなーと思っていろいろ調べてたら、いつのまにかプラグイン作っていました。 github.com Sketch3でモザイクのかけかた そもそもぐぐっても情報がでてこなかった。blurでごまかせないかな―とやってみたけど、今ひとつ使えるものではなかった。 インターネットで調べてもやり方がでてこないから、自分でなんとかせんとなーと考えていると、Fireworksでのモザイクの書け方を思い出した。 Fireworksではレイヤーを縮小して拡大することでモザイクを実現していた。縮小するときに複数のピクセルが１つのピクセルになることを利用して実現していた。Sketch3でもできるんじゃないかと試したところ、できた。 モザイクをかけたいレイヤーを選択 Scaleで5%に縮小 L
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
