タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Next.js Conf 2022で最も感動したライブラリ、vercel/satoriについて紹介させてください。 - Commune Engineer Blog
はじめまして。コミューンでサーバーサイドエンジニアとして働いています、あのちっくと申します。 突然ですが皆様は昨年 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
GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Satori.K.O.／尾野里梨 on Twitter: "今から大事な話をします。 これは、教育の問題であり、同時に福祉の問題でも、行政の問題でも、労働の問題でもあります。 どうやら、休校が全国的な措置になったことで、この話をするタイミングがきたようです。 一般の方だけでなく、政治・行政関係の方にも読んでほしいと思います。"
今から大事な話をします。 これは、教育の問題であり、同時に福祉の問題でも、行政の問題でも、労働の問題でもあります。 どうやら、休校が全国的な措置になったことで、この話をするタイミングがきたようです。 一般の方だけでなく、政治・行政関係の方にも読んでほしいと思います。
unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。
Nuxtだと、Nuxt SEO Kitのnuxt-og-imageを使えば、 vueコンポーネントとかHMLTをOG画像にできるけど、 unjs/nitroでもできないかなと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) nuxt-og-imageの中をのぞいてみたら、 satoriとsharpを使ってたので、それを参考に実装してみた satori+sharpを使った画像生成 この3つのライブラリを使うと、HTMLをPNGに変換できるっぽい vercel/satori ... ReactNode(VNode)をSVGに変換 lovell/sharp ... SVGをPNGに変換 natemoo-re/satori-html ... HTMLをVNodeに変換 satoriはVercel社が出しているライブラリで、JSX形式で利用するっぽい。 なので、HTMLといってもReactNod
「キラーコンテンツ」の意味とは？具体例・作り方・使い方（コンテンツマーケティング） - マーケティングオートメーションツール SATORI
クロージングとは「完了させる」という意味で、コンテンツマーケティングではコンバージョンさせていくシーンで使われます。このクロージングの中でも、特に有力で成果に貢献するページとしてキラーコンテンツを配置し、ふさわしいタイミングでユーザーに閲覧させて資料請求・商品購入などのコンバージョンページへ遷移させていきます。 キラーコンテンツの作り方 キラーコンテンツはやみくもに作るより、しっかり分析を行い、自社のサービスにとってどのような内容がキラーコンテンツに向いているのかを理解することが大切です。以下のような手順で進めてみてください。 1）CVユーザーの多くが経由しているページをあぶりだす 日々コンバージョン（CV）は起こっているので、共通の経由ページをあぶりだすことで、キラーコンテンツの大きなヒントになります。例えばGoogleアナリティクスでは、このような見方をします。 メニュー： 行動 ＞
【2024年版】SEOとは？基本と初めにやるべき具体策5つをわかりやすく解説 - マーケティングオートメーションツール SATORI
「SEO＝検索エンジン最適化」という言葉を聞いたことがある人は多いかと思いますが、「具体的に何をやったらいいのかわからない」「難しそう」というイメージがありますよね。「SEOはお金がかからないので対策してほしい」と上司に突然言われたもののどうしていいのかわからない、あるいは、SEOをやってみようと思いキーワードをタイトルや文章の中に入れたりしたものの少しも変化しない…等、途方に暮れる方も多いと思います。 そこで今回はSEO初心者でもわかる簡単なSEOの知識と、明日からすぐに実践できる具体的な対策をまとめます。 SEOとは？基本的な考え方最初にやるべき「SEO対策の事前準備」初心者が今すぐやるべき重要なSEO対策の基本5つ絶対にやってはいけないことを知る新人SEO担当からのよくある質問と回答SEO戦略、今後の展望 SEOとは？基本的な考え方 SEOとは「Search Engine Optim
【解説】YMYLとは？Google検索品質ガイドラインと対象ジャンル、対策法 - マーケティングオートメーションツール SATORI
YMYL（Your Money or Your Life）とはお金や人生（健康や安全など）に大きく影響するものとGoogleが位置付ける対象を示す用語です。YMYLの意味や対象ジャンル、対策法をまとめました。 YMYLの意味と対象ジャンル YMYLはYour Money or Your Life の頭文字を取った略称で、お金や健康などのジャンルを示すGoogleの検索品質評価ガイドラインに登場する言葉です。お金や健康などに関する情報は、人の生活や人生に大きく影響するジャンルのため、Googleはコンテンツの評価基準を厳格にし、より検索結果の品質を高めようとしています。 例えば重篤な病気にかかってしまい病状の回復方法がないかユーザーが検索した際、信憑性の欠ける情報が掲載されているサイトや、詐欺のような商材が販売されているサイトが上位表示されてしまうと大きな問題を引き起こす可能性があるのはイメ
柔軟性や俊敏性の高い「アジャイル型組織」に企業をつくり替える――。これは組織の体制に加えて運営方法もアジャイル型に変える荒療治になる。では、アジャイル型組織の体制づくりや運営は実際にはどのようなものか。それを進めるうえでどんな課題に直面し、どう解決したらよいのか。先行企業の事例からアジャイル組織変革のヒントを探る。今回はマーケティングオートメーションソフト開発のSATORI（東京・渋谷）の事例を取り上げる。 SATORIは大規模アジャイル開発フレームワーク「Scrum＠Scale（スクラム・アット・スケール）」を採用し、全社をアジャイル型組織につくり替えた。ソフトウエア開発で活用していたアジャイル開発手法のスクラムを全社に適用した形だ。ソフトウエア開発部門だけでなく、企画・営業などの事業部門やバックオフィスもすべて5～7人のスクラムチーム群で構成した。
【やさしい】Googleサーチコンソールとは？使い方・設定の基本 - マーケティングオートメーションツール SATORI
Googleサーチコンソール（Google Search Console）とは、Googleが提供しているインターネット検索の分析ツールです。 Google検索キーワードの表示回数・順位の推移や、サイトが抱えている問題点などを確認でき、サイトの改善が可能です。 これから初めて使い始める方に図解でわかりやすく解説します。 Googleサーチコンソールでできること GoogleサーチコンソールはGoogle アナリティクスなどの解析ツールと異なり、ユーザーがどのキーワードで検索したときに、結果としてどのように表示されたかなど、サイトのアクセス前のデータを取得できるのが特長です。 データを確認することによりSEO効果検証や改善案の発見はもちろんのこと、流入検索キーワードを知ることで顧客や見込み顧客のニーズを発掘し、自社サービスに対しての需要などを探ったり、必要なコンテンツを把握することも可能です
【解説】リダイレクトとは？種類・Googleの警告や不正なリダイレクトの仕組みや正しい設定 - マーケティングオートメーションツール SATORI
Googleが表示する「リダイレクトの警告」や、SEOに関するヘルプや記述でよく見る「リダイレクト」という言葉の意味や、仕組み、種類と設定方法を詳しく解説します。 リダイレクトとは？意味と仕組み、種類Googleの「リダイレクトの警告」と「不正なリダイレクト」とは？正しいリダイレクトの設定方法 リダイレクトとは？意味と仕組み、種類 リダイレクトとはサイトやページなどを新しいURLに変更した際、自動的に転送をする仕組みのこと。代表的な使用例としてはリニューアルなどに伴うページURLの変更やドメインの変更、PCサイトとスマートフォンサイトのURLが異なる場合の転送などがあります。 なぜ「リダイレクト」が必要なのか なぜリダイレクトが必要なのでしょうか。ユーザビリティとSEOの２つの観点から解説します。 はじめにユーザビリティ面です。 リニューアルでサイトのURLを変更した時にリダイレクトが行わ
【専門家解説】コンテンツマーケティングの事例8選（2021年版） - マーケティングオートメーションツール SATORI
ただ商品を紹介するだけのコンテンツではなく、ライター独自の視点や特定のテーマからのおすすめアイテムの紹介やハウツーから、自然な形で楽天市場の商品検索結果に送客する仕組みとなっています。メディア全体的に強い営業色が出ておらず、楽しんで読めるよう設計されているところに好感がもてます。最初にポリシーを作り、それに沿って記事を作ることでマナー品質が保たれているのでしょう。 参考： 楽天市場「ソレドコ」から学ぶオウンドメディア戦略とブランディング https://contentmarketinglab.jp/application-method/cmd2019-btoc-report-1/ ブランド認知という目的に対して、ブランドリフト調査を実施。「楽天市場をおすすめしたいか？」という質問に対し、ソレドコの記事に接触したユーザーが、非接触ユーザーより「おすすめ度」が高いという結果が出ています。 この
ビジネスを成功させるために必要な基本のマーケティング分析手法・フレームワークをまとめました。一通り目を通して理解しておくと、今後の戦略立案・分析に役立ちます。ぜひご活用ください。 1．戦略立案に必要なフレームワーク７つ2. 知っておくべき２つの分析手法と消費者理解を助ける３つの行動モデル3．フレーム活用での注意点 1．戦略立案に必要なフレームワーク７つ ここでは、マーケティング戦略の企画・立案を行う際によく活用されるフレームワークを紹介いたします。 1.1 PEST分析 PEST分析は、企業経営に関わる外部環境について、大局的な見地から分析していくためのフレームワークです。 法律や規制の動向といった政治的要因（Politics）、賃金や物価、金利、家計消費の動向などの経済的要因（Economics）、人口動態や流行、宗教などの社会的要因（Society）、技術革新やインフラの整備状況といっ
satoriでブログのOGP画像を動的に生成する
import fs from "fs/promises"; import path from "path"; import type { AstroIntegration } from "astro"; import fm from "front-matter"; import satori from "satori"; import { Resvg } from "@resvg/resvg-js"; // eslint-disable-next-line @typescript-eslint/naming-convention const __dirname = path.dirname(new URL(import.meta.url).pathname); const getStaticPaths = (): string[] => { const posts = Object.key
Satori.K.O.／尾野里梨 on Twitter: "婚姻届と離婚届にハンコがいらなくなるそうですが、ところで生活保護関係書類に片っ端からハンコがいるので、所持金ゼロでも100均でハンコを調達しなきゃいけない件、どなたか解決に動いた議員さんいらっしゃいます？"
婚姻届と離婚届にハンコがいらなくなるそうですが、ところで生活保護関係書類に片っ端からハンコがいるので、所持金ゼロでも100均でハンコを調達しなきゃいけない件、どなたか解決に動いた議員さんいらっしゃいます？
SatoriはHTMLやCSSをSVGに変換するためのオープンソースのライブラリです。ホスティングサービスのVercel謹製のようです。 イメージ的にはHTMLやCSSを書く感覚でSVGを生成できる、と言った方が近いかもしれません。尚、JSX構文がサポートされています。 import satori from 'satori' const svg = await satori( <div style={{ color: 'black' }}>hello, world</div>, { width: 600, height: 400, fonts: [ { name: 'Roboto', data: robotoArrayBuffer, weight: 400, style: 'normal', }, ], }, )このように書く事で600×400サイズのSVGコードが生成される、というものに
JSer.info #613 - Rollup 3.0.0がリリースされました。 Release v3.0.0 · rollup/rollup rollup.js#migration 破壊的な変更として、プラグインのAPIの変更、オプションの変更が行われています。 また、デフォルトでimport()を維持するように変更、chunkのアルゴリズムの変更なども含まれています。 そのほかには、デフォルトでNode.jsのESMサポートとの相互運用性を改善するためにoutput.interop/output.exports/output.esModuleオプションのデフォルト値が変更されています。 基本的には__esModuleというNode.jsが考慮しない(ESMとCJSの総合運用性のために使われていた)プロパティを減らす方向になっています。詳しい変更内容は次のPRを参照すると良さそうです。
【専門家解説】コンテンツマーケティングとSEOの違い＆正しい手順で施策を行う方法 - マーケティングオートメーションツール SATORI
コンテンツマーケティングはコンテンツを使って集客すること、つまりコンテンツ自体がお金をかけずに集客できる＝SEOとお考えの方もいらっしゃいますが、コンテンツマーケティングはもっと広い意味があり、コンテンツSEOとは全く違うものです。確かにSEOにコンテンツ力が重視されるようになっていることは間違いないのですが、混同して間違った理解をしてしまうことはよくありません。マーケティング初心者の方にもスッキリわかるよう解説します。 コンテンツマーケティングとコンテンツSEO コンテンツマーケティングとはコンテンツを使って見込顧客や顧客とコミュニケーションを行うマーケティング手法という意味で、コンテンツSEOはコンテンツを作ることで検索結果に表示させて検索流入を稼ぐことです。ある意味、コンテンツSEOはコンテンツマーケティングの一部と言えるのではないかと考えられますが、コンテンツSEO＝コンテンツマー
ペルソナの重要性とメリット、使われ方 ペルソナを定義する意義の一つは、ターゲットとなるユーザーに対する理解をより深められるということです。マーケティングにおいて何よりも重要なのは、製品やサービスを利用するユーザーのニーズを正しく理解し、適切なメッセージを届けることだといってよいでしょう。そのためには、ユーザーが何を考え、どのような場面でどんな行動をするかを把握しなくてはいけません。 例えば女性向け化粧品の商品企画を行う際には、「30代、女性、主婦、既婚者」といったターゲット層が定義されます。しかし、こうした属性情報の組み合わせだけでは、具体的な人物像を思い浮かべることはできません。そこで、趣味や性格、ライフスタイル、好きな雑誌など定性的な情報を加え、実存する人物のようなペルソナを定義するのです。 よりユーザー視点に立って考えられるようになるため、以下のようなシーンでペルソナが用いられます。
Google Discoverとは？仕組みとSEOへの影響、対策方法 - マーケティングオートメーションツール SATORI
Google Discover（グーグル・ディスカバー）とは、ログイン中のGoogleアカウントから収集した情報をもとに、ユーザーに合うコンテンツをTOPページに「おすすめの記事」として表示してくれる機能です。 SEOへの影響や、アクセスを増やすための方法を解説します。 Google Discoverの仕組みとは？SEOへは影響する？Google Discover対策・必要な設定Google Discoverの事例、掲載されている記事を確認する Google Discoverの仕組みとは？ Google Discoverはどのような仕組みで動いているのかを解説します。 （著者のGoogleアプリホーム画面・検索窓の下にGoogle Discoverが表示されています） （GoogleアプリではなくChromeのモバイルアプリにも「おすすめの記事」として表示される） Google Disco
日経メディカル運営の「日本最大級」医師求人メディア。転職支援会社が扱う求人情報のほか、医療機関からの直接求人情報も掲載！
使い方 基本 satori() に SVG に変換したい要素とオプションを渡すだけです。 SVG に変換したい要素は JSX 記法を使うことができるので、 React アプリケーションであれば導入しやすいのではないかと思います。 import fs from "fs"; import satori from "satori"; (async () => { // フォントを読み込む // ファイルから読み込む例 ( Node.js のみ ) const fontData = fs.readFileSync("/path/to/Roboto-Regular.ttf"); // URL から読み込みたいときは `fetch` 等を使う const fontData = await fetch("https://example.com/Roboto-Regular.ttf").then((res
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![国連サイバー犯罪条約がもたらす最悪の悪夢 | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed3979ff8a1955824c32055f1c05b89157c7e5f3/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2024%2F07%2Fcybercrime-2024-2b.png)
全社をアジャイル型組織にしたSATORI、数珠つなぎで開く「朝会」の効果
【重要】マーケティングの分析手法・フレームワーク - マーケティングオートメーションツール SATORI
Faber CompanyとSATORIがマーケターとMAツール運用をセットで提供する共同新サービス | Web担当者Forum
HTMLやCSSをSVGに変換するためのオープンソースのライブラリ・「Satori」
2022-10-12のJS: Rollup v3、Volar 1.0(Vue LSP)、Satori(HTML + CSS = SVG)
ビジネスでの「ペルソナ」とは？具体例と作り方・無料テンプレート - マーケティングオートメーションツール SATORI
理研・東大・京大、コロナRNAを増幅せず5分で高感度検出するSATORI法を開発
HTML/CSS を SVG に変換する Vercel 製のパッケージ「satori」を試してみる
airz.tokyo
newsdig.tbs.co.jp
www.nikkei.com
kikslab.hatenablog.com
www.sut-tv.com
yularihappysmile.com