GitHubでスターが多いWYSIWYGエディタ（2019年11月） - Qiita
はじめに 2019/11時点でGitHubにあるWYSIWYGタグでスターが多いライブラリを調べてみます。 Quill 概要 GitHub https://github.com/quilljs/quill Demo https://quilljs.com/ ・テーブルの作成はできないようです(ver2.x用にテーブル追加のプラグインはある） ・クリップボードを経由して画像のアップロードが可能です。 ・highlight.jsを使用してコードブロックのハイライトが可能のようです 対象ブラウザ IEは非推奨のようです。 ライセンス BSD 3-clause サンプル 1.3.7のサンプル <!doctype html> <html> <head> <meta charset="utf-8"> <title>Test Quill</title> <!-- highlight.js を使う場合はq
Webアプリ無料運営のススメ：FirebaseとNuxt(Vue)なら最強！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? まだサーバーで消耗してるの？Firebase（サーバーレス）とNuxt.js（Vue系）ならWebアプリ運営は最強でしょ！？ この記事は、 サーバー費用をなるべくかけたくないけどショボいのはNO Firebaseの活用法をあまり理解していない Nuxt/Vueを使ってアプリ作ってみたい（Next/Reactと悩んでたり） アプリ構想はあるけどアイデアの落とし込みスピードが遅くて毎回挫折する という人向けに、「こんな感じで構築すれば効率良く開発できそうよ」というのを、勉強になった記事や技術的トピック・躓いた点なども合わせて紹介させていただ
最小構成でSocket.IOを試すサンプル - console.lealog();
Nodeの勉強の足がかりとして、ぜひとも一緒に使いたいSocket.IOを勉強中。 Websocketの存在は知ってるものの、実際に何ができそうとかアイデアレベルに達するほどの知識はなかったんですよね。 というわけで、まずは最小構成からどんなものかをチェックチェック。 準備 Nodeはインストール済という前提で。 mkdir socketio && cd socketio npm install socket.io touch index.html app.js index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello SocketIO</title> <meta name="viewport" content="width=device-width, initial-sca
10分でできる！Node.jsのSocket.ioを使ったWebSocketによる双方向通信
Node.js の Socket.io を使うと WebSocket による双方向通信が驚くほど簡単に可能になるので、実装方法を簡単に紹介します。 これにより、リアルタイム通信が可能です。 準備 プロジェクトフォルダの作成 socket.io-sample を作成します。 プロジェクトフォルダへ移動 cd socket.io-sample コマンドプロンプトまたはターミナルを開いて、プロジェクトフォルダに移動します。 package.json の作成 npm init -y npm init コマンドで、package.json を作成します。 Socket.io のインストール npm install socket.io npm install コマンドで socket.io をインストールします。 HTML から Client API を呼びだす サーバプログラムを作成する app.j
Node.js + Express + Socket.ioで遊んでみた - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに Node.js Express Socket.io チャットを作ってみた 1. メッセージの送受信と表示 クライアント側の処理 サーバ側の処理 2. Nodeサーバにリクエストがあるとログイン画面へ遷移 クライアント側の処理 サーバ側の処理 おわりに 参考 はじめに id:d_shrです。 担当している商材の機能を実装する上でNode.js, Express, Socket.ioについて学習する機会があったのでまとめてみようと思います。 Socket.ioのサンプルコードを参考に簡単にチャットアプリの基本的な機能を作ってみました。 簡単にWebアプリケーションを作ってみたいという方やNode.jsやSocket.ioを学習し始めた方の参考になればと思います。 Node.js Node.jsについては過去の記事で紹介されているので割愛します。 Node.jsの勉強会でお手軽にWeb
Node.jsでSocket.ioを使わずにWebSocket - Qiita
# !/usr/bin/env node var WebSocketServer = require('websocket').server; var http = require('http'); var server = http.createServer(function(request, response) { console.log((new Date()) + ' Received request for ' + request.url); response.writeHead(404); response.end(); }); server.listen(8080, function() { console.log((new Date()) + ' Server is listening on port 8080'); }); wsServer = new WebSocket
WebAssemblyとは？〜実際にC言語をブラウザで動かす〜【2019年6月版】 - Qiita
WebAssemblyとは？ ブラウザからアセンブリ（機械語）を実行できるようにする技術 高速化手段、あるいはJavaScriptの処理系にできないことをするといった目的で提案された 2015年6月、Mozilla、Google、Microsoft、Appleが標準フォーマットとして開発することに合意した WebAssemblyが生まれた経緯 JavaScriptに実行速度が求められる時代になった 1. なぜJavaScriptは遅いか？ インタプリタ言語で 動的型付けをしている → 解析に時間がかかってしまう よって、コンパイラ言語と比べると遅い😭 当初、JavascriptはHTMLに飾り付けをする程度だった さっと書いて、すぐに動く、それが売りだった しかし最近では・・・ 複雑なアニメーション WebGLなどのグラフィック処理 計算速度の遅いモバイル端末 などにも用途が広がり、実行
[Node.js] Socket.ioで双方向通信チャットアプリを構築 〜 JSおくのほそ道 #005 - Qiita
// 1.モジュールオブジェクトの初期化 var fs = require("fs"); var server = require("http").createServer(function(req, res) { res.writeHead(200, {"Content-Type":"text/html"}); var output = fs.readFileSync("./index.html", "utf-8"); res.end(output); }).listen(8080); var io = require("socket.io").listen(server); // ユーザ管理ハッシュ var userHash = {}; // 2.イベントの定義 io.sockets.on("connection", function (socket) { // 接続開始カスタムイベン
![[Node.js] Socket.ioで双方向通信チャットアプリを構築 〜 JSおくのほそ道 #005 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/09dd38f9be21daf39b9c8f9c34593799cbd5f647/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzkzMzAlMkZwcm9maWxlLWltYWdlcyUyRjE1MjY4ODU0NDY_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZWJkYzFhZTg1MDg3M2QwOTZmMzExNDA0MDhlZjA4Yjc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5126823b99606645c55a20cd5c84b61e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCTm9kZS5qcyU1RCUyMFNvY2tldC5pbyVFMyU4MSVBNyVFNSU4RiU4QyVFNiU5NiVCOSVFNSU5MCU5MSVFOSU4MCU5QSVFNCVCRiVBMSVFMyU4MyU4MSVFMyU4MyVBMyVFMyU4MyU4MyVFMyU4MyU4OCVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MiVFNiVBNyU4QiVFNyVBRiU4OSUyMCVFMyU4MCU5QyUyMEpTJUUzJTgxJThBJUUzJTgxJThGJUUzJTgxJUFFJUUzJTgxJUJCJUUzJTgxJTlEJUU5JTgxJTkzJTIwJTIzMDA1JTIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9OTU1MDNhYWNlODBlMzg3YTk4ZmVkODdjNGJhNjMwYWE%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBob3NvbWljaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1jZDVlMGZjYWRlYjFlZWZkOTc3ZDg1NjBkOTFmYTM4Nw%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4gVW5pcG9z5qCq5byP5Lya56S-%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D28ec0142f197664cbe436a813d3b56c4)
(〜・◇・)〜 o O ( 闇色 JavaScript イディオム〜 - latest log
(ε・◇・)з o O ( 最近ブログ書いてないなー、そろそろ書かないとなー (ε・◇・)з o O ( JavaScriptイディオム集 が大人気かぁー、もうすぐブクマ1000個とかすごいなー (ε・◇・)з o O ( よーし。便乗して、ボクも手持ちの闇色な奴を幾つか紹介するよー window.onload をもっと使い倒したい? (ε・◇・)з o O ( window.onload には、コールバック関数を1つしか設定できないという昔からの制限があるよね? (ε・◇・)з o O ( そこを中央突破ですよ! __defineSetter__("onload", function(callback) { addEventListener("load", callback); }); (ε・◇・)з o O ( はい、これで何個でも設定できちゃうね onload = function(
JavaScript イディオム集
JavaScriptでは、初見の人にはさっぱりわからないけれども、ある程度慣れた人は当たり前に使うイディオムが結構たくさんあります。知ってしまえば何てことはないので、私の知っている限りのイディオムとその意味を解説します。 （7/3追記: twitter等で教えていただいた内容を追加しました） +v （数値化） var v = "123"; console.log(+v + 100) // 223 console.log(v + 100) // 123100 vを数値化する方法では最もメジャーです。parseFloat(v) に比べて高速なのに加えて、parseFloatとは細かい挙動が異なります（例えば空文字列の場合、parseFloatならば NaN になりますが、 +v の場合はゼロになります）。必ず数値になることが保証されており、文字列などで数値化出来ない場合はNaNが返ります。 v
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由
ソーシャルボタンのJavaScriptでfunctionの前に「!」がついている理由を調べてみました。 １．はじめに TwitterやPocketなどのソーシャルボタンのコードをみると、共通してscript要素の中にあるfunctionの前に「!（エクスクラメーション）」がついています。 Twitterの場合 <a href="https://twitter.com/share" class="twitter-share-button" data-via="yujiro" data-lang="ja" data-size="large">ツイート</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getE
鼎盛国际游戏平台-［诚信第一］
鼎盛国际游戏平台-［诚信第一］是包含了新葡京、威尼斯人、金沙、BBIN电子、MG真人视讯、BET365等多个官方平台，游戏、体育、娱乐的第一首选，点击进入最新的娱乐集团网址:www.782net,www.2007com,www.9159com,www.js333com,使鼎盛国际游戏平台-［诚信第一］成为亚洲一流的娱乐平台,鼎盛国际游戏平台-［诚信第一］,注册免费送28元2015。
tmlib.js でモーダルウィンドウを作ってみた | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. tmlib.js には tm.dom.Element というクラスが定義されており, これを使うことで様々な DOM 操作を行うことができます. 今回はそのサンプルとして tmlib.js でモーダルウィンドウを作ってました. サンプルは jsdo.it で作成しております. Table of contents サンプルについて ソースコードの解説 DOM 要素をクエリで取得 イベントリスナをさくっと登録! 一度しか実行しないイベントを登録する スタイルをサクッとセット 属性をサクッとセット tmlib.js hackthon #1 やります! サンプルについて 左上のボタンを押すとモーダルウィンドウが表示さ
[New] JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた | TM Life
以前『JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた』 というエントリーを書いたのですが, tmlib.js の仕様が色々と変わってしまい動かない状態だったので, 修正しました. よかったら参考にしてください. 自作ライブラリ tmlib.js を使って, 円同士の衝突プログラムを作ってみました. やっているのは, 円同士の衝突判定 めり込みの補正 衝突後の反発 です. ちゃんと計算するなら, 衝突時間を調べてその分ベクトルの長さを調整して… ってやんないといけないのですが, 速度的に問題があるってのと難易度が上がってしまう(ホントはめんどくさい)のでちょっと省略しています. サンプルは jsdo.it の方に移植してあるので, 実際に 動かしたり, fork してイジったりして頂けると嬉しいです. Table of contents Code T
new msgpack.js with ArrayBuffer - latest log
リクエストを頂いたので、 ArrayBuffer を使った msgpack.js を書きました。 とりあえずコードを書いた段階で、識者の意見を取り入れて I/F の改善や、妥当性のチェックとテストケースの作成、ベンチマークなどはこれからの作業になります。 https://gist.github.com/4106426 MobileSafari と Android 4.0 での DataView のサポート具合が良くわからなかったので、ArrayBuffer + Uint8Array だけで実装しています。 // encode a = msgpack.pack({ a: [1,2,3, { b: 4, c: "hoge" }, "abc"] }); // -> [129, 161, 97, 149, 1, 2, 3, 130, 161, // 98, 4, 161, 99, 164, 104
ちょっと便利なJavascriptオブジェクトの作り方
今回は、ちょっと便利なJavascriptオブジェクトの作り方をご紹介します。いわゆるモジュール・パターンと呼ばれている方法です。 はじめに 最近、HTML5への注目と共に、Javascriptを使用する機会が増えてきました。以下のように適用範囲は多岐に渡っています。 通常のWebサイトでのユーザビリティ向上 スマートフォン用Webサイト開発 HTML5アプリによるクライアント・アプリ開発 スマートフォンのハイブリッドアプリ開発 Node.jsによるサーバサイド・プログラミング このように、Javascriptが基幹となる仕組みが広がっています。クライアント側とサーバ側を同じ言語で作れることは、開発側にとってはとても有難いことです（学習コストの低減、人的リソース配分の柔軟性など）。もちろん、発注者やエンドユーアにとっても開発速度などの面で利益が生まれます。 Javascriptプログラミン
最近のJavaScriptのテンプレ - Qiita
最近下のように書いてる。変遷としては、若干サーバーサイドJavaScriptを意識しつつ徐々に離れていった感じ。 即時関数を2重にして、トップには何も書かない 外側の即時関数の中には、'use strict'を書く 非strictモードのコードが含まれているとどっちのモードになるかわからないため。負の遺産が含まれ(ry だいたいjQuery使うので、外側の即時関数の書き方はjQuery boilerplateのを参考にしている(jQuery使わない場合は、第二引数を抜かす) 内側の即時関数に実際の宣言を書く app.jsか何か設定用のスクリプトでアプリケーション用名前空間としてグローバルオブジェクトを宣言しておく(window.App = {};など) 即時関数内で宣言されたプロパティやメソッド、関数などを返り値にして、グローバルオブジェクトに展開する /** * functions.js
[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic
HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。 デモページ Sonicの実装 Square（矩形）とCircle（円形）を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="sonic.js"></script> JavaScript: Square（矩形） あとは、JavaScriptで記述するだけです。 var square = new Sonic({ width: 100, height: 100, fillColor: '#000', path: [ ['line', 10, 10, 90, 10], ['line', 90, 10, 90, 90], ['line', 90, 90, 10, 90], ['line', 10, 90, 10, 10]
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
関数の場合の変数の巻き上げ問題について - Qiita