🌺
ZennのAPIを使って、自分のサイトに記事を表示させる方法
私は自分のホームページとして、以下サイトを立ち上げています。
ちなみにNewt + vercel + Nuxtという構成です。
（どうでもいいんですけど、ブログタイトルの「蛇と花」が、官能小説と名前が似ているせいで、google検索すると官能小説がヒットします。）
一時期は記事の管理をNewtでやってたんですけど、やはりZennの有名さと投稿のしやすさは魅力的で、今は再びZennに記事を書くようになりました。
せっかくなら、zennに書いた自分の記事を自己サイトに引用したいところです。
zennは公式にはAPIを公開していませんが、以下のように'api'を含めて検索すると、json形式で記事一覧が得られます
ちなみに得られた結果がこちら
クリックで展開
{"articles":[{"id":69785,"post_type":"Article","title":"【2023年10月更新】 firebase + nuxt3のwebアプリ開発手順③","slug":"151fd7dda125c1","comments_count":0,"liked_count":14,"body_letters_count":1409,"article_type":"tech","emoji":"😊","is_suspending_private":false,"published_at":"2022-01-09T09:03:02.155+09:00","body_updated_at":"2023-10-31T15:44:38.627+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/151fd7dda125c1","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":96144,"post_type":"Article","title":"【puppeteer】コーナンの店舗を取得する","slug":"d501f526809344","comments_count":0,"liked_count":3,"body_letters_count":32630,"article_type":"tech","emoji":"😊","is_suspending_private":false,"published_at":"2022-06-04T17:34:01.470+09:00","body_updated_at":"2022-06-04T17:44:12.727+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/d501f526809344","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":72962,"post_type":"Article","title":"【2023年10月更新】 firebase + nuxt3のwebアプリ開発手順②","slug":"eb3b9faf34a11f","comments_count":0,"liked_count":4,"body_letters_count":4001,"article_type":"tech","emoji":"🌊","is_suspending_private":false,"published_at":"2022-04-07T21:47:14.661+09:00","body_updated_at":"2023-10-31T15:31:36.559+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/eb3b9faf34a11f","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":85809,"post_type":"Article","title":"【2023年】Nuxt3+firebase hostingでgoogle maps apiを使う","slug":"4e6c74d37de21a","comments_count":0,"liked_count":6,"body_letters_count":7333,"article_type":"tech","emoji":"💡","is_suspending_private":false,"published_at":"2022-04-10T02:21:58.724+09:00","body_updated_at":"2023-11-08T11:35:19.327+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/4e6c74d37de21a","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":69786,"post_type":"Article","title":"【2023年10月更新】 firebase + nuxt3のwebアプリ開発手順①","slug":"704620c3e7eee4","comments_count":1,"liked_count":10,"body_letters_count":4745,"article_type":"tech","emoji":"📘","is_suspending_private":false,"published_at":"2022-01-09T09:04:17.386+09:00","body_updated_at":"2023-10-31T15:13:36.406+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/704620c3e7eee4","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":222705,"post_type":"Article","title":"シッカソンで開発したwebアプリ「Deer Quest」で考えたNuxtベストプラクティス","slug":"f235ab91d57190","comments_count":0,"liked_count":0,"body_letters_count":16781,"article_type":"tech","emoji":"🦌","is_suspending_private":false,"published_at":"2023-12-03T23:30:08.210+09:00","body_updated_at":"2023-12-03T23:40:25.859+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/f235ab91d57190","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":174656,"post_type":"Article","title":"BLE接続でESP32とラズパイで相互通信する①","slug":"826f7bc384e2b7","comments_count":0,"liked_count":0,"body_letters_count":10316,"article_type":"tech","emoji":"🌟","is_suspending_private":false,"published_at":"2023-06-04T10:21:11.767+09:00","body_updated_at":"2023-06-04T10:13:01.548+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/826f7bc384e2b7","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":103158,"post_type":"Article","title":"令和最新版 firebase + nuxt3のwebアプリ開発手順③","slug":"7183ef455ba509","comments_count":0,"liked_count":2,"body_letters_count":3219,"article_type":"tech","emoji":"😸","is_suspending_private":false,"published_at":"2022-07-16T08:41:19.942+09:00","body_updated_at":"2022-07-16T08:41:19.942+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/7183ef455ba509","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":96124,"post_type":"Article","title":"【puppeteer】小林製薬の製品を取得する","slug":"9496fe2d17c4be","comments_count":0,"liked_count":1,"body_letters_count":12472,"article_type":"tech","emoji":"🦔","is_suspending_private":false,"published_at":"2022-06-04T15:09:21.312+09:00","body_updated_at":"2022-06-04T17:47:43.795+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/9496fe2d17c4be","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":85675,"post_type":"Article","title":"【Nuxt3】 firebaseのstoreやstorageへの書き込み クライアントから実行するかサーバーから実行するか（編集中）","slug":"f2eb0d4f36dfc7","comments_count":0,"liked_count":5,"body_letters_count":13149,"article_type":"tech","emoji":"👏","is_suspending_private":false,"published_at":"2022-04-09T10:18:56.887+09:00","body_updated_at":"2023-06-21T07:48:21.858+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/f2eb0d4f36dfc7","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":85064,"post_type":"Article","title":"ESP32 WROOM 32Dをmicropythonで開発する方法(移管済)","slug":"8d02dfad280ea5","comments_count":0,"liked_count":1,"body_letters_count":2523,"article_type":"tech","emoji":"🌟","is_suspending_private":false,"published_at":"2022-04-06T01:20:24.860+09:00","body_updated_at":"2023-02-23T15:07:51.996+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/8d02dfad280ea5","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":82118,"post_type":"Article","title":"Nuxt3で`window is not defined` または `document is not defined`の原因と対処","slug":"0051a0b9ec7484","comments_count":0,"liked_count":3,"body_letters_count":1236,"article_type":"tech","emoji":"🕌","is_suspending_private":false,"published_at":"2022-03-21T11:03:38.545+09:00","body_updated_at":"2022-03-21T11:03:38.545+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/0051a0b9ec7484","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":63287,"post_type":"Article","title":"Nuxt3でwebページを作る手順（移管済）","slug":"84f6ef77a0495f","comments_count":0,"liked_count":11,"body_letters_count":3399,"article_type":"tech","emoji":"🐷","is_suspending_private":false,"published_at":"2021-12-05T10:06:08.396+09:00","body_updated_at":"2022-01-28T18:01:28.533+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/84f6ef77a0495f","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":176465,"post_type":"Article","title":"xiao nRF52480でBLE通信を試す（データ構造を3つ）","slug":"5d49b1812f6f17","comments_count":0,"liked_count":0,"body_letters_count":9197,"article_type":"tech","emoji":"🙆","is_suspending_private":false,"published_at":"2023-06-10T16:10:32.630+09:00","body_updated_at":"2023-06-11T10:11:36.345+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/5d49b1812f6f17","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":151613,"post_type":"Article","title":"ロータリーエンコーダー買ってみた","slug":"e36917ff2e12f9","comments_count":0,"liked_count":0,"body_letters_count":6302,"article_type":"tech","emoji":"🎃","is_suspending_private":false,"published_at":"2023-05-05T10:05:25.050+09:00","body_updated_at":"2023-05-05T10:06:12.009+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/e36917ff2e12f9","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":139542,"post_type":"Article","title":"ESP32でUDP通信する方法を誰よりもわかりやすく解説 お試し編","slug":"2886f2b41a048f","comments_count":0,"liked_count":1,"body_letters_count":4717,"article_type":"tech","emoji":"🔖","is_suspending_private":false,"published_at":"2023-01-08T18:18:32.400+09:00","body_updated_at":"2023-01-08T20:34:00.997+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/2886f2b41a048f","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":134322,"post_type":"Article","title":"温度センサー DHT11、DHT22のサンプルコード","slug":"3f014263395ec6","comments_count":0,"liked_count":0,"body_letters_count":9702,"article_type":"tech","emoji":"🦔","is_suspending_private":false,"published_at":"2022-12-18T13:04:37.635+09:00","body_updated_at":"2022-12-18T13:12:14.842+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/3f014263395ec6","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":134268,"post_type":"Article","title":"【電子工作】割り込み処理（ソフトウェア割り込み）","slug":"2d34b78fbf6a04","comments_count":0,"liked_count":1,"body_letters_count":5197,"article_type":"tech","emoji":"🦁","is_suspending_private":false,"published_at":"2022-12-18T06:56:06.344+09:00","body_updated_at":"2022-12-18T07:01:19.772+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/2d34b78fbf6a04","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":134266,"post_type":"Article","title":"【電子工作】割り込み処理（ハードウェア割り込み）","slug":"2eb77ebf119cc3","comments_count":0,"liked_count":0,"body_letters_count":5310,"article_type":"tech","emoji":"🐥","is_suspending_private":false,"published_at":"2022-12-18T05:58:32.624+09:00","body_updated_at":"2022-12-18T07:14:36.700+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/2eb77ebf119cc3","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":134125,"post_type":"Article","title":"4デジタル7セグメントTM1637 使い方メモ","slug":"63879d63e354a5","comments_count":0,"liked_count":0,"body_letters_count":8187,"article_type":"tech","emoji":"🍣","is_suspending_private":false,"published_at":"2022-12-17T17:12:17.431+09:00","body_updated_at":"2022-12-17T17:12:17.431+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/63879d63e354a5","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":117332,"post_type":"Article","title":"【電子工作】GPSで居場所情報を取得する","slug":"8defab07248e97","comments_count":0,"liked_count":1,"body_letters_count":4604,"article_type":"tech","emoji":"🚀","is_suspending_private":false,"published_at":"2022-10-01T18:59:32.448+09:00","body_updated_at":"2022-10-03T07:27:20.296+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/8defab07248e97","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":108944,"post_type":"Article","title":"【Nuxt3】Mapbox Api開発方法（途中）","slug":"fe51efebb64087","comments_count":0,"liked_count":2,"body_letters_count":2969,"article_type":"tech","emoji":"🙌","is_suspending_private":false,"published_at":"2022-08-15T15:46:40.373+09:00","body_updated_at":"2022-08-15T15:46:40.373+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/fe51efebb64087","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":216508,"post_type":"Article","title":"ハッカソンに参加してきた","slug":"6cfac9a6d19242","comments_count":0,"liked_count":0,"body_letters_count":3653,"article_type":"idea","emoji":"🦧","is_suspending_private":false,"published_at":"2023-11-18T10:07:34.494+09:00","body_updated_at":"2023-11-18T10:11:39.468+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/6cfac9a6d19242","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":218082,"post_type":"Article","title":"ノーコードアプリ開発ツールClickの個人的評価","slug":"48b012a5cb27b7","comments_count":0,"liked_count":0,"body_letters_count":2278,"article_type":"idea","emoji":"🐴","is_suspending_private":false,"published_at":"2023-11-18T08:12:43.100+09:00","body_updated_at":"2023-11-18T08:12:43.100+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/48b012a5cb27b7","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":176468,"post_type":"Article","title":"seeed xiao nRF52840の開発基礎（Mu editorでcircuitPython）","slug":"fafcd560073ca5","comments_count":0,"liked_count":0,"body_letters_count":3361,"article_type":"tech","emoji":"📖","is_suspending_private":false,"published_at":"2023-06-10T11:13:04.327+09:00","body_updated_at":"2023-06-10T11:13:04.327+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/fafcd560073ca5","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":160768,"post_type":"Article","title":"turfを使った地理分析","slug":"05d9344d264281","comments_count":0,"liked_count":1,"body_letters_count":1680,"article_type":"tech","emoji":"🐥","is_suspending_private":false,"published_at":"2023-04-07T18:28:02.596+09:00","body_updated_at":"2023-04-07T18:28:02.596+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/05d9344d264281","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":139863,"post_type":"Article","title":"UDP通信を使って、ブラウザからESP32を操作する","slug":"d68b03f83bf21b","comments_count":0,"liked_count":0,"body_letters_count":3844,"article_type":"tech","emoji":"🐡","is_suspending_private":false,"published_at":"2023-01-09T23:52:58.094+09:00","body_updated_at":"2023-01-09T23:52:58.094+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/d68b03f83bf21b","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":139697,"post_type":"Article","title":"Typescriptを使い慣れた人のためのPython型定義","slug":"b9bd6537c32486","comments_count":0,"liked_count":6,"body_letters_count":1640,"article_type":"tech","emoji":"👏","is_suspending_private":false,"published_at":"2023-01-09T12:02:28.134+09:00","body_updated_at":"2023-01-09T12:02:28.134+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/b9bd6537c32486","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":139605,"post_type":"Article","title":"ESP32でUDP通信する方法を誰よりもわかりやすく解説 実践編","slug":"ff5e919f556d3a","comments_count":0,"liked_count":0,"body_letters_count":3166,"article_type":"tech","emoji":"📖","is_suspending_private":false,"published_at":"2023-01-08T22:57:14.659+09:00","body_updated_at":"2023-01-08T22:57:14.659+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/ff5e919f556d3a","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":219766,"post_type":"Article","title":"【GAS】pdfファイルをアップロードする","slug":"80202fff7e987c","comments_count":0,"liked_count":0,"body_letters_count":817,"article_type":"tech","emoji":"🔥","is_suspending_private":false,"published_at":"2023-11-24T20:51:13.990+09:00","body_updated_at":"2023-11-24T20:51:13.990+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/80202fff7e987c","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":218081,"post_type":"Article","title":"KiCADでよく使う部品","slug":"a5d53eaf02bcb1","comments_count":0,"liked_count":0,"body_letters_count":664,"article_type":"tech","emoji":"🐨","is_suspending_private":false,"published_at":"2023-11-18T07:24:10.033+09:00","body_updated_at":"2023-11-18T07:24:10.033+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/a5d53eaf02bcb1","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":216742,"post_type":"Article","title":"RESAS APIを使って都道府県and市町村名取得","slug":"cb378ad58824ac","comments_count":0,"liked_count":0,"body_letters_count":1914,"article_type":"tech","emoji":"🗾","is_suspending_private":false,"published_at":"2023-11-12T18:26:29.542+09:00","body_updated_at":"2023-11-12T18:26:29.542+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/cb378ad58824ac","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":168282,"post_type":"Article","title":"NE555を使った脈動LEDライト","slug":"8ea3325fcef105","comments_count":0,"liked_count":0,"body_letters_count":603,"article_type":"tech","emoji":"🐈","is_suspending_private":false,"published_at":"2023-05-07T09:40:27.054+09:00","body_updated_at":"2023-05-07T09:42:50.464+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/8ea3325fcef105","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":167700,"post_type":"Article","title":"SanAce（4線式ファン）の使い方メモ","slug":"06fb63472f0091","comments_count":0,"liked_count":0,"body_letters_count":587,"article_type":"tech","emoji":"🦔","is_suspending_private":false,"published_at":"2023-05-05T09:51:21.977+09:00","body_updated_at":"2023-05-05T09:51:21.977+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/06fb63472f0091","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":167231,"post_type":"Article","title":"74HC595とNE555を用いたLEDライトチェイサー","slug":"7b074b7466495e","comments_count":0,"liked_count":0,"body_letters_count":1407,"article_type":"tech","emoji":"🎃","is_suspending_private":false,"published_at":"2023-05-03T11:49:42.605+09:00","body_updated_at":"2023-05-03T11:49:42.605+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/7b074b7466495e","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":162562,"post_type":"Article","title":"GeoJsonの構造について","slug":"8d8dacdb3790ae","comments_count":0,"liked_count":1,"body_letters_count":1202,"article_type":"tech","emoji":"🐷","is_suspending_private":false,"published_at":"2023-04-15T09:00:11.186+09:00","body_updated_at":"2023-04-15T08:59:58.051+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/8d8dacdb3790ae","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":144414,"post_type":"Article","title":"playwrightでスクレイピング","slug":"34bd8f30d51036","comments_count":1,"liked_count":0,"body_letters_count":810,"article_type":"tech","emoji":"🌟","is_suspending_private":false,"published_at":"2023-01-28T20:02:58.296+09:00","body_updated_at":"2023-01-28T20:02:58.296+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/34bd8f30d51036","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":143667,"post_type":"Article","title":"IPアドレスを取得して、メールで送信する","slug":"0425ecc06698e1","comments_count":0,"liked_count":0,"body_letters_count":878,"article_type":"tech","emoji":"🗂","is_suspending_private":false,"published_at":"2023-01-25T14:22:00.467+09:00","body_updated_at":"2023-01-25T14:22:00.467+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/0425ecc06698e1","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":139631,"post_type":"Article","title":"電子工作 現在時刻を取得","slug":"fd2815df110aac","comments_count":0,"liked_count":0,"body_letters_count":455,"article_type":"tech","emoji":"🔖","is_suspending_private":false,"published_at":"2023-01-08T22:40:47.792+09:00","body_updated_at":"2023-01-08T22:40:47.792+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/fd2815df110aac","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":134264,"post_type":"Article","title":"ロータリーエンコーダーモジュール","slug":"3f32a738a9e8d3","comments_count":0,"liked_count":0,"body_letters_count":1479,"article_type":"tech","emoji":"🍣","is_suspending_private":false,"published_at":"2022-12-18T05:18:52.299+09:00","body_updated_at":"2022-12-20T07:47:49.199+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/3f32a738a9e8d3","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":115812,"post_type":"Article","title":"Puppeteerを用いたスクレイピング操作 Tips","slug":"578e2bd43e1e2f","comments_count":1,"liked_count":0,"body_letters_count":463,"article_type":"tech","emoji":"👌","is_suspending_private":false,"published_at":"2022-09-23T12:59:04.876+09:00","body_updated_at":"2022-09-23T12:59:04.876+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/578e2bd43e1e2f","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null},{"id":95586,"post_type":"Article","title":"Vue3 + Flowbite CDNで作成するときのUI Component","slug":"d644b952fca327","comments_count":0,"liked_count":0,"body_letters_count":102,"article_type":"tech","emoji":"💬","is_suspending_private":false,"published_at":"2022-06-01T22:08:20.718+09:00","body_updated_at":"2022-06-01T22:08:20.718+09:00","source_repo_updated_at":null,"pinned":false,"path":"/yuta_enginner/articles/d644b952fca327","user":{"id":43560,"username":"yuta_enginner","name":"Yuta","avatar_small_url":"https://lh3.googleusercontent.com/a-/AOh14GjR5cuyedzmX0KTR-mEH6VIZSCm2i0DJuIMQkyiVw=s96-c"},"publication":null}],"next_page":null}
クエリパラメーターで何を使えるかはいろいろ試す必要がありそうですが（記事の更新日などで更新できる?）、この方法を使うとzennをあたかもヘッドレスCMSのようにして、自分のホームページに記事を表示させることができます。
Nuxtで使う
import axios from "axios"
type Article = {
id:number,
post_type: "Article"
title:string,
slug:string,
comments_count:number,
liked_count:number,
body_letters_count:number,
article_type:"tech",
emoji:string,
is_suspending_private:boolean,
published_at:Date,
body_updated_at:Date,
source_repo_updated_at: null,
pinned: boolean,
path:string,
user:{id:number,username:string,name:string,avatar_small_url:string},
publication:null
}
export default defineEventHandler(async event=>{
const res = await axios.get('https://zenn.dev/api/articles?username=yuta_enginner')
return res.data.articles as Article[]
})
<script setup lang="ts">
const res = await useFetch('/api/zenn')
const articles = res.data
</script>
<template>
<div class="flex bg-blue-50">
<aside class=" w-1/6">
</aside>
<main class="w-4/6 min-w-[700px]">
<h1>技術ブログ （Zennの記事に飛びます）</h1>
<ul class="grid grid-cols-1 md:grid-cols-2 gap-4">
<li v-for="article of articles">
<ArticleList :article="article" />
</li>
</ul>
</main>
<aside class=" w-1/6">
</aside>
</div>
</template>
Discussion