なんでもメモして個人的な知識を蓄える「Obsidian」のキャンバスデータ保存形式「JSON Canvas」がオープンソース化、中身はこんな感じ
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形式
JSON Canvas
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
Webブラウザ上で純粋なHTTPだけで単方向リアルタイム通信を可能にするHTTPのストリーミングアップロードが遂にやってくる - nwtgck / Ryo Ota
Web標準のHTTPクライアントfetch()でストリーミングしながらアップロードできるようになる。
ASCII.jp：フロントエンドエンジニアの本気を見てみる？さくらが挑戦した初めてのブラウザゲーム開発｜中の人が語るさくらインターネット
2018年6月29日、さくらインターネットは「さくらの勉強会 フロントエンドナイト」を開催した。「ブラウザゲーム開発の初心者」だったというさくらのクラウドのメンバーがブラウザゲーム「さくらのINFRA WARS」の開発にチャレンジした試行錯誤をこってり語った。 エイプリルフールネタでブラウザゲームをイチから作ってみる 「さくらのINFRA WARS」は2018年のエイプリルフールネタとして、さくらのクラウドのチームが開発したブラウザゲーム。「インフラエンジニア育成型サーバー防衛シミュレーション」を謳うさくらのINFRA WARSは、プレイヤーがインフラエンジニアになり、襲いかかるサイバー攻撃から身を挺してサーバーを守り、お客様に安定したサービスを提供するという内容で、いかにもさくららしいゲーム。年齢層の高いユーザーが喜びそうなドットの荒いレトロゲームらしい見た目もゲームの大きな売りと言える
Create a Drawing App with HTML5 Canvas and JavaScript
This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript. The aim of this article is to explore the process of creating a simple app along the way learn: How to draw dynamically on HTML5 canvas The future possiblities of HTML5 canvas The current browser compatibility of HTML5 canvas Each step includes a worki
HTML5 CanvasとWebGLの高解像度対応はどこまで行うべきか - ICS MEDIA
2016年2月3日（水）、ICTCOにて100人の定員規模で開催されたセミナー「DIST.10 デザインとJavaScript」。その中で「HTML5 Canvasコンテンツの高解像度対応はどこまで行うべきか」というタイトルで登壇しました。今回はその発表資料を記事として公開します。 FWAでピックアップされているサイトでは70%がcanvas要素を使っている モーショングラフィックや3D表現等のリッチな表現をWebコンテンツで行う場合、canvas要素は不可欠です。FWAのSITE OF THE DAY(※)で調査したところ、2015年11月から3ヶ月間の91件中61件（約70%）のサイトでcanvas要素（Context2D、WebGL）が使われていました。 ※ FWAは世界的権威のWebデザインアワードで、優れたデザインのWebサイトを毎日1つずつ「SITE OF THE DAY」とし
#スーパーイカメーカー を支える技術 - console.lealog();
どうも、中のイカです。 昨日の15時頃に晴れてリリースしたコレですが、正直想定してなかったレベルで反響があって驚いてます。 leader22.github.io さてさて、というわけで恒例の裏側紹介記事です。 近況 今のところの瞬間最大風速です。 とりあえずこんなん pic.twitter.com/65cIbl2N1e— りぃ (@leader22) 2016年1月21日 初めて見たわこんな数字ｗ ホッテントリ入りもしたしredditでもスレ立ったり。 トレンド入りしてるΣ(ﾟДﾟ；≡；ﾟдﾟ) pic.twitter.com/yDBVSf2ciE— そめ・そるめ (@jenga_ink) 2016年1月21日 まさかのポストすしざんまい！すごいなーイカ・・。 ほんと、サーバー落ちないかどうかだけが心配でした。 そもそもどの程度で落ちるかの想定もできないくらいの素人ですけど！ フロントエン
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
JSでInstagramの画像フィルターを作るまで - Qiita
INDEX はじめに ~ InstagramのフィルタをJSで作ってみる Canvasで画像ピクセルを抽出 セピア化やミラー反転などで練習してみる若きあの頃 フィルター効果を実現する方法がわからない トーンカーブをいじればいけんじゃん？ ラグランジュ補間が使えそう でもこれってめっちゃ時間かかりそう？→ Web Worker APIでかいけつ 最後に はじめに ~ InstagramのフィルタをJSで作ってみる 先日、Canvasを練習したいと思って画像変換でいろいろ遊んでたところ、「Instagram」の画像フィルターを実現してみたら面白そうかねと思って作ってみようと思いました。が、それまでに結構紆余曲折があったので、記録も兼ねて記事にまとめてみることにします。 個人的には、Instagramの本当のフィルターそっくりにはまだ動いていないものもあり、実践的でないものも多いかもしれませんが
CreateJSとNode.jsを使ってサーバーサイドでCanvasを扱おう–ICS LAB
HTML5 Canvasのフレームワーク「CreateJS」(基本的な使い方は入門サイトをご覧ください）について、2015年2月10日に開催されたCreateJS勉強会 (第5回) でライトニングトーク「CreateJSとNode.jsを使ってサーバーでCanvas要素を使おう」を発表しました。今回はそのスライドを元に、サーバーサイドでCreateJSを使うメリットを紹介します。 デモ 今回紹介するnode-easelを使ったデモです。スマホ画面にTwitterのアイコンが、PC画面には白い矩形が表示されています。スマホで選んだTwitterのユーザーのアイコンがPC側でアニメーションします。画像加工はサーバーサイドで動くCreateJSを使って行われています。 Section1. Node.jsとモジュールについて Node.jsはブラウザではなくサーバーサイドで動くJavaScript
60fps on the mobile web — Flipboard Engineering
Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowing us to rethink content layout principles from the web for a more elegant user experience on a variety of touchscreen form factors. Now we’re coming full circle and bringing Flipboard to the web. Much of what we do at Flipboard has value independent of what device it’s consumed on: curating the bes
createjs,canvasでハマるところ2014 - lxyuma BLOG
経緯 先日、初めてcreatejs使ったスマホ向けwebアプリ作ってリリースした。 まあ、予想通り、createjs、canvasにいろいろハマった。 はまったところは、gistにメモしておいたので、ここにも整理して乗っけておく。 なお、類似blog記事多数あり、俺もほとんど8割位それらの記事で助かりました。 ここで、参考にlink貼った記事書かれた方々に感謝します。 そして、次にcreatejs使う人のために、 既出の物、あまり他の記事に見ない物も、まとめて書いておきます。 参考までに。 概要 以下の現象の原因と対応について書いていきます タッチイベントがずれる staging環境で画像click時にエラーに retinaでcanvasがぼやける (android)canvasが2つ出てきた (android)でcanvasに1clickすると2clickした事になってる (androi
Happy Elements Labs: websocket + HTML5(canvas)でのゲーム開発(ボンバーマン風)
はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ
uupaa-excanvas.js - README
uupaa-excanvas.js is JavaScript library where HTML5::Canvas is offered. uupaa-excanvas.js は HTML5::Canvas 互換機能を提供する JavaScript ライブラリです。 Features - 特徴 Hybrid: - Rendering is done with Silverlight and VML in IE, and other browsers do rendering with canvas. - IE なら Silverlight と VML でレンダリングを行い、その他のブラウザは canvas でレンダリングします。 Only one: - Only library where the vector graphic can be treated in IE8
微分ってなあに？（表紙）
高校で微分を勉強したものの、「なんだかわからないけどただ計算方法だけ覚えた」という困ったレベルに留まっている人は（残念ながら）多いようです。 まずは「微分って何なのか」を図形で理解して欲しいと思います。そこで動く図形で、微分の雰囲気を知って欲しいと思います。 そのための教材の一つとして、授業などで使うべく作成しました。 その１から順に読んで、動かしていってください。 このプログラムを動かすのに必要なファイル全ては、LHAで圧縮したファイルにまとめてあります。 androidの方は、このapkファイルをダウンロードしてくれてもいいです。 プログラムについて御質問、御要望、バグ報告などございましたら、前野［いろもの物理学者］昌弘へメールくださるか、または、twitterにてirobutsuまでメンションしてください。
HTML5 Canvasを始めよう：EaselJSとTweenJSでテキストエフェクト | ClockMaker Blog
HTML5のCanvasをFlashライクに使えるようにするJavaScriptライブラリ「EaselJS」と「TweenJS」を使ってデモを作ってみました。 demo 今回のブログ記事では「EaselJS」と「TweenJS」の使い方をデモの作り方を通して紹介します。 ライブラリの紹介 「EaselJS」と「TweenJS」はFlashのエンジニアとして著名なGrant Skinner氏が開発しているJavaScriptライブラリです。「EaselJS」がHTML5 CanvasをFlashライクに使うためのライブラリで、「TweenJS」が汎用的なトゥイーンライブラリです。 ▲EaselJS HTML5のCanvas要素はHTML上に自由に描画することのできる新しい要素で、工夫することでFlashのように豊かな表現を作ることができます。ただCanvasではJavaScriptでちょっと
HTML5のCanvasに欠けているもの：フレームワーク － ＠IT
OSSプロジェクトのホスティングサイト「GitHub.com」では、Flashで実装されていた一部のUIをCanvasに移行したという HTML5のCanvasとFlashの最大の違いは、アニメーションなどを行うために利用できる抽象レベルだ――。こう指摘するのは、Gitベースのコードホスティングサービス「GitHub.com」の共同創業者、Tom Preston-Werner氏だ（ちなみにWerner氏はマイクロソフトに買収された検索ベンチャー「Powerset」の元社員で、買収直後に“サラリー以外に3年間で30万ドル（約2770万円）”というおいしいオファーを断ってまでGitHub.comのフルタイム開発の道を選んだことでも知られている）。 Flashで書かれた一部のUIを全面的にCanvasで書き直した経験からWerner氏は、Canvasにはまだ抽象度の高いフレーワムワークが欠けてい
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Paper.js
GitHub - Flipboard/react-canvas: High performance <canvas> rendering for React components
