サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
qiita.com/keiskimu
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Language" content="ja"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,minimal-ui"> <title>mask</title> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript" src="./script.js"></script> </body> </html> (function () {
{ "manifest_version": 2, "name": "NetworkWatcher", "version": "0.0.0", "icons": { "128": "icon.png" }, "permissions": [ "*://*/*/", "webRequest", "tabs" ], "background": { "scripts": [ "background.js" ] }, "content_scripts": [{ "matches": ["*://*/*"], "js": ["content.js"], "run_at": "document_start" }] } とりあえずすべての通信をキャッチしたいので、webRequest（通信を拾うAPI）と*://*/*/（全domain）を permissionsに指定。 tabsは後述。 また、最終的に
AudioContextで音声データをいい感じに表示する。 やること 音声ファイルのバイナリデータを取得 バイナリデータをAudioBufferに変換する AudioNode作成し、音声出力先とデータ解析用のインターフェースを紐付ける 再生を開始し、解析されたデータを取得してcanvasに描画する 音声ファイルのバイナリデータを取得 音声ファイルの指定方法はいくつかあるが、今回は2種類紹介。 input[type=file]でファイルを指定する方法と、パスを直書き(現実的なところだとinput[type=text]で指定)する方法。 var input = document.getElementById('file'); input.addEventListener('change', function () { var file = input.files[0]; var fr = ne
canvasで凸包を描画する。 凸包とは、wikiにもあるが簡単にいうと輪ゴムをかけたような状態。 やること 点を散りばめる 最小の凸集合を求める 線を引く 点を散りばめる まずはランダムで100個の座標をつくり、座標の位置に点を描画する。 // canvasを取得 var canvas = document.getElementById('canvas'); // canvasを画面サイズにする canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; // contextを取得 var context = canvas.getContext('2d'); // 点を入れる配列 var points = []; // あまり端に行き
CMや映画でよく使われるクロマキー合成をcanvasで再現してみようと思った。 特殊な設備がなくてもいいように消す色を指定できるといいかもね。 やること 映像を取り込む canvasに描画する 描画されたcontextの指定された色の部分を透過にする 背景に画像を入れる ざっくりこんな感じ。 ファイルが別れると載せにくいのでstyleの設定はjsでやる。 とりあえずhtmlファイルに要素を置いておく 必要なのはvideoとcanvas。 あとはどの色を透過にするか指定できるようにinputも置いた。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Language" content="ja"> <meta name="viewport" content="wid
elm.addEventListener('click', function() { document.execCommand('copy'); }); demo ダミーのテキストはBlindtext-Generatorから拝借。 適当にテキストを選択してcopyボタンを押すとクリップボードにコピーされてる。 よさげ。 特定要素内のテキストをコピー Rangeオブジェクトを作成し、コピーしたい要素を指定する。 elm.addEventListener('click', function() { var target = document.getElementById('target'); var range = document.createRange(); range.selectNode(target); window.getSelection().addRange(range); d
プロジェクトをつくって簡単なテストが通るのを確認するまで。 必要なもの Quick Nimble をcloneしておく。 テストコードを書く準備 プロジェクトをつくる なんでもいいけど今回はSingleViewでやる。 テストターゲットにQuick.xcodeprojとNimble.xcodeprojを追加する プロジェクトの中にある○○Testsを右クリックしてAdd Files to ○○を選択。 cloneしておいたQuick.xcodeprojを選択。 というのをNimble.xcodeprojでもやる。 こんな感じ。 Quick.frameworkとNimble.frameworkをリンクする プロジェクトを選択してTARGETSの○○Testsを選択してBuild Phasesタブを表示。 Link Binary With Librariesを開いて+マークを押す。 Quick
このページを最初にブックマークしてみませんか？
『qiita.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
