新しいCMS、prismic.ioを使ってみよう

Prott blogはTumblrカスタムテンプレートからオリジナルデザインへ

Kai Rollmann-01 / 22 / 2015-News

(この記事のEnglish ver.はこちら)

Prottを提供しているグッドパッチでは、MEMOPATCHというブログでUIに関するデザインや技術・考え方・最新のトレンドなど配信しています。これまではMEMOPATCHでProttに関する記事やプロトタイピングに関して配信していましたが、Prottとして多くの方にプロトタイピング文化やデザインの大切さをお伝えできるよう、昨年末に正式にリリースいたしました!この記事では新しいブログの構築までと使用したCMSを簡単にご紹介します。

今までのブログと新しいブログ

今まではTumblrを、新しいこのブログはPrismic.ioを使って構築されています。以前はテンプレートを使ったシンプルなものでしたが、今回はPrott Webアプリとシームレスなデザイン、文章を読みやすいよう余白や行間を調整しています。

チームから新しいブログへの要望

グッドパッチではMEMOPATCHを運営している中で多くの課題を感じていました。新しくブログを作るにあたって、下記の要望を満たすものを探していました。

  • 自由にブログのデザインができること
  • 多言語に展開するため、日本語と英語のブログ記事を分けたい
  • 管理画面は使いやすく
  • Wordpressよりも軽いもの
  • 簡単に記事をレイアウトしたい
  • ソーシャル上にシェアができる
  • SEOが機能すること

この要望を満たしたCMSがPrismic.ioというものです。Prismic.ioとはなんぞや...という方はまず、この動画を見てみてください。

Prismic.ioとは

フランスのスタートアップが提供する、様々なプログラミング言語を選んで構築できる新しいCMSです。簡単にコンテンツの下書きと公開ができ、シンプルなAPIを使うことで、今までのCMSのようなプログラミングやデザインの制約なしにWebサイトやアプリにセットアップすることができます。(多少の制限はありますが)

Prott blogのコンテンツをお届けする為に、Prisimic.ioが提供しているRails Starter project からRails appを開発しました。APIブラウザを使って、クエリで返してくれたJSON形式のデータを確認することができます。Prott blogのRailsのバックエンドでは、APIで最新5件の投稿を取得し、HTMLテンプレートにレンダリングしています。

今では記事を投稿するには、Prisimic.ioを使い、日本語・英語どちらで配信するかを選び、文章を書くだけです。HTMLを記述する必要はありません!(ちなみに、管理画面がとてもかっこいいです。)

Prismic.ioの使い方

Prismic.ioでWebサイトやブログを作ってみたいと思っている方に向けて、簡単なチュートリアルをご紹介します。

ステップ1

まず、Prismic.ioにサインアップして、レポジトリーを作成してください。操作に慣れながらPrismic.ioが提供している実際のサンプルLes bonnes chosesを見てみて下さい。サインアップした後、Les bonnes chosesをローカルにコピーするよう要求されます。Prismic.ioで作られたコンテンツはドキュメント(文章)となっています。Prott blogの場合だと、ブログの記事や投稿者はドキュメントマスクの中のJSONに指定されてコンテンツとして含まれています。

ステップ2

ドキュメントマスクをおおまかな自分のニーズと合うまで修正してみましょう。Prismic.ioにはたくさんのドキュメントマスクが用意されていますが、後から追加・編集できるのでまずは1つ選んでスタートしてみてください。

Prott blogの場合のドキュメントマスクは、PrismicのWebインターフェースの中にタイトル・サブタイトル・メインイメージ・投稿者など(Fragmentsと呼ばれる)が定義されています。マスクの詳細に関してはこちらを見てみてください。

ステップ3

Github上に様々な言語のPrismic.ioのStarterアプリケーションがあるので、お気に入りのものを選んでローカルにコピーして開発を始めてみましょう。

Github上にあがっているStarterアプリケーションは下記のことをどのように行うか、基本的な例を含んでいます。

  • API接続の設定
  • ドキュメントをクエリする例
  • キャッシュの利用方法

開発者マニュアルで何か足りないなと思ったら、使用している言語のリファレンスを確認して下さい。開発者マニュアルの右上に小さなドロップダウンメニューで具体言語のリファレンスを選択することができます。

例えば、これはPrott blogで投稿者を表示させる方法です。

ステップ4

References, Previews, Fragments, Structured Textなど、たくさんの異なるエントリーに混乱したとしても、開発を続け、より多くのドキュメントを読んでみてください。一回概念を理解できたら、すぐにいろいろなことがクリアになるはずです!

充実したサポート

Prismic.ioの実装を通して、まだ全てのUnicodeをサポートしていないことや日本語のテキストのインプットやslugを正確に作成できないことなど、多くの問題に気がつきました。Prismicのチームに問い合わせ(Q&A Forumなどで)すると、1週間もすると全ての問題を全て迅速に対応してくれました。

また、Prismicのコンテンツ配信ネットワークを使うことで、構築したものを世界中に発信することができます。


新しい挑戦してみたい方は是非Prismic.ioをお試しください、これからもPrismic.ioは日々改良していくはずです!

いかがでしたでしょうか?この記事をお読みいただいたあなたがこのブログを気に入ってくださると嬉しいです。Prottに対してだけでなく、Prott blogに関するアドバイスやフィードバックがありましたら、お気軽にお知らせ下さい