うえむー microCMS ×Babylon.jsで フォトギャラリーサイトを作った

自己紹介 Name うえむー  Job フロントエンドエンジニア(ECサイト制作・Shopifyアプリ開発など) Skill HTML / CSS / JavaScript / TypeScript / PHP / jQuery / Liquid / SASS / Pug / webpack / WordPress / Mobable Type / microCMS / Shopify / React.js / Vue.js / Next.js / MySQL etc... Hobby プログラミング学習・ゴルフ・ボードゲーム・麻雀

・mircoCMSとは ・作るきっかけ ・フォトギャラリーサイトを紹介 ・実装方法 ・今後やりたいこと 目次

microCMSとは

2019年8月に公開した、API型のヘッドレスCMS。 サーバ管理は一切不要で、会員登録するだけですぐにサービスを利用開始でき ます。 ヘッドレスは他にもNewt・Contentful・strapiなどがあります。 microCMSとは

作るきっかけ

数年間学んだmicroCMSとBabylon.jsを 組み合わせて何かを作ってみたい 作るきっかけ

Googleで検索してもそれに ヒットする内容がない 作るきっかけ

とりあえず今までの経験を基に フォトギャラリーサイト作ってみた 作るきっかけ

フォトギャラリーサイトを紹介

・フロントエンドフレームワーク Astro ・CSSフレームワーク Tailwind CSS ・CMS microCMS ・言語 JavaScript ・3D エンジン Babylon.js ・ホスティング Vercel フォトギャラリーサイトを紹介

No content

No content

No content

実装方法

実装方法 (sports)APIを作成して記事登録

実装方法

--- import { } from "../../library/microcms"; const = await ( { fields: ["title", "image"] } ); --- ↓ canvas> getNsports getNsports https://images.microcms-assets.io/assets/xxxxxx/xxxxx/ xxxx2.png|1700|1275|data2, ressports ressports.contents.map((content: any) => content.image.url + '|' + content.image.width + '|' + content.image.height + '|' + content.title) https://images.microcms-assets.io/assets/xxxxxx/xxxxx/ xxxx.png|1700|1275|data1 https://images.microcms-assets.io/assets/xxxxxx/xxxxx/ xxxx3.png|1700|1275|data3 実装方法

const canvaslist = const canvaslistsplit = canvaslist.split(','); canvaslistsplit.forEach(function( value, index ) { ⁨ ⁩ ⁨ ⁩ 。。。省略 }); data-blog={resnublog.contents.map((content: any) => content.image.url + '|' + content.image.width + '|' + content.image.height + '|' + content.title)} canvasblog.dataset.blog; 実装方法

・画像拡大の仕組み ・カルーセル / 背景 マウスムーブの仕組み ・ライト / ダークモードの仕組みは GitHubのリポジトリを共有するので確認してみて下さい。 実装方法

https://x.com/uemuragame5683 https://n-sports.vercel.app/ https://github.com/uemura5683/n-sports 実装方法

今後やりたい事

ポートフォリオサイト改修 Blender × Babylon.js 今後やりたい事

Thank You!