自分のサイトにカードを置く
カードは、すでにあるページ（チームのページ、社内のお知らせ、その日のためのサイト）の中に置けます。カードの写真ではなく、本物のカードが入った枠として。
埋め込みとは
Noya の外枠を外した、同じカードです。サイトのヘッダーも、編集用の操作も、作った人に属するものも出ません。あなたのページを読んだ人は、リンクで開いたときとまったく同じように、みんなのカードを読み、自分でも書き足せます。枠の中のカードは検索エンジンに登録されず、Noya へ戻るものは、あなたのページの中ではなく新しいタブで開きます。
コード
カードを置きたい場所に貼り付け、YOUR_WALL_ID をあなたのカードのIDに置き換えてください。リンクの /c/ より後ろの部分です。
<iframe data-noya-src="https://noya.so/embed/YOUR_WALL_ID" width="100%" height="720" style="border:0;width:100%;" title="Noya" loading="lazy" allow="camera; microphone" referrerpolicy="no-referrer-when-downgrade"></iframe>
<script>(function(d){var w="https://noya.so/noya-embed.js",v=function(){if(window.noyaEmbed){window.noyaEmbed.load()}else{d.querySelectorAll("iframe[data-noya-src]:not([src])").forEach(function(f){f.src=f.getAttribute("data-noya-src")})}};if(window.noyaEmbed){v()}else if(!d.querySelector('script[src="'+w+'"]')){var s=d.createElement("script");s.src=w;s.async=true;s.onload=v;s.onerror=v;(d.body||d.head).appendChild(s)}})(document);</script>変えられるもの
枠はふつうの iframe なので、置くページに合わせて属性を変えられます。
| 属性 | はたらき |
|---|---|
| width | 枠の幅です。100% のままにすると、置いた段の幅いっぱいに広がります。 |
| height | 枠の高さを、ピクセルで指定します。カードが伸びても枠は伸びないので、これより高いカードは、枠の中でスクロールします。 |
| title | スクリーンリーダーや、画像を表示しない環境で、この枠が何と呼ばれるかです。 |
| loading | lazy のままにしておけば、読む人がその近くまでスクロールしたときに初めてカードが読み込まれます。 |
記入例
同じコードに、あるカードのIDを入れ、置くページに合わせた高さを選んだものです。
<iframe data-noya-src="https://noya.so/embed/b7Kq2mXsPnR4" width="100%" height="1000" style="border:0;width:100%;" title="Noya" loading="lazy" allow="camera; microphone" referrerpolicy="no-referrer-when-downgrade"></iframe>
<script>(function(d){var w="https://noya.so/noya-embed.js",v=function(){if(window.noyaEmbed){window.noyaEmbed.load()}else{d.querySelectorAll("iframe[data-noya-src]:not([src])").forEach(function(f){f.src=f.getAttribute("data-noya-src")})}};if(window.noyaEmbed){v()}else if(!d.querySelector('script[src="'+w+'"]')){var s=d.createElement("script");s.src=w;s.async=true;s.onload=v;s.onerror=v;(d.body||d.head).appendChild(s)}})(document);</script>しておくとよいこと
- 幅は 100% のままにして、カードがレイアウトからはみ出すのではなく、それに沿うようにしてください。
- スクロールしても構わない高さを選び、カードが埋まってきたら高くしてください。
- 遅延読み込みはそのままに。ページの下のほうにあるカードが、その上の表示を待たせるべきではありません。
- 埋め込むのは招待リンクで、贈るリンクは決して埋め込まないでください。公開したページに置くカードは、人に書いてもらうためのものです。贈るリンクの役目ではありません。
Noya のどこにあるか
このページから何かを写す必要はありません。カードのツールバーで「埋め込み」を開けば、そのカードのIDがすでに入ったコードと、まとめてコピーするボタンがあります。