@keitakawamoto への説明資料

[yusukesasaki-com]

ログインまで

１ まずはデータベースを作成します。

---

２ 次にGitHubからダウンロードしたzipを解凍し、cmsフォルダを ルートディレクトリ にアップして .env.exampleファイルを .env にリネームし、データベースの情報等を書き込みます。
http://hogehoge/cms/ にアクセスするとデータベースにテーブルが作成され、ユーザー登録画面にリダイレクトされます。

---

３ ユーザー登録画面 http://hogehoge/cms/auth/register/

名前・メールアドレス・パスワードを登録します。

---

４ ログイン画面 http://hogehoge/cms/auth/login/

ユーザー登録直後はログインされた状態になりますが、次回からは http://hogehoge/cms/ にアクセスするとログイン画面にリダイレクトされ、メールアドレス・パスワードでログインします。

[yusukesasaki-com]

記事登録まで

１　アイテム一覧画面 http://hogehoge/cms/items/

ログイン後、http://hogehoge/cms/items/ にリダイレクトされます。
「アイテム」はカテゴリーのようなもので、例えば「お知らせ」「イベント情報」等を作成し、それぞれに記事を作成できます。

---

２　アイテム作成画面 http://hogehoge/cms/items/create

メニューのAdd Item から遷移します。項目はタイトルのみです。

---

３　アイテム編集・削除

アイテム名は「編集」から変更が可能です。また「削除」クリックで削除されます。その場合、そのアイテム内に存在する記事まで一緒に削除されます。アイテムをドラッグ・ドロップすることで順番を変更できます。

---

４　記事一覧画面 http://hogehoge/cms/items/posts/{id}

アイテム一覧画面のアイテムのタイトルをクリックするとそのアイテムの記事一覧画面に遷移します。

---

５　記事投稿画面 http://hogehoge/cms/posts/create/{id}

記事一覧画面の「+」をクリックすると記事投稿画面に遷移します。
項目は、タイトル・本文・投稿日・公開状態(下書・公開)です。

---

６　記事編集・削除

記事は「編集」から変更が可能です。また「削除」クリックで削除されます。
公開日順に並んでいます。

[yusukesasaki-com]

今から追加する機能

追加中の機能

１　アイテム一覧画面のアイテム毎にボタンを3つ追加
　↓
・リスト用 呼び出しコードをモーダルウィンドウ的なやつで表示
(ほぼ完了)

・一覧用 呼び出しコードをモーダルウィンドウ的なやつで表示

(未着手)

・個別記事用 呼び出しコードをモーダルウィンドウ的なやつで表示
(作成中)

[yusukesasaki-com]

今の画面はぶっ壊してください。

よろしくお願いします。

HTML

/cms/resources/views/ 内のファイル

各ページの基礎となっているファイル(html、head、body等)
/cms/resources/views/layouts/default.blade.php

メインメニュー
/cms/resources/views/layouts/nac.blade.php

その他の画面はURLと連動しています。
(例)
アイテム一覧画面 http://hogehoge/cms/items/
/cms/resources/views/items/index.blade.php

記事一覧画面 http://hogehoge/cms/items/posts/{id}
/cms/resources/views/posts/index.blade.php

記事投稿画面 http://hogehoge/cms/items/create/{id}
/cms/resources/views/posts/index.blade.php

CSS

/cms/css/ 内のファイル

[keitakawamoto]

@yusukesasaki-com と話した結果、コーディングする余裕がないので、画面提案のみ行ってパスすることになった。

[yusukesasaki-com]

アイテム一覧にモーダル表示用リンク追加

[yusukesasaki-com]

#5 (comment)

リスト用は ↓ みたいな感じのやつ。

一覧用は ↓ みたいな感じのやつ。

[keitakawamoto]

さてと...（ゆらり）

[keitakawamoto]

概要再確認

• 名称： PHP-SimpleCMS-provisional- 改め MitarashiCMS（ @yusukesasaki-com + 関係者で命名。 @yusukesasaki-com の甘い物好きが由来）
• 説明：専門知識がなくても、更新が必要な部分だけ簡単に設置・運用できるCMS
  • 「更新部分だけ出力されるモジュール（ページに埋め込み）」と 「記事を書く管理画面」のふたつを提供する
  • だからユーザーはページデザインに関してはいつも通りhtml/cssだけでよい
  • 出力部分の埋め込みさえすればいい
  • こっち側で用意するものは
    • 出力結果（記事）
    • 投稿・記事管理のための管理画面
  • このふたつをフレームワークで用意するだけでユーザーが触る部分は一切関係ない（html/cssでいつもどおり）

