Chrome拡張機能の開発： サーバーとどうやって通信するか？ | 非IT企業に勤める中年サラリーマンのIT日記
前回はChromeの拡張機能開発にあたって基本的な手順を紹介しました。 Googleブックマークのようなものを作ることが目的なのですが、現在開いているページのタイトルとURL情報を取得する必要があります。manifest.jsonmanifest.jsonは以下の通りです。前回と違うところは、7行目の "permissions": , の部分。これを入れることでページ情報をGETできるようになります。 main.jsページ情報をGETするにはChromeのライブラリを使う必要があります。コードは下記のとおりです。（ページのロードイベント時）このコードを... [ad#top-1] 上記の方法は、あくまでローカル内での処理でしかありません。元々、Googleブックマークのようなものを作るつもりだったので、データはサーバーのDBに保存したいし、どのパソコンからでもブックマークが覗けるようにしや
ウェブオーディオ API - Web API | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021. * Some parts of this feature may have varying levels of support. Learn moreSee full compatibilityReport feedback ウェブオーディオ API はウェブ上で音声を扱うための強力で多機能なシステムを提供します。これにより開発者は音源を選択したり、エフェクトを加えたり、視覚効果を加えたり、パンニングなどの特殊効果を適用したり、他にもたくさんのいろいろなことができるようになります。 ウェブオーディオ API は音声操
ハイパス/ローパスフィルタ – Rest Term
前回の続き。 今回はフーリエ変換で得られた周波数スペクトルにハイパスフィルタ(HPF)/ローパスフィルタ(LPF)をかけます。 Flashだとサウンド関連でよく耳にするフィルタかもしれませんが、画像でも基本は同じです。 前回作ったクラスにフィルタ処理等を追加します。 ・1D/2D-FFT + HPF/LPF (追記 2008 12/19) バンドパスフィルタ(BPF)の処理を追加。 (追記 2009 2/20) 空間周波数フィルタのメソッドを少し修正。処理内容は変わってません。 package { import __AS3__.vec.Vector; /* * Fast Fourier Transform implementation in pure AS3 */ public class FFT { private var n:int; private var bitrev:Vector
Node.jsをインストールする - Qiita
はじめまして, Sefoo(せふ)です。 Node.jsをインストールして確認するまでをまとめた。参考にして頂ければ幸い。 背景 デスクトップアプリを作りたくてElectronに興味を持った。ただ, JavaScriptやNode.jsは少し触ったことがある程度。これを機にちゃんと勉強しようと思う。 とりあえずNode.jsで簡単なものを作ってみることにする。さて, まずはNode.jsのインストールから始めよう。ちなみに自分はWindows 10 OS環境で開発する。 Node.jsをダウンロードする。 Node.jsは後で記述するが, JavaScriptの実行環境のことだ。 Node.jsのHPからダウンロードする。画面左の推奨版を押す。 インストール完了の際, バージョン番号で確認するので覚えておくとよい。自分の場合は「12.14.1」。 Node.jsをインストールする。 ダウン
Node.jsとはなにか？なぜみんな使っているのか？ - Qiita
となります。 またNode.jsの特徴として「Webサーバの役割もNode.jsがこなす」という点があります。（というかNode.jsの目的を考えるとWebサーバとしての役割がメインです） 元々Node.jsは大量の同時接続をさばけるようなネットワークアプリケーションを構築することを目的として設計されています。 そのため、Webサーバとしての機能から一貫してNode.jsが受け持ち、効率的に処理できるようになっています。 要するに通常使われるApacheやnginxのようなWebサーバの代わりにNode.jsが直接HTTPリクエストを受け取り、処理をしてくれます。 （実際にはNode.jsのみだとWebサーバとしては少し機能が物足りないので、その前段にApacheやnginxをリバースプロキシとして置く構成が多いです。） 目的3. モバイル/デスクトップ用のアプリケーションを作りたい No
Chromeの拡張機能作ってみた！ | フューチャー技術ブログ
春の入門祭りの第19弾です はじめにフューチャーに入社して約半年が経ちました。CSIGの谷田です。 現在業務では直接開発をする機会はないのですが、業務の合間を縫って日々プログラミングを勉強中です。そんな中、お世話になっている先輩から手始めに、Google Chromeの拡張機能の作成方法を教えて頂いたので、拡張機能の作成方法入門を書いていこうと思います。 作成方法自体はとっても簡単なので、ぜひ皆様もやってみてください！ 拡張機能とはWebページの閲覧や情報の検索に使用するブラウザに、自身で選んだ機能を追加することで、日常業務や作業を効率化して、便利にしてくれるものです。 皆さんもお気に入りのものを追加して日々の業務で使用されているのではないでしょうか？ 拡張機能はChrome以外のブラウザ（IE、Firefox等）でも存在し、アドオンとかextensionという言い方もしますよね。 この拡
JavaScriptの非同期処理をじっくり理解する (3) async/await
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
jQuery
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
Webページ高速化に必須の知識！ブラウザがWebページをどのようにレンダリングしているか、図を用いて解説
ブラウザがWebページをどのようにレンダリングしているか、図を用いてやさしく解説した記事を紹介します。 レンダリングの仕組みを理解することで、HTMLやCSSやJavaScriptなど実装時にも気をつける点があります。 How the browser renders a web page by James Starkie 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. HTMLの解析（パース）を開始する 2. 外部リソースを取得する 3. CSSを解析し、CSSOMを構築する 4. JavaScriptを実行する 5. DOMとCSSOMをマージしてレンダリングツリーを構築する 6. レイアウトとペイントを計算する はじめに 私の考えとしては、高速で信頼性の高いWebサイトを構築するには、実装中に各ステップを最適
Googleマップより簡単！JavaScriptで独自マップやナビ機能を作成できる「mapfit」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、簡単なJavaScriptコードを記述するだけでインタラクティブなマップを自分のWebサイトに設置できるサービスをご紹介します！ Googleマップよりも手軽に扱えるのが特徴で、スクリプトを読み込んで少ないコードを記述するだけなので誰でも簡単に利用できると思います。 マップのカスタマイズやマーカーの設置、イベント処理、ナビ機能など…、それぞれの基本的な使い方を詳しく解説していきます！ 【 Mapfit 】 ■「Mapfit」の使い方 それでは、実際に「Mapfit」を使うために必要な準備から進めていきましょう！ 「Mapfit」を使うには、専用のCSSファイルとJavaScriptファイルが必要になるのですが、これらはCDN経由で簡単に導入できるようになっています。 以下の「linkタグ」と「scriptタグ」をHTMLファイルに挿入す
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索ができる HTML、CSSはElementsから直接修正⇒確認ができる jsはSourceから直接修正できる(Ctrl+Sで保存したらその状態で実行できる) jsは
gmaps.js — Google Maps API with less pain and more fun
Documentation GMaps div controls overlays layers singleLayers markers polylines routes polygons zoom map setContextMenu hideContextMenu refresh fitZoom fitLatLngBounds setCenter getCenter getDiv setZoom zoomIn zoomOut addControl createMarker addMarker addMarkers hideInfoWindows removeMarkers drawOverlay removeOverlay removeOverlays drawPolyline drawCircle drawRectangle drawPolygon getFromFusionTab
Google Maps APIをコピペで使い倒せ！Web初心者でもカスタマイズできるgmaps.js | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアののびすけです。 最近はひさしぶりに浅草をランニングして健康オタクを気取っています。 さて、ランニングといえば、アプリを使ってタイム測定をしている人も多いのではないでしょうか。大半のアプリには地図が内蔵してあり、特にGoogle Mapsを呼び出しているものが多いですね。 そこで今回は、そのGoogle Mapsをカンタンに導入できるgmaps.jsを使ってみたいと思います。コピペで試せるので、JavaScriptが得意ではないデザイナーやコーダーの方にもおすすめです。 http://hpneo.github.io/gmaps/ gmaps.jsはGoogle Maps APIを使いやすくしてくれるライブラリです。 そのメリットは大きく3つあります。 1. シンプルなコード 記述方法がとてもカンタンで、通常のGoogle Maps APIよりも分かりやすいソースコード
jQueryで全選択・全解除はprop使う - Qiita
attr使ったら動きが変だった attrじゃないかと思って作ったら、何か変。 attr('checked','')ではなく、removeAttr('checked')を使えばおk どうやらprop使えばいいらしい。 でもpropのが楽に書ける 詳しくはCSSは分かるけどjQueryは苦手……という人が .attr()と .prop()に親しんでくれるといいなーと思って書きました。｜Ginpen.comで。 チェックされているかどうかという判定には .prop()を使う必要があります。 HTMLに書いた属性の値を扱いたいときは .attr()を、いかにもJavaScript的な事をする時は .prop() デモ こんな感じで使えばおkだと思う。 <div class="allCheck"> <input type="checkbox" id="allCheck01"><label for="
よくある全選択チェックボックス jQuery 実装 - Qiita
<ul> <li><label><input type="checkbox" id="all" /> Check all</label></li> <li><label><input type="checkbox" name="check" value="1" /> value 1</label></li> <li><label><input type="checkbox" name="check" value="2" /> value 2</label></li> <li><label><input type="checkbox" name="check" value="3" /> value 3</label></li> <li><label><input type="checkbox" name="check" value="4" /> value 4</label></li> </
JavaScript 言語概要
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 �&��View in English PQ!&��Always switch to English JavaScript はマルチパラダイムの動的言語であり、型や演算子、標準組み込みオブジェクト、メソッドがあります。その構文は Java や C 言語に由来するので、それらの言語の多くの構造が JavaScript にも同様に適用できます。 JavaScript は、オブジェクトプロトタイプやクラスによるオブジェクト指向プログラミングに対応しています。また、JavaScript は関数型プログラミングもサポートします。関数が第一級オブジェクトであり、式から容易に作成し、他のオブジェクトと同じように受け渡しすることができます。 このページは、 Ja
Beep.js
Beep is a JavaScript toolkit for building browser-based synthesizers.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
逆引きGoogle Maps APIリファレンス ver 3
jqueryでのcheckboxの全選択 - Qiita
finefinefine.jp
