Chrome拡張機能の開発： サーバーとどうやって通信するか？ | 非IT企業に勤める中年サラリーマンのIT日記
manifest.json こちらは前回のままで変わりありません。 popup.html 今回はjqueryを使いました。main.jsは後述しますが、そこからframe属性のdiv要素に動的に生成されたiframeが書き込まれます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script type="text/javascript" src="jquery-1.9.1.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body style="min-width:250px;margin:0px;"> <div id="frame"></div> </body> </html> main.js こちら
ウェブオーディオ API - Web API | MDN
ウェブオーディオ API はウェブ上で音声を扱うための強力で多機能なシステムを提供します。これにより開発者は音源を選択したり、エフェクトを加えたり、視覚効果を加えたり、パンニングなどの特殊効果を適用したり、他にもたくさんのいろいろなことができるようになります。 ウェブオーディオ API は音声操作を音声コンテキスト内の操作として実現し、モジュラールーティングできるようにデザインされています。基本的な操作は 音声ノードとして表現されています。これを接続することで、音声ルーティンググラフを作成します。チャンネル構成の異なる複数の音源も 1 つのコンテキスト内で扱えます。この構成によって、複雑で動的な音声操作を実現できるようになっています。 音声ノードは、入力と出力によってチェーンと単純なウェブにリンクされています。通常、1 つまたは複数の音源から始まります。音源は、非常に小さなタイムスライス、
ハイパス/ローパスフィルタ – 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
この記事は 「JavaScriptの勉強してたらみんなNode.jsの存在を前提に話が進む。でもNode.jsってWebサーバじゃないの？ なんでインストールしなきゃいけないの？ なんでみんな使ってるの？」 といった疑問を解消することを目的としています。 基礎：JavaScriptの特徴 まずはJavaScriptと他のプログラミング言語の違いを知っておく必要があるので解説します。 JavaScriptはChromeやFirefoxといった「ブラウザ上」で動作するプログラミング言語です。 対してPythonやRubyのような一般的なプログラミング言語は通常「パソコン上」で動作します。1 このことが生み出す違いは、OSの機能にアクセスできるかどうかです。 「OSの機能」とは例えばファイルの読み書きや、ネットワーク通信などの機能のことです。 パソコン上で動作するアプリケーション（Pythonや
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
Lightweight Footprint Only 30kB minified and gzipped. Can also be included as an AMD module CSS3 Compliant Supports CSS3 selectors to find elements as well as in style property manipulation 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
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」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、簡単なJavaScriptコードを記述するだけでインタラクティブなマップを自分のWebサイトに設置できるサービスをご紹介します！ Googleマップよりも手軽に扱えるのが特徴で、スクリプトを読み込んで少ないコードを記述するだけなので誰でも簡単に利用できると思います。 マップのカスタマイズやマーカーの設置、イベント処理、ナビ機能など…、それぞれの基本的な使い方を詳しく解説していきます！ 【 Mapfit 】 ■「Mapfit」の使い方 それでは、実際に「Mapfit」を使うために必要な準備から進めていきましょう！ 「Mapfit」を使うには、専用のCSSファイルとJavaScriptファイルが必要になるのですが、これらはCDN経由で簡単に導入できるようになっています。 以下の「linkタグ」と「scriptタグ」をHTMLファイルに挿入す
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～ - Qiita
JavaScript,jQueryの爆速コーディング、デバッグ方法論の勧め～実践向け逆引き(windows,chrome向け)～JavaScriptjQuery ※2017/4/21にオンロード時のデバッグ方法8を追記しました！ こんにちは！エイチーム引越し侍の加藤です！ みなさんJavaScript書いてますか？ console.logめっちゃ使うよねーって人は目からうろこのデバッグ方法を、 ケース毎に紹介していこうと思います。(僕はconsole.log使いません) サーバーにデバッグ用のコードをアップロードすること無いので、 消さずに意図に反してリリースしてしまう危険性がないのもお勧めです。 前提知識 F12で出てくるデベロッパーツール(Elements, Console, Source, Network)の知識 Ctrl+Shift+Fで外部ソース(js,css)に対して一括検索が
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でのcheckboxの全選択 - Qiita
jquery1.10.1で checkboxを選択すると、他のチェックボックスを全選択させようとした。 そして無駄にハマったのでメモ <input type="checkbox" id="check-all"> <input type="checkbox" value="1" name="a" class="bar"> <input type="checkbox" value="2" name="b" class="bar"> <input type="checkbox" value="3" name="c" class="bar">
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 言語概要 - JavaScript | MDN
JavaScript チュートリアル 初級編 JavaScript の基礎 JavaScript の第一歩 JavaScript の構成要素 JavaScript オブジェクト入門 JavaScript ガイド 入門編 文法とデータ型 制御フローとエラー処理 ループとイテレーター 関数 式と演算子 数と日付 テキスト処理 正規表現 インデックス付きコレクション キー付きコレクション オブジェクトを利用する Using classes プロミスの使用 JavaScript 型付き配列 イテレーターとジェネレーター メタプログラミング JavaScript モジュール 中級編 クライアントサイド JavaScript フレームワーク クライアントサイド Web API Language overview JavaScript のデータ構造 等値比較と同一性 プロパティの列挙可能性と所有権 クロ
Beep.js
Beep is a JavaScript toolkit for building browser-based synthesizers.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
逆引きGoogle Maps APIリファレンス ver 3
finefinefine.jp
