寝る前に気楽に書いてます。
keystone.jsという node.jsのフレームワークexpressベースのCMSが出ているということなので遊んでみます。
それのメモです。
メモというか日記的なノリです。
知らない人はこんなのあるんかー 程度で通勤電車のなかででも流し見してもらえればと思います。
準備
macでmongodbをインストールして、keystoneJSを起動してみます。
mongodbを用意する
私はhomebrewでmongodbをインストールして起動しおいてください。
mongodbの準備の説明は省きます。
私はこちらを参考にしました。↓
HomebrewでMacにMongoDBをインストールした時のメモ
mongodbのバージョン
$ mongo
MongoDB shell version v3.4.10
node.jsのversion
今回使用してるバージョンはこちら
$ node -v
v9.2.0
Yeomanの準備
$ npm install --global yo
ジェネレーター起動
$ yo keystone
各種設定
翻訳はグーグル先生の自動翻訳です。
ちょっとだけ自分の説明も入れてみました。
試すだけでしたら、エンター(デフォルト値)で大丈夫です。
プロジェクト名の指定
? What is the name of your project?
あなたのプロジェクトの名前は何ですか？
テンプレートの指定
? Would you like to use Pug, Nunjucks, Twig or Handlebars for templates? [pug
| nunjucks | twig | hbs]
テンプレートにPug、Nunjucks、Twig、またはHandlebarsを使用しますか？
CSSの設定
? Which CSS pre-processor would you like? [less | sass | stylus]
どのCSSプリプロセッサが好きですか？
ブログ機能の追加
? Would you like to include a Blog? (Y/n)
あなたはブログを入れたいですか？ （Y / n）
ギャラリー機能の追加
? Would you like to include an Image Gallery? (Y/n)
イメージギャラリーを組み込みますか？
お問い合わせフォームの追加
? Would you like to include a Contact Form? (Y/n)
お問い合わせフォームをご希望ですか？
ユーザーモデル名の設定
? What would you like to call the User model?
ユーザーモデルとは何ですか？
デフォルト User
指定がなければEnterキー
初期管理者のメールアドレス設定
? Enter an email address for the first Admin user
最初の管理者ユーザーのメールアドレスを入力してください
初期管理者の仮パスワード
? Enter a password for the first Admin user:
Please use a temporary password as it will be saved in plain text and change
it after the first login.
最初の管理者ユーザーのパスワードを入力します。
一時的なパスワードをプレーンテキストで保存して使用するようにしてください。
それは最初のログイン後です。
プロジェクトディレクトリの作成の設定
? Would you like to create a new directory for your project?
プロジェクトの新しいディレクトリを作成しますか？
すでにディレクトリ内で作成している場合 No
新しく作るときは Yes プロジェクト名がフォルダ名になります。
メール設定
? ------------------------------------------------
Would you like to include Email configuration in your project?
We will set you up with an email template for enquiries as well
as optional mailgun integration
プロジェクトに電子メール設定を含めますか？
私たちはあなたに問い合わせのための電子メールテンプレートとオプションのメールガンの統合を設定します
画像設定 (Cloudinaryの設定)
? ------------------------------------------------
KeystoneJS integrates with Cloudinary for image upload, resizing and
hosting. See http://keystonejs.com/docs/configuration/#services-cloudinary
for more info.
CloudinaryImage fields are used by the blog and gallery templates.
You can skip this for now (we'll include demo account details)
Please enter your Cloudinary URL:
KeystoneJSはCloudLogicと統合され、画像のアップロード、サイズ変更、およびホスティングを行います。
詳細については、http://keystonejs.com/docs/configuration/#services-cloudinaryを参照してください。
CloudinaryImageフィールドは、ブログテンプレートとギャラリーテンプレートで使用されます。
これを今スキップすることができます（デモ口座の詳細が含まれます）
CloudinaryのURLを入力してください：
Cloudinaryという画像の管理・共有・編集ができるサービスに保存して表示するようです。無料会員もあるので登録してCloudinaryの管理画面から CLOUDINARY_URL というのがもらえるのでそれを入力します。
とりあえず試すだけならエンターを押せば一時利用するURLが割り振られるようです。
今回は試すだけなのでエンターしてみます。
コードのコメントを追加するか
? ------------------------------------------------
Finally, would you like to include extra code comments in
your project? If you're new to Keystone, these may be helpful.
最後に、あなたのプロジェクトに余分なコードコメントを入れたいですか？ キーストーンを初めてお使いの方は、参考になるかもしれません。
ソースコードに説明文が追記されるのでYesがいいと思います。
今回自分は下記のようにやりました。
? What is the name of your project? blog
? Would you like to use Pug, Nunjucks, Twig or Handlebars for templates? [pug | nunjucks | twig | hbs] pug
? Which CSS pre-processor would you like? [less | sass | stylus] less
? Would you like to include a Blog? Yes
? Would you like to include an Image Gallery? Yes
? Would you like to include a Contact Form? Yes
? What would you like to call the User model? User
? Enter an email address for the first Admin user: hoge@fuga.com
? Enter a password for the first Admin user:
Please use a temporary password as it will be saved in plain text and change it after the first login. admin
? Would you like to create a new directory for your project? Yes
? ------------------------------------------------
Would you like to include Email configuration in your project?
We will set you up with an email template for enquiries as well
as optional mailgun integration No
? ------------------------------------------------
KeystoneJS integrates with Cloudinary for image upload, resizing and
hosting. See http://keystonejs.com/docs/configuration/#services-cloudinary for more info.
CloudinaryImage fields are used by the blog and gallery templates.
You can skip this for now (we'll include demo account details)
Please enter your Cloudinary URL:
? ------------------------------------------------
Finally, would you like to include extra code comments in
your project? If you're new to Keystone, these may be helpful. Yes
するといろいろファイルが生成されます。
待ちましょう。
終了したら
上記のようにやると フォルダを作成するように指定したので、blogというフォルダできてるので入ります。
$ ls
blog/
$ cd blog
keystoneの起動
$ node keystone
------------------------------------------------
KeystoneJS Started:
blog is ready on http://0.0.0.0:3000
------------------------------------------------
のように出てきたのでブラウザでhttp://0.0.0.0:3000にアクセスします。
わーい見れました。
いろいろ見てみる
管理画面ログイン
Signe in ボタンを押して管理画面に入ります。
こんな感じでおしゃれな感じのログイン画面です。良さそうですね。
メールアドレスとパスワードは黒い画面の時に設定したものです。
(先ほどのトップにも書いてあります)
管理画面トップ
わーい めっちゃシンプルです。
- Posts : 記事投稿画面に行きます
- Post Categories : 記事のカテゴリー追加画面に行きます
- Galleries : 写真ギャラリーの追加画面に行きます
- Enquiries : コンタクトページのフォームから送られたものが確認できます
- Users : 管理ユーザーの管理ページに行きます
記事投稿画面
記事投稿だけどんな感じか紹介します。
カテゴリーを追加してみます
管理画面トップから 『Post Categories』 を押してカテゴリーを追加します。
『Create Post Category』ボタンがあるので押すと
「Create a new Post Category」と出たので好きなカテゴリー名を入れます。
追加できました。勝手に WordPressのslug見たいな Key ってのが割り振られました。このKeyは後から好きには変えられなさそうですね。...
記事投稿してみます
管理画面トップから『Posts』を押して記事投稿画面に行きます。
『Create Post』ボタンが出たので押します。
記事タイトルを入力するみたいです。タイトルを入力します。
Slug というのはやはり自動で入力され変更ができないようです。英語のところがいい具合に入りました。
WordPressのようにビジュアルでみやすいテキスト入力がありますが、画像とかを追加する機能は現時点ではないようです。
ソースコードを直接入力するモードもあるので imgタグを入力すればいけます。
どんな感じに表示されてるか見てみます。
といっても表示側は基本ゴリゴリ作る用のCMSのようなので参考程度です。
(WordPressみたいにそのまま使うものじゃないみたいです。トップにメールアドレスと初期パスワードありますし)
一覧の雰囲気
詳細の雰囲気
感想
ベースがexpressなのでexpressがわかれば感覚で表示部分は変えることができそうです。
管理画面もカスタマイズができるようなので今後挑戦していきたいです。WordPressのようになんでもは難しいようですが。。。
まだ出たばかりのCMSのようなのでこれからが楽しみです。