絶対に画像をダウンロード&スクレイピングさせないWebページを本気で作ってみた - blog.potproject.net
巷で話題になっているこの話題、画像をスクレイピングやダウンロードされたくないということで騒がれています。その話に関しては色々な意見があると思ってますがここでは置いておくとして・・・ 技術的にやるとしたら実際どれくらい対策できるの？ということが気になったので、自分の知識で出来る限り対策したものを作ってみることにしました。 最初に 賢い方はわかると思いますが、タイトルは釣りです。 絶対に画像をダウンロード&スクレイピングさせないページは存在しません。ソフトウェアにおいて絶対と言う言葉はまず存在しないのです。ブラウザで表示している以上、仕組みさえわかれば技術的には可能です。 そのため、 「元画像のダウンロードとスクレイピングを非常に困難にしたWebページを本気で作ってみた」 が実際のタイトルかなとなります。 とはいえ、この仕組みであれば大多数の人は機械的にスクレイピングすることを諦めるレベルの作
なんでもメモして個人的な知識を蓄える「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
こんにちは、VRoid部所属のエンジニアのyueです。 VRoid Hubでページ遷移時にcanvasの状態を維持する改善をリリースしました。本記事ではこの取り込みについて解説していきます。 前提 VRoid Hubではモデル詳細画面と投稿者のみに表示するモデル編集画面が存在しています。この二つのページは別々のレイアウトを使っていたため、モデル表示用のcanvasを操作するインスタンスがお互い共通せず、ページ遷移するたびにモデルを再度読み込むことが必要でした。 今回はDOM APIを利用してコード変更を最小限に押えつつ、再度読みを無くすような改善を行いました。 問題の再現 通常Reactの再レンダリングを防ぐには様々な手段があります。例えば React.memo 、React コンポーネントの key 、classコンポーネントのshouldComponentUpdate などが存在します
はじめに PNG や GIF 画像で identify を実行すると、よく分からない座標が表示される件です。JPEG では問題になりません。 なお、このエントリは実質 +repage の紹介記事となります。 % identify crop.png crop.png PNG 200x200 640x480+100+100 8-bit sRGB 183c 4344B 0.000u 0:00.000 ImageMagick はこの 640x480 を (Layer) Canvas サイズ、200x200 は (Image) Page サイズと呼びます。 (canvas は書き込み作業途中の image データを表す事もあって多義的なので注意) Canvas / Page のイメージ図 ImageMagick で crop を繰り返すと意図しない動きをしたり、GIF アニメーションの resize
1. はじめに ついに ChatGPT-4V が使えるようになりました！ これまでGUIを作成するときには、ChatGPT に 「まず左上にテキストボックスがあって、その右にボタンがあって...」 とちまちま指示する必要があったのですが、GPT-4V により画像を渡せるようになります。 この記事では、ChatGPT-4V を使うと GUI 作成がどのくらい楽になるのかを検証してみたいと思います！ 作成するGUIはこちらのものです。 2. GPT-4V の読み取り精度の確認 2.1. 日本語のポンチ絵 まず、元の記事で使用した日本語のポンチ絵を渡して、どのように読み取れるのかを確認します。 GUIの各要素の位置はなんとなく読み取れている感じがしますが、日本語の読み取り精度はあまり高くないようです。 2.2. 英語のポンチ絵 先ほどのポンチ絵を英語に変換してみます（左下だけ詳しく書き直しました
色、ムズ〜〜〜〜 - マルシテイア
本記事は、先日開催されたKyoto.js 19のために用意したLT資料に加筆したものです。 kyotojs.connpass.com こんにちは、天城です。 最近はWebGLで動画編集アプリを開発しており、Webでの色の扱いについて日々苦しんでおります。 この記事では、僕が最近知った色関連の小ネタを共有します。 目次 話題1: mix-blend-modeにaddがない そもそもBlendingって何？ Webでは基本的にsource-over compositingしか使われない Canvasではsource-over以外のCompositingが使える PDF Reference 一方その頃WebGLは…… 話題2: Display P3 CSS Color 4でDisplay P3が使えるようになった Display P3 CSS Color 4 CSS Color 4 で導入された
iDraw.js | iDraw.js
iDraw.jsDrawing easier on the web. A simple JavaScript framework for Drawing on the web.
3DのWebサービス開発で宣言的なWebGLライブラリを導入して感じた保守運用上のメリット - spacelyのブログ
1 はじめに スペースリーでエンジニアをしている長谷川です。 最近は3DのWebアプリの開発を担当していて、弊社でリリースしている「パノラマ変換3Dプレイヤー」のコンテンツ作成機能などを開発しています。 3DのWebアプリを開発する際には「React/Vue × WebGL系ライブラリ」という構成が代表的なケースの1つであり、弊社でもその構成を選択しました。 ところが、3D Webアプリはサービスの数としては多くないので保守運用まで考慮した設計ノウハウはまだまだ十分に共有されてはおらず、開発を進めるにあたって以下のような懸念点がありました。（詳細は次章） 「宣言的なReact/VueのWebアプリ」と「命令的なWebGL系ライブラリ」というスタイルの違うコードが混ざることでそれぞれの責任分担が曖昧になりやすい 「WebGL系ライブラリを用いた3Dアプリ」の保守運用を考慮した設計に関するノウ
アマゾンが2025年春にもふるさと納税に参入するとの報道を受け、大手ポータルサイト｢ふるさとチョイス｣を運営するトラストバンクを傘下に持つチェンジホールディングス（HD）は3月12日、株主・投資家向けの適時開示としてコメントを発表した。 声明ではアマゾンの参入について、｢法の趣旨に即して、健全に制度が運用される限り、多様な事業者が参画することは寄付者・自治体にとって選択肢が広がることから、市場全体に有利に働く｣との認識を示した。 ふるさと納税制度については｢特産品や日用品をインターネット上で売買するECと混同されがちですが、本来の制度趣旨とは異なります｣とも指摘し、さらに｢『国の制度は国の意向に沿って運営すべし』というのが当社グループの考え方です｣と改めて自社サービスの姿勢を強調した。 ふるさとチョイスは、日本初のふるさと納税仲介サイトとして2012年にサービスを開始。2023年12月には
This is a teenager
It's 1997. Alex is a 13-year-old Hispanic kid being raised by his dad and step-mom. His family's net worth is less than $2,000. And his parents are neither supportive nor involved in his life. When researchers assessed his home and family life, they determined he was in a fairly risky environment. Over the next 25 years, researchers will continue interviewing Alex regularly. He'll be bullied at sc
【TypeScript】花火 - Qiita
はじめに きっかけは前回記事【HTML&CSS】花火の通り、HTML5プロフェッショナル認定試験の勉強をしている中で、ふと、花火が作れそうだなと思ったことですが、色々探しているうちにすごいキレイな花火がTypeScriptで実装されているのを見つけたので、アレンジさせて頂くことにしました。 参考サイト HTML5のCanvasでのグロー表現を使って花火っぽい何かを打ち上げる アレンジした花火 こんな感じにしてみました！ 千輪花火を追加するのが難しかったですが、キレイに描画できたかなと思います。 ① 花火の色がランダムに変わるように変更 ② 花火が開いた後に千輪花火を追加 See the Pen Firework_ts2 by Nina (@ifnezsju-the-selector) on CodePen. メソッド・クラス コード内の主要なメソッドとクラスを説明します。 Firework
DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから はい、DOMDOMタイムスです。知ってるよって？この挨拶は、まあ準備体操みたいなものなので。いつだって欠かさずやっていきます👶 さて、今日はcanvas-based renderingとa11yの話です。この前のJSConfセッションの最後のあたりで話したことと重複が大きいですが、面白がってくれる方が多かったので文章にしておこうと思いました。 (一応JSConfセッションの資料へのリンクも載せておきますね) canvas-based renderingの波 canvas-based renderingという言葉は、この記事では「canvasをゴリゴリに使ってwebコンテンツをレンダリングすること」ってくらいの意味で使います。通常のform要素やdiv要素ではなくて、canvas要素
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページ遷移時にReactコンポーネントの状態を維持する - pixiv inside
ImageMagick の Canvas / Page について - Qiita
画像入力で楽々！ChatGPT-4V と Python GUI 開発 - Qiita
ふるさと納税大手、アマゾン参入に“異例”対応。専門家｢既存サービスの存在意義が問われる｣
DOMDOMタイムス#15: canvas-based renderingとa11y。いま、そしてこれから