読者です 読者をやめる 読者になる 読者になる

かすてらすねお。(hateblo)

見聞録的ななにか。

OpenPNEでいちいち管理画面行かずにDropboxでCSSとJSを管理する法

OpenPNEは独自にJavaScriptCSSを設定できるけど、管理画面にログインしてコピペして送信するのが面倒くさい。そこで、Dropboxにファイルを置いてOpenPNEに参照させることで、更新の度に管理画面に行かなくて済むようにする。

OpenPNEとは

synfony製のmixiライクなCMS

公式サイト(画像クリックで飛びます)

f:id:suneo3476z_tn:20130721111445p:plain

JavaScript

従来の方法では、JavaScriptのコードは、「デザイン設定」>「HTML挿入」>「HTML挿入D」に書く。Dは<body>終了タグの直前に埋め込むので、ページの表示を遅延させずユーザビリティを下げない。

f:id:suneo3476z_tn:20130721112848p:plain

でも、いちいちコードをコピペしてsubmitするのはとても煩わしいので、DropboxのURLを参照するようにした。これ以降、ローカルのjsファイルを更新するだけでよくなる。

f:id:suneo3476z_tn:20130721113426p:plain

注意として、参照するjsファイルに<script>タグは付けないこと。実際にやってみると、二重にタグが付いてエラーになる。FirefoxFirebugのコンソールだとこんな感じ。

f:id:suneo3476z_tn:20130721114131p:plain

もうひとつ、参照するファイルは必ずPublicフォルダに入れること。でないと、内容を直接参照できない。その問題について取り上げているサイトがこちら。

おちくんのライフハックBLOG: DropBoxのPublicフォルダと共有リンク

CSS

従来の方法では、「デザイン設定」>「カスタムCSS」に書く。こちらもJSと同様煩わしい。

f:id:suneo3476z_tn:20130721114548p:plain

こいつもDropboxから参照させるために、「デザイン設定」>「HTML挿入」>「HTML 挿入 (HTML head 内)」に書く。

f:id:suneo3476z_tn:20130721114740p:plain

こっちは<style>タグが欲しい。あともちろんファイルはPublicフォルダに入れること。

まとめ

JSとCSSのファイルをDropboxのPublicフォルダに置いて、公開URLをそれぞれHTML挿入DとHTML 挿入(head内)から外部参照する。JSは<script>タグいらない。あとはローカル側でファイルを更新するだけで(厳密にはDropboxの同期が完了する瞬間に)OpenPNE側も勝手に参照してくれる。