ラック
Home > CMS > 記事 > 2018年9月 > 吾は悪事も一言、善事も一言、言い離つ神

吾は悪事も一言、善事も一言、言い離つ神

カテゴリ: 未分類

先日、Node.jsで実行できるHTMLファイルを作るというQiitaの記事に触発されてサーバ上でmarkdown-pdfを実行するための「fuguruma」というものを作りました。

先の記事のプログラムについて、個人的に2つほど気になりました。

  • コメントアウトされているとはいえ、ソースがそのままクライアントサイドに渡るのでサーバサイドの処理がクライアントサイドに見えてしまう
    • レスポンスを返す直前にコメントを除去するフィルタを噛ませれば解決しそうではある
  • Node.jsを要求されるので、一般的なレンタルサーバでは動作しない

前者は入れ子で書いた通り解決方法がありそうな感じがするので良いのですが、後者について考えたとき「PHPで書けば良いのでは?」と思い至りました。ついでにPHPならば処理はクライアントサイドには渡らないので隠蔽できる、と。

何故ここまで考えたかと言うと、ちょっとしたネタを書き留めておくメモ帳的な簡易CMSが欲しいという極めて個人的なニーズがあったためです。

そこで、1ファイルで動作するPHPの簡易CMSを作ってみました。

使うだけならばdist/index.phpだけレンタルサーバにアップロードし、そのURLにアクセスすればインストールが始まります。

cssやjsを含め、ソースをカスタマイズする場合はnpmでパッケージをインストールし、gulpでビルドしてください。

さて、適当なレンタルサーバにアップロードしてURLにアクセスすると、以下のようなインストール画面になります。

インストール画面

インストール画面2

サイト名とユーザID、パスワードを入力して「送信する」ボタンをクリック。

インストール完了画面

インストール完了。

最初のフロントページ

最初はコンテンツがないので「何もない」という表示。ヘッダ右上のログインから先ほどのユーザIDとパスワードを入力してログイン。

最初の管理画面

管理画面はタブで切り替え。

  • コンテンツ管理
    • コンテンツの新規作成・編集・削除
  • サイト設定
    • サイト名などの設定
  • アカウント設定
    • ユーザIDやパスワードの変更など
  • バックアップ
    • ファイル(index.php)をダウンロード。1ファイルなのでこれだけでバックアップになる

サイト設定画面

サイト設定はサイト名やサイトの説明のほか、メインカラーも設定できます。メインカラーはヘッダ左上のサイト名や見出しのアンダーライン、またVivaldiやAndroid Chromeで閲覧した際のアドレスバーの背景色を変更するmeta theme-colorも設定します。

OPG対応

テストでは画像は設定しませんでしたが、一応OGPにも対応しているのでOGPの欄を埋めてFTP等で画像をアップロードしてそのURLを指定してあげればきちんと表示させることができるはず。

アカウント設定画面

アカウント設定は上記の通りユーザIDやパスワードの変更。

バックアップ画面

バックアップも上記の通り。

コンテンツの新規作成画面

コンテンツの作成や編集はモーダルウインドウで。

コンテンツ一覧画面

作成するとテーブルで一覧表示します。

フロントページ画面

コンテンツができるとカード形式で表示。

ちなみに表示部分はほぼBootstrapとFont Awesomeです。CDN利用なのでindex.phpには含まれません。……というのはちょっと卑怯か。

と、一応こんな感じの機能を備えた作りにしました。

レンタルサーバで動かすと自身のファイルの読み書きに時間がかかってしまい、反映前にページ遷移してしまうことがあったのでやっぱり1ファイルだと色々厳しいな、ということを改めて感じました。

一方で、頑張ればここまでできるという一つの指標になったとも思います。

以下、参考にした記事など。

参考

1ファイルでどうにかするというアイディアの源泉

ログイン

パスワード

PHPのファイル操作

PHPでファイルダウンロード

タグ: その他

 



関連する記事一覧