無料で広告なしのペラいページを作成する方法
Codepenで話題、という記事が話題ですが、その中から1つスニペットを使ってペラいページを作成しました。
https://bafybeifjhcbu5cec24pxm3hp2fndedxnf5sfqkpkrul4cov6l3mfenndoy.ipfs.dweb.link/
さて、このページですがIPFSというP2Pのシステムを使ってホスティングしています。IPFSでは誰でも簡単にファイルを公開することができるのですが、IPFSのソフトを常に走らせておかないとそのうち消えてしまいます。ソフトを終了しても消えないようにするには誰かそのソフトを動かしている人にPinしておいてもらう必要があります。
Pinataというサービスがあり、これを使うとアカウントにつき1GBまでPinしておいてもらえます。ですのでこのようなペラいページを公開する場合は公開したいフォルダにindex.htmlを作成しておいてPinataにフォルダごとアップロードすればよいのです。
アップロード後はhttps://ipfs.io/ipfs/<CID>というアドレスでアクセスが可能になります。<CID>の部分はPinataに表示されるQmで始まる文字列になります。
これでも問題ないのですがルート"/"からの相対アドレス"ipfs/<CID>"となってしまうため、JavaScriptを使ったときにクッキーやローカルストレージが共用になってしまいますのでセキュリティ面で問題があります。
実はIPFS公開ゲートウェイにはサブドメインに<CID>を混ぜ込む機能があり、https://<CID>.ipfs.dweb.link/ というアドレスでも同じようにアクセスできます。ただしCIDの表記を小文字だけの形式に変換する必要があります。以下のアドレスにQmで始まるCIDを入れれば小文字形式のCIDに変換できますので、これにて無事ペラいページが完成となります。
なお、例として作成したページの画像はMonacardというのを使用しております。立体的に表示されるとかっこいいですね。