ウェブのフロントエンド開発に役立つライブラリとして、VueとReact、Angularがよく取り上げられます。これらのライブラリは、SPA（シングルページアプリケーション）の開発に役立つ多くの機能を持っています。 フレームワークを選定するには、「人気だから使う」という短絡的な理由で選択をするのは望ましくありません。設計思想や機能の種類、学習コストなどの観点で、プロダクト・プロジェクトチームへの適性を検討するのがセオリーです。幸いにも、それぞれを比較した記事がウェブに数多くあり、選定のヒントを簡単に得ることができます。 一方、機能面の比較ばかりが取り上げられ、性能面で紹介されている記事が少ないように見受けられます。記事『サービスにおいて速さこそが神である｜深津 貴之』でも紹介されているように、昨今のウェブはスピードが求められる時代でもあり、ライブラリの性能評価の記事があってもよいのではないで
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
パーティクルとは粒子のこと。パーティクルを表現に取り入れると、印象的な演出に役立ちます。JavaScriptやWebGLを使うことで、ウェブの技術でもパーティクル表現の制作が可能です。本記事では題材にパーティクル表現の制作に役立つアイデアや着眼点を紹介します。 作例の紹介 本記事のチュートリアルの完成形はこちらになります。 別タブで再生する ソースコードを確認する この記事で学べること 2Dテキストを粒子化して動かす表現 パーリンノイズによる空気感の再現 GSAPによる大量のトゥイーン制御 WebGLの高速化（PixiJSの応用） 制作の技術 本作例を制作するにあたり、利用しているウェブの技術の概要を紹介します。 WebGL 画面表示はWebGLを利用します。ウェブのレンダリング技術において、もっとも高速な描画性能を得られるのがWebGLであるためです。WebGLは3D表現のための技術と思
概要 □ スライドパズルのゲームを作る □ 基本に立ち返りHTMLとCSSとピュアなJavaScriptだけで作成する ・パズルの実装はシンプルで簡単。 ・考え方さえ理解すれば早いため、実装の前にイメージで説明する。 □ パズルを試したい人は https://jd253t.csb.app (codesandboxのpreview)から試せる ※下の埋め込み表示ではJavascriptが想定通り動作しないので上記のURLから試してください ※パズルはPCからの操作のみ対応 ※codesandboxのpreviewが安定しないことがあります。もし表示が崩れていたらソースコードを貼っているのでローカルで試してください イメージ.パズルを作る方法 □ 1.canvas要素(390×390で)を作成する □ 2.写真を390×390でcanvas内に描画する □ 3.スライドパズル画像を作る定義を作
【Unity提供アセット】FlutterライクのワークフローをUnityで実現！強力なUIプラグインパッケージが新登場。60fps以上のレンダリング効率、クロスプラットフォーム対応。1ドローコールで描画する「UIWidgets」 - Unity AssetStoreまとめ
UIWidgets スクリプト/GUI Unity Technologies 無料 【リリース日】2019年5月23日 Googleが開発したオープンソース「Flutter」の派生版で、 Unityでそれに似たワークフローで開発が行えるプラグインパッケージが新登場！ 最大の特徴は60fps以上の高効率でレンダリングできること。 サクサク軽快に動作するパワフルなUIアニメーション、 Android/iOSでよくみるウィジェットやWebデザインのような美しい画面遷移が作れます。 話題の「Flutter」っぽい開発をUnityで試したい方、 フルコーディングでUI制御したい方、 ゲーム内の複雑なUIを1ドローコールで抑えたい方、 ネイティブスタイルのアプリやゲーム開発を行ってみたい方は要チェックです！ サンプル動画 テストプレイ 追記：ドキュメントをUIWidgetsで閲覧!?凄すぎる セッ
PCの構成やインストールしているフォントなどはユーザーごとに微妙に異なるものを使用しているため、デジタル上で個人を特定するために役立つ情報「フィンガープリント」とされています。そんなフィンガープリントが自身のブラウザでどのように収集されているのか確認できるウェブサイト「Cover Your Tracks」を電子フロンティア財団が公開しています。 Cover Your Tracks https://coveryourtracks.eff.org/ Cover Your Tracksのトップ画面はこんな感じ。左上にはロゴマーク、左下にはテスト開始ボタン、右側にはフィンガープリントについて学ぶページへのリンクとCover Your Tracksの使い方へのリンクが表示されています。なお、Cover Your Tracksは電子フロンティア財団が以前公開していた自身のブラウザがどれだけトラッキング
Unity WebGL なゲームをNode.JS + jsdom + headless-glで動かしたかった - Qiita
えっ このネタ続くの。。？ 前回( Unity WebGLで使われているシェーダを抜き出してARBアセンブリを眺める )はWebGLビルドのUnityゲームをトレースして、使われているシェーダ命令があんまり多くないことを確認した。 ブラウザ上の動作では同期APIの実装に制約がありちょっと手を入れづらいため、Node.jsで動かしたかった。別案としてNW.jsを使うというのもあったが、今回の手法でもWebブラウザ側のDOMを使わないといけないところは一応クリアしている。 結果と手法 結局成功したんだか失敗したんだかよくわからないところまでは来たと思う。 結果 Node.jsでもUnity WebGLは起動して描画コマンドも発行する でも描画がまっくらなので、まだ描画が正常かどうかは確認できていない JSdomでWebAssemblyを使ったサイトがそのまま動くのは地味にすごい気はする。 手法
オーバーレイ ファクトシート
Webアクセシビリティ オーバーレイとは何ですか？オーバーレイは、Webサイトのアクセシビリティを向上させることを目的とした技術の総称です。サードパーティのソースコード（多くはJavaScript）を読み込み、フロントエンドコードを改善します。 アクセシビリティの向上を謳うWebサイトのアドオン製品は、1990年代後半に登場したReadspeakerやBrowsealoudに遡ります。これらは、インストールされたWebサイトにテキストの読み上げ機能を追加するものでした。 その後、そのようなソフトウェアに機能を追加した類似製品が、市場に出回るようになりました。それらは、読みやすさを向上させるために、ユーザーのニーズに基づき文字サイズや色などをコントロールするものです。 最近のオーバーレイ製品のなかには、支援技術からのアクセスのしやすさを妨げる問題を修正することを目的としているものがあります。
ビックデータ時代の到来に伴い、データ活用やデータ利活用という言葉をよく耳にします。ビッグデータの活用というのは、簡単にいうと手元にある膨大なデータから様々な情報を引き出しから、それを未来の予測、ビジネスの意思決定、新産業の創出などに活用していくことができます。しかし、膨大なデータからどのように有益な情報と洞察をと得られますでしょうか？本記事ではデータを分析に役に立つデータ可視化ツール30選を紹介します。初心者向けのツールも含めていますから、データ分析に興味を持つ方はぜひご覧ください！ ノーコード型データ可視化ツール 1.チャートグラフ｜テクニカル分析ツール 1) Tableau Tableauは世界中で有名なデータ視覚化ツールとして、人々にデータを効果的な見える化にするサービスを提供しています。Tableauは非常に強力で柔軟な分析プラットフォームで、プログラミングなどの専門知識・スキル不
キム・ジョンミン氏がコードで作成した幾何学的なサンセリフ体のフォント「Leon Sans」は、HTML5のCanvas要素やWebGLを用いてカスタムアニメーションが楽しめるというものです。 Leon Sans https://leon-kim.com/ Leon Sansはコードで作成されたフォントで、各文字の描画ポイントの座標値を持っているため、フォントの線の太さを変更したり、アニメーションを作成したりすることもできるというフォントになっています。Leon Sansで表現可能なアニメーションは以下の通り。 線が引かれていく様子をアニメーションで表現する「Drawing animation」。 各文字の線の太さを変更する「Weight change」。 フォントの線を波のように揺らす「Wave」 「Drawing animation」＋「Weight change」のような「Metaba
初めてのWebGL 2 第2版
WebGL 2プログラミングの入門書。WebGL APIによりプラグインなしで3Dコンピューターグラフィックスをブラウザに表示できます。本書では、自動車の3Dモデルビューアーを例に、インタラクティブな3DCGを使用するウェブアプリケーションの開発方法について解説します。対象読者は初中級のウェブプログラマー。JavaScriptの基礎知識は必須ですが、3D数学の詳しい知識は不要です。ベクトル演算や行列演算にはライブラリを使用するので、具体的な計算処理を意識することなくWebGL 2プログラミングに集中できます。読者はWebGL 2で本当に必要な部分を本書一冊でマスターできます。 序文 訳者まえがき まえがき 1章 イントロダクション 1.1 システム要件 1.2 WebGLレンダリング 1.2.1 ソフトウェアベースレンダリングとハードウェアベースレンダリング 1.2.2 サーバーベースレン
この記事は次の日本語訳です（Reactの部分のみ抜粋） https://github.com/enaqx/awesome-react 公式 React Official Website React Documentation React GitHub コミュニティ Reactiflux Discord Channel React StackOverflow React Twitter オンラインでReactのコードを試せるサービス CodePen CodeSandbox JSFiddle チュートリアル Reactのチュートリアル React Official Tutorial - 公式 Using React in Visual Studio Code - ReactをVSCodeで使う Scrimba - Learn React for free interactively - Scr
この記事は、Tech KAYAC Advent Calendar 2020 の12日目の記事になります。 みなさん、こんにちは！技術部の入江です。普段はTonamelという大会運営サービスのフロントエンドエンジニアをやっています。TypeScript最高。 昨日は @mashiikeによる Amazon Athena + Google Colab で分析環境を作る話でした。便利そう。 さて、本題に入りますが、私は戦国時代が好きです。社内のSlackのアイコンも戦国武将の肖像画を拝借しております。 戦国時代の好きなところは、「パッションの強い個人が周りを巻き込み世界を変える。」そういうところにあると思います。 そんな戦国ファンな私が2020年一番熱いなと思ったのは、漫画キングダムです。 キングダム 58 (ヤングジャンプコミックスDIGITAL) 作者:原泰久発売日: 2020/07/17メ
アニメーション作成に長けた「Adobe Animate CC」。ここでは初心者でも無理なく進められるように、スクリプトを使わずに実現できるアニメーションについて解説します。必要なパーツをIllustratorで作り、それらをAnimateへと移し、きちんと動くようにしましょう。 Adobe Animate CCの特性を理解する 「ステージ」と「ライブラリ」について Animateを起動すると、定番サイズはすぐ新規ファイルとして指定可能です。「新規ファイルを素早く開始する」をクリックします。 ただ最初のうちは、左ペインの「新規作成」を選ぶほうがいいでしょう。新規作成をクリックすると、立ち上がった設定画面の下にいくつか「サンプルファイル」が表示されるので、自習には最適だからです。 ここでは、プリセットの「標準」を選択。なお、スクリプトを作成しなくても、プラットホームとして何らかのスクリプトを選
HTML5で描画を行う方法としてサポートされているcanvas要素やSVG形式のファイルを、JavaScriptで擬似的に3D化できるAPIが「Zdog」です。開発者のDavid DeSandroさんによって、GitHubでベータ版が無料で公開されています。 Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG https://zzz.dog/ GitHubでは以下のような例が提示されています。サムネイルをクリックすると、HTML・CSS・JavaScriptのコードと共に、実際にどんな感じで3D化されるのかを見ることができます。3D化されたモデルはドラッグしてぐりぐりと動かすことが可能。また、設定によってアニメーションとして表示することも可能になっています。 さまざまな多面体 幾何学的な壁紙 旅
みなさんは次世代の画像形式「WebP(ウェッピー)」をご存知ですか？ 聞いたことはあるものの、作り方や採用したときのメリット、事例にピンとこない方が多いのではないでしょうか。「せめて手軽にWebPを作れるツールが欲しい」と思い、デスクトップアプリケーション「WebP画像を作る君」(英語名は「WebP Converter」)を開発し公開しました。本記事では、このアプリケーションでの使い方から、ウェブページにWebP画像を配置する方法を解説します。 ▲ オリジナルアプリケーション「WebP画像を作る君」。無料で配布しています ▲「WebP画像を作る君」の動作ビデオ WebP(ウェッピー)とは WebP画像形式は米Googleが開発している静止画フォーマットで、採用することでWebサイトの表示速度短縮やトラフィック量の節約が期待できます。具体的には従来のPNG/GIF/JPEG画像形式に比べて次
今回はNode.js上で簡単にQRコードが生成できるnode-qrcodeを利用し、動的にQRコードを生成してみたいと思います。 github.com QRコード自体は非常に便利ですよね。2次元バーコードよりも情報量が増やせるため様々な用途に利用できます。 しばらく前から日本はQRコード決済が世を賑わせていますが、個人的には早く滅んでくれないかなと思っていますがそれはまた別の話しw なんでFeliCaから退化しとんねんｗ インストール HelloWorld 出力方式 BASE64 SVG 文字列 canvas オプション 高さと横幅 色 背景を透過色 余白 最大文字数 エラー訂正レベル 文字列の種類 UTF8を利用するには 続き 参考ページ インストール node-qrcodeはコマンドラインから利用できるコマンドも用意されていますが、今回はNode内からモジュールとして利用します。そのた
![[Node.js] QRコードを生成する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd2c3f758ebd7158a96169fd1d9cb302f5ea0137/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F820878482973262145%2F6801883189061409270%2F1701757984)
はじめにここ数か月で、AI技術の進化に伴い、一人でのゲーム制作がかつてないほど手軽になった。特にChatGPT4を利用することで、ゲーム制作に関する質問を適切に投げかけるだけで、ほとんどの情報が得られるようになった。 このことにより、一人でゲーム制作に必要なスキルや時間が大幅に減り、ゲーム制作の初期段階での困難な部分をAIに任せることが可能になった。これにより、より面白いゲームを作るための改善サイクルに集中でき、結果としてゲーム制作の能力が向上することができるだろう。今までの一人でのゲーム制作では、基礎の部分でおそらくほとんどの人が離脱し、本当に身になる部分までたどり着けなかったろうと思われる。 これからは、複数の専門性を極めなくても気軽に誰でもゲームを作れるようになる。 上記の記事で書いた、ゲーム作りの全体像を理解できる人を大幅に増やすことができるインフラが提供されるようになったのだ。今
Google Map APIの代替として、無料で使える地理院タイルを使ってみました。Pythonのstaticmapと併用すれば、緯度経度から地図画像に文字を入れられました。地理院地図だけでなく空中写真での利用も可能です。 Google Map APIではできるけど Google Mapのような地図アプリから任意の領域の画像を取得し、適当な地点に文字を入れるという処理を考えます。今までこういうのはパワポでやっていましたが、手動でやるとそこそこ時間がかかります。地図の画像取得や、緯度経度がわかっている地点（例：駅など）への文字入れを自動化できないかというのが今回のコンセプトです。 Webサイトへの埋め込みではなく、画像として地図を取得するスタイルをStatic Mapというそうです。Google MapでもMap Static APIというのがあります。冒頭の「A quick example
【TypeScript】花火 - Qiita
はじめに きっかけは前回記事【HTML&CSS】花火の通り、HTML5プロフェッショナル認定試験の勉強をしている中で、ふと、花火が作れそうだなと思ったことですが、色々探しているうちにすごいキレイな花火がTypeScriptで実装されているのを見つけたので、アレンジさせて頂くことにしました。 参考サイト HTML5のCanvasでのグロー表現を使って花火っぽい何かを打ち上げる アレンジした花火 こんな感じにしてみました！ 千輪花火を追加するのが難しかったですが、キレイに描画できたかなと思います。 ① 花火の色がランダムに変わるように変更 ② 花火が開いた後に千輪花火を追加 See the Pen Firework_ts2 by Nina (@ifnezsju-the-selector) on CodePen. メソッド・クラス コード内の主要なメソッドとクラスを説明します。 Firework
JSer.info #484 - Headless Chromeを扱うライブラリであるpuppeteer 3.0.0がリリースされました。 Release v3.0.0 · puppeteer/puppeteer Chromium 81.0.4044.0へアップデートされています。 また、v2.1.0でFirefoxをサポートしていますが、インストール時にPUPPETEER_PRODUCT=firefox npm installとすることでFirefox Nightlyのバイナリをダウンロードできるようになっています。 その他にはNode.js 8のサポート終了やコードベースをTypeScriptへマイグレーションしていくなどの変更が含まれています。 Chrome 83 Betaがリリースされました。 Chromium Blog: Chrome 83 Beta: Cross-site Sc
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
P5.js 日本語リファレンス - Qiita
2024/05/10 更新: buildGeometry()を作成しました。 2024/05/08 更新: beginGeometry()、endGeometry()を作成しました。 2024/05/04 更新: normal()を作成しました。 2024/05/02 更新: beginClip()、endClip()、clip()を作成しました。 2024/05/02 更新: 3年半ぶりに更新を再開しました｡現時点での最新版であるv1.9.3までに追加されたAPIを一覧に追記しました｡内容については今後順次記載していきます｡ この記事は公式の p5.js Reference を日本語化し手直ししたものです。 このページは「P5.js 日本語リファレンス」のメインページ ( 目次 ) です。 API別に各々のページへリンクしています。 [3D] [Color] [Shape] [Const
AnimateCC(Flash)で「Animated SVG Exporter」を使ってSVGアニメーションを作成した話 | Qrunch（クランチ）
2019/5/26 追記 ・AnimateCCの使用バージョンについて訂正しました。 ・キーフレームアニメーション以外でも作成できる場合があるので追記しました。 はじめに 知人のポートフォリオサイトにちょっとしたアニメーションを入れることになり、 今回はAnimateCCで作成することにしました。 AnimateCCはHTML5のcanvasで動作するアニメーションを作成してくれますが、 作成されるjsファイルがES6形式ではないため、 WebpackやVue.jsなどに組み込むのが思ったより大変なことになりました。。 もっと手軽に使いたい！！ と思い調べていくと、AnimateCCはSVGアニメーションが書き出せるとのこと。 今回はこれを使うことにしました。 やりたいこと 星画像をクリック→星が弾けるアニメーション→画面遷移 Vue CLIで作成したプロジェクトにSVGアニメーションを入
ブラウザで画像ファイルを選択した時にプレビュー表示する方法
10年くらい前のような気がしますが、その頃はブラウザで画像アップロードするときのプレビュー機能はWebサイト上でワリと普通に実装されていたと記憶しています。 どういうコーディングだったかはうろ覚えなのですが、たしかinputタグのonchangeで渡されたファイル名をそのままimgタグのsrcに投げてあげれば表示されたような。 しかしそれだとセキュリティに難ありということで、その後のアップデートで使えなくなってしまいました。社内でしか使わない業務系のWebシステムでは互換モードか何かを使ってその場凌ぎをしたような記憶もｗ その後は、できないのなら仕方ないということで、いったんテンポラリディレクトリへアップロードをした後にプレビューという名の実際にアップされた画像ファイルを表示し、[OK]なら本ファイルとしてサーバー内でコピー、キャンセルならテンポラリを削除、みたいなことを長らくやっていまし
この記事は Tech KAYAC Advent Calendar 2021 の21日目の記事です。 こんにちは！意匠部のおばらです。 今回は アドベントカレンダー14日目の記事 でご紹介した 「すき焼きの写真にすき焼きの3Dモデルなど任意のファイルをバイナリとして埋め込む方法」 の解説記事です。 【解説編】すき焼きの写真にすき焼きの3Dモデルを埋め込む方法 techblog.kayac.com 任意のファイルを ArrayBuffer として取得する fetch() を使う場合 See the Pen sukiyaki.lib.urlToArrayBuffer.jsm by Tohl SMALLFIELD (@tsmallfield) on CodePen. これだけ！便利な時代になりました。 XMLHttpRequest と overrideMimeType('text/plain; c
イベント発生時の処理を記述する イベントに対応する処却を記述する方法は二つあります。 一つはイベントハンドラを利用する方法、もう一つは、イベントリスナーを処理する方法です。 画面に指が触れたときのイベント dom.ontouchstart = function(event) { // タッチイベントの処理を記述 }; domの部分には、ボタンなどのDOM (Document Object Modeil)要素を指定します。 イベントリスナーを利用する場合 dom.addEventListener("touchstart", function(event) { // タッチイベントの処理を記述 }, false); 第l引数にイベント名を、第2引数にイベント発生時に実行する処理を記述します。 イベント名は、イベントからonを取ったものです。例えば、「ontouchstart」であれば、 「to
続編：GPT-4で、JSブロックくずしをステップバイステップで作ってみた - Qiita 話題のChatGPTを使って、一人用ピンポンゲームを作ったら30分でできた。すごいぞ。ちゃんと遊べる。 ぷよぷよを作ろうとしている人とかいたので、もっと簡単なものを作ってみた。 ソースコード 完成したゲーム Q1.Javascriptを使って、一人用のPONGのプログラムを書いて A. はい、PONGゲームのプログラムをJavaScriptで書いてみましょう！ 以下は、一人用のシンプルなPONGゲームのサンプルコードです。このコードは、HTML5のcanvas要素を使用してゲームを描画し、requestAnimationFrame()メソッドを使用してゲームループを制御します。また、簡単な衝突判定を実装しています。 // ゲームの初期化 var canvas = document.getElement
元記事：https://www.octoparse.jp/blog/top-30-data-visualization-tools データの視覚化は、情報やデータを見える化することによって、人々が効果的に洞察を得ることに役立ちます。データ視覚化ツールは、グラフやチャートなどを利用してデータをより分かりやすく読み上げます。多くのデータ視覚化ツールから最適なのはどれですか。本記事では2019年おすすめのデータ可視化ツール30選を紹介します。あなたのニーズに合わせて一番ふさわしいツールを選びましょう。 #ノーコード型ツール ##1.チャートとグラフ ###1) RAWGraphs RAWGraphsは、オープンソースのWebデータ視覚化ツールです。Microsoft ExcelおよびApple Numbersのようなスプレッドシートと、Adobe Illustrator とSketchのようなベ
モンスターストライクの５周年の際にキャンペーンサイトを制作しました。今回はその中の1コンテンツであるアーサー獣神化のブラウザゲームを技術的な視点からご紹介いたします。 【目次】 ・自己紹介 ・作成したブラウザゲーム ・ブラウザゲーム（またはSPA）のこれから ・高速化について ・今回使用した技術（ライブラリなど） ・最後に■自己紹介ミクシィでフロントエンドエンジニアをしている吉田守と申します。 ブラウザ上で動作するSPA（シングルページアプリケーション）や３Dプログラミングが得意（好き）です。 今年やった仕事では、ルシファー獣神化スペシャルサイトのメインビジュアル部分の演出制作など、WebGL(three.js)+GLSL+Live2Dで作りました。 プライベートでも個人開発でWebサービスなどを制作（サーバーサイドもやります）しており、現在iOSのARアプリを開発中でございます。 ■作成
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue・React・Angularのパフォーマンス比較検証 - ICS MEDIA
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA
HTML&CSSとピュアなJavaScriptだけでパズルゲームを作る方法
無料でブラウザからどんな情報が収集されているか確認できる「Cover Your Tracks」を使ってみた
【2023】データ分析・データ可視化ツールおすすめの30選！ | Octoparse
Canvas要素やWebGLでアニメーションが楽しめるコード製フォント「Leon Sans」
Awesome React - Reactのオススメ記事・ライブラリ・ツール まとめ - - Qiita
キングダムが好きすぎて意志を受け継げる矛を作った話 - KAYAC engineers' blog
Adobe Animate CCでアニメーションを作る | パソコン工房 NEXMAG
オシャレなフラットデザインを擬似的に3D化できるブラウザ向け3Dエンジン「Zdog」
WebP画像を作成できるアプリ「WebP画像を作る君」を公開 - ICS MEDIA
[Node.js] QRコードを生成する - ねこの足跡R
ChatGPTでの初めてのゲーム作り、ゲームの作り方の学び方｜かえるD
地理院地図から画像を取得し、任意の緯度経度に文字を入れる方法 -Shikoan's ML Blog
2020-04-20のJS: puppeteer 3.0.0、Chrome 83 Beta、Vue.js 3.0 Beta
大きな画像をJavaScriptでリサイズしてからAjax送信する方法
【解説編】すき焼きの写真にすき焼きの3Dモデルを埋め込む方法 - KAYAC engineers' blog
ときどきWEB | HTML5とJavaScriptでＰＣ・スマホのマルチタッチ対応してやんよ!!!
ChatGPTで、一人用ピンポンゲームが30分で出来た - Qiita
2021年データ分析・データ可視化ツールおすすめの30選！ - Qiita
モンスト5周年サイトで制作したブラウザゲームの高速化について｜吉田守