Obsidian × NotebookLM × Antigravity｜furuya
おはようございます。furuya (@fryx404) です。 今回は、私が最近構築している「セカンドブレイン」の環境について紹介したいと思います。 Obsidianをハブにして、話題の NotebookLM や Antigravity を組み合わせた構成です。 結構洗練られてきたので一旦このへんで公開してみようかなという感じです。よろしくお願いします！ Obsidianのセットアップまずは母艦となるObsidianのセットアップから。 特に変わったことはしていませんが、 「シンプル」 であることを心がけています。 私のObsidianの画面Basesで自分を管理するまずは多くのObsidianユーザーが使用しているデイリーノートの紹介です。 私のデイリーは3段階の構想になっていて、一番上が「ハビットトラッカー」、中断が「ジャーナル」、下段が「タイムスタンプ」となっています。 デイリーの中
ワコムから描くことに特化したAndroidタブレット「MovinkPad 11」が7月31日発売。必要な機能を1台にまとめたオールインワン設計で描きたい時にすぐ描ける。現在予約受付中
以下、プレスリリースの全文を掲載しています “描きたい”気持ちにすぐ応える、新しい「描く」体験。「Wacom MovinkPad 11」、7月31日発売描くことに特化したオールインワン設計。軽さと使いやすさを追求した、毎日持ち運びたくなるクリエイティブパッド。株式会社ワコムは、描きたいと思ったその瞬間にすぐに描き始められるポータブルクリエイティブパッド「Wacom MovinkPad 11」を、7月31日（木）に発売します。 ペンを手に取った瞬間にすぐ描き出せる手軽さと、場所を選ばず自由に使える軽快さが特長で、“描きたい”と思った瞬間に描き始められる、そんな体験を支えます。 必要なのは、描きたい気持ちだけ「Wacom MovinkPad 11」は、多目的用途のタブレットとは異なる設計思想で生まれた、描くことに特化したAndroid 14搭載のポータブルデバイスです。PCとの接続や複雑な初期
Gemini の新機能 「Canvas」入門： アイデアをカタチにする活用法をわかりやすく徹底解説！｜Gemini - Google の AI
こんにちは、Google の AI「Gemini（ジェミニ）」の公式 note 編集部です。 「いいアイデアが浮かんだ！ でも、それを形にするには、時間も手間もかかって大変そう…」 企画書やウェブサイトの作成、ちょっとした息抜きのためのゲーム開発、あるいは日々の業務を効率化するアプリケーションのアイデア。せっかくのひらめきも、いざ具体的にまとめようとすると、少し気が重くなってしまうことはありませんか。 そんな時に心強い味方となるのが、Gemini アプリに追加された新機能「Canvas」です。Canvas は、皆さんのアイデアを整理し、文章作成からプログラミングコードの記述まで、コンテンツを生み出すプロセスをスムーズにサポートします。 この記事では、「Gemini の Canvas って何？」 という基本的な疑問から、具体的な使い方、どのような場面で役立つかまで、初心者の方にもわかりやすく
なんでもメモして個人的な知識を蓄える「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形式
GPT-4を使って ぷよぷよ 作ってみたときの感想
以下のツイートに反響があったので、どういう感じで作っていったかと感想をメモ 要約 この記事ではAIのChatGPT（GPT-4）を使用して、JavaScriptでぷよぷよを作成する手法について紹介しています。最初の依頼は「JavaScriptで動くぷよぷよのコードを書いて」とされており、最初に生成されたコードは不完全であったとのことです。 その後、AI側からは、1.ぷよの衝突検出、2.プレイヤーの入力によるぷよの操作、3.ぷよの回転の順に実装するように指示があり、徐々に改善を施していきました。 短時間で開発を終えることができるため、エンジニアとしてのスキルや要求、不具合の言語化能力があれば有効だとされています。現時点では優秀なプログラミングのアシスタントとして機能しています。 エンジニアが直面するストレスや不安を軽減できる可能性があります。一例として、短期間で開発を終えることができるため、
JavaScript からファイルをダウンロード保存する方法
a タグの download 属性でダウンロード 従来は Content-Disposition で「ファイルに保存」としていた これまで、サーバーからのデータを「ダウンロードしてファイルに保存」するには、サーバーからクライアントへの HTTP レスポンスを送信するときに次のような HTTP ヘッダーを送る必要がありました。 Content-Disposition: attachment; filename="foo.png" ブラウザ側では、Content-Disposition というヘッダーをみることで、そのコンテンツをそのままインラインで表示するのではないということを知ることができます。 言い換えると、Content-Disposition というヘッダーがある場合に、ブラウザはそのページにナビゲートするのではなく、これからサーバーから送られてくるデータは今のページのアタッチメント
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）のいずれかを中心に実装されています
リアルな眼球を描く。HTMLとCSSだけで。 - Qiita
CSSの底力を見せてやる 「いいか…デザイナー…」 「これはCSSと私一人の問題だ…」 「CSSなんかに凝ったってSEOが捗るわけではないと知ったフウな事をいう者もいるだろう」 「SVGでいいじゃんという者もいる」 「だが」 「自分のCSSをドブに捨てられて その事を無理矢理忘れてSVGをただ貼るなんて人生は あたしはまっぴらごめんだし、 あたしはその覚悟をしてきた！！！」 …というわけではありませんが、なるべくリアルな眼球をHTMLとCSSでマークアップしていきます。 svgやcanvasは使わないしjsなんかもちろん使いません。 でも素で書くのは大変なのでpugとstylusでやっていこうと思います。 結果だけ知りたい人はこちら > eye2 pure css, without svg&canvas ベースとなる眼球を作成しよう
斜めに写った画像をCanvasで矩形に補正する - すぎゃーんメモ
将棋駒画像分類の話の続きのような、あんまり関係もないような。 memo.sugyan.com memo.sugyan.com 結局、素材を組み合わせて自動で生成しただけの駒画像ではやはりデータが足りていないようで、「やはりもっと様々な画像から人力でラベル付けしてデータセットを作っていく必要がありそう」ということになった。 とはいえ、インターネットから画像を拾ってこようと思うと、例えば以下のような感じで (引用元: フリー写真素材ぱくたそ) 多少ならともかく 斜めの角度から写っているものは、そのまま矩形に切り出して学習用画像データに利用するのは難しそう。 これらはうまいこと変形して使いたい。 いわゆるperspective projectionの逆変換のような操作が必要になる。 JavaScriptを使ったCanvas APIでの変換では簡単な拡大・縮小などの変換は可能だけど こういったpe
[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2
チャートやグラフは、さまざまなスマホアプリで見かけます。 スマホのデバイスに対してデザイン、インタラクション、パフォーマンスに最適化されたチャートやグラフを実装するHTML5 Canvasベースのライブラリを紹介します。 Node.js、React Nativeなどに互換性もあり、50種類以上のチャートやグラフを簡単に利用できます。 スマホ向けのデザイン デザインはスマホに最適化されており、軽快なインタラクションでデータをより自然に表示します。 スマホに最適化されたパフォーマンス 軽量で、素晴らしいレンダリングのパフォーマンスを実現。 互換性 HTML5のCanvasベースで実装されており、Node.js、React Nativeで実行することもできます。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。 F2のデモ まずはスマホのアプリでよく見かける、美しいデザインと
![[JS]スマホに最適化された優れもの！さまざまなチャートやグラフを実装できるCanvasベースのライブラリ -F2](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a56da3d1045880413d87cd90dc7f8b998c77d99/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018083111.png)
治安の悪い Slack Emoji を作るツールを作った - Qiita
(治安の悪くない Emoji も作れます) 作ったもの ここで遊べます おもしろいところ GIF アニメのエンコードまですべて js で完結しているので、ありがちな「謎のサーバーに画像アップロードするといい感じに変換してくれる」的なサービスと違って、素性の知れたコードがクライアント側でサクサク動きます。 なにができるの？ 画像を 128px x 128px に変形 画像を、 Slack にアップロードできる（現状）最大サイズの 128px x 128px に変形します。 ローカルのファイルから選ぶか、画像の URL を入力できます。アップロードするわけではないので、デカい画像でもサクサクなのがお気に入りです。 変形は 正方形に引き伸ばし（アス比無視） 正方形いっぱいに拡大して、余ったところはトリミング（アス比維持） 正方形に収まるように縮める（アス比維持） から選べます。 テキストから画像
Pixi.jsでCanvasをカンタンに触ってみよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもですよ、はやちですよ٩( ᐛ )و 今回は、Canvasの操作を高速に描画できるPixi.jsを触ってみました。 導入から実装まで、ご紹介したいと思います( ˇωˇ)☝ 導入方法 npmはこちらからインストールしてお使いください！ npm install pixi.js 実装方法 image画像を操作する 画像を使用してCanvasに描画とアニメーションさせる方法をご紹介します( ˘ω˘)☝ はじめに表示するCanvasを用意します。 Canvasはサイズと背景色も設定できます( ˇωˇ)☝ let app = new PIXI.Application(800, 600, {backgroundColor : 0xDAE8F4}); document.body.appendChild(app.view); いつも使っている画像を用意します( ˇωˇ)☝ let hayachi = P
【Unity】出来るだけ簡単に会話シーンっぽい何かを作る ～とりあえず文字とキャラが変わるまで～ - テラシュールブログ
ふと思いました。 ゲームジャムや簡単なゲームでノベルゲームのようなシステムは必須だよね。でも作るの面倒くさいし、導入も場合によっては面倒くさい。 なので、出来る限りUnityをプレーンなままでノベルゲーム…どころか文字表示での案内するだけの超絶簡単なモノを作る方法について考えてみました。 要件はこんな感じ 文字が出る。一瞬で。 ボタンを押したら文字が変わる 文字内容はスクリプトにハードコーディング 表情とかも変化させたい バックログ？ 外部データによる簡単なコンテンツ追加？ 気にしない！ これを実現するための30行にも満たない残念コード（会話量によって増える）と、GUI操作をGifアニメマシマシで紹介します。 目次 ボタンを押したら文字が出る！ ボタンを押したら文字が変わる ボタンを押したら表情も変わる 感想 次回予告 その他 関連 ボタンを押したら文字が出る！ まずは「ボタンを押したら文
悪循環画像ジェネレータ
遊びかた 以下の入力欄に書き込んだ内容がポスターに反映されます(何も入力しないと、オリジナルの文言が使用されます)。 最初にWebページを開いた際、画像の読み込みに時間がかかる場合があります(画像がロードされるまで少し待ってみてください)。 入力文字中の「<br>」は改行文字として処理されます。 文言の先頭に空白を入れることで表示を調整できます(バッドノウハウですが...)。 作成したポスターは右クリックで「名前を付けて保存」などでダウンロードしてください。 OS X+SafariだとHTML5 Canvasはそのまま保存できないようなので、グラブなどのツールをご利用ください。 修正履歴 最初にWebページを開いたときに画像が表示されない不具合を修正しました。@sharowさん修正案を教えていただきありがとうございます。 スクリプトを一部修正し、コメントを追加しました。 ご要望のあった「【
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「GPT-4o with canvas」がスゴい! 文章作成やコーディング生産性が爆上がり
Slack、まとめ機能「Slack Canvas」提供へ。複数チャンネルにまたがる情報を整理・集約して表示可能 「ハドルミーティング」を拡張するビデオ／画面共有機能の一般提供開始も
WebGLを使ったマンガビューワを作っている - daiiz
Node.jsでCanvas(ImageData)を使った簡単な画像処理 - Qiita
