☆ピコピコプラネット☆ SPACE を支える技術
この記事は、Linked Open Data Advent Calendar 2020 の 21 日目の記事です。
昨日は、私の開発する『☆ピコピコプラネット☆ SPACE』（以下、ピコプラ SPACE）が LOD チャレンジ 2020 で受賞した話を書きましたが、今日は、そのピコプラ SPACE がどのような技術でできているのか、紹介したいと思います。ソースコードは以下で公開しています。
フロントエンド
Next.js
最近話題の React 製 JavaScript フレームワークです。SSR（Server Side Rendering）できるフレームワークとして登場しましたが、最近の機能追加によって SSG（Static Site Generation）も可能になったり、ISR（Incremantal Static Regeneration）という新しいページ生成方法が導入されたり、非常に期待のできるフレームワークとなってきております。これらのページ生成方法を、ページごとに簡単に選択できるのがとてもメリットだと感じています。ピコプラ SPACE では、トップページなど静的なページでは SSG + Client Side Data fetching（つまり Ajax）、クエリページでは ISR などと使い分けています。
Next.js を採用した理由としては、Twitter の OGP 画像表示に対応させるため SSR が必須だったこと、ファイルシステムベースのルーティングが便利だったこと、React と TypeScript の相性がよかったこと、が挙げられます。実際に使ってみると、Zero-config を謳っているだけあって設定の必要が少なく、非常にシンプルでわかりやすいと感じました。現状、開発元の Vercel にデプロイするのが最善で、ロックインの懸念はありますが、今後もぜひ採用していきたいフレームワークです。
Semantic UI
CSS フレームワークというと Bootstrap などが思い浮かびますが、Semantic UI も人気のあるフレームワークです。Semantic UI の React コンポーネントを提供する Semantic UI React と一緒に使用しています。エンジニアの作るサイトというと、どうしても見た目が似たようになってしまう傾向がありますが、そんなときに試してみてはいかがでしょうか。
SWR
React Hooks で記述できる Client Side Data fetching ライブラリです。Next.js 開発元の Vercel が開発しています。複雑になりがちな React の Data fetching を簡単に記述することができ、stale-while-revalidate というキャッシュ戦略により UX を高めてくれます。
CodeMirror
ブラウザ上で動作するテキストエディタです。SPARQL のシンタックスハイライトが入っているので、これを使用しました。React との橋渡しのため react-codemirror2 を使用しています。
Comunica SPARQL RDFJS Init Actor
なんだこれは・・・。Comunica という TypeScript で実装された RDF フレームワークがあるんですが、それを構成するライブラリ群のうちの SPARQL 実行に関するライブラリになります。ピコプラ SPACE のどこで使っているかというと、SPARQL エンドポイントの部分です。実は仮実装のピコプラ SPACE の SPARQL エンドポイントは、Apache Jena や Virtuoso などの RDF データベースを用意しているわけではなく、Next.js の SSR で動いているのです・・・。投稿されたクエリの数がまだまだ少ないので、これで十分だろうと考えています。N3.js と一緒に使用しています。
バックエンド
Firebase Authentication
みんな大好き Firebase の認証システムです。とても手軽に導入でき、何より無料で使えるのがすごいですね。ピコプラ SPACE では、Google 連携、Facebook 連携、Twitter 連携、GitHub 連携、メールアドレス登録を有効にしていますが、他にも様々なアカウント連携が可能です。これらを自ら実装することなく、安全にユーザー認証を扱うことができます。
Firebase Cloud Firestore
みんな大好き Firebase の NoSQL クラウドデータベースです。スケーラビリティと引き換えに多くの制限があるので、評価は分かれるところです。特に Firestore では簡単な JOIN もできないので、RDB 脳ではスキーマ設計にかなり悩まされることになるでしょう。ただ、何と言ってもやはり無料枠がかなり大きいのが魅力的です。
Cloudinary
画像・動画管理のクラウドサービスです。このサービスの特徴は、画像や動画をパラメータをつけてリクエストすることで、そのパラメータに従って画像や動画を加工して返してくれるところです。ピコプラ SPACE では、Twitter の OGP 画像生成に利用しています。類似サービスは他にもありますが、無料枠が大きいところが魅力的です。画像加工において、デフォルトでは日本語フォントには対応していませんが、フォントをアップロードすることで使用することができます。ピコプラ SPACE では Noto Sans JP をフォント指定していますが、絵文字が表示されないのが残念です。ばんじゅん🍓さん、ごめんなさい。
まとめ
あまり LOD と関係ない記事になってしまいました。SPARQL 共有サービス『☆ピコピコプラネット☆ SPACE』は、このような技術を組み合わせてできております。お気づきかもしれませんが、かなりクラウドサービスの無料枠に頼ったところが大きく、現状コストが発生しているのは毎年のドメイン代くらいです。ドメインの更新を忘れたり、使用しているサービスの改定があったりしないかぎり、ピコプラ SPACE が終了することはないでしょう。みなさまの投稿をお待ちしております。
宣伝
Linked Open Data Advent Calendar 2020 では、執筆者を募集中です。枠はまだまだたくさんありますので、ぜひご参加ください。
