JavaScriptのパーサコンビネータ Parsimmonを使ってみた - Panda Noir
(この記事はQiitaで僕が書いたものを移行した記事です。記事中のコメントはQiitaの該当記事を参照ください) パーサコンビネータなる素敵なものを見つけたので使って検索クエリのパースをしてみました。そのとき、理解するのに時間がかかったのでメモを残しておきます(公式のサンプルのわかりづらさが原因で1時間ほど無駄にしてしまいました)。 ※追記あり const Parsimmon = require('parsimmon'); const regex = Parsimmon.regex; const lazy = Parsimmon.lazy; const or = regex(/\sor\s/i).result('or'); const and = regex(/(?:\s|\sand\s)/i).result('and'); const not = regex(/\s-(?:\w+)/i)
ヘッドレスブラウザ Chrome + Chromy で操作した内容を録画する
Chromeのブラウザ内（もしくはデスクトップ）操作をJavaScriptで録画するに続いて、今度はヘッドレスブラウザ (Chrome) で操作した内容をビデオ録画する方法を紹介します。今回は Chromy というライブラリを利用します。 機能的には Chrome DevTool に用意されている startScreencast を利用します。Chrome ヘッドレスブラウザのライブラリといえば puppeteer という感じがあるのですが、 Chromy は startScreencast のラッパーを用意してくれているので、サクッと使えるのが良いところです。 サンプルコード 指定のページを開いて startScreencast をした後、なんらかの操作をします。その後、 stopScreencast で処理を終了すると startScreencast コールバックで受け取ったキャプチャ
D3.js v5 カラーテーマまとめ (d3-scale-chromatic) – データビジュアライゼーション・ラボ
2018-03-032018-03-10 D3のv5から追加されたカラーテーマです。 v4でもHTMLファイルのヘッダーに下記を追加して呼び出すと使うことができます。 <script src="https://d3js.org/d3-interpolate.v1.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
JavaScriptでクリップボードの画像を取得する - Qiita
初めに クリップボードに格納されている画像をJavaScriptから取り出す機会があったのでメモ。 （例によってニッチなネタです。） 制約 クリップボードの値を取り出すには、ユーザのアクション(ペースト)が必須です。 セキュリティの関係で好き放題アクセスできないようになっているようです。この壁を乗り越えるにはFlashを使うなどの手法があるようですが、この記事ではそれらには触れません。 したがって、ここで紹介する方法の応用場所は相当限られると思います。 たとえば、Qiitaの編集画面でちょっとした画面キャプチャを添付したいときに、いちいちファイルを介さずに添付できるとか・・・どうかなぁ・・・？微妙？ まぁ、こんなアイデアもあるよってことで・・・ サンプル printscreen(macならctrl + shift + cmd+ 3)で画面キャプチャを取った後、上記ページの「paste im
D3.js v4/v5 force simulation 最小構成 – サンプル – データビジュアライゼーション・ラボ
2018-02-022018-03-31 D3 forceSimulationのプログラムデモです。 forceSimulationの最も簡単な構成のプログラムを紹介します。はじめてforceSimulationを使う際などに活用ください。 サンプルデモ – ノードをドラッグしてください。 D3.jsのforceSimulationは、ノードの位置をばね力などを考慮して計算するものです。v3以前ではforce layoutとして定義されていて、同じ関数が使えないので書き換える必要があります。設定できるパラメータがいくつもありますが、ここではまず導入できることを目指して最小構成のデモとプログラムを解説します。 サンプルコード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>D3 v5 force simulation</
MVI (Model-View-Intent) と MVC との違い - Qiita
Cycle.js の MODEL-VIEW-INTENT のチュートリアルから MVI (Model-View-Intent) と MVC (Model-View-Controller) に関する説明を抜粋して翻訳しました。原文のライセンスは MIT です。 「Passive/Reactive プログラミングの違いを学ぶ」 をあらかじめ読んでおくと理解が深まるでしょう。筆者の André Staltz さんは Flux、Redux などのアーキテクチャの比較や評価を UNIDIRECTIONAL USER INTERFACE ARCHITECTURES と NOTHING NEW IN REACT AND FLUX EXCEPT ONE THING の記事で述べています。 MVI (Model-View-Intent) について MVI は Cycle.js の main() 関数を3つの
CSS Paint APIでJavaScriptからCSS用のグラフィックを動的に生成する
Houdiniというプロジェクトをご存知ですか？HoudiniはJavaScirptからアクセスできるCSSの機能を広げ、プログラマブルなCSSを実現するためのものです。Houdiniが実現すれば、まるでハリー・フーディーニのように物事を自在に操れるようになること間違いなしです！ そんなHoudiniの中で、CSS Paint API（CSS Painting API）がChrome 65で実装予定です。 CSS Paint APIを使って、ブラウザの上の魔術であるHoudiniを体験してみましょう。 CSS Paint APIは、CSSで用いる画像をJavaScriptから動的に生成するためのAPIです。生成した画像は、background-imageやborder-imageで利用可能です。今までcanvas要素で無理やり実現していた複雑な背景なども、CSSの枠組みの中で実現することが
夏のインターン講義「1営業日で書くJavaScriptコンパイラ」の設計と実装 - クックパッド開発者ブログ
今年、クックパッドでは夏のインターンと題して20名弱のインターンを受け入れました。 このインターンは前半と後半に大きく分かれており、 後半が社員に混じって業務をするいわゆる普通のインターンで、 前半は7日間にわたってプログラミング関連の講義を受けるという仕組みです。 わたし（青木）はその前半の過程において、「プログラミングパラダイム」という 1 日の講義を担当し、 JavaScriptの処理系を書くという、ツッコミどころの多い課題を実施しました。 本稿では、その講義を開発する際に考慮したこと、特に難易度調整についてお話しします。 また講義のために開発したJavaScript処理系「JetSpider」についても軽くふれます。 ▼講義資料 Cookpad Summer Intern 2015 - Programming Paradigm from Minero Aoki JetSpiderコ
WebGLでレイトレしてゲームを作ってみた - SEGA TECH Blog
すべての色をつなげよう WHOLE MATCH PUZZLE 操作方法 マウスのドラッグ（タッチパネルの場合はスライド）で玉を一列横か縦にスライドさせることが出来ます。 ルール 同じ色同士ですべての玉をつなげると一面クリアです。そのとき100点が加算されます。 ひとつの解答例。赤は赤同士、青は青同士、上下左右どこかでつながっていればよい。 クリアするたびに色が増えていき最大で５色まで難易度が上がります。 パズルの完成度（パーセント）がスコアの下２桁になります。 2分の制限時間内で可能な限り玉を消して高得点を狙ってください。 目指せ1000点！ ※最新のfirefoxとchromeで動作を確認しています。 また、一部のスマホでも動作を確認しています。 結果をツイート タイトルに戻る はじめに ドーモ、セガゲームスは開発技術部所属の栃木と申します。 業務ではライブラリの制作や絵周りのことでコー
Cloud Functions with Puppeteer + Google Apps Script でスクレイピングサーバーをサクッと作る - Qiita
2018/08/16 に Google Cloud Functions が Puppeteer をサポートしました Introducing headless Chrome support in Cloud Functions and App Engine Puppeteer が使えるようになったので、ヘッドレス Chrome を利用したスクレイピングが Cloud Functions でおこなえるようになりました。 Node v8 にも対応したので async/await も使えますよ！ しかし Cloud Functions の単体利用は使い勝手がちょっと悪いです。 それを補うために Google Apps Script（GAS）と併用します。 GAS を利用することでスプレッドシートに書き込んでデータの保存場所としたり、メールを送ったりなどが簡単に行なえます。 この2つを使う最大のメリ
amCharts: customizable free flash charts
JavaScript Charts & Maps Programming library for all your data visualization needs. Readme.md Came here to find your next charting library? Good. Our charts were designed to feel modern, sleek and fast, out-of-the box. But don’t take our word for it – check out our demos and fall in love. And best of all, our libs natively integrate with TypeScript, Angular, React, Vue and plain JavaScript apps. S
[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts
チャートやグラフを実装するのは面倒、と思われがちですが、そんな人にはこのスクリプトをお勧めします。 div要素一つと外部ファイルを一つ、あとはグラフのデータを設定するだけで、さまざまなチャートやグラフが簡単に実装できてしまう単体のJavaScriptライブラリを紹介します。 レスポンシブ対応で、アニメーションにも対応、カラー変更やグラデーションやパターンにも対応している優れものです。 ApexCharts ApexCharts -GitHub ApexChartsの特徴 ApexChartsのデモ ApexChartsの使い方 ApexChartsの特徴 ApexChartsはシンプルなAPIを使用して、インタラクティブなチャートやビジュアライゼーションを作成するためのモダンJavaScriptのチャート作成ライブラリです。 MITライセンスで、個人でも商用でも無料で利用できます。 レスポ
![[JS]便利なのが登場！実装はかなり簡単なのに、さまざまなチャートやグラフを実装できるスクリプト -ApexCharts](https://cdn-ak-scissors.b.st-hatena.com/image/square/b793c623eb3187e192351b9611f75aea908bbf46/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018080101-02.png)
Pax: The fastest JavaScript bundler in the galaxy
cargo install pax px --watch index.js bundle.js Why? time px index.js bundle.js real 0m0.015s user 0m0.006s sys 0m0.006s Your bundler is a tool. It’s supposed to help you, not slow you down. You know the feeling. You make that tweak, hit ⌘S ⌘Tab ⌘R, and… nothing changes. You get the old version. You beat the bundler. You wait a few seconds, hit ⌘R again, and your changes finally show up. But it’s
Element.toggleAttribute | blog.jxck.io
Intro 非常にシンプルかつミッシングピースだった Element.toggleAttribute という仕様が提案された。 最近になって各ブラウザが一斉に実装を進め、リリースに向けたアナウンスが出始めている。 この仕様について解説する。 Boolean Attributes Boolean Attribute とは、属性の存在によって真偽となる属性である。 https://html.spec.whatwg.org/#boolean-attribute 例えば button の disabled を例にとるとこうなる。 button を disabled にする場合は、仕様上は以下の 3 つの書き方がある。 <!-- 属性のみを書く --> <button id=target disabled>toggle target</button> <!-- 値を empty string にする
p5.jsでビジュアルコーディングしてみる。 - Qiita
◆p5.jsとは processingをjavascriptに移植したものです。 javascriptなので環境を作らなくてもすぐにコードを書くことができます。 さらに拡張機能をライブラリとして使用可能で、サウンド、3D、グラフィックス、htmlやDOMの直接操作することもできます。 図形やグラフィカルな描画に特化しているので、アーティストやデザイナにも取っ付きやすいビジュアルコーディングツールになってます。ありがたや… ◆環境を整える http://p5js.org/ 公式ページからCDNのリンクをHTMLに貼付けるだけで環境設定終了。 codepenでのプログラミングが便利！ http://codepen.io 打ち込んだコードが即反映されるので試し書きしたいときに。 ◆描画してみる ↓p5.jsは下記のサイトで基本的な流れを学ぶことができます。 ドットインストールp5.js入門 ht
p5.js
p5.js is a friendly tool for learning to code and make art. It is a free and open-source JavaScript library built by an inclusive, nurturing community. p5.js welcomes artists, designers, beginners, educators, and anyone else! Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza. Coding Club for people aged 50+ in Korea, led by Inhwa Yeom. Qianqian Ye intro
Vue.jsとHTMLとCSSで3Dアクアリウムを作ってみた - Crieit
ブラウザで見ることができる3Dアクアリウムを作ってみました。 この3Dの実装は基本的にはHTMLとCSSだけで出来ています。canvasも使っていません。Vue.jsも使っていますが、魚を泳がせたり視点を変更するための用途のため、3D描画自体にはあまり関係ありません。 記事の最後に操作できるCodePenを配置してあるので読むのが面倒な方はそちらを見てしまってください（大泣きしながら）。 作り方 HTML HTMLは単にそれぞれの素材を配置しているだけです。 <div id="app" @mousemove="onMouseMoved" @touchmove="onMouseMoved"> <div class="container" :style="rotation"> <img class="bg" src="bg.jpg"> <img class="water front" src=
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Curved Links
Chrome の marquee 要素が 優秀だった話
Vue CLI UIが想像以上に便利だった話 - Qiita
