jqPuzzle – Customizable Sliding Puzzles with jQuery
Demo page On this page you can find several sliding puzzles which have been created with jqPuzzle. Each puzzle is individually styled and customized. Switch through the tabs to see the HTML/JavaScript/CSS code needed to build the puzzle. Each example requires the jQuery and jqPuzzle files to be referenced in the source. See Preparations for detailed information. « Home page The easy way – Adding a
JavaScriptで数値フォーマットする標準API「Intl.NumberFormat」 (カンマ区切り、円・ドル表記、漢数字など) - Qiita
JavaScriptで数値フォーマットする標準API「Intl.NumberFormat」 (カンマ区切り、円・ドル表記、漢数字など)JavaScriptI18nl10nECMAScript ほぼすべてのブラウザやNode.jsでサポートされている数値をフォーマットするAPI「Intl.NumberFormat」を紹介する記事です。 JavaScriptで数値をカンマ区切りにしたいときにGoogleで検索してみると、正規表現を使っていたり、ループで回して3桁ごとにカンマ付ける実装を紹介する記事を多く見つけました。 しかし、それらは古い記事ということもあり、2018年現在は数値のフォーマットを実装する必要はありません。EcmaScriptで仕様策定されておりほとんどのブラウザやNode.jsで使える関数があるので紹介します。 今回紹介するコードの実行結果はすべてChromeでの結果になります
クラスとスタイルのバインディング — Vue.js
最終更新日: 2019年7月22日 データバインディングに一般に求められることの 1 つは、要素のクラスリストとインラインスタイルを操作することです。それらはどちらも属性ですから、v-bind を使って扱うことができます。最終的な文字列を式で計算するだけです。しかしながら、文字列の連結に手を出すのは煩わしく、エラーのもとです。そのため、Vue は v-bind が class と style と一緒に使われるとき、特別な拡張機能を提供します。文字列だけではなく、式はオブジェクトまたは配列を返すことができます。 HTML クラスのバインディング オブジェクト構文v-bind:class にオブジェクトを渡すことでクラスを動的に切り替えることができます: <div v-bind:class="{ active: isActive }"></div> 上記の構文は、active クラスの有無がデ
kuromoji.js を使って形態素解析
生徒が自然言語処理に興味を持ったので、あんまり覚えてないなぁと思いつつ、久々に形態素解析やってみっか！ということで、 kuromoji.js を使って日本語の文章を形態素解析して、適当にマルコフ連鎖で文章を作ってみることにしました。 リポジトリの用意 まずは、何はともあれリポジトリの用意から。単純に npm init するだけなのですが、せっかくだし打ったコマンドは全部記録しておきましょう。 $ mkdir kuromoji-example $ cd kuromoji-example $ npm init # この後はエンター連打(特に公開するつもりもないし) $ git init $ echo "node_modules" >> .gitignore $ git add . $ git commit -m "Init repository" node_modules を .gitigno
particles.jsを使って簡単に幾何学的なアニメーションを作る | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして！ 8月にLIGに入社しましたフロントエンドエンジニアのゆたろです。 今後ともよろしくお願いします。 さてさて、今回は簡単に幾何学模様のアニメーションが作れるparticles.jsについて紹介したいと思います。 particles.jsを使ってみよう まず下記よりプラグインをダウンロードしてください。 ダウンロードしたzipファイルを解凍して、中からparticles.jsまたはparticles.min.jsを取り出します。 http://vincentgarreau.com/particles.js/ 次に下記のソースをコピペして、別ファイルのJSとして保存してください。 （当記事ではsetting.jsとします。） particlesJS('hoge',{ "particles":{ //--シェイプの設定---------- "number":{ "value":80
Leaflet — an open-source JavaScript library for interactive maps
an open-source JavaScript library for mobile-friendly interactive maps Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 42 KB of JS, it has all the mapping features most developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can b
Slider Widget | jQuery UI API Documentation
The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles and ranges. The handle can be moved with the mouse or the arrow keys. The slider widget will create handle elements with the class ui-slider-handle on initialization. You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class
npmとyarnの脆弱性とpostinstall - Cybozu Inside Out | サイボウズエンジニアのブログ
フロントエンドエキスパートチームの小林(@koba04)です。 先日、npmから脆弱性についての発表がありました。 調べていく中でいくつか思うところがあったので解説も兼ねて書いていきたいと思います。 The npm Blog — Binary Planting with the npm CLI npmの利用者としてやるべきことは、 npmのバージョンを6.13.4以上にあげる yarnのバージョンを1.21.1以上にあげる です。 npmのバージョンが6.13.4になったNodeもv8, v10, v12, v13系でそれぞれリリースされたので、そちらを利用することも可能です （yarnのバージョンは別途あげる必要があります）。 nodejs.org npmによる発表では、今回発表された脆弱性は2件あるため、それぞれ個別に考えます。 binに任意のパスを指定出来る件 npmパッケージはpa
現場で使えるアニメーション系JSライブラリまとめ（2022年版） - GSAP, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ（2022年版） GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジ
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
お手軽360°パノラマ制作入門！ JavaScriptでパノラマビューワーを自作しよう - ICS MEDIA
360°の全方向を自由に見渡せるパノラマコンテンツは、Googleストリートビューのようなウェブサービスによって身近なものになってきています。 前回の記事『THETAで撮影しWeb公開に挑戦しよう』では、360°の静止画・動画が撮影できるカメラ「RICOH THETA」で撮影したパノラマをYouTubeなどのウェブサービスで手軽に公開する方法を紹介しました。 今回は、カスタマイズ性の高いウェブ用の360°パノラマビューワーの実装方法を、初心者用と上級者用として二通り紹介します。初心者用のものはHTMLで3Dを作成できるライブラリ「A-Frame」を使い、上級者用としてはJavaScript製の3Dライブラリ「Three.js」を用います。 パノラマ静止画を表示する360°パノラマビューワー 本記事で解説するサンプルの完成形を紹介します。360°パノラマビューワーで、パソコンではマウスドラッ
CreateJS でパーティクルシステムの開発に挑戦しよう - ICS MEDIA
パーティクル・システム（particle system）はコンピュータグラフィック技術のひとつで、ある種の曖昧さを持った事物をシミュレートするために使われます。一般にパーティクル・システムを使って模写される例としては、炎、爆発、煙、流水、火花、落葉、雲、霧、雪、埃、流星、毛髪、毛皮、草地、あるいは光跡や呪文の視覚効果などが挙げられます。 段階を踏んで、一つ一つ学んでいきましょう。本章の解説は、約2時間程度で学べる内容となっています。 1つだけのパーティクル制御を実装 サンプルを再生する サンプルのソースコードを確認する パーティクルはcreatejs.Shapeインスタンスとして作成します。このパーティクルに対して、速度の計算を行います。 // 赤い丸を作成 var particle = new createjs.Shape(); //(省略) // 速度情報 var vx = 0; va
npm, yarn による zero install 戦略 - from scratch
jsconf.eu 2019 に行ってきました。 特に npm や yarn の今後の話とそもそも Registry をどうしていくか、の話があったのでお知らせします。 そもそも Registry をどうしていくかについては次のエントリで話します。 tink: A Next Generation Package Manager npm の次のコマンドラインツールである tink が紹介されていました。 github.com presentation: github.com video: www.youtube.com そもそも npm の仕組み ローカル依存ファイルを読む (package.json, package-lock.json, shrinkwrap.json) 存在しないパッケージのメタデータをfetchする 木構造を計算して、実行する（npm v3 以降だとflattenする
CANVASでドキドキする「アルファマスクアニメーション」を作ろう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
はじめまして、フロントエンドエンジニアのドリルです。今年の３月に入社いたしました。 「ドリル」というあだ名には、「深く掘り続ける、探求する」という意味があります（名付け親はLIGのデザイナー、藤田さんです）。今後はLIGブログでもさまざまなトピックを掘り下げて書いていきたいと思うので、どうぞよろしくお願いいたします！ さて今回は、CANVASでアルファマスクアニメーションを作る方法をご紹介します。 今回のゴール こちらが完成形です。スポットライトを当てたような表現など、アニメーション表現に応用できます。ちなみにIE11対応です！ See the Pen CANVAS – ALPHA MASK by Sho Shindo (@kabukimono) on CodePen. 何かドキドキする動きですね。まさかツインテールだったとは。 用意するもの ２つの画像を準備します。 背景jpg画像(今回
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
learn | p5.js
アニメーション｜クリエイティブコーディングの教科書
GitHub - takuyaa/kuromoji.js: JavaScript implementation of Japanese morphological analyzer
CodePen Search
JavaScriptで黒魔術！ 記号コーディング編
imagemagick-native