![Node.jsベースのCMS calipsoを動かしてみる](https://devio2023-media.developers.io/wp-content/uploads/2013/09/nodejs.png)
Node.jsベースのCMS calipsoを動かしてみる
表題の通りですが、インストールして動かすにあたって若干ハマったところがありますので、備忘録として残しておきたいと思います。
(WYSIWYGエディタの組み込み方法とRole設定追加後の編集 で落ちるの回避方法︶
コマンド起動したウィンドウにInstallation Passwordが表示されるので、Installation Passwordをコピーをして、貼付けます
Installation Passwordの入力が成功すると次画面が表示されますので Create Database をクリックします。(mongodbは事前に起動させておいて下さい︶
次にDB作成が成功すると下記の画面が表示されますので、Adminユーザの情報を入力してCreate Admin をクリックします。
最後に下記の様にモジュールの選択画面が表示されますので必要なものにチェックをつけてセットアップを完了させます。︵当方はAloha Text Editorをチェックしました。︶
完了すると下記画面に遷移します。
これでインストール&セットアップは完了です。
見覚えのあるスキンになりました。
左側にある Create ボタンをクリックして、コンテンツのタイプを選択して Next ボタンックをクリックします。
するとCMSにありがちな画面が表示されますので、必要な部分に入力して登録します。
ただ・・・この状態だとHTMLタグを自身で入れて書く必要があり、コンテンツ登録の敷居が一気に上がってしまいます。そこでWYSIWYGエディタを組み込むことにします。
Aloha Rich Text EditorもModuleで有効にしてあるので、ログインした状態でTOPページにアクセスすると黄色い枠が表示されるブロックは直感的にコンテンツの編集ができます。
下記は編集状態の画面
次に登録したサンプル1のリンクをクリックして再編集しようとすると・・・下記のエラーがコンソールに出てNodeが落ちてしまいます。
動作環境
記載時点のバージョンは下記の通りになります。 (一)MacOS X 10.8.5 (二)Node.js 0.10.29 (三)npm 1.4.16 (四)mongodb 2.4.10 (五)calipso 0.3.50インストール&セットアップ
calipsoのインストールは非常に簡単ですが、前準備としてNode.js,mongodb,npmを先にインストールしておく必要がありますのでインストールしておきましょう 下記の/Library/WebServer/Documents/MySiteは適宜変更して下さい。$ sudo npm install calipso -g $ sudo calipso site /Library/WebServer/Documents/MySite $ cd /Library/WebServer/Documents/MySite $ calipso servercalipsoをバックグラウンド起動する場合はcalipso server server.port=3000 &で可能です。 calipsoサーバーを起動するした後にブラウザを起動してURLに http://127.0.0.1:3000 を入力して、calipsoにアクセスします。そうすると下記の様な画面に入って初回アクセス時のセットアップ画面が表示されます。
![calipso_2](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_2-640x547.png)
![calipso_1_1](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_1_1-640x577.png)
![calipso_3](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_3-640x547.png)
![calipso_4](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_4-640x547.png)
![calipso_5](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_5-640x652.png)
![calipso_7_1](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_7_1-640x415.png)
スキンを変えてみる
先ほどセットアップ画面で作成したAdminユーザでログインして、メニューにある ADMINISTRATION / Core / Configuration を選んでThemeの Frontend Theme と Admin Theme のところをcleanslateからcalipsoに変更してみます。![calipso_7_2](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_7_2-640x415.png)
![calipso_11](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_11-640x421.png)
コンテンツを登録してみる
CONTENT MANAGEMENTメニューからコンテンツを選択すると現在登録されているコンテンツの一覧が表示されます。![calipso_12](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_12-640x421.png)
![calipso_13](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_13-640x415.png)
calipsoにWYSIWYGエディタを組み込む
CMSにつきもののWYSIWYGエディタがデフォルトでは入ってない?ようなので、ここではTINYMCEを組み込んでみます。 TINYMCEのページでTinyMCE 4.1.0を/tmpにダウンロードしました。$ cd /tmp $ unzip tinymce_4.1.0.zip $ cd tinymce $ cd js $ sudo cp -rp tinymce /Library/WebServer/Documents/MySite/themes/downloaded/calipso/public/js $ cd /Library/WebServer/Documents/MySite ←calipso site コマンドで指定したパス $ cd themes/downloaded/calipso/templates/ $ sudo vi default.htmldefault.htmlの</body>の下にtinymce.initを追加します
</body> <script type="text/javascript" src="/js/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "textarea", theme: "modern", width: 850, plugins: [ "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker", "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking", "save table contextmenu directionality emoticons template paste textcolor" ], content_css: "css/content.css", toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons", style_formats: [ {title: 'Bold text', inline: 'b'}, {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, {title: 'Example 1', inline: 'span', classes: 'example1'}, {title: 'Example 2', inline: 'span', classes: 'example2'}, {title: 'Table styles'}, {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} ] }); </script> <%- scripts %> </html>編集が終わったらdefault.htmlを保存して、calipsoサーバを再起動します。 CONTENT MANAGEMENTメニューからコンテンツを選択して、左側にある Create ボタンをクリックしてコンテンツタイプを選択して Next をクリックします。すると下記画面のようにWYSIWYGエディタが出てきます。
![calipso_15](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_15-640x621.png)
![calipso_16](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_16-640x560.png)
![calipso_17](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_17-640x566.png)
calipso管理画面でRoleを追加してみる
インストール直後はAdministrator、Contributor、Guestの3つが定義されていますが、独自のRoleを追加してみようと思い、適当に2つほどRoleを追加しました。![calipso_18](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_18-640x397.png)
30 Jun 19:26:16 - error: Attempting to add menu item with invalid params, please update your module for the 0.3.0 api, path: return /Library/WebServer/Documents/MySite/node_modules/mongoose/lib/utils.js:419 throw err; ^ TypeError: Cannot read property 'permit' of undefined at CalipsoMenu.addMenuItem (/Library/WebServer/Documents/MySite/lib/core/Menu.js:83:14) at finish (/Library/WebServer/Documents/MySite/modules/core/user/user.js:245:29) at Promise.<anonymous> (/Library/WebServer/Documents/MySite/modules/core/user/user.js:273:7) at Promise.<anonymous> (/Library/WebServer/Documents/MySite/node_modules/mongoose/node_modules/mpromise/lib/promise.js:162:8) at Promise.emit (events.js:95:17) at Promise.emit (/Library/WebServer/Documents/MySite/node_modules/mongoose/node_modules/mpromise/lib/promise.js:79:38) at Promise.fulfill (/Library/WebServer/Documents/MySite/node_modules/mongoose/node_modules/mpromise/lib/promise.js:92:20) at /Library/WebServer/Documents/MySite/node_modules/mongoose/lib/query.js:1833:13 at model.Document.init (/Library/WebServer/Documents/MySite/node_modules/mongoose/lib/document.js:251:11) at completeOne (/Library/WebServer/Documents/MySite/node_modules/mongoose/lib/query.js:1831:10)これを回避するためにuser.jsを修正します。
$ cd /Library/WebServer/Documents/MySite/modules/core/user ←インストールしたディレクトリに適宜変更して下さい。 $ vi user.js245行目の記述
res.menu.adminToolbar.addMenuItem({name:'Delete Role', path:'return', url:'/admin/roles/' + role._id + '/delete', description:'Delete role ...', security:[], icon:"icon-close"});を
res.menu.adminToolbar.addMenuItem(req,{name:'Delete Role', path:'return', url:'/admin/roles/' + role._id + '/delete', description:'Delete role ...', security:[], icon:"icon-close"});としてaddMenuItemの引数に req を追加します。 これで再度calipso serverを起動してRoleの編集してみると無事編集画面が開きます。
![calipso_19](https://devio2023-media.developers.io/wp-content/uploads/2014/06/calipso_19-640x397.png)