root
  ├── MitarashiCMSディレクトリ（ユーザー触らない）
  ├── ユーザーの作ったページ1
  ├── ユーザーの作ったページ2
  ├── ユーザーの作ったページ3（ここに記事のタグをユーザーが埋め込み）
  └── ユーザーの作ったページ4

• 「root/sasaki/login.php からどうぞ〜」みたいな案内
• sasakiディレクトリのものをフレームワークで作る（管理画面とか）

追記事項

• 記事は複数設置できるように。(例えばブログ・ニュース・Q&A等。以下仮にアイテムとする)
• アイテム毎に「リスト用」「一覧ページ用」「個別ページ用」の出力画面を作る。
  • 「リスト用」
    日付とタイトルのみを表示 - 1ページに表示する件数を指定できるようにする
  • 「一覧ページ用」
    日付とタイトルと記事抜粋を表示 - 1ページに表示する件数を指定できるようにする
  • 「個別ページ用」
    1ページに1記事を表示
• 各出力画面はユーザーが作ったページからrequireで呼び出す。(呼び出し用のコードは管理画面で生成する)
• ページングはURLにパラメータを渡して$_GETで受け取る -> requireのURLに渡す。(もしくはajax? https://goo.gl/ynX8bQ)
• 一覧 <--> 個別ページ の画面遷移もURLにパラメータを渡して$_GETで受け取る。

ユーザーの行動

ユーザーはみたらしをclone
自分のプロダクトに移動

root
  ├── MitarashiCMSディレクトリ
  ├── ユーザーの作ったページ1
  ├── ユーザーの作ったページ2
  ├── ユーザーの作ったページ3
  └── ユーザーの作ったページ4

このような形に。
その後、みたらしディレクトリの中にアクセスし初期設定

画面

初期設定画面

　
サイト構築後、記事登録を行うには要ログイン。WordPressと同じ。
初期設定画面では管理画面へログインするためのメール・パスの登録を行う。

名前はいらない。カットする

ログイン画面

メモ：

MitarashiCMSという名前は素晴らしい

[2:09] 
しかしユーザーが自分のサイトに実装するときは無印良品のようにブランド色は真っ白であってほしい

[2:10] 
ので、インストール後にMitarashiCMSのロゴなどブランド色は入れる必要ない？

[2:10] 
それともブランド色がユーザーのサイトイメージを邪魔しなければ

[2:11] 
それでいいか

[2:11] 
すいません自己解決しました。

ホーム画面

アイテム=記事 ちょっと違うようなので要確認。
#5 (comment) をよく見る
アイテムという表記はわかりにくいのでやめる

(ログイン画面からログインボタンで画面遷移)

• アイテム一覧(検索機能)(並び替え機能)
  • アイテム(新規記事作成ボタン)(記事一覧ボタン)(出力用コード作成ボタン * 1ページ表示件数指定可能 *)(削除ボタン)
• アイテム新規作成ボタン

アイテム作成画面

(ホーム画面からアイテム新規作成ボタンで遷移)

• アイテム名入力
• アイテム作成ボタン

記事一覧画面

(ホーム画面のアイテムから記事一覧ボタンで遷移)

• (出力用コード作成ボタン * 1ページ表示件数指定可能 *)(削除ボタン)
• 記事一覧(検索機能)
  • 記事(編集ボタン)(削除ボタン)

記事新規登録画面

(ホームのアイテムから新規記事作成ボタンで遷移)

• タイトル
• 公開日時
• 記事本文(WYSIWYGエディタ * 要選定 *)
• プレビューボタン
• 下書きボタン
• 公開ボタン

記事編集画面

(記事一覧画面の記事から編集ボタンで遷移)

• タイトル
• 公開日時
• 記事本文(WYSIWYGエディタ * 要選定 *)
• プレビューボタン
• 下書きボタン
• 公開ボタン

モーダル

• @keitakawamoto への説明資料 #5 (comment)