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

Transcript

1. うえむー microCMS ×Babylon.jsで フォトギャラリーサイトを作った
2. 自己紹介 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 プログラミング学習・ゴルフ・ボードゲーム・麻雀
3. ・mircoCMSとは ・作るきっかけ ・フォトギャラリーサイトを紹介 ・実装方法 ・今後やりたいこと 目次
4. microCMSとは
5. 2019年8月に公開した、API型のヘッドレスCMS。 サーバ管理は一切不要で、会員登録するだけですぐにサービスを利用開始でき ます。 ヘッドレスは他にもNewt・Contentful・strapiなどがあります。 microCMSとは
6. 作るきっかけ
7. 数年間学んだmicroCMSとBabylon.jsを 組み合わせて何かを作ってみたい 作るきっかけ
8. Googleで検索してもそれに ヒットする内容がない 作るきっかけ
9. とりあえず今までの経験を基に フォトギャラリーサイト作ってみた 作るきっかけ
10. フォトギャラリーサイトを紹介
11. ・フロントエンドフレームワーク Astro ・CSSフレームワーク Tailwind CSS ・CMS microCMS ・言語 JavaScript ・3D エンジン Babylon.js ・ホスティング Vercel フォトギャラリーサイトを紹介
15. 実装方法
16. 実装方法 (sports)APIを作成して記事登録
17. 実装方法
18. --- import { } from "../../library/microcms"; const = await ( { fields: ["title", "image"] } ); --- <canvas id="renderCanvasList" data-blog={ } ></canvas> ↓ <canvas . id="renderCanvasList" data-blog=" , " width="1440" height="425"></ 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 実装方法
19. <canvas id="renderCanvasList" ></canvas> <script> const canvaslist = const canvaslistsplit = canvaslist.split(','); canvaslistsplit.forEach(function( value, index ) { ⁨ ⁩ ⁨ ⁩ 。。。省略 }); </script> data-blog={resnublog.contents.map((content: any) => content.image.url + '|' + content.image.width + '|' + content.image.height + '|' + content.title)} canvasblog.dataset.blog; 実装方法
20. ・画像拡大の仕組み ・カルーセル / 背景 マウスムーブの仕組み ・ライト / ダークモードの仕組みは GitHubのリポジトリを共有するので確認してみて下さい。 実装方法
21. https://x.com/uemuragame5683 https://n-sports.vercel.app/ https://github.com/uemura5683/n-sports 実装方法
22. 今後やりたい事
23. ポートフォリオサイト改修 Blender × Babylon.js 今後やりたい事
24. Thank You!