サイトのOGP画像を自動生成する
最近、個人の技術ブログをリニューアルしました（パンダのプログラミングブログ）。 リニューアルの際に、念願だった OG 画像の自動生成を実装してみたところ、意外と簡単にできたのでその方法を紹介します。 OGP画像とは何か OGP 画像の OGPとは Open Graph Protocol の略語で、ある URL のページをリッチなコンテンツで紹介できるというものです。 サイトのタイトルやページのコンテンツをイメージさせる画像などを meta タグを使って HTML に埋め込みページの内容を表現できます。 Twitter や Slack、Line で URL を貼り付けると URL とは別に表示される物がこれにあたります。サイトのページが増えるとページ一つ一つに OGP 画像を用意することは手間がかかります。そこでこの記事では、OGP 画像を自動生成する方法を紹介します。 OGP 画像の作成方
Vanta.js - 3D & WebGL Background Animations For Your Website
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
NVIDIA Canvas: AI のパワーを活用する
AI により、筆で簡単に描いた線や形がリアリティのある風景画に変わります。背景をすばやく作成したり、コンセプトの探究を加速したりすることによりアイディアの視覚化にさらに多くの時間を使えるようになります。
Cookieを永続化して、どこまでも個人を追跡するEvercookie - Qiita
Evercookieは、ブラウザに究極的に永続的なCookieを生成するJavaScript APIです。 その目的は、標準的なCookie、Flash Cookieなどを削除した後でもクライアントを識別し続けることです。 これは、可能なかぎり多くのストレージにCookieデータを保存することで達成します。 いずれかのストレージからCookieが削除されたとしても、ひとつでも残っている限り、Evercookieは残ったデータからCookieデータを復旧します。 Flash LSO、SilverlightもしくはJavaが有効な場合、Evercookieはブラウザを超えて同じクライアント上の別のブラウザにCookieを伝播することすら可能です。 本リポジトリは、Samy Kamkarおよび多くのコントリビュータによって作られています。 Browser Storage Mechanisms E
How to Create Flowcharts in Microsoft Word (The Easy Way)
Flowcharts are easy with the right technique. Learn how to make a flowchart in Microsoft Word! When you use Microsoft Word every day, it makes sense to know its powers. When you don't have a dedicated diagramming tool, Word can be one of the easiest ways to make a flowchart. This article will go through the different elements needed to turn Microsoft Word into a flowchart creator. How to Make a Fl
Google Workspaceがnotionを意識した大規模なアップデートを開始
先日のGoogle I/O 2021基調講演で、Google DocsやSpreadsheetを含むスイートであり、GSuiteからブランド名が変わったGoogle Workspaceにかなり大掛かりなアップデートをこれから年末にかけてロールアウトされることが発表されました。 Smart Canvasと名付けられたこの新機能はなにか単一の機能というよりは、Google Docs, Spreadsheets, Slides, Meet など、すべてのサービスを結びつける体験の変化という側面が強いので説明が難しいのですが、一言でいうと「まるでnotionのように利用できるようになる」と表現すれば伝わる人には伝わると思います。 まずは短い動画でその雰囲気を確かめてください。 おそらくわかったような、わからなかったような気分になると思いますが、この動画には過去10年ほどGoogle Docsが避け
Google Docs will now use canvas based rendering: this may impact some Chrome extensions
Google Docs will now use canvas based rendering: this may impact some Chrome extensions [May 26, 2021]: We’ve updated the “Additional details” section of this post with more information on Google Docs accessibility features and support. Please see below for more information. We’re updating the way Google Docs renders documents. Over the course of the next several months, we’ll be migrating the und
JavaScriptで任意のHTML要素をPicture-in-Pictureする
みなさんはPicture-in-Picture(PiP)という機能を使ったことがありますか。PiPは動画コンテンツなどを浮遊する小窓に表示する機能です。小窓はウィンドウの外側を自由に移動できます。 デスクトップが賑やかになりがちなPCでもPiPは大活躍なのですが、特にスマートフォンにおいては数少ない「ウィンドウ」機能になります。Androidはもちろん、iOS14も対応したことで話題になりました。 これによってスマホ一台あれば、ソシャゲの公式生放送を見ながらソシャゲのイベントを周回する地獄のような行為が可能になりました。 利用者という視点から見ると非常に便利なのですが、開発者から見ると動画しか表示できないのはなかなか使い所が難しくなります。そこで、この機能を使って好きな情報を表示できないか実験してみました。 PiP機能の対応環境 Chrome 70 Firefox 71（制限付き） mac
生 WebGL と TypeScript で Vercel のロゴを作る
はじめに 完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソースコードにまだ var が使われているものも多く、また独自関数で処理をまとめていることで、個人的には全体の流れが少しわかりにくくなっている気がします。さらに TypeScript を使っている日本語記事は見当たりませんでしたので、それらを補う形でまとめてみたいと思います。 なお、本記事では全体的な流れに焦点を当てているので、詳細な解説は下記サイトなどをご参考ください。 WebGLの基本 (日本語) wgld.org | WebGL (日
NintendoDS風のグラフィックをUnityで作る - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 2020年8月に開催されたUnity1week(お題:ふえる)で、私はDSのグラフィック（主にポケ〇ン）を再現したアクションゲーム【がんばれ！ソラコくん】を制作しました。本記事では、再現までの過程（？）を備忘録的な意味も少し込めてまとめています。 こんな感じのゲームです がんばれ！ソラコくん | フリーゲーム投稿サイト #unityroom https://t.co/nAMC54lTYd #unity1week #がんばれソラコくん Unityを使って、一週間でDSのポケ〇ンのグラフィックを再現したゲームを作ってみました！！！
Fetch APIのStream機能を使ってデータを読み込みながら地図を描画する
地理空間データはどうしてもデータサイズが大きくなりがちです。 通常のデータ読み込みでは、読み込みが終わるまで地図の描画を始めることができないのですが、Fetch APIのReadableStreamを使うことで、「一部データを読み込んでは地図の一部分を描画する」という分割したレンダリングを実装することができます。 サンプルコード 約50MBのポリゴンデータを読み込みながら逐次描画しています。 DEMO //地理データをstreamを使って読み込む fetch("city.txt").then((response) => { const reader = response.body.getReader(); const stream = new ReadableStream({ start(controller) { function push() { reader.read().then(
君は使い分けられるか？CSS/SVG/Canvasのビジュアル表現でできること・できないこと - ICS MEDIA
ブラウザーで新たにインタラクションやアニメーションを作る時、皆さんはどのようにして使う技術を選んでいますか？ 使い慣れたライブラリに機能がないかドキュメントを調べてみたり、流行りのキーワードであればGoogle等で検索してみることも多いでしょう。一方、独自のビジュアル表現やアニメーションの場合、そもそも検索するキーワードがわからないことも多いのではないでしょうか？ この記事では、webのビジュアル表現・アニメーションを実現するベースの技術であるCSS・SVG・Canvas（WebGL）の3つについて、それぞれのできること・できないこと（得意・不得意）を作例とともに紹介します。 クイズ：どうやって実現する？ webでできるさまざまな表現 下の図はこの記事で紹介する9つのサンプルを並べてみたものです。すべてのサンプルはCSS・SVG・Canvas（WebGL）のいずれかを中心に実装されています
背景を透過する Web カメラをデスクトップ最前面に出す mac アプリを作った | Basicinc Enjoy Hacking!
オンラインミーティングや勉強会が盛んになってきた昨今、自分が映っているカメラ映像の背景を透過させて、他のアプリケーションと良い感じに一緒に配信したいな〜と思ったので mewcam ( ミュウカム ) という mac アプリを作ってみました。 こんな感じです。 良いですね（表情が固い）。 ダウンロード GitHub にソースコードとアプリを公開しています。是非ダウンロードして使ってみてください。 https://github.com/zaru/mewcam Download : mewcam v1.1.0 for mac 今は mac のみの対応ですが、Windows 版もリリースする予定です。もしフィードバックがあれば @zaru までお願いします。 Windows 版もリリースしました！ 最新版のダウンロードは GitHub からお願いします。 どうやって作るのか ここからは作り方です。
フロントエンド x RTC界隈の最近とこれから - console.lealog();
フロントエンドエンジニアからみる、この界隈で今どんなIssueが話題になってるのかと、この先どういう動きがありそうかについて。 そこまで自分に先見の明があるとも思ってないけど、アウトプットしておかないと忘れてしまいそうなので・・。 ちなみにここでいうフロントエンドは、いわゆるブラウザとかJavaScriptのAPIのことです。 プロトコル的な側面はそこまで詳しくないのであまり触れません。 WebRTC 1.0 GitHub - w3c/webrtc-pc: WebRTC 1.0 API まず、RTCといえばズバリのWebRTCから。 昨年末にWDからCRへ格上げということで、もうAPIが激変したりはしない・・はず。 実際のところ、ここ半年くらい大きな対応した覚えがないです。（WebRTCそのものを実装してる人は、地味にいろいろ対応してると思うけど） ガワのAPIという観点でいうと、最近はも
node-canvasでアニメーションGifをつくって遊ぶぞ！
28. ライブラリ Automattic/node-canvas … ☆5176 (2018年7月時点) Node.jsでCanvasAPIっぽく画像操作するもの。 いくつかの依存パッケージをインストールする必要がある。 eugeneware/gifencoder … ☆257 (2018年7月時点) アニメーションGifを作る。1フレーム毎にnode-canvasのcontextを渡す。 30. アニメーションの基本 1. 最初に目標値を決める 例えば10回転+ランダムな位置で停止する場合 目標値 = 360°*10 + Math.random() * 360° 2. どのくらいの長さにするか決める 滑らかにするには30FPSくらい欲しい = 5秒のアニメーションは150frame 容量と相談。今回は4秒+結果表示にして240*240の画像で1.5Mb程度 3. フレーム毎に描画する 0
Android開発者のためのFlutter説明文がためになったので全訳&要約 - Qiita
全訳 View Viewに相当するものは？ Androidではボタン、ツールバー、inputsなどのすべてがViewです。 Flutterでは、Viewとおおよそ同じものがウィジェットです。 ウィジェットはAndroidのViewに正確に対応しているわけではありませんが、Flutterがどのように機能するかを学んでいる間は、"UIを宣言および構築する方法"と考えることができます。 ただし、これらにはいくつか違いがあります。はじめに寿命が異なります。 ウィジェットは不変であり、変更が必要になるまで存続し続けます。 ウィジェットやそのウィジェットのStateが変更されるたびに、Flutterフレームワークは、新しいウィジェットツリーを作成します。 それに対して、AndroidViewは、一度描画されたら、invalidate()が呼ばれるまで再描画されません。 Flutterのウィジェットは、
obnizOSを使ってm5stackをサブディスプレイ化してみた - Qiita
m5stack.jsを出したので色々遊んでみました。 やっぱりちっちゃいディスプレイがあるので、そこで遊びたいですよね。 画像表示させたいですよね。TVとかyoutubeを流したいですよね。サブディスプレイにしたいですよね というわけでやってみました。 つくったもの #m5stack をサブディスプレイとして採用しました #obnizOS pic.twitter.com/T9NbuqUAUI — kido@IoTエンジニア (@9wick) 2019年8月23日 だいたい60行ぐらいのプログラムです。 お手軽感満載です かわりにソースコード外で色々頑張ってるところがあります。 しくみ サブディスプレイのキャプチャを撮ってm5stackで表示しています。 色々小ネタはありますが、基本的にはそれだけです。 これを実現するのに、chrome(HTML)とobnizOSを使っています。 サブディス
【HTML/JavaScript】よくある canvas要素 のフルスクリーン対応【テンプレート付】 - Nekonote
おつかれさまです。 記事の前に、まずは にゃんこ成分 を充電します ( ˙꒳˙ ) すこし大人っぽく写ったかな? canvas とは canvas要素 は、JavaScript で画像や図形を描画できる HTML要素 です。 例えば、動画やカメラ映像を取り込んで加工したり、ゲームを作ったりできます。 詳しくはこちら。 ja.wikipedia.org canvas要素 では、画像やアニメーションが使えることがわかりました。 画像やアニメーションを使うときは、それを画面いっぱいに表示したいことがあります。 結構あります。 たとえば、動画を再生するプレーヤーは、ほぼフルスクリーンにする機能があります 大きさを設定するには canvas要素には、widthとheightという属性があり、HTML内での描画可能な領域になります。 width は要素の横幅、height は要素の高さを示してます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - heppoko/Unity_uGUI_Advance_Reference: Unity uGUI Advance Reference
Utopia
