はてなブックマーク

この投稿は、nodejsのwsとブラウザapiのWebSocketについて、自分の勉強のためにドキュメントを読みながら試しただけのものになります。 なのでWebSocketについての詳細な情報が欲しい方は、以下のリンクを見て、本記事は読まなくて良いです GitHub - websockets/ws: Simple to use, blazing fast and thoroughly tested WebSocket client and server for Node.js WebSocket - Web APIs | MDN wsのAPIドキュメントは↓のようです https://github.com/websockets/ws/blob/master/doc/ws.md 間違っているなどあればご指摘お願いします WebSocket仕様関連 The WebSocket API HTML

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

<?php use DI\ContainerBuilder; use Psr\Container\ContainerInterface; use Psr\Http\Message\ResponseInterface as Response; use Psr\Http\Message\ServerRequestInterface as Request; use Slim\Factory\AppFactory; use Slim\Routing\RouteCollectorProxy; use Slim\Views\PhpRenderer; require __DIR__ . '/../vendor/autoload.php'; $containerBuilder = new ContainerBuilder(); $containerBuilder->addDefinitions([ 'se

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

参考 Scaling WebSocket Connections using Shared Workers | Ayush Gupta ※この投稿は、↑のページを理解したくて、私が勉強してみたことをまとめた内容になります やりたいこと WebSocketを使うとサーバーとクライアントで双方向にデータを送信できます。 クライアントはサーバーとの接続を開きっぱなしにします。 なので例えばAさんが、WebSocketと通信するページを10タブ開いた場合は、Aさんだけでサーバーと10接続することになります。 そこでSharedWorkerからWebSocketと接続することで、Aさんが10タブ開いたとしてもサーバーとの接続は1つだけにすることができます。 今回私が最終的に作成したコードはこちらです SharedWorkerとは SharedWorker - Web APIs | MDN Share

Reactを使用して、ボタンを押したときに指定のDOMの位置までスムーズにアニメーションしながらスクロールするサンプルを作成してみました スムーズにスクロールさせる方法は色々あると思いますが、私は以下の方法を試してみました。 方法1 scrollTo() を使う (※IEとSafarではうまく動かなかった) 方法2 requestAnimationFrame を使う scrollTo() scrollTo()を呼び出すときにオプションでbehavior: 'smooth'と指定することでスムーズにアニメーションしながらスクロースしてくれました。 ※IEとSafariではスクロールするけど、アニメーションしないで、一瞬で対象の位置まで行ってしまいました See the Pen react smooth scroll by 奥村健吾 (@okumurakengo) on CodePen. co

WebpackDevServerを使わずに、Webpackで監視しているファイルが変更された時にブラウザを自動リロードする方法JavaScriptwebpackReactwebpack-dev-serverwebpack-livereload-plugin 最近私はPHPでサーバー側を作成し、htmlで、webpackでバンドルしたjsを読み込む、という感じのことをやっていたのですが、WebpackDevServerで起動した時のように、 jsファイルを保存 -> ブラウザ自動リロード ができないかと思い、ググってみるとwebpackのプラグインがあったので紹介ですm(_ _)m webpack-livereload-plugin を使うとうまくできました Install

【JavaScript】('b'+'a'+ + 'a' + 'a').toLowerCase() が「banana」と表示されるJavaScript スタックオーバーフローのこちらの質問がネタ元です。 面白いと思いましたので投稿させていただきました Why is the result of ('b'+'a'+ + 'a' + 'a').toLowerCase() 'banana'? - Stack Overflow ('b'+'a'+ + 'a' + 'a').toLowerCase()これを実際にJavaScriptで実行してみると、 このように「banana」と表示されました 回答の要約 +"a" とすると、"a" は数値ではないので NaN となる 'ba' + NaN とすると、NaNが文字列の"NaN"となる 最後に'a'を連結してるので"baNaNa"になる toLowerCa

こちらの参考リンクでvue、reactの比較についてわかりやすく、とても参考になったのでそれをみながら勉強したというという投稿なります なのでリンク先を見ていただければ、この記事は見なくても大丈夫です。m(_ _)m また、私はJavaScript勉強中のものです、間違いなどありましたら教えていただけるとありがたいです。 参考：React for Vue developers — Sebastian De Deyne Templates

今回npmで公開など初めてだったので、こちらのリンクを参考にしました。ありがとうございます。m(_ _)m TypeScriptでnpmライブラリ開発ことはじめ - Qiita npmでパッケージを公開してみた手順の記録 - Qiita 作成したコード 結構雑ですが、自分が作成したコードをさらそうと思います。よろしくお願いします。 定数や型定義をglobal.tsに全部書きました。自分にとってはテトリスのロジックを考えるのに型定義があるとすごく助かりました。 export const NONE_Y = 0; export const NONE_X = 0; export const INIT_Y = 1; export const INIT_X = 5; export const MAX_X = 11; export const MAX_Y = 17; export type TRow =

こちら↓のページがとても参考になったので、こちらの内容をそのまま試してみました 【New Node.js 12 features will see it disrupt AI, IoT and more surprising areas】 タイトルに12とありますが、12以外の10や11でも動く機能も紹介されており、勉強になったのでそのまま試しました。 Node.js初心者です、間違っていたら教えていただけるとありがたいです。よろしくお願いします。 またこちらのサイトも参考とさせていただきました。 Using worker_threads in Node.js worker_threadsを使ったNode.js マルチスレッドプログラミング node.js モジュール(ES Module)のimport/exportにハマる。 確認バージョン Node v12.7.0 macOS Moja

注意 わたしは趣味でreactを勉強しているものです。間違いなどありましたらご指摘お願いしますm(_ _)m 参考 【React】新機能hooks - Qiita ReactでcreateContextするときにTypeScriptのリントがエラーを吐く場合の対処法 - Qiita Hooks API Reference – React Context – React Using Typescript with modern React (i.e. hooks, context, suspense) - youtube tate Management with React Hooks and Context API in 10 lines of code! - medium ReduxのTodoリスト こちらのサンプルをReactのHooksに書き換えてみます。 Example: Todo

この記事は私がsocket.ioのドキュメントを読んで基本を勉強したという内容ですので、間違いなどありましたらご指摘お願いします またドキュメントでjQueryが使われている部分はネイティブJavaScriptに書き換えています Get started The web framework 【expressフレームワークを使う】 1. Socket.IOを試すためのhtmlをexpressを使って表示 ※expressではなく、普通にnodeのhttpモジュールでもOKです。

wordpress初心者です。サンプルは調べながら作成しました、間違いなどありましたら指摘お願いします この記事の編集履歴 直接アクセスされたかどうかのチェックを追加 エスケープ処理を追加 CSRF対策をするように変更 アンインストールの処理追加 参考 0からわかるWordPressプラグイン開発（スッテプ・バイ・ステップ） - Qiita WordPress Plugin Development - YouTube WordPress で Ajaxを利用する | バシャログ。 jsファイルでWordPressのテンプレートパスを使えるようにする | TECH | 孤独村 plugins - why does the add_action('the_content) overwrite my page - WordPress Development Stack Exchange サンプル

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

import Tone from "tone"; const synth = new Tone.Synth().toMaster(); // note:ドレミなどの音階を指定 // dur:「4n」->「♩」(四分音符)、「8n」->「♪」(八分音符) // nullだと休符 const data = [ { note: "E4", dur: "8n" }, { note: "F4", dur: "4n" }, [{ note: "G4", dur: "8n" }, { note: "G4", dur: "8n" }], { note: "G4", dur: "4n" }, { note: "E4", dur: "8n" }, [{ note: "G4", dur: "8n" }, { note: "C5", dur: "8n" }], { note: "C5", dur: "8n" },

注意 私はaudioのファイル形式など詳しくありません、個人的に興味があり公式に書いてあることを試してみたという内容です。 詳しく知りたい方は以下の公式などを参照し、本記事は読まなくて良いです。間違いなどありましたらご指摘お願いします goldfire/howler.js - github howler.js - JavaScript audio library for the modern web howler.jsとは jsで扱えるオーディオライブラリ 2019/03/19現在 githubスター数 : 13845 install npmを使って試してみました

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

この記事の対象 ngx_http_hls_moduleを試してみたい方 HLSに興味があるのでとりあえず試して見たい方 自分なりに調べたまとめという内容ですので、ただシンプルにHLSの動作を確認してみたいという方は以下のページを参考にし、本内容は読まなくて良いです。 HLS（HTTP Live Streaming）で動画を配信・再生してみよう | YAZ技術ブログ 動画をストリーミング配信する方法 | IT SKILL MAP ffmpeg を使い、HTTP Live Streaming(HLS)をファイルに保存し、保存したファイルからストリーミングを行う方法について - Qiita HTTP Live Streamingを試してみた - UUUM攻殻機動隊(エンジニアブログ) HTTP Live Streaming 動画配信のやり方 （実践） | ビズバレーブログ ffmpeg で mp

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

はじめに この投稿はReactを趣味で勉強している私が、勉強のために公式サイトに書いてあることを読んでみて実際に手を動かしてみた備忘録です。 書いていることが間違っていたら指摘してほしいです。 私は業務でreactをやった経験とかもない素人ですが、Reactの公式サイトってこんなこと書いてあるんだ、という参考ぐらいにはなると思って投稿させていただきました。 それとGoogle翻訳の内容をそのまま記載している場所も多いです。 あと読んでの感想ですが、公式サイトにはCodePenでの動くサンプルなんかもたくさんあり、本当にわかりやすくできてますね よろしくお願いいたします。m(_ _)m v15.6.1です。 ここら辺を読みました! Installation Trying Out React コードペンでReactを使う方法が書いてます。 https://codepen.io/gaearon/

はじめに、 PHPとjQueryの基礎を勉強したのでajaxを使ってみよう！と思ったはいいものの、 最初全然わからなくてつまりまくってしまったので、ajaxの基礎(.get() .post() .load()だけ)を自分なりにまとめてみました。 jQueryのajaxがわからなかった理由 1.ajax自体どういうものか知らない人だった。 2.jQueryのAPI見たら、ajaxのいろんな関数あるけどどれから勉強したらいい？ 3.GETやPOSTを扱う場合、引数いろいろ渡さなければいけないみたいだけど、それぞれどういう意味？ callback関数って何？php側の書き方は？ わからないことがたくさんあり、一度に全部理解しきる体力がなく、とりあえず入門サイトのコードをコピペして動いたけど、結局どういうこと？ ってなってしまった。 ※私自身新人プログラマですので、書いている内容がいろいろダメな部