INTER-Mediatorのハンズオン - セッション5: ブログ

+ 作成日 2017/11/25
+ 20分
+ YouTube: https://youtu.be/JnbpQRFIEWQ
+ Doc:https://qiita.com/motofumi/items/57583c2b28d0d11a1a9d

# はじめに
INTER-Mediatorでは、ハンズオンが5つ用意されています。セッション5: ブログを作成します。データベースは、MySQL(MariaDB)で行います。

# ゴール
トライアル用のページファイル(page05.html)と定義ファイル(def05.php)を編集してブログのページを作成し、期待通り表示できれば完成です。なお、使用するデータベースのスキーマは用意されています。

![スクリーンショット 2017-11-25 12.48.33.png](https://qiita-image-store.s3.amazonaws.com/0/54439/93074e72-7793-a473-c6b2-69884ad4aee0.png)

![スクリーンショット 2017-11-25 12.57.27.png](https://qiita-image-store.s3.amazonaws.com/0/54439/e60d2d85-16e2-6ef4-d6e4-b515599a0c88.png)



# 前提条件
* [INTER-Mediatorをはじめよう - バーチャルマシンの準備](http://qiita.com/motofumi/items/ff94924a820e9c05b0c8)でバーチャルマシンが用意されていること。
* ターミナル.appでコマンドを入力したことがあること。


# 手順
INTER-Mediatorサイトの[ハンズオンセッション手順書](http://inter-mediator.info/ja/for-novices/handson.html) に沿って作成してあります。手順は、手順書を見ながら行い、編集内容の確認やコードのコピペはこちらから行うと便利です。


##5-0: リレーションのテーブルを確認する
ターミナル.appからVirtualマシンへアクセス
`$ ssh developer@192.168.56.101`
<img width="991" alt="スクリーンショット 2017-11-25 12.36.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/2407e017-c080-a584-bbdd-bbf8881a9bca.png">



MariaDBのテーブルにアスセスし、一覧を入手
chatテーブル
`$ mysql -u web -p test_db -e 'select * from chat;'`
<img width="991" alt="スクリーンショット 2017-11-25 12.37.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/909a2db5-6e49-6c02-b963-249608e17206.png">



chatテーブル(定義)
`$ mysql -u web -p test_db -e 'show full columns from chat;'`
<img width="1497" alt="スクリーンショット 2017-11-25 12.39.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/c61bf566-eb83-5226-3c74-22ca7ae8edde.png">



##5-1: ブログを作成する
<details>
<summary>def05.phpを編集</summary>定義ファイルの編集状況
</details>

`name: message`
`table: chat`
`view: chat`
`key: id`
`post-reconstruct: true`
`post-dismiss-message: 投稿しました`
`Query: [field: groupname, expression: IS NULL, value:]`
`Sorting: [field: postdt, direction: desc]`
`Validation: 
[field: user, rule: value != '', message: 入力してください。]
[field: message, rule: value != '', message: 入力してください。]
`

`name: comment`
`table: chat`
`view: chat`
`key: id`
`post-reconstruct: true`
`post-dismiss-message: 投稿しました`
`Relationship: [foreign-key: groupname, join-field: id, operator: =]`
`Sorting: [field: postdt, direction: desc]`
`Validation: 
[field: user, rule: value != '', message: 入力してください。]
[field: message, rule: value != '', message: 入力してください。]
`

`Formatters: [field: chat@message, converter-class: HTMLString]`

`db-class: PDO`
`dsn: mysql:host=localhost;dbname=test_db;charset=utf8mb4`
`user: web`
`password: password`
`Debug: false`



<details>
<summary>page05.htmlを編集</summary>\<html>タグ以下を次のコードに変更入する
</details>

```page05.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script type="text/javascript" src="def05.php"></script>
    <script type="text/javascript">
        INTERMediatorOnPage.processingBeforePostOnlyContext = function (node) {
            var dtString, nodeIds, idValue, aNode;
            dtString = INTERMediatorLib.dateTimeStringISO();
            nodeIds = INTERMediatorOnPage.getNodeIdsHavingTargetFromNode(node, "message@postdt");
            if (nodeIds.length > 0) {
                document.getElementById(nodeIds[0]).value = dtString;
            }
            nodeIds = INTERMediatorOnPage.getNodeIdsHavingTargetFromNode(node, "comment@message");
            if (nodeIds.length > 0) {
                aNode = node.parentNode.parentNode.parentNode;
                nodeIds = INTERMediatorOnPage.getNodeIdsHavingTargetFromNode(aNode, "message@id");
                idValue = document.getElementById(nodeIds[0]).value;
                INTERMediator.additionalFieldValueOnNewRecord = {};
                INTERMediator.additionalFieldValueOnNewRecord['comment'] = [
                    {field: "groupname", value: idValue},
                    {field: "postdt", value: dtString}
                ];
            }
            return true;
        };
    </script>
    <style>
        TEXTAREA {
            width: 400px;
            height: 60px;
        }
    </style>
</head>
<body>
<table>
    <tbody data-im-control="post">
    <tr>
        <th>From:</th>
        <td>
            <input type="text" data-im="message@user">
            <input type="hidden" data-im="message@postdt">
        </td>
    </tr>
    <tr>
        <td colspan="2">
            <textarea data-im="message@message"></textarea>
            <button data-im-control="post">投稿</button>
        </td>
    </tr>
    </tbody>
</table>
<table>
    <tbody>
    <tr>
        <td colspan="4">
            <hr/>
        </td>
    </tr>
    <tr>
        <th>From:</th>
        <td data-im="message@user"></td>
        <th>Date:</th>
        <td data-im="message@postdt"></td>
    </tr>
    <tr>
        <td colspan="4" data-im="message@message@innerHTML" style="background-color: #CCCCCC"></td>
    </tr>
    <tr>
        <td style="width: 50px; background-color: gray">Comment</td>
        <td colspan="3">
            <input type="hidden" data-im="message@id"/>
            <table>
                <tbody data-im-control="post">
                <tr>
                    <th>From:</th>
                    <td>
                        <input type="text" data-im="comment@user">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <textarea data-im="comment@message"></textarea>
                        <button data-im-control="post">投稿</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <table>
                <tbody>
                <tr>
                    <th>From:</th>
                    <td data-im="comment@user"></td>
                    <th>Date:</th>
                    <td data-im="comment@postdt"></td>
                </tr>
                <tr>
                    <td colspan="4" data-im="comment@message@innerHTML" style="background-color: #CCCCCC"></td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
```


##5-2: ブログの動作を確認する
### 初期状態
最初は単にフォームだけが表示されています。「投稿」ボタンをクリックしても、何も入力しないと警告が表示され、メッセージは追加されません。
![スクリーンショット 2017-11-25 12.49.53.png](https://qiita-image-store.s3.amazonaws.com/0/54439/0608bbe5-5db3-da89-edf7-3e7d389c01d3.png)
![スクリーンショット 2017-11-25 12.49.57.png](https://qiita-image-store.s3.amazonaws.com/0/54439/21795d75-e351-bdfa-6e6d-76dadd191e80.png)




### 初投稿
Fromに『田中』、messageに『皆様、忘年会の予約は完了しました。』を入力して「投稿」ボタンをクリックします。入力したメッセージが表示されましたが、同時に投稿ボタンを押した日時も設定されています。
![スクリーンショット 2017-11-25 12.51.01.png](https://qiita-image-store.s3.amazonaws.com/0/54439/e868ba7b-9910-3143-02aa-71324bbdf98a.png)
![スクリーンショット 2017-11-25 12.51.23.png](https://qiita-image-store.s3.amazonaws.com/0/54439/33548264-b22b-a50f-413a-17f3a9ec83a8.png)





### 追加投稿
ページの最初のテキスト領域を利用して、メッセージを3つほど入力します。メッセージは、日付の逆順に表示されています。

+ Fromに『田中』、messageに『鈴木さん、普通自動車の運転免許証もってますか？』を入力
+ Fromに『田中』、messageに『皆様、月末の報告書提出は25日までにお願いします。』を入力
+ Fromに『田中』、messageに『山田さん、iPad修理担当者の名前教えてもらえますか？』を入力

![スクリーンショット 2017-11-25 12.53.33.png](https://qiita-image-store.s3.amazonaws.com/0/54439/35234e4d-028c-0c0c-b1e2-5147a598115a.png)




### 追加投稿（2個目のメッセージへ）
2つ目のメッセージの直後にも、Formとメッセージの記入部分があります。こちらにも入力をして「投稿」ボタンをクリックします。こちらは、該当メッセージへのコメントになります。いくつかコメントを追加してください。コメントも、日付が自動的に設定され、日付の逆順で表示されます。異なるルートメセージにコメントを記入し、正しいメッセージの後に付随していることを確認します。

+ Fromに『鈴木』、messageに『持っていますが、オートマ限定です。』を入力
+ Fromに『田中』、messageに『問題ありません。営業車はオートマのみです。来週の納品の際、運転お願いします。』を入力
![スクリーンショット 2017-11-25 12.57.27.png](https://qiita-image-store.s3.amazonaws.com/0/54439/4684154f-11ab-8e9e-dfc5-52b838457686.png)



メッセージはテキストエリアです。改行を含むメッセージを入力してみてください。正しく、改行も表示されています。

+ Fromに『鈴木』、messageに『しばらく運転してません。[改行]気をつけて運転します。』を入力
<img width="750" alt="スクリーンショット 2017-11-25 12.58.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/fbce6496-151a-01ab-770f-11a7c1c82676.png">
<img width="746" alt="スクリーンショット 2017-11-25 12.59.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/a29fb1e7-5ba9-f309-c8ea-7b64cfc1105d.png">





メッセージにJavaScriptのプログラムを、たとえば「\<script\>alert(9)\</script\>」のように記述して投稿してみます。タグはHTMLのタグとして解釈はされず、記述した通りの文字列で表示されます。

+ Fromに『田中』、messageに『\<script\>alert(9)\</script\>』を入力

<img width="746" alt="スクリーンショット 2017-11-25 13.00.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/d8349a8c-ba00-bda8-c435-f7d28f702f7f.png">
<img width="747" alt="スクリーンショット 2017-11-25 13.00.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/156b3639-630e-c4a1-3f68-49ff364a049e.png">



##5-3: アプリケーションを改造する
### 内部コメントの並び順を日付が古い順に変更する（facebook風）
1. 現状を確認する
<img width="742" alt="スクリーンショット 2017-11-25 13.02.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/5c520147-0ab4-a640-09c1-a6f060a05be6.png">

2. 定義ファイルを変更する
Commentコンテキスト、Sortingのdirectionをdescからascに変更する
![スクリーンショット 2017-11-25 13.11.08.png](https://qiita-image-store.s3.amazonaws.com/0/54439/f413a401-49df-a0ec-0e1f-d7e5a56f166e.png)

3. 変更後の動作を確認する

<img width="804" alt="スクリーンショット 2017-11-25 13.12.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/5d9c0fa7-950e-e9b5-b9a1-be3cb562b4bb.png">



### 
### 内部コメントの一番最後にコメント欄を移動する（facebook風）
1. 現状を確認する
<img width="804" alt="スクリーンショット 2017-11-25 13.12.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/91328b4e-5ad0-0e8b-7e37-b6d86b931e8b.png">
2. ページファイルを変更する
<table>タグの位置を入れ替える。
![スクリーンショット 2017-11-25 13.17.01.png](https://qiita-image-store.s3.amazonaws.com/0/54439/58d67ee7-4cbf-6c83-c960-eead00de0d5c.png)
![スクリーンショット 2017-11-25 13.17.21.png](https://qiita-image-store.s3.amazonaws.com/0/54439/a9902f07-ffd7-06ed-ffcf-3cda27614470.png)



3. 変更後の動作を確認する
<img width="809" alt="スクリーンショット 2017-11-25 13.17.35.png" src="https://qiita-image-store.s3.amazonaws.com/0/54439/d32b505a-5cd3-32ed-c23b-4fbc8654f1d6.png">