ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
こちらの記事は、Indrek Lasn 氏により2019年 10月に公開された『 Here Are 6 Front-End Challenges to Code 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 著者Twitter https://twitter.com/lasnindrek フロントエンドの開発はストレスが多く難しい作業ですが、練習すれば技術をマスターすることができます。 自ら進んで鍛錬と努力をすれば、フロントエンド開発の場面で問題を解決することのエキスパートとなることができるでしょう。 優れたフロントエンド開発者になるために効果的な方法の1つは、単純にできるだけ多くの課題に取り組み、解決することです。 フロントエンド開発の達人になるために、今日から解き始めることができる6つの課題を紹介します。 ではさっそく、実装すべき6つの課題はこちら。 1. ク
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71(制限付き) mac
以下のツイートに反響があったので、どういう感じで作っていったかと感想をメモ 要約 この記事ではAIのChatGPT(GPT-4)を使用して、JavaScriptでぷよぷよを作成する手法について紹介しています。最初の依頼は「JavaScriptで動くぷよぷよのコードを書いて」とされており、最初に生成されたコードは不完全であったとのことです。 その後、AI側からは、1.ぷよの衝突検出、2.プレイヤーの入力によるぷよの操作、3.ぷよの回転の順に実装するように指示があり、徐々に改善を施していきました。 短時間で開発を終えることができるため、エンジニアとしてのスキルや要求、不具合の言語化能力があれば有効だとされています。現時点では優秀なプログラミングのアシスタントとして機能しています。 エンジニアが直面するストレスや不安を軽減できる可能性があります。一例として、短期間で開発を終えることができるため、
巷で話題になっているこの話題、画像をスクレイピングやダウンロードされたくないということで騒がれています。その話に関しては色々な意見があると思ってますがここでは置いておくとして・・・ 技術的にやるとしたら実際どれくらい対策できるの?ということが気になったので、自分の知識で出来る限り対策したものを作ってみることにしました。 最初に 賢い方はわかると思いますが、タイトルは釣りです。 絶対に画像をダウンロード&スクレイピングさせないページは存在しません。ソフトウェアにおいて絶対と言う言葉はまず存在しないのです。ブラウザで表示している以上、仕組みさえわかれば技術的には可能です。 そのため、 「元画像のダウンロードとスクレイピングを非常に困難にしたWebページを本気で作ってみた」 が実際のタイトルかなとなります。 とはいえ、この仕組みであれば大多数の人は機械的にスクレイピングすることを諦めるレベルの作
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか? 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか? この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas(WebGL)の3つについて、それぞれのできること・できないこと(得意・不得意)を作例とともに紹介します。 クイズ:どうやって実現する? webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas(WebGL)のいずれかを中心に実装されています
開発・運用の現場から、IIJのエンジニアが技術的な情報や取り組みについて執筆する公式ブログを運営しています。 こんにちは。IIJ Engineers Blog編集部です。 IIJの社内掲示板では、エンジニアのちょっとした技術ネタが好評となって多くのコメントが付いたり、お役立ち情報が掲載されています。 今回は、すでにお気づきの方もいるかもしれませんが、いつの間にか HTTPS 証明書の Common Name の検証が禁止 になっていた件について紹介します。 HTTPS 証明書の検証手続きは、RFC2818 で「Subject Alternative Name があればそれで、なければ Common Name を見よ」となっていました。 If a subjectAltName extension of type dNSName is present, that MUST be used as
Markdown形式でメモを作成できるサービスのObsidianが使用しているObsidian Canvasファイル形式を「JSON Canvas」ファイル形式としてオープンソース化することを発表しました。 JSON Canvas — An open file format for infinite canvas data. https://jsoncanvas.org/ Announcing JSON Canvas: an open file format for infinite canvas data - Obsidian https://obsidian.md/blog/json-canvas/ 仕様についてはjsoncanvas.orgに記載されています。サイトにアクセスするとこんな感じ。右下の「Toggle output」をクリックしてみます。 右側にJSON Canvas形式
先日のGoogle I/O 2021基調講演で、Google DocsやSpreadsheetを含むスイートであり、GSuiteからブランド名が変わったGoogle Workspaceにかなり大掛かりなアップデートをこれから年末にかけてロールアウトされることが発表されました。 Smart Canvasと名付けられたこの新機能はなにか単一の機能というよりは、Google Docs, Spreadsheets, Slides, Meet など、すべてのサービスを結びつける体験の変化という側面が強いので説明が難しいのですが、一言でいうと「まるでnotionのように利用できるようになる」と表現すれば伝わる人には伝わると思います。 まずは短い動画でその雰囲気を確かめてください。 おそらくわかったような、わからなかったような気分になると思いますが、この動画には過去10年ほどGoogle Docsが避け
An open file format for infinite canvas data. Infinite canvas tools are a way to view and organize information spatially, like a digital whiteboard. Infinite canvases encourage freedom and exploration, and have become a popular interface pattern across many apps. The JSON Canvas format was created to provide longevity, readability, interoperability, and extensibility to data created with infinite
年末年始の自由研究として、CSSだけでLive2Dを動かすことができないかを試していました。紆余曲折あったものの、なんとか動きそうということが分かったのでひとまず情報共有。 Live2Dとは Live2Dは、2Dのイラストをモーフィング技術を使ってアニメーションさせるソフトウェアです。あのアプリゲームのキャラクターや、あのVTuberを動かすために使われています。 かわいい!!! モデルデータを表示させる Source: CSSLive2D/src/01_parse at master · spring-raining/CSSLive2D · GitHub まず、Live2D公式サイトにあるサンプルデータのキャラクターを画面に表示させることを目標としてみます。各キャラクターはそれぞれモデルデータ (Haru.moc3)、テクスチャ画像 (*.png)、表情データ (*.exp3.json)
アニメーションgifの再生・停止をホバー・クリック・タップ、そしてボタン・アイコンでコントロールできる軽量JavaScriptライブラリを紹介します。 canvasに書き込むという発想がすごいですね。 通常アニメーションgifは自動再生されますが、このスクリプトを使用すると、ユーザーの操作をトリガーに再生・停止させることができます。 Freezeframe.js -GitHub Freezeframe.jsの特徴 Freezeframe.jsのデモ Freezeframe.jsの使い方 Freezeframe.jsの特徴 Freezeframe.jsではアニメーションgifの最初のフレームだけをcanvasに書き込み、gifの静止画バージョンを自動作成します。あとは、この静止画バージョンとアニメーションgifをトリガーで切り替え、アニメーションgifを再生・停止させます。 下記は、ホバーで
View Viewに相当するものは? Androidではボタン、ツールバー、inputsなどのすべてがViewです。 Flutterでは、Viewとおおよそ同じものがウィジェットです。 ウィジェットはAndroidのViewに正確に対応しているわけではありませんが、Flutterがどのように機能するかを学んでいる間は、"UIを宣言および構築する方法"と考えることができます。 ただし、これらにはいくつか違いがあります。はじめに寿命が異なります。 ウィジェットは不変であり、変更が必要になるまで存続し続けます。 ウィジェットやそのウィジェットのStateが変更されるたびに、Flutterフレームワークは、新しいウィジェットツリーを作成します。 それに対して、AndroidViewは、一度描画されたら、invalidate()が呼ばれるまで再描画されません。 Flutterのウィジェットは、その不
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Hands-on WebAssembly: Try the basics — Martian Chronicles, Evil Martians’ team blog 原文公開日: 2020/08/25 著者: Polina Gurtovaya、Andy Barnov サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語タイトルは内容に即したものにしました。画像はすべて元記事からの引用です。 Web開発の一般的な知識のみを前提とするシンプルなハンズオンチュートリアルで、WebAssembly(Wasm)を始めてみましょう。実行可能なコード例を用いてWasmを味わうのに必要なものは「コー
amagiです。先日React用コンポーネントライブラリのREACT-VFXをリリースしました。 REACT-VFXを使うと、画像や動画、テキストにWebGLでエフェクトをかけることが出来ます。 ⚡𝙍𝙀𝘼𝘾𝙏-𝙑𝙁𝙓 released!⚡ I created React components to add WebGL effects to images, videos and plain texts in your app. It also supports animated GIFs...😎 Visit website for details:https://t.co/mlnmExpUVZ#REACTVFX #WebGL #React #Threejs #GLSL pic.twitter.com/uDUQ8MKNcK— 𝘼𝙈𝘼𝙂𝙄 (@amagitakayos
Why? Can interact with mouse / touch Customize colors & style to match your brand No pixelation – Canvas runs at full resolution Smaller filesize than background videos and large background images – three.js is ~120kb minified and gzipped Runs fast (60fps) on most laptops/desktops What's the catch? Some WebGL effects are slow on older computers. Don't use more than one or two in a single page! Not
近年、ウェブ技術の発展により、画像の一部だけを表示する「マスク表現」がよく見られるようになりました。一言でマスクと言っても、アニメーションやインタラクションとの組み合わせによりさまざまな表現が可能です。 また、どの技術を用いるかという選択も重要になります。マスク表現はCSS, SVG, Canvas APIといった技術で実現できますが、それぞれが異なる得意分野をもちます。 本記事の前半では、マスク表現を実現する技術について解説を行います。後半では実践的なマスク表現をいくつか紹介しながら、それぞれの実装方法を紹介します。いままで技術的に難しいと諦めていた表現が、マスクによって実現するヒントになれば幸いです。 ▼マスク表現の例(背景画像の一部を表示している) - Erika Moreira Portfolio マスクとは 本記事で紹介するマスク表現とは、画像の一部を切り抜く手法です。マスキング
フロントエンドエンジニアからみる、この界隈で今どんなIssueが話題になってるのかと、この先どういう動きがありそうかについて。 そこまで自分に先見の明があるとも思ってないけど、アウトプットしておかないと忘れてしまいそうなので・・。 ちなみにここでいうフロントエンドは、いわゆるブラウザとかJavaScriptのAPIのことです。 プロトコル的な側面はそこまで詳しくないのであまり触れません。 WebRTC 1.0 GitHub - w3c/webrtc-pc: WebRTC 1.0 API まず、RTCといえばズバリのWebRTCから。 昨年末にWDからCRへ格上げということで、もうAPIが激変したりはしない・・はず。 実際のところ、ここ半年くらい大きな対応した覚えがないです。(WebRTCそのものを実装してる人は、地味にいろいろ対応してると思うけど) ガワのAPIという観点でいうと、最近はも
Evercookieは、ブラウザに究極的に永続的なCookieを生成するJavaScript APIです。 その目的は、標準的なCookie、Flash Cookieなどを削除した後でもクライアントを識別し続けることです。 これは、可能なかぎり多くのストレージにCookieデータを保存することで達成します。 いずれかのストレージからCookieが削除されたとしても、ひとつでも残っている限り、Evercookieは残ったデータからCookieデータを復旧します。 Flash LSO、SilverlightもしくはJavaが有効な場合、Evercookieはブラウザを超えて同じクライアント上の別のブラウザにCookieを伝播することすら可能です。 本リポジトリは、Samy Kamkarおよび多くのコントリビュータによって作られています。 Browser Storage Mechanisms E
フォントでいろいろなデザイン、表現をしたい人にぴったりなLeon Sansを紹介します。フォントを書くアニメーションだけでなく、さまざまなアニメーション、エフェクト、シェイプを自由に作成でき、インスピレーションが刺激されると思います。 Leon Sansは商用でも無料で利用できます。通常のフォントファイルとは異なり、Webページやスマホアプリに特化されたCanvasベースのフォントです。 Leon Sans Leon Sans -GitHub Leon Sansとは Leon Sansのデモ Leon Sansの使い方 Leon Sansとは Leon Sansは美しいサンセリフ体で、フォントの太さを動的に変更し、HTML5のCanvas要素でアニメーション、エフェクト、シェイプを自由に作成できます。 生まれたばかりの赤ちゃんレオン君を祝うためにフォントをリリースしたそうです。 サイトでは
ジェネラティブアートという言葉をご存知でしょうか? アルゴリズムによって作られる芸術作品を指す名称です。Pinterestで「generative art」と検索すると静止画、動画ともにたくさんの作品を見ることができます。 無機質さを感じさせるものもあれば、まるで生きているように感じる作品もあります。創作者たちはどのようなところから着想を得ているのでしょうか? 彼らの中には数学的な幾何学模様や物理現象、果ては生物が織りなす複雑なパターンをコンピューターで再現することにより作品を作る者もいます。 本記事では特に「生物」に焦点を当てます。生物の複雑な営みを紐解いた背景や、それをアルゴリズムに落とし込むことで可能になった表現を紹介します。 本記事を読むことで日常に潜むあらゆる現象が芸術の種に見える喜びを感じていただければ幸いです。 サンプルはHTML CanvasとJavaScriptで作成して
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 10 月に開催されたNext.js Conf 2022はご覧になられましたでしょうか。 Next.js Conf は Next.js の開発・メンテナンスを行っている Vercel 社が主催する、Next.js とその周辺技術に関するカンファレンスです。 コミューンでもメインプロダクト commmune の Web フロントフレームワークとして Next.js を採用しており、私個人としてもとても興味深くオンラインから視聴をしていました。 特に話題になったのは、React Server Components をサポートしたルーティング・レイアウトシステム"app directory"などの新機能を新たに追加したNext.js 13と、"Webpack の後継"を謳う Rust
こんにちは、VRoid部所属のエンジニアのyueです。 VRoid Hubでページ遷移時にcanvasの状態を維持する改善をリリースしました。本記事ではこの取り込みについて解説していきます。 前提 VRoid Hubではモデル詳細画面と投稿者のみに表示するモデル編集画面が存在しています。この二つのページは別々のレイアウトを使っていたため、モデル表示用のcanvasを操作するインスタンスがお互い共通せず、ページ遷移するたびにモデルを再度読み込むことが必要でした。 今回はDOM APIを利用してコード変更を最小限に押えつつ、再度読みを無くすような改善を行いました。 問題の再現 通常Reactの再レンダリングを防ぐには様々な手段があります。例えば React.memo 、React コンポーネントの key 、classコンポーネントのshouldComponentUpdate などが存在します
ダミー画像を作成するのは面倒ですよね。ローカル環境でもオンライン環境でもダミー画像を簡単に生成できる軽量スクリプトを紹介します。 画像を用意する必要はありません。 簡単なコードで、SVGのダミー画像を利用できます。サイズ・カラーは自由にカスタマイズでき、文字入力やダミー画像用のクロス線にも対応しています。 さらに、レスポンシブ用の流体ダミー画像も生成できる優れものです! holder.js holder.js -GitHub holder.jsの特徴 holder.jsのデモ holder.jsの使い方 holder.jsの特徴 holder.jsはダミー画像をクライアントサイドで生成するスクリプトです。ローカル環境でもオンライン環境でも利用できます。サイズ・カラー・フォントのカスタマイズにも対応しており、ダミー画像はSVGもしくはCanvasで生成されます。 MITライセンスで、個人でも
requestAnimationFrame()というとCanvas APIなどを使ったクリエイティブコーディングでよく使われる手法ですが、クリエイティブコーディングに限ったものではなく、一般的なウェブサイトのアニメーション表現にも役立ちます。 この記事では「トップに戻るアニメーション」を例に、requesetAnimationFrame()の基本的な使い方から、実際のWebサイトで使える実装までチュートリアル形式で解説しています。 この記事で学べること requestAnimationFrame()でアニメーションするやり方 ディスプレイのリフレッシュレートに依存しない実装方法 イージング関数を使ったアニメーション さまざまな作例のサンプルファイルも用意しています。ぜひご覧ください。 サンプルを別ウインドウで再生する setInterval()との違い requestAnimationFr
面白そうなJavaScriptがリリースされました! SVGやCanvasで実装した平らな要素をブラウザ上に3Dモデルでレンダリングすることができる超軽量JavaScriptライブラリを紹介します。レンダリングされた形状は3D空間に存在するかのようにクリックやドラッグなどで操作ができます。 Zdog Zdog -GitHub Zdogの特徴 Zdogのデモ Zdogの使い方 Zdogの特徴 Zdogは<canvas>とSVG用の3D JavaScriptエンジンです。 Zdogを使用すると、3DモデルをWeb上でデザインしてレンダリングすることができます。 軽量ライブラリ Zdogは、28KbのJavaScriptです。 滑らかなレンダリング 丸みをおびた美しい形でレンダリングされます、ジャギーはありません。 簡単 モデリングは単純明快な宣言型APIで行われます。 Zdogのデモ Zdog
Visualize your ideas. Infinite space to research, brainstorm, diagram, and lay out your ideas. Canvas is a core plugin included for free with Obsidian. A playground for thought Canvas allows you to organize notes visually — an infinite space to research, brainstorm, diagram and lay out your ideas. Embed your notes alongside images, PDFs, videos, audio, and even fully interactive web pages. A new w
はじめに 2020年8月に開催されたUnity1week(お題:ふえる)で、私はDSのグラフィック(主にポケ〇ン)を再現したアクションゲーム【がんばれ!ソラコくん】を制作しました。本記事では、再現までの過程(?)を備忘録的な意味も少し込めてまとめています。 こんな感じのゲームです がんばれ!ソラコくん | フリーゲーム投稿サイト #unityroom https://t.co/nAMC54lTYd #unity1week #がんばれソラコくん Unityを使って、一週間でDSのポケ〇ンのグラフィックを再現したゲームを作ってみました!!!!!!!!!!!!!!! pic.twitter.com/kiCbeueY8I — フィズ🐬(Yoshi3110) (@FizDv) August 16, 2020 たのしい!!!!!! 目次 1.素材の準備 ┣ 1-1 主人公 ┣ 1-2 マップチップ、
こんにちは、フロントエンドエンジニアのぜんちゃんです。 最近はアニメーション表現を増やすために、canvasの勉強を始めました。そこで、今回はcanvasやJavaScriptの基本技術を使って、円がランダムに動くパーティクルアニメーションを実装したいと思います。 今回作るアニメーションはこちらです。 円を作成・描画する canvas要素を作成し、そのcanvas内に円を作っていきます。 まずは一つだけ作りたいと思います。 <canvas id="canvas"></canvas> // キャンバス要素を取得 const canvas = document.getElementById('canvas'); // キャンパスに描画するコンテキストを取得 const ctx = canvas.getContext('2d'); // キャンバスサイズをwindowサイズに canvas.wi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く