Chrome拡張 つくりかた 令和最新版
数年ぶりに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
JSON形式で値を指定すれば自動的にグラフが生成されるサイト「Tinychart」 | ライフハッカー・ジャパン
「Tinychart」はJSON形式で値を指定するだけで自動的にグラフが生成されるサイトです。値をウェブ上で指定するとグラフがリアルタイムに生成されます。生成したグラフはPNG形式の画像として保存することができますよ。 以下に使ってみた様子を載せておきます。まずTinychartへアクセスしましょう。 左側で値のセットができます。テーブル形式とJSON形式の2パターンが選べますので好きな方を使ってみましょう。右側のグラフはリアルタイムに更新されます。曲線グラフと棒グラフの2種類が選べますよ。 また、作成したグラフはPNG形式の画像としてダウンロードすることができます。ささっとグラフを書いて画像として保存したいときに便利ですね。 Tinychart （カメきち）
スクロールで何かするための処理まとめ。（JavaScriptおれおれAdvent Calendar 2014 – 21日目） | Ginpen.com
JavaScriptおれおれAdvent Calendar 2014 – 21日目 よくある処理についてまとめました。 スクロールの監視 windowを対象にscrollイベントを監視するだけです。documentでも動くけど、古いIEは駄目。いちいち変える理由もないので、windowだけ使えばよろし。 $(window ).on('scroll', function(event){ console.log('window'); }); $(document).on('scroll', function(event){ console.log('document'); }); // IE 8では呼ばれない スクロール位置の取得 document.documentElement.scrollTopに現在のスクロール位置が格納されています。ちなみにdocument.documentElemen
Javascriptスクレイピング！jquery.xdomainajax.js
これぞJavascriptスクレイピング！jquery.xdomainajax.js 主催している勉強会でも何度もPHPでのスクレイピングネタを取り上げていいます。 Javascriptでもスクレイピング出来ないものか PHPでのスクレイピングでもそうなのですがスクレイピングする際はHTMLのタグやIDなどのセレクタを利用して取得します。 でもこの考えがいかにもJavascriptっぽいので、だったらJavascriptでもいけるのではないかと調べていたら素敵なjQueryプラグインを発見しました。 クロスドメインの制約突破！jquery.xdomainajax.js Javascriptの場合ネックになるのがクロスドメイン間の突破です。クロスドメインとは、例えばこのサイトはwww.kaasan.infoというドメインですが、このサイトを閲覧しながら 違うドメインの他サイトにアクセスすると
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。 こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。 使うための準備 まずはこちらのGitHubから。 ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。 読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。 <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> <script src="
bouncejs.com - bouncejs リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
スマホだと反応が遅れる :hover を心地良くする方法
スマホ向けにサイトを作っていると、ブラウザの挙動が遅くてUXを低下させてしまうことがあります。例えば、画面をタッチしたときの:hoverの挙動。あと、jQueryのanimate()の挙動。とか。 スマホブラウザはJavaScriptの実行速度が遅いので、animate()の挙動とかはCSSで書くのがベストです。これはよく知られているので、実装されているサイトも多いのではないでしょうか。（あ、具体的な実装はまた次回ご紹介したいと思います。） 今回はですね、あまり話題にならない:hoverのことです。 :hover がおかしい？ マウスカーソルを乗せたときのスタイルを設定するのが:hoverです。スマホだとタッチした瞬間に適用されると思いますよね。でも例えばiPhoneで:hoverを使うと、指を離したときにスタイルが適用されます。ですので、「もう押してないのに…」という場所が「押されたスタ
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
[JS]ヘッダをスクロールしても上部に固定表示するだけでなく、途中で変更もできるスクリプト -Clingify
ヘッダをスクロールしても上部にぺたっと貼りつくように表示し、ブレイクポイントを設定するとその地点で貼りつける要素を変更するjQueryのプラグインを紹介します。 デモページ：Optionsからちょい下にスクロール かなり下の方までスクロールすると、二番目のアイテムが上部に貼りつきます。 Clingifyの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/jquery.clingify.js"></script> </body> Step 2: HTML スクロールしても上部に固定配置にする
Androidのoverflow:auto/scroll対策
Android2.xでoverflow:scrollやautoが効かない（overflow:hiddenとして処理される）のは有名な話で、困った経験がある方も多いと思います。 調べた限りJSで実装するか、スクロールバーを諦めるといった対応をされる方が多いでしょうか？ 当社ではJSプラグインで対策する方法を検討しましたが、既存プラグインはjQueryなどライブラリに依存している事や 他UIと組み合わせた際の相性（イベントが競合しても調整しやすいように）を考えて自前実装で対応する事にしました。 ネイティブで対応済みのバージョンは？ 最初に、Android2.xなどは何かしら対策が必要ですが比較的新しいOSはネイティブで対応しているものもあります。 手元の端末で確認したところ、Androidは4.xでoverflow:autoに対応（Android4.0.4の標準ブラウザ&Chromeで確認）、
米Stripe、JavaScriptで決済の全てを完了できる 「jQuery.payment」をリリース 【増田 @maskin】 | TechWave（テックウェーブ）
決済サービスを展開する米「Stripe」は2013年2月7日、ポピュラーなJavaScript用ライブラリ (プログラム郡がパッケージされたもの)「jQuery」と連携して仕様できる決済ライブラリ「jQuery.payment」をリリースしたと発表した。 「Stripe」は、面倒で時間のかかる決済機能の導入について、どこよりも簡単に実装できるAPIを提供する企業。大手決済サービスを展開する米PayPal 創業者や、大手有力VCから投資を受けるなど注目をあびている。 今回リリースされた「jQuery.payment」を使えば、数行のJavaScriptコードだけで決済機能を導入することができるようになる。 冒頭のスナップショットは、実際に「jQuery.payment」を使ってドネーションを受けられるようにしたサイト。決済者は面倒なユーザー登録作業などをする必要なく、この画面から利用すること
HTML5によるWebカメラの導入をサポートするjQueryプラグイン・Photobooth.js - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 HTML5でWebカメラに対応可能なWebサイトを実装するのを手助けしてくれる、というスクリプトのご紹介です。トリミングや色彩変更などの編集も可能のようです。 自分自身がWebカメラに対応したデバイスを現在手元に持ってないので動作テストしてないです。あとで検証しますが、現時点ではあくまで備忘録ですのでその程度の記事という事でご了承下さい。 当方の端末では対応して無いのでこのようにエラーが表示されてしまいますが・・編集も可能と言うのは凄いです。 実際はこのようになると思います。 getUserMediaに対応したブラウザならJavaScriptでWebカメラにアクセス可能です。マークアップはvideoとcanvasで実装出来ると思いますが、Photobooth.jsは
Tappable by cheeaun
A simple, standalone library to invoke the tap event for touch-friendly web browsers. View the Project on GitHub cheeaun/tappable Download ZIP File Download TAR Ball Fork On GitHub Tappable is a simple, standalone library to invoke the tap event for touch-friendly web browsers. Currently it's only tested on iOS Mobile Safari as I don't have any other smartphones to test with. The codebase is heavi
Canvasをより手軽に使いやすくするフレームワーク·KineticJS MOONGIFT
KineticJSはCanvasタグを使ったベクターグラフィックをより簡単に使えるようにするJavaScriptライブラリです。 HTML5の登場によって、Web上でも高度な表現が可能になっています。とはいえそのためにすごい量のコーディングをしなければならないイメージがあります。しかしKineticJSを使えば分かりやすいコードで、ゲームやドローを伴ったグラフィックスが描けそうです。 サンプル。ボタンを押すとオブジェクトが動く。 こちらは星をドラッグアンドドロップできる。 世界地図のベクター画像。 ビルのマップ。マウスに反応して格好いい。 動物の絵と影をマッチさせるゲーム。 ここからは実際に利用されている例。ロボットアバターを作成する。 こんな感じに自由に選べる。 かつてはFlashでやっていたようなグラフィックがJavaScriptで実現する。 ひげを載せる遊び。これもKineticJS
[JS]ちょっとかっこいい円グラフをウェブページに簡単に設置できるスクリプト -EASY PIE CHART
シンプルなHTMLで、さまざまなデザインの円グラフが簡単に作成できるjQueryのプラグインを紹介します。 EASY PIE CHART [ad#ad-2] EASY PIE CHARTの使い方 実装は、3ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 外部ファイルはhead内に記述してください。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="/path/to/jquery.easy-pie-chart.js"></script> <link rel="styl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - pbakaus/scroller: Accelerated panning and zooming for HTML and Canvas
zencode.in
Site Under Maintenance
RxDB - JavaScript Database | RxDB - JavaScript Database
