JavaScriptの正規表現で特定の文字列を抜き出す「グループ化」について解説します。 JavaScriptで特定の文字列を抜き出して処理したいことがよくあるのですが、グループ化の使い方を忘れてネットで検索してもなかなかヒットしないので、備忘録で残しておきます(他に適切な方法があるようでしたらすいません)。 1.特定の文字列を抜き出す まず基本として、特定の固定文字列を抜き出すには、match関数で次のように記述します。 var foo = 'abcdefg'; var bar = foo.match(/abc/); これは変数fooに「abc」という文字が含まれていれば、変数barに abc が設定されます。 変数fooに「abc」という文字が含まれていない場合、変数barにnullが設定されます。 この使い方は、検索したい文字列があらかじめ決まっていて、上記のような代入文ではなく、判
どうも、こんにちは。江嵜です! 今日は HTML5 と JavaScript でビデオプレーヤーを作ってみましょう! 「Web でビデオプレーヤーなんて作ろうと思ったら、結構めんどくさいんじゃないの?」とお思いのアナタ! HTML5 からは全然そんなことないんです!ほんの数十分でビデオプレーヤーを作れてしまいますよ。 案ずるより産むが…で、とりあえずコード書いてみましょう! 今回作るもの 今回、こんな感じのものを作ってみましょう。 操作はシンプルに、動画を操作するための Start・Stop・Pause。 あとはフルスクリーン表示と、動画読み込み用のボタンを配置しました。 それと動画の下にあるプログレスバーですね。 こちらも操作可能ですよ。 コーディング! 今回は HTML, JavaScript, そしてデザインの為の CSS が必要ですね。 あと、動画選択前に表示しておく画像が 1 枚
JavaScript による開発に向けて道具や環境を整えるにあたり、実に様々な用語があります。 N番煎じどころではない話題ではありますが、それらの主観的な説明を試みました。 Disclaimer: React やその他の各種フレームワークなどは入れていません。 すべて独学、かつメチャ小規模なものばかり作っている人なので、偏りがあります。 古かったり間違ってたりしましたらぜひ教えていただければ……。 冗長な読み物感を多少含みます。 同じような or さらに詳しい情報がググれば山のようにあるので、ぜひ個別の確認を。 なお、URLを明示しないリンクは基本的に記事内で飛ぶだけで、外部リンクは基本URL付きです。 目次 一般 言語 エディター/バージョン管理 実行環境 JavaScript 標準仕様 パッケージ コーディングスタイル モジュール バンドル コードのサイズ削減 書かなかったこと 一般
以前にYouTube Player APIの基本的な使い方をまとめたので、今回は実際に使う時に便利そうなtipsをいくつかまとめてみました。 以前の記事はこちらです。 YouTube Player APIを使って色々やってみる ■目次 動画のループ再生 動画の自動再生 タイトルやコントロールバーを出さないようにする 動画再生の開始位置や終了位置を設定する 動画の画質を変更する 初期表示をサムネイルにする 背景動画にする 1. 動画のループ再生 動画のループ再生を設定する方法は2種類あります。 1-1. パラメータで設定する パラメータで設定する場合、loopとplaylistを使用します。 ■HTML <div id="sample"></div> ■JavaScript // IFrame Player API の読み込み var tag = document.createElement
五章第二回 CSSの構造このページの最終更新日:2018年7月29日 ご存知の通り、CSSは独自の文法を持っおり、したがって独自の構造を持っています。今回から、その構造と操作について解説します。 CSSStyleSheetCSSを構成するさまざまな要素はDOMでは全てオブジェクトで表されます。まずは、そのうちCSSStyleSheetという種類のオブジェクトについて解説します。 CSSStyleSheetは、CSSそのもので最も大きなまとまりで、 <!doctype html> <html> <head> <title>test</title> <style type="text/css"> body { background-color: aqua; } div { background-color: white; } p { background-color: yellow; } </
iframe 組み込みの YouTube Player API リファレンス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 IFrame Player API を使うと、YouTube 動画プレーヤーをウェブサイトに埋め込み、JavaScript でプレーヤーを制御できます。ウェブページに Flash オブジェクトを埋め込む Flash や JavaScript のプレーヤー API とは異なり、IFrame API はコンテンツをページの <iframe> タグに投稿します。この方法は従来の API よりも柔軟で、Flash をサポートしていないモバイル デバイスの場合に、Flash プレーヤーではなく HTML5 プレーヤーで YouTube を利用できます。 この API の JavaScript 関数を使うことで、再生する動画の頭出し、動画の再生
v-on:click="click_1(); click_2()" @click="click_1(); click_2()" <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script> <title>Vue.js</title> <style> p { padding: 2em; width: 200px; border: solid; } p:hov
3d.js(v5)で、グラブにラベル(テキスト)を追加する方法をご紹介します。 下記の散布図を使って、円にラベルを追加していきます。 HTML/JavaScriptサンプル <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> svg{ font: 10px sans-serif; background-color: #eee; text-align: right; padding: 3px; margin: 1px; color: #333; } </style> <script src="d3.min.js"></script> </head> <body> <script> // 1. データの準備 x座標,y座標,r半径 var dataset = [ [1, 4, 4], [2, 6, 4], [3, 11, 4
WEBシステム、WEBプログラム開発において昨今ではjQueryではなくVue.js、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれています。その原因はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事は、jQueryを多用するWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説です。 ちなみに自分はサーバ構築からバックエンドまでこなしているワンオペエンジニア(フリーランス、非正規雇用に非ず)です。 コンポーネント、ルーティング、スタイル周りの続編を作成しました(編集が困難になるほど容量圧迫してたので、それぞれで独立させています)。また、Vueは3.2から採用されたscript setup、Angularは14から採用されたスタンドアロン
この記事はVue #2 Advent Calendar 2019の10日目です。 昨日は @i-ryo さんの 【Vue.js】Vuexの「状態管理」はいったい何の状態を管理しているのか調べた でした。 JavaScriptといえば、jQueryだった Vueを触る前はHTML+CSS+jQuery+WordPressが主な使用言語でした。以前は小〜中規模なWebサイト制作がメインだったので、JavaScriptを操作する場面というのは多くありませんでした。 使ってもハンバーガーボタンの操作やjQuery プラグインのスライダー、ちょっとしたエフェクト程度です。少なくとも状態管理をするような案件はほとんどなく、DOM操作がメインなのでjQueryで十分でした。 1つだけ状態管理をする案件があり、案件としてはVueに最適でしたが、jQueryでごり押しました。過去の自分に教えてあげたい。 V
詳しくはSocket.ioのドキュメントをご覧ください。 https://Socket.io/docs/ やりたいこと Node.js+Socket.ioの組み合わせはよく知られていると思います。 今回はこの組み合わせを使用してチャットを作ってみることを目標にしたいと思います。 Socket.ioとは Socket.ioについて紹介する前に、WebSocketとは何かの説明をする必要がありますので、WebSocketとは何者かを解決していきたいと思います。 WebSocketとは WebSocket(RFC6455)はリアルタイムかつ双方向な通信を実現するプロトコルです。 元々はHTML5の仕様の一部として進められていましたが、現在では単独のプロトコルとして策定されています。 WebSocket通信では、コネクション確立時にHTTPからWebSocketにプロトコルを切り替え、ws:または
blink-devメーリングリストに「Intent to Implement: Serial API」として「Serial API」の実装に着手する旨の投稿がされている。 この「Serial API」はW3CのWICGで議論がされており、ブラウザからシリアルポートにアクセス可能にする。3DプリンタやArdbinoなど、様々なデバイスと接続できるようになる。 パーミッションの要求については、すでに実装されている「Web Bluetooth」「WebUSB API」とおなじになるようだ。 sample 仕様では、Ardinoからデータを読み込む例が示されている //Request the list of ports from the user SerialPort.requestPorts().then(ports => { //Pick the first matching port var
JavaScriptのコードを書いていると、文字列をいつくかに分解して使いたいなんて場面があったりしますよね。 そんな時、どのようにコードを書けばいいのかわからない… という方もいるかもしれません。 そんな方必見! 今回は、文字列を分割する際によく利用される「split」メソッドについて解説していきます。 基本的な使い方や、分割のパターン、応用的な実装方法などまで幅広く解説していきます。 これで文字列分割は完璧。しっかり学んでいってくださいね。 >>> 今すぐ「split」の使い方を知りたい方はこちら 「split」とは? まずは、「split」メソッドの基本的な知識から学習を始めましょう。 splitはStringオブジェクトの組み込みメソッドとして用意されており、文字列を任意の箇所で区切って分割することが可能になります。 一般的な構文としては、次のようになります。 var str =
2017-06-22 [コマンドの変更] npm install ws ↓ npm install node-osc 長い間単純なミスを記載してしまっていました... すみません... npmを使ってインストールしました 参考公式ページ https://github.com/termie/node-osc https://www.npmjs.com/package/node-osc oscP5 Processing内の[Add Library]から検索したらありました Github https://github.com/sojamo/oscp5 リファレンス等 http://www.sojamo.de/libraries/oscp5/ サンプルコード 前回のwebsocketでのサンプルコードとだいたい同じにしています。 サーバ側のnode.js var osc = require('no
Phaser - Desktop and Mobile HTML5 game framework モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク。 Pixi.jsベースでCanvasやWebGLのレンダリングもサポート。 Tags: flash-like 2d sounds collisions physics typescript webgl free cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js Examples - PixiJS ベースとなっている Pixi.js のサンプル。レンダリング結果の雰囲気がつかめる。 HTML5 Game Engines - Find Which is Right For You HTML5ベースのゲームエンジン一覧。比較がしやすい。 Phaser
0. 対象 JavaScript はそこそこわかる人 phaser って何?くらいの人 1. Phaser 基本のキ 世界で一番人気のゲームエンジン(範囲:JavaScript + 2D + オープンソース) github スター数: 21357 凄すぎだろ... 商用OK MIT ライセンス 高速 WebGLで動作, クライアントが対応してなければ Canvas にフォールバック 特別な開発環境不要 CDN から 1 JSファイルをロードするだけで使える npm でもインストールも可能 好きなエディタを使える TypeScript の定義ファイルも同梱 2. チュートリアルから学ぶ Phaser 3 Phaser のことを本当に何も知らなくても、そこそこ面白いゲームが作れる公式のチュートリアルがある。これをいじって、Phaser 3の概要をつかむ。 2.1. 動くもので遊ぶ チュートリア
WebGL & Canvas Phaser uses both a Canvas and WebGL renderer internally and can automatically swap between them based on browser support. This allows for lightning fast rendering across Desktop and Mobile. Preloader We've made the loading of assets as simple as one line of code. Images, Sounds, Sprite Sheets, Tilemaps, JSON data, XML - all parsed and handled automatically, ready for use in game and
JavaScriptのrandom関数は浮動少数点の乱数を返してきます。 なので整数のみの乱数を作ろうとした場合は少しだけ工夫が必要 ここではそのテクニックについてコード例と一緒に紹介したいと思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く