😭

Framer + RemixでWebサイトをつくる #14 - Codeで表現する - npm package編

2021/12/27に公開

引き続き開催しているもくもく会「Kamakura MokMok Hack」のサイトをFramer + Remixでつくっていきます。サイトの要件などに興味ある方は1日目の記事をご覧ください。

13日目 - Code Componentsでnpm packageを使う

えっと、これを書いているのは12月26日です。というかもうすぐ27日です。別に25日分全部埋めようってことではないですが、表題のRemixの話に到達するまで年末までに延長アドベントカレンダーとして頑張って続き書きます（アドベントカレンダーにいつまで登録できるか知らんけど）。

さて、前回の記事でCode Componentsの基本の部分をまとめました。

ここで気になるのがnpm packageがimportできるのだろうかという点です。これについて公式でも色々言及してあります。

過去、Framerは3度ピボットしています。1度目は独自言語のプロトタイピングツール、2度目は現在に近いReactベースのFramer Xというプロトタイピングツール。3度目が現在で全てクラウドに移行したことでブラウザでもローカルアプリケーションでも利用できる形になりました。

2度目のFramer X時代ではローカルにFramerプロジェクトディレクトリを作成する方式だったため、npm packageを利用することもできました。またプロダクトのReact Componentなどのコードをimportすることも可能でした。

しかし、現在のクラウド方式になった時点で当然npm packageの管理をユーザ側で行うことができなくなったため、ライブラリなどの利用はできなくなりました。

しかし、上の外部コードに関するガイドを読む限りではできる様な雰囲気ですが、色々検証してみましたが2021年12月現在ではドキュメントにならってjspmなどを経由して実装してみてもnpm packageは正常に動作しない様でした🥺

ただし、Framer側もそれについては対応を進めている様ですし、公式のDiscordでのやりとりを見ていると期待しているユーザがそれなりにいるので近い将来なんらかの形で実装されるのではないかと思われます。FramerのDiscordなどを追ってアップデートがありそうならまたまとめようと思います。

というわけで、一旦Framer上でのnpm packageの取り扱いについての記事はこれで締めます。

さて、ここまでの話をまとめてとりあえずConnpass APIからもくもく会のイベント一覧を取得してCode Componentsを使って反映させてみようと思います。