7月の下旬ごろにCodePenの2.0エディションが出たそうですね。早速、2.0エディションに変更して使ってみたのですが、外部リソースの読み込み方法が変更になっていて戸惑ったので、記録として残しておきます。
外部ファイルの読み込み方法
旧バージョンでは、エディタの上部にある歯車アイコンをクリックしてオプションパネルを開き、リソース検索機能を使って必要なものを選ぶ形でした。
2.0エディションでは、外部リソースを使うために npm のパッケージを使用することができます。パッケージを使用するためには、エディタの左下にある Assets アイコンをクリックして、モーダルウィンドウを開きます。そして、その中の「packages」タブを開くと表示されます。
公式によると、パッケージ検索は、jsDeliver APIを利用した、npm 上のすべてのパッケージを網羅したリアルタイムのインデックスだそうで、読み込みのためのコードと共に、一覧で表示されます。最初に表示されるもの以外にもたくさん用意されているので、必要なものを検索して探してみてください。
このように、デフォルトでは、import する形でのコードが表示されますが、必要に応じてCDNなどを使用することもできます。コピペで済むので、とても便利ですね！
例えば、reset.cssなどはこのようにコードをコピペしてくることで適用されます。
まとめ
初めは方法が分からずに戸惑いましたが、わかってしまえばとても簡単でわかりやすかったです。Assetsアイコンをクリックするとpackagesタブが出てくることがわかってしまえば、あとはむしろ、普段外部リソースを使用するときと同じ感覚で使うことができるので、スムーズに作業することができました。常に最新のnpmが用意されているというのもいいですね！
他の箇所も色々と変わって、できることが増えたみたいなので、私もいろいろと触って楽しみたいと思います。
コメント