「BODY」を含む日記 RSS

はてなキーワード: BODYとは

2018-12-09

Nginxの設定メモ

解決方法

参考
やったこ

Ubuntuで以下のようにコマンドを実行してみました。

管理者になる
sudo su -
Nginxインストール
apt install nginx
Nginx関係場所確認
whereis nginx

nginx: /usr/sbin/nginx /usr/lib/nginx /etc/nginx /usr/share/nginx /usr/share/man/man8/nginx.8.gz

Nginx設定ファイルを追加
cd /etc/nginx
ls -la
cd /etc/nginx/conf.d
touch default.conf
vi default.conf

default.confに以下のような内容をコピペしました。

server {
        listen 8000 default_server;
        listen [::]:8000 default_server ipv6only=on;

        root /var/www/html;
        index index.html index.htm;
}
Nginx再起動
nginx -s reload
index.html作成

「/var/www/html」に「index.html」というファイルを作ります

内容を以下のようにして保存します。

<html>

 <head>

  <title>TEST</title>

 </head>

 <body>

  <h1>TEST PAGE</h1>

 </body>

</html>

Chrome確認

WindowsChromeを起動します。

http://localhost:8000」にアクセスします。

上記index.htmlが表示されました。

 

結論

Nginxの設定が抜けてました。

 

アドバイスどうもありがとうございました。

2018-11-10

増田プログラマー養成講座 その20 SQLデータの削除

前回は、SQLデータ更新をやりました。

今回は、SQLデータの削除をやりましょう。

 

メッセージの削除

基本は、同じなので前回やった更新処理をちょっと変えれば削除もすぐできます

 

投稿されたメッセージを削除する機能を、Webページに付けてみよう。

 

削除ページにジャンプするリンク

前々回作ったメッセージの一覧の中に、削除ページにジャンプするリンクも入れておいた。

<td><a href="welcome/delete/<?php echo $item['id']; ?>">削除</a></td>

という1行が削除ページにジャンプするためのリンクになる。

ブラウザーHTMLソースを見ると、ここが以下のようなHTMLに書き換わってる。

<td><a href="welcome/delete/2">削除</a></td>

これは「メッセージID番号が2のメッセージ」を削除対象にして、削除ページにジャンプする。

 

Controllerの改造

ユーザーが「http://localhost/waf/welcome/delete/2」というURLで、削除ページにアクセスしたら、コントローラーで「2」を受け取って使いたい。

CodeIgniterでは、URL文字列を解析して、使うことができる。

以下のようにコントローラーを改造してみよう。

 

// 削除画面

public function delete($id = '')

{

 echo "ID=".$id;

 $this->load->view('chat_delete');

}

 

Controllerの改造の解説

delete()メソッド引数で、URL中の「2」の部分を受け取れる。

これは前回の編集ページ(更新の処理)と同じ。

「$id = $this->uri->segment(3);」でも受け取れる。

 

Viewの改造

削除ページでは、確認する質問を入れてみよう。

ユーザーに「本当に削除しますか?」みたいな注意喚起をしておきたい。

 

ファイルの内容を以下のように編集する。

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>削除</h2>

  <p>以下のメッセージを削除しますか?</p>

  <form action="welcome/delete" method="post" accept-charset="utf-8">

   <?php if (isset($talk)): ?>

   <p style="background-color:lightpink"><?php echo $talk['message']; ?></p>

   <input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

   <input type="hidden" name="action" value="delete">

   <?php else: ?>

   <p>※該当するメッセージがありません。(または削除済です。)</p>

   <?php endif;?>

   <button>削除する</button>

  </form>

  <p><a href="welcome/index">戻る</a></p>

 </body>

</html>

 

Viewの改造の解説

<p style="background-color:lightpink"><?php echo $talk['message']; ?></p>

削除するメッセージを色付きで強調して、ユーザー確認してもらう。

 

<input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

コントローラー削除対象メッセージID番号を送るため、inputタグの「type="hidden"」でメッセージID番号を仕込んでおく。

 

Controllerの改造

ファイルの内容を以下のように編集する。

// 削除画面

public function delete($id = '')

{

 $id = $id ? $id : $this->input->post('id');

 $action = $this->input->post('action');

 if ($action == 'delete') {

  $this->chat_model->delete_message($id);

 }

 $data['talk'] = $this->chat_model->read_message_by_id($id);

 $this->load->view('chat_delete', $data);

}

 

Controllerの改造の解説

やってることは、前回のデータ更新場合とほぼ同じ。

$this->chat_model->delete_message($id);

で、モデルに用意したデータ削除用メソッドを呼び出しているだけ。

次は、モデルdelete_message()メソッドを用意しよう。

 

Modelの改造

ファイルの内容を以下のように編集する。

// Delete

public function delete_message($id = 0)

{

 $sql = "DELETE FROM talk WHERE id = ?";

 $param = array($id);

 $this->db->query($sql, $param);

 return $this->db->affected_rows();

}

 

Modelの改造の解説

SQLの「DELETE」を使えば、指定したレコード(1件分のデータ)を削除できる。

DELETE FROM talk WHERE id = ?」で、talkテーブルmessageid指定して削除している。

 

データを削除した後の挙動は、メッセージID番号がなくなるので、削除ページに表示できるメッセージデータがなくなる。

(例)id=2のデータを削除したら、SQLで「SELECT * FROM talk WHERE id = 2」を取得しても、空のデータデータがない状態

その場合は、

<p>※該当するメッセージがありません。(または削除済です。)</p>

と表示させてる。

 

まとめ

以上で、SQLの「DELETE」を使ったデータの削除ができた。

長々と説明したが、今回の大事な点は、SQLの「DELETE」の使い方だ。

 

以上で、MVCフレームワークを使ったOOPの使い方とSQLの使い方を見てきた。

SQLSQLだけで説明したほうが良かったね!MVCフレームワーク説明SQL説明が混在すると要点が分かりづらくなる?)

ちょっと失敗だったかも。m(__)m)

 

次回は、データベースの設計について学んでみよう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミング練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベースの参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き)

anond:20181104161900 増田プログラマー養成講座 その17 Webアプリの骨組み

anond:20181104233013 増田プログラマー養成講座 その18 SQLデータの追加と取得

anond:20181110120715 増田プログラマー養成講座 その19 SQLデータ更新

anond:20181110182445 増田プログラマー養成講座 その20 SQLデータの削除 ←★今ここ★

anond:20181111205255 増田プログラマー養成講座 その21 データベース設計 (1)要件定義

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

増田プログラマー養成講座 その19 SQLデータ更新

前回は、Webアプリの骨組み(スケルトン)に、SQLデータの追加と取得をやりました。

今回は、SQLデータ更新をやりましょう。

 

メッセージ更新

 

編集ページにジャンプするリンク

前回作ったメッセージ一覧に、[編集]のリンクも入れておいた。

<td><a href="welcome/update/<?php echo $item['id']; ?>">編集</a></td>

という1行の部分。

[編集]をクリックすると、編集用ページにジャンプする。

ブラウザーHTMLソースを見ると、以下のようなHTMLになってるはず。

<td><a href="welcome/update/2">編集</a></td>

これは「メッセージID番号が2」を対象にして、編集ページにジャンプすることを意味する。

 

Controllerの改造

編集用ページのコントローラーを作ろう。

「http://localhost/waf/welcome/update/2」というURL編集ページにアクセスしたら、メッセージID番号の「2」を受け取れるようにしたい。

URL文字列を処理して「2」を取り出せるようにしよう。

 

// 更新画面

public function update($id = '')

{

 echo "ID=".$id;

 $this->load->view('chat_update');

}

 

CodeIgniterでは、URLから文字列を取り出す方法がいくつか用意されている。

  1. 「update($id = '')」のようにメソッド引数「$id」を用意すれば、「2」の部分を取り出せる。
  2. 引数を使う以外の方法も用意されていて、「$id = $this->uri->segment(3);」のように書けば、「2」の部分を取り出せる。

// 更新画面

public function update()

{

 $id = $this->uri->segment(3);

 echo "<hr> ID=".$id;

 $this->load->view('chat_update');

}

 

Controllerの改造の解説

CodeIgniterで、URL文字列から特定部分の文字列を取り出す方法を見ておこう。

 

例えば、「http://localhost/waf/welcome/update/aaa/bbb/ccc」というURLアクセスしたときCodeIgniterではURL中の「aaa」「bbb」「ccc」という部分は、以下のようにして取り出せる。

$seg1 = $this->uri->segment(1); // → 1番目のURL文字列:「welcome」=コントローラークラス

$seg2 = $this->uri->segment(2); // → 2番目のURL文字列:「update」=クラスの中のメソッド

$seg3 = $this->uri->segment(3); // → 3番目のURL文字列:「aaa」の部分

$seg4 = $this->uri->segment(4); // → 4番目のURL文字列:「bbb」の部分

$seg5 = $this->uri->segment(5); // → 5番目のURL文字列:「ccc」の部分

URLを「/」で区切って、base_url(http://localhost/waf/)の次から順番に、1番目のURL文字列、2番目のURL文字列、3番目のURL文字列、…とsegment()メソッドで順番を指定すれば取得できる。

 

Modelの改造

データベースでメッセージID指定して、メッセージを取り出す機能を用意しよう。

 

ファイルに以下のメソッドを追加する。

// Read by Id

public function read_message_by_id($id = 0)

{

 $sql = "SELECT * FROM talk WHERE id = ?";

 $param = array($id);

 $query = $this->db->query($sql, $param);

 return $query->row_array();

}

 

Modelの改造の解説

SQLの「WHERE」句で、絞り込む条件を指定できる。

 

SELECT * FROM talk WHERE id = ?

「WHERE id = 2」とすれば、メッセージID番号が2のメッセージデータが「talkテーブルから取り出せる。

もし該当するデータがなければ、返されるデータは空になる。(データが返ってこない。)

 

CodeIgniterの「row_array()」は、1件分のデータ配列の形にして返すメソッドだ。

 

Viewの改造

ファイルの内容を以下のように編集する。

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>編集</h2>

  <p>メッセージを変更して「更新する」ボタンを押してください。</p>

  <form action="welcome/update" method="post" accept-charset="utf-8">

   <label>メッセージ</label>

   <?php if (isset($talk)): ?>

   <input type="text" name="message" value="<?php echo $talk['message']; ?>">

   <input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

   <input type="hidden" name="action" value="update">

   <?php else: ?>

   <p>※該当するメッセージがありません。</p>

   <?php endif;?>

   <button>更新する</button>

  </form>

  <p><a href="welcome/index">戻る</a></p>

 </body>

</html>

 

Viewの改造の解説

データベースから取り出した1件分のメッセージを表示する部分を追加した。

<input type="text" name="message" value="<?php echo $talk['message']; ?>">

の「<?php echo $talk['message']; ?>」という部分だ。

これで変更したいメッセージの本文を表示できる。

 

あと、編集したメッセージWebサーバーに送信できるように、Formタグ送信ボタン(「更新する」の部分)も追加した。

このときメッセージID番号も送信できるように、

<input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

という1行も仕込んである

 

Controllerの改造

ファイルの内容を以下のように編集する。

// 更新画面

public function update($id = '')

{

 $id = $id ? $id : $this->input->post('id'); // id -> segment or post

 $action = $this->input->post('action');

 if ($action == 'update') {

  $message = $this->input->post('message');

  $this->chat_model->update_message($id, $message);

 }

 $data['talk'] = $this->chat_model->read_message_by_id($id);

 $this->load->view('chat_update', $data);

}

 

Controllerの改造の解説

メッセージID番号を指定して、データベースから取り出し、Viewに渡すデータを用意している。

$data['talk'] = $this->chat_model->read_message_by_id($id);

 

ユーザーメッセージ編集をしてWebサーバーに送信したら、データ更新する指示を出す部分も追加した。

$action = $this->input->post('action');

if ($action == 'update') {

 $message = $this->input->post('message');

 $this->chat_model->update_message($id, $message);

}

モデルにupdate_message()メソッドを用意して、$idと$messageを渡せば、該当データ更新するようにしたい。

次は、モデルでupdate_message()メソッドを用意しよう。

 

Modelの改造

ファイルの内容を以下のように編集する。

// Update

public function update_message($id = 0, $message = '')

{

 $sql = "UPDATE talk SET message = ? WHERE id = ?";

 $param = array($message, $id);

 $this->db->query($sql, $param);

 return $this->db->affected_rows();

}

 

Modelの改造の解説

SQLの「UPDATE」を使えば、指定したレコード(1件分のデータ)を更新できる。

「UPDATE talk SET message = ? WHERE id = ?」で、talkテーブルmessageid指定して更新している。

 

CodeIgniterの「affected_rows()」メソッドは、更新した行数を返す。=成功なら1行、失敗なら0行となる。

 

補足

コントローラーの「$id = $id ? $id : $this->input->post('id');」という行は、$idの受け取り方が2パターンあるので、それに対応している。

編集ページの表示で、1回目の表示と、2回目以降の表示で、$idの受け渡し方が変わっている。

  • 1回目:URLに埋め込まれID番号をupdate($id = '')の引数$idで受け取っている。($this->uri->segment(3)で受け取るのと同じ)
  • 2回目以降:Formタグで送られてきた$idを$this->input->post('id')で受け取っている。

URLに埋め込む方法上記の1回目のような方法)は、ユーザー勝手に値をいじれるので、基本的には使わない方が良い。

 

まとめ

以上で、SQLの「UPDATE」を使った、データ更新ができた。

長々と説明したが、今回の大事な点は、SQLの「UPDATE」の使い方だ。

CodeIgniterの使い方や、Webサイトの作り方(FormタグなどのHTML知識)は、オマケ程度に見ておいて欲しい。

 

次回は、データを削除するSQLDELETE」の使い方を見てみよう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミング練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベースの参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き)

anond:20181104161900 増田プログラマー養成講座 その17 Webアプリの骨組み

anond:20181104233013 増田プログラマー養成講座 その18 SQLデータの追加と取得

anond:20181110120715 増田プログラマー養成講座 その19 SQLデータ更新 ←★今ここ★

anond:20181110182445 増田プログラマー養成講座 その20 SQLデータの削除

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

2018-11-04

増田プログラマー養成講座 その18 SQLデータの追加と取得

前回は、Webアプリの骨組み(スケルトン)までを作って、製作過程を見てみました。

今回は、データベースCRUD操作を行なって、チャットメッセージを追加/取得/変更/削除する機能実装してみましょう。

 

Visual Studio Codeの準備

Webアプリを作るときに、「Visual Studio Code」というIDE統合開発環境)を使ってみましょう。PHP用の各種プラグイン(「PHP IntelliSense」「PHP Debug」など)を入れておけば、便利に使える。

 

メッセージの追加

  1. ViewHTMLのFormタグを使って、メッセージ入力送信できるようにする。
  2. Controller:Viewから送信したデータを受け取れるようにする。
  3. Model:Controllerが受け取ったデータデータベースに保存する。

という機能実装してみよう。

 

Viewの改造

ファイルの内容を以下のように編集する。

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

  <form action="welcome/index" method="post" accept-charset="utf-8">

   <label>メッセージ</label>

   <input type="text" name="message">

   <input type="hidden" name="action" value="add">

   <button>投稿する</button>

  </form>

 </body>

</html>

 

Viewの改造の解説

本当はセキュリティーを考慮して、入力値の検査バリデーション)とか、もっといろいろな仕込みが必要だが、ここでは練習なので省略します。

 

Controllerの改造

 

ファイルの内容を以下のように編集する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 public function __construct()

 {

  parent::__construct();

  $this->load->model('chat_model');

  $this->load->helper('url');

  $this->output->enable_profiler(true); // for debug

 }

 

 // 初期画面

 public function index()

 {

  $action = $this->input->post('action');

  if ($action == 'add') {

   $message = $this->input->post('message');

   $this->chat_model->create_message($message);

  }

  $this->load->view('welcome_index');

 }

 

 // 更新画面

 public function update()

 {

  $this->load->view('chat_update');

 }

 

 // 削除画面

 public function delete()

 {

  $this->load->view('chat_delete');

 }

}

 

Controllerの改造の解説

 

Modelの改造

ここでやっとSQL文の登場だ!!!

SQL説明たかったのに(SQLとは本質的関係がない)Webアプリ説明が延々と続いた。(説明方法を変えた方がいいねw)

データベースデータを保存(追加)するSQLコマンド「INSERT」を使ってみよう!

 

ファイルの内容を以下のように編集する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Chat_model extends CI_Model

{

 public function __construct()

 {

  parent::__construct();

  $this->load->database();

 }

 

 // Create

 public function create_message($message = '')

 {

  $sql = "INSERT INTO talk SET create_at = ? , message = ?";

  $param = array(date('Y-m-d H:i:s'), $message);

  $this->db->query($sql, $param);

  return $this->db->insert_id();

 }

}

 

Modelの改造の解説

 

以上、メッセージの追加を実現するために、MVCの各パーツを用意した。これでメッセージの追加だけができるようになった。

これだけではメッセージの取得=表示がまだできないので、次はデータベースからメッセージデータを取得して、Webページに表示できるように改造しよう。

 

メッセージの取得

SQLの「SELECT」を使えば、データベースからデータを取り出せる。

メッセージデータを取り出して、Webページの表示で使おう。

 

Modelの改造

ファイルの内容を以下のように編集する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Chat_model extends CI_Model

{

 public function __construct()

 {

  parent::__construct();

  $this->load->database();

 }

 

 // Create

 public function create_message($message = '')

 {

  $sql = "INSERT INTO talk SET create_at = ? , message = ?";

  $param = array(date('Y-m-d H:i:s'), $message);

  $this->db->query($sql, $param);

  return $this->db->insert_id();

 }

 

 // Read All

 public function read_message()

 {

  $sql = "SELECT * FROM talk";

  $query = $this->db->query($sql);

  return $query->result_array();

 }

}

 

Modelの改造の解説

 

これでデータベースからデータを取り出すSQLメソッドモデルに用意できた。

 

Controllerの改造

 

ファイルの内容を以下のように編集する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 public function __construct()

 {

  parent::__construct();

  $this->load->model('chat_model');

  $this->load->helper('url');

  // $this->output->enable_profiler(true); // for debug

 }

 

 // 初期画面

 public function index()

 {

  $action = $this->input->post('action');

  if ($action == 'add') {

   $message = $this->input->post('message');

   $this->chat_model->create_message($message);

  }

  $data['talk'] = $this->chat_model->read_message();

  $this->load->view('welcome_index', $data);

 }

 

 // 更新画面

 public function update()

 {

  $this->load->view('chat_update');

 }

 

 // 削除画面

 public function delete()

 {

  $this->load->view('chat_delete');

 }

}

 

Controllerの改造の解説

これは全部CodeIgniterで用意されている機能なので、マニュアルを読めば使い方が分かるようになってます

 

Viewの改造

ファイルの内容を以下のように編集する。

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

  <form action="welcome/index" method="post" accept-charset="utf-8">

   <label>メッセージ</label>

   <input type="text" name="message">

   <input type="hidden" name="action" value="add">

   <button>投稿する</button>

  </form>

  <h2>投稿一覧</h2>

  <table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">

   <tr>

    <th>No.</th>

    <th>投稿日時</th>

    <th>メッセージ</th>

    <th>編集</th>

    <th>削除</th>

   </tr>

   <?php if(isset($talk)): ?>

   <?php foreach($talk as $item): ?>

   <tr>

    <td><?php echo $item['id']; ?></td>

    <td><?php echo $item['create_at']; ?></td>

    <td><?php echo $item['message']; ?></td>

    <td><a href="welcome/update/<?php echo $item['id']; ?>">編集</a></td>

    <td><a href="welcome/delete/<?php echo $item['id']; ?>">削除</a></td>

   </tr>

   <?php endforeach; ?>

   <?php endif; ?>

  </table>

 </body>

</html>

 

Viewの改造の解説

 

説明文が300行を超えてしまった!これ以上は増田で表示できない。)次回はメッセージの変更をやってみよう。

 


anond:20181104161900 増田プログラマー養成講座 その17 Webアプリの骨組み

anond:20181104233013 増田プログラマー養成講座 その18 SQLデータの追加と取得 ←★今ここ★

anond:20181110120715 増田プログラマー養成講座 その19 SQLデータ更新

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

増田プログラマー養成講座 その17 Webアプリの骨組み

前回は、Webアプリの完成見本を先に見てみました。

今回は、Webアプリを作る途中の過程を見て、作る雰囲気を一緒に味わってみましょう。

 

フレームワーク使用ルール=「設定より規約」=手抜きをする仕組み

最近フレームワークは、「設定より規約」(CoC、convention over configuration)という発想で作られている。

フレームワーク規約使用ルール)に従うと、プログラマー作業量が減って、楽ができる。

 

設定より規約(convention over configuration)とは、開発者の決定すべきことを減少させ、単純にするが柔軟性は失わせないというソフトウェア設計パラダイム

使用しているツール実装した規約開発者の望む動作と一致していれば、設定ファイルを書く必要もない。実装規約と望みの動作が違っている場合必要動作を設定しなければならない。

 

最近フレームワークは「設定より規約アプローチ採用しているものが多い。

例えば、Ruby on Rails、Kohana、Grails、GrokZend FrameworkCakePHPSymfony などがある。

 

CodeIgniter使用ルール

CodeIgniter使用ルールは、マニュアルチュートリアル確認できる。

↑このページの「アプリケーションフローチャート」を見てみよう。

 

  1. 一番左の「index.php」が、Webアプリ入口になっている。(エントリーポイントフロントコントローラーパターン等ともいう)
  2. から2番目の上段「Routing」で、URLに応じて、仕事の振り分け先を決定する。(ディスパッチ、マッピングルーティング等ともいう)
  3. から4番目の「Application Controller」で、具体的な処理の指示を出す。
    1. Application Controllerは、「Model」に必要データを用意させる。
    2. Application Controllerは、「View」に表示用の画面を作らせる。
    3. Application Controllerが、index.phpに表示用の画面を渡す。
  4. 表示用の画面(最終的な処理の結果)を受け取った「index.php」は、ユーザーブラウザー)に画面を渡す。

 

 


 

それでは、CodeIgniterプログラマーが用意する部分のM(Model)とV(View)とC(Application Controller)を、骨組みから作ってみよう。

事前準備として、前々回と前回のWebアプリ完成見本を用意するところまでやっておこう。

 

スケルトンとは?

スケルトン(skeleton, 骨格)とは動物人間の骨格。

コンピュータプログラムコードの骨格部分。プログラムコード作成では、初期段階でスケルトン作成し、その後で詳細部分を肉付けしていく。

 

 

 

Application Controllerの骨組み

まずは、MVCのCの骨組みを作ろう。

Controllerは、ユーザーからリクエストを受け付けて、ModelViewに指示を出す監督です。

 

上記フォルダの中に「Welcome.php」というファイルを作る。(デフォルトであるはずなので、それを使ってOK

 

CodeIgniterルールで、Application Controllerを置く場所は「application/controllers」というフォルダになっている。

CodeIgniterルールで、一番最初に呼び出されるApplication Controllerは「Welcome.php」というファイルになっている。

→これは「C:\xampp\htdocs\waf\application\config\routes.php」という設定ファイルで決められている。

$route['default_controller'] = 'welcome'; // 別の名前にすれば変えられる。

 

「Welcome.php」の中身を以下にように変更する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 // 初期画面

 public function index()

 {

  echo "Here is index()";

 }

 // 更新画面

 public function update()

 {

  echo "Here is update()";

 }

 // 削除画面

 public function delete()

 {

  echo "Here is delete()";

 }

}

これがチャットApplication Controllerとして動作する最小限の内容=骨格だ。

 

継承

class Welcome extends CI_Controller

という行に注目してみよう。

CodeIgniterで用意されてる「CI_Controller」クラス継承して、プログラマーが「Welcome」クラスを作ってる。

継承によって、フレームワークが用意してる様々な機能をWelcomeクラス内で使えるようになる。

 

URLリクエスト)とControllerの対応マッピング)のルール

「Welcome」クラスの中に、「index()」「update()」「delete()」という3つのメソッドを用意した。

CodeIgniterURLは、Action Controllerのクラス名やメソッド名とひもづけられている。

今回作るWebアプリだと、

「http://localhost/waf/クラス名/メソッド名」

という対応関係になっている。

(例)

http://localhost/waf/        →Welcomeクラスindex()メソッドが呼び出される。

http://localhost/waf/welcome/index  →Welcomeクラスindex()メソッドが呼び出される。

http://localhost/waf/welcome/update →Welcomeクラスのupdate()メソッドが呼び出される。

http://localhost/waf/welcome/delete →Welcomeクラスdelete()メソッドが呼び出される。

 

 

 

Viewの骨組み

次にMVCのVの骨組みを作ろう。

ビューは、表示する画面の部分です。HTMLWebページの構造を書きます

 

 

welcome_index.php編集

以下の内容にして保存する。

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

 </body>

</html>

 

chat_update.php編集

以下の内容にして保存する。

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>編集</h2>

 </body>

</html>

 

chat_delete.php編集

以下の内容にして保存する。

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>削除</h2>

 </body>

</html>

 

Viewファイルの追加に合わせて、Controllerも一部変更します。

 

Welcome.php編集

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 public function __construct()

 {

  parent::__construct();

  $this->load->helper('url');

 }

 

 // 初期画面

 public function index()

 {

  $this->load->view('welcome_index');

 }

 

 // 更新画面

 public function update()

 {

  $this->load->view('chat_update');

 }

 

 // 削除画面

 public function delete()

 {

  $this->load->view('chat_delete');

 }

}

 

(変更点の説明

コンストラクターの追加

コンストラクター「__construct()」は、クラスからインスタンスが作られるとき自動的に実行されるメソッドだ。コンストラクターは、初期化最初にやっておくべき下準備を書いておく。

$this->load->helper('url');

CodeIgniterには、リンクの表示を補助する「URLヘルパー」という機能が用意されている。

上記のように書くとURLヘルパーを呼び出して、使えるようになる。

Viewファイルの以下の行でURLヘルパーを使っている。=「base_url()」という関数URLヘルパーの1つ。

<base href="<?php echo base_url(); ?>">

 

ビュー読み込みメソッドの追加

$this->load->view('welcome_index');

というメソッドによって、Viewファイルの「welcome_index.php」を呼び出し、画面を出力します。

 

これでMVCのCとVの骨組みができた。

今の段階でWebブラウザーで各ページを表示させると、各Viewファイルの中身が表示される。

 

 

 

Modelの骨組み

次にMVCのMの骨組みを作ろう。

モデルは、具体的な処理内容(ロジック)を書いて、データを読み書きする部分です。

データベースを操作するSQL文もモデルに書きます

 

上記フォルダの中に「Chat_model.php」というファイルを作り、以下の内容にして保存する。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Chat_model extends CI_Model

{

 public function __construct()

 {

  parent::__construct();

  $this->load->database();

 }

}

 

CodeIgniterで用意されてる「CI_Modelクラス継承して、プログラマーが「Chat_modelクラスを作ってる。

「Chat_modelクラスコンストラクターには、以下のように書いている。

$this->load->database();

これは、データベースを使用する準備だ。

 

Modelの追加に合わせて、さらにControllerも一部変更します。

 

Welcome.php編集

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 public function __construct()

 {

  parent::__construct();

  $this->load->model('chat_model');

  $this->load->helper('url');

 }

 

 // 初期画面

 public function index()

 {

  $this->load->view('welcome_index');

 }

 

 // 更新画面

 public function update()

 {

  $this->load->view('chat_update');

 }

 

 // 削除画面

 public function delete()

 {

  $this->load->view('chat_delete');

 }

}

 

コンストラクター

$this->load->model('chat_model');

と書いて、「Chat_model」というモデルを読み込むようにした。

これで、モデルに用意するいろんな機能コントローラーで使えるようになる。

 

 

 

以上で、MVCの骨組み(スケルトン)だけを作成するプロセスを見ていきました。

まだ中身はスカスカで、何も機能がついてませんね。

次回は、データベースのCRUD操作を行なって、チャットメッセージを追加/取得/変更/削除する機能実装してみましょう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミング練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベースの参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き)

anond:20181104161900 増田プログラマー養成講座 その17 Webアプリの骨組み ←★今ここ★

anond:20181104233013 増田プログラマー養成講座 その18 SQLデータの追加と取得

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

2018-11-01

増田プログラマー養成講座 その15 Webアプリの完成見本

前回は、Webアプリモックアップ(ハリボテ)を作るところまでやりました。

今回は、Webアプリ機能実装してみましょう!

 

学習の狙い

データベースを使ったWebアプリを作って、データベースの基本操作CRUDの4つ)を練習してみよう!

CRUD
  1. Create 追加
  2. Read  取得
  3. Update 更新
  4. Delete 削除

 

説明の順番について

どういう順番で説明したら分かりやすいか検討してみた。

  1. まず先に、Webアプリの完成見本を提示します。
  2. 続いて、作る過程説明しながら、各プログラム意味説明してみます

 

作業の流れ

ざっくりと、以下のような流れで作っていきます

  1. XAMPPを起動する。(参考 anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備)
  2. CodeIgniterインストールする。(参考 anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう)
  3. phpMyAdminでデータベース操作する。(参考 anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう)
  4. ApacheWebサーバーソフト)の設定を変更する。(今回説明
  5. Visual Studio Code等のツールプログラムを書く。(次回説明
  6. ブラウザー動作確認する。

 

XAMPPを起動させる

(参考 anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備)

講座その6を参考にして、XAMPPを起動させて、ApacheMySQLスタートして下さい。

 

CodeIgniterインストールする。

(参考 anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう)

講座その9を参考にして、XAMPPの中にCodeIgniterインストールしておきます

 

phpMyAdminでデータベース操作する。

(参考 anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう)

講座その11を参考にして、MySQLWebアプリ用のデータベーステーブル作成しておきます

 

データベースの設定

講座その11で、データベース練習で「chat」というデータベースを作ってみました。

そのときmessage」というテーブル作りましたが、今回Webアプリで使うテーブルとして新たに「talk」というテーブル作成します。

(補足:前に作ったテーブルmessage」の中に、テーブル名と同じ「message」という名前カラム(列)を作ってました。これでも問題ないんだけど、プログラムを書くときテーブル名とカラム名を混同しないようにしたいので、念のため作り変えときましょう。)

 

talkテーブル新規作成する

SQLで「talk」というテーブルを作る場合、以下のようなSQL文になります

CREATE TABLE `talk` (

 `id` int(11) NOT NULL,

 `create_at` datetime NOT NULL,

 `update_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,

 `message` text NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

 

このSQL文をphpMyAdminで実行すれば「talkテーブルを作れます

  1. phpMyAdminを開く。
  2. データベース「chat」を開く。(前に作った「messageテーブルは使わないので削除してもOK
  3. phpMyAdmin画面の上部メニューの「SQL」をクリックする。
  4. データベース chat 上でクエリを実行する:」の空欄に上記SQL文をコピーして実行すれば、「talk」というテーブルができる。

 

これでデータベースの準備ができました。

 

Apacheの設定

CodeIgniterで使う「URL」の表示方法ちょっと変更しておきたいので、ApacheWebサーバーソフト)の設定を変更しておきます

(「URL」=情報がどこにあるのかを示すインターネット上の住所)

Apacheの「mod_rewrite」という仕組みによって、URLの扱い方を変更します。)

 

(例)

変更前: http://localhost/waf/index.php/welcome/

変更後: http://localhost/waf/welcome/

というように、URLの中にある「/index.php」という文字列を表示させない設定にします。

 

Apache設定ファイル.htaccess

Apacheの設定は「.htaccess」という名前設定ファイルを用意して変更します。

 

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ index.php/$1 [L]

 

.htaccess」の書き方を理解するには、「正規表現」という仕組みの知識必要です。

まだ「正規表現」を勉強してない段階では、とりあえずコピペして使って下さい。

 

Webアプリ完成見本

CodeIgniterで、

を行ないます

 

CodeIgniter設定ファイルconfig.php」の編集

config.php」をIDEやエディターで開いて、以下のように変更する。

$config['base_url'] = 'http://localhost/waf/';

$config['index_page'] = '';

 

最初は、

$config['index_page'] = 'index.php';

になってるけど、「index.php」を削除して、「''」(空)にしておく。

 

CodeIgniterデータベース設定ファイル「databese.php」の編集

「databese.php」をIDEやエディターで開いて、以下のように変更する。

$db['default'] = array(

 'dsn' => '',

 'hostname' => 'localhost',

 'username' => 'root',

 'password' => '',

 'database' => 'chat',

 'dbdriver' => 'mysqli',

(※上記のように、MySQLのusernamepasswordは「root」(管理者)のデフォルト設定を使ってます。)

 

Controllerの作成

上記フォルダの中に「Welcome.php」というファイルを作って、内容を以下のようにします。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Welcome extends CI_Controller

{

 public function __construct()

 {

  parent::__construct();

  $this->load->model('chat_model');

  $this->load->helper('url');

  // $this->output->enable_profiler(true); // for debug

 }

 

 // 初期画面

 public function index()

 {

  $action = $this->input->post('action');

  if ($action == 'add') {

   $message = $this->input->post('message');

   $this->chat_model->create_message($message);

  }

  $data['talk'] = $this->chat_model->read_message();

  $this->load->view('welcome_index', $data);

 }

 

 // 更新画面

 public function update($id = '')

 {

  $id = $id ? $id : $this->input->post('id'); // id -> segment or post

  $action = $this->input->post('action');

  if ($action == 'update') {

   $message = $this->input->post('message');

   $this->chat_model->update_message($id, $message);

  }

  $data['talk'] = $this->chat_model->read_message_by_id($id);

  $this->load->view('chat_update', $data);

 }

 

 // 削除画面

 public function delete($id = '')

 {

  $id = $id ? $id : $this->input->post('id');

  $action = $this->input->post('action');

  if ($action == 'delete') {

   $this->chat_model->delete_message($id);

  }

  $data['talk'] = $this->chat_model->read_message_by_id($id);

  $this->load->view('chat_delete', $data);

 }

}

 

View作成

上記フォルダの中に「welcome_index.php」「chat_update.php」「chat_delete.php」という3つのファイルを作って、内容を以下のようにします。

 

Viewファイル「welcome_index.php」の中身

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

  <form action="welcome/index" method="post" accept-charset="utf-8">

   <label>メッセージ</label>

   <input type="text" name="message">

   <input type="hidden" name="action" value="add">

   <button>投稿する</button>

  </form>

  <h2>投稿一覧</h2>

  <table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">

   <tr>

    <th>No.</th>

    <th>投稿日時</th>

    <th>メッセージ</th>

    <th>編集</th>

    <th>削除</th>

   </tr>

   <?php if(isset($talk)): ?>

   <?php foreach($talk as $item): ?>

   <tr>

    <td><?php echo $item['id']; ?></td>

    <td><?php echo $item['create_at']; ?></td>

    <td><?php echo $item['message']; ?></td>

    <td><a href="welcome/update/<?php echo $item['id']; ?>">編集</a></td>

    <td><a href="welcome/delete/<?php echo $item['id']; ?>">削除</a></td>

   </tr>

   <?php endforeach; ?>

   <?php endif; ?>

  </table>

 </body>

</html>

 

Viewファイル「chat_update.php」の中身

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>編集</h2>

  <p>メッセージを変更して「更新する」ボタンを押してください。</p>

  <form action="welcome/update" method="post" accept-charset="utf-8">

   <label>メッセージ</label>

   <?php if (isset($talk)): ?>

   <input type="text" name="message" value="<?php echo $talk['message']; ?>">

   <input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

   <input type="hidden" name="action" value="update">

   <?php else: ?>

   <p>※該当するメッセージがありません。</p>

   <?php endif;?>

   <button>更新する</button>

  </form>

  <p><a href="welcome/index">戻る</a></p>

 </body>

</html>

 

Viewファイル「chat_delete.php」の中身

<?php defined('BASEPATH') or exit('No direct script access allowed');?>

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

  <base href="<?php echo base_url(); ?>">

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>削除</h2>

  <p>以下のメッセージを削除しますか?</p>

  <form action="welcome/delete" method="post" accept-charset="utf-8">

   <?php if (isset($talk)): ?>

   <p style="background-color:lightpink"><?php echo $talk['message']; ?></p>

   <input type="hidden" name="id" value="<?php echo $talk['id']; ?>">

   <input type="hidden" name="action" value="delete">

   <?php else: ?>

   <p>※該当するメッセージがありません。(または削除済です。)</p>

   <?php endif;?>

   <button>削除する</button>

  </form>

  <p><a href="welcome/index">戻る</a></p>

 </body>

</html>

 

Model作成

上記フォルダの中に「Chat_model.php」というファイルを作って、内容を以下のようにします。

<?php

defined('BASEPATH') or exit('No direct script access allowed');

 

class Chat_model extends CI_Model

{

 public function __construct()

 {

  parent::__construct();

  $this->load->database();

 }

 

 // Create

 public function create_message($message = '')

 {

  $sql = "INSERT INTO talk SET create_at = ? , message = ?";

  $param = array(date('Y-m-d H:i:s'), $message);

  $this->db->query($sql, $param);

  return $this->db->insert_id();

 }

 

 // Read All

 public function read_message()

 {

  $sql = "SELECT * FROM talk";

  $query = $this->db->query($sql);

  return $query->result_array();

 }

 

 // Read by Id

 public function read_message_by_id($id = 0)

 {

  $sql = "SELECT * FROM talk WHERE id = ?";

  $param = array($id);

  $query = $this->db->query($sql, $param);

  return $query->row_array();

 }

 

 // Update

 public function update_message($id = 0, $message = '')

 {

  $sql = "UPDATE talk SET message = ? WHERE id = ?";

  $param = array($message, $id);

  $this->db->query($sql, $param);

  return $this->db->affected_rows();

 }

 

 // Delete

 public function delete_message($id = 0)

 {

  $sql = "DELETE FROM talk WHERE id = ?";

  $param = array($id);

  $this->db->query($sql, $param);

  return $this->db->affected_rows();

 }

}

 

この続きは、

anond:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き)」

へ続きます

2018-10-31

増田プログラマー養成講座 その14 Webアプリの試作品作成

前回は、SQL文法を学びました。

今回は、データベースを使ったWebアプリ制作を通じて、SQLの使い方を確認してみましょう。

 

Webアプリとは?

WebブラウザーGoogle Chromeなど)で動作するアプリのこと。

ウェブアプリケーションWeb application)は、インターネット(もしくはイントラネット)などのネットワークを介して使用するアプリケーションソフトウェアである

多くの場合、これらのアプリケーションは、Webブラウザ上で動作するプログラミング言語(たとえばJavaScript)によるプログラムWebサーバ側のプログラム協調することによって動作し、ユーザはそれをWebブラウザ上で使用する。

 

準備

Windowsパソコンを使ってたら、「XAMPP」を使ってすぐにWebアプリを試作できる。

以前の講座(その6、その9)を参考にして、XAMPPCodeIgniterを用意しておこう。

 

Webアプリ制作の流れ

最近アプリの作り方は、「デザインスプリント」と呼ばれる方法流行ってます。本やネット情報がたくさんあるので調べてみよう。

 

ざっくりと、以下のような流れです。

  1. アイデア企画)を出す。
  2. アイデアを基に、ペーパープロトタイプ(紙の試作品)を作る。=アナログの試作品ノートなどにアプリの完成予想図、画面などを描く。
  3. ペーパープロトタイプを基に、動くモック(ハリボテ)を作る。=デジタルの試作品
  4. モック画面を基に、実際のプログラム作成して、アプリを完成させる。
  5. 完成したアプリを改良していく。

それでは順番にやってみよう。

 

アイデア

以前にデータベース練習をしたとき、「後で簡単チャット(おしゃべり)ができるWebアプリ作ってみたいと思う。」と言ったので、今回のアイデアは「チャットを作る」にしよう。

 

ペーパープロトタイプ

チャット必要な画面は3つある。

  1. トップページの画面(新規投稿投稿一覧がある)
  2. 投稿更新する画面
  3. 投稿を削除する画面

ノートなどに描いて画面をデザインしてみよう。

 

モック

Webページを作るには、HTMLCSS知識必要だ。HTMLCSSを使ったことがなければ、本やネット情報勉強してみよう。

今回はCSSを使わずに、HTMLだけでシンプルWebページを作ってみよう。(練習から余計なもの無駄を省きたい。)

 

Webページ制作ツール

ブラウザーテキストエディター(またはIDE)が必要です。

特にこだわりがなければ、Microsoftの「Visual Studio Code」という無料IDE統合開発環境)を使ってみよう。

インストール方法や使い方、メニュー日本語化のやり方は、検索して調べてみよう。

 

フォルダを作る。

デスクトップに「mock」というフォルダを作る。

 

ファイルを作る。

「mock」フォルダの中に

  1. index.html」 (トップページの画面)
  2. 「edit.html」 (投稿更新する画面)
  3. delete.html」(投稿を削除する画面)

という3つのファイルを作る。

テキストエディターで保存するとき文字コードを「UTF-8」にしておく。

 

ファイルの中身を編集する。

index.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>新規投稿</h2>

  <form>

   <label>メッセージ</label>

   <input type="text" name="message">

   <button>投稿する</button>

  </form>

  <h2>投稿一覧</h2>

  <table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">

   <tr>

    <th>No.</th>

    <th>投稿日時</th>

    <th>メッセージ</th>

    <th>編集</th>

    <th>削除</th>

   </tr>

   <tr>

    <td>3</td>

    <td>2018-10-20 12:34:56</td>

    <td>Webアプリを作ってみる!</td>

    <td><a href="edit.html">編集</a></td>

    <td><a href="delete.html">削除</a></td>

   </tr>

   <tr>

    <td>2</td>

    <td>2018-09-10 22:33:44</td>

    <td>今日からプログラミングを勉強します。</td>

    <td>編集</td>

    <td>削除</td>

   </tr>

   <tr>

    <td>1</td>

    <td>2018-08-01 11:22:33</td>

    <td>こんにちは!</td>

    <td>編集</td>

    <td>削除</td>

   </tr>

  </table>

 </body>

</html>

 

「edit.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>編集</h2>

  <p>メッセージを変更して「更新する」ボタンを押してください。</p>

  <form>

   <label>メッセージ</label>

   <input type="text" name="message" value="Webアプリを作ってみる!">

   <button>更新する</button>

  </form>

  <p><a href="index.html">戻る</a></p>

 </body>

</html>

 

delete.htmlファイルエディターやIDEで開き、以下のような内容に編集して保存します。(コピペする場合、行頭の字下げ(インデント)の全角スペースを半角スペースに置換して下さい。)

<!DOCTYPE html>

<html>

 <head>

  <meta charset="utf-8">

  <title>増田チャット</title>

 </head>

 <body>

  <h1>増田チャット</h1>

  <h2>削除</h2>

  <p>以下のメッセージを削除しますか?</p>

  <form>

   <p style="background-color:lightpink">Webアプリを作ってみる!</p>

   <button>削除する</button>

  </form>

  <p><a href="index.html">戻る</a></p>

 </body>

</html>

 

以上でモックWebページ(HTMLファイル)ができました。

Webブラウザーで「index.html」を開いてください。「編集」や「削除」、「戻る」をクリックして、チャットの画面を確認してください。

 

モックを作ってからWebサイトを作る方法

実務では「仕様書」という書類を大量に作る場合もありますが、時間と労力の無駄になっている場合が多々あります。(紙の仕様書はあまり使われる機会がない)

紙の仕様書アナログ)の代わりに、モック仕様書デジタル)として使うと、その後の段階がスムーズになります

どうしても紙でなければ困る場合以外は、モックをそのまま仕様書として使ってみましょう。

 

プロトタイプ作成ツール

モック(動くハリボテ)を作るための便利なツールがいろいろあります

 

 

 

ちょっと長くなったので、モックを基に機能実装プログラミング)するのは次回にしましょう。

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミングの練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214133 増田プログラマー養成講座 その11 データベースを使ってみよう

anond:20181026145516 増田プログラマー養成講座 その12 データベース参考書

anond:20181028152656 増田プログラマー養成講座 その13 SQL文法

anond:20181031014212 増田プログラマー養成講座 その14 Webアプリの試作品作成 ←★今ここ★

anond:20181101225335 増田プログラマー養成講座 その15 Webアプリの完成見本

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

2018-10-22

増田プログラマー養成講座 その9 MVCフレームワーク

前回はオブジェクト指向プログラミングOOP)で使う様々な仕組みについて学びました。

今回はOOPWebアプリを作ってみよう!

 

今日学ぶこと

 

OOPの使いどころ

OOP文法を学んだ後、OOP長所が発揮される場面をどうやって説明したらいいのか?を考えてみた。

横田意見を参考にして、「フレームワーク」を使って、OOPの使い方を見てみよう。

 

フレームワークとは?

framework →「枠組み」「骨組み」「構造」などという意味英語

システム開発で使われる「フレームワーク」とは、よく使われる機能のパーツを用意して、まとめて1つのパッケージにしたプログラム群のことだ。

 

イメージとしては、いろんなおかずが入ってる豪華な幕の内弁当のようなものだ。

ただし、ご飯のマスだけが空になっていて、プログラマー自分ご飯を用意しないと、弁当としては完成していない形になってる。

普通の白いご飯を作って追加しても良いし、好みや必要に応じて、炊き込みご飯やまぜご飯を作って追加しても良い。

ゼロから豪華な幕の内弁当を作るのは大変だけど、ご飯だけ用意すれば完成するので楽ができる。

 

プログラムの開発でフレームワークを使うと、プログラマー必要最小限のコードを書くだけでアプリを完成させられるので楽ができる。

 

ライブラリーフレームワークの違い

フレームワーク」と似た用語で「ライブラリー」という用語がある。

イメージとしては、ライブラリーは、ばら売りのおかずだ。

弁当を作るときに使いたいおかず(ライブラリー)を自分で考えて探し出し、選ばないといけない。

フレームワーク最初からおかずが全部用意されているので、自分でわざわざ選ばなくてもOK

 

プログラム動作で見た場合フレームワークライブラリーでは決定的な違いがある。

↑このページの「図1●フレームワークにおける制御の反転」という図解を見てみよう。

制御の反転」(Inversion of Control、IoC)といって、自分の書いたコードが主役から脇役になってる点が違う。

 

(主役と脇役という説明は適切ではないかもしれないけど、イメージとしてはそんなかんじ?)

 

MVCフレームワークとは?

フレームワークはいろんな機能全部入りで、こいつを使えば、ちょっとコードを書くだけで、高機能アプリがすぐに作れる。

ここでは「MVCパターン」という仕組みで作られた「MVCフレームワーク」を使ってみよう。

 

MVCは「Model」「View」「Controller」の略で、MとVとCの3つを自分で用意すれば、アプリが作れちゃう仕組みだ。

MVC歴史は古くて、GUI(Graphical User Interfaceグラフィカルユーザインタフェース)を作る方法定番だ。

→「MVC 仕組み」でGoogle画像検索すると、分かりやすい図解がいろいろ出てくる。

 

(参考)

Wikipedia説明は、文章学術的で難しいけど、正確な説明になってると思う。

↑このページの「MVC概要」という図が、MVCの仕組み=動作の流れを分かりやす説明してる。

 

MVCの仲間たち

MVCパターンと似たような仕組みが、他にもいろいろある。

 

こういうプログラム設計に関するノウハウは、「アーキテクチャー・パターン」という分野に蓄積されている。詳細はGoogle検索してみよう。

 

WAF(Web Application Framework

Webアプリを作るときに使われるMVCフレームワークには、いろいろある。

WAFを使うと、Webアプリが手軽に作れる。

 

有名なものとして、

などが挙げられる。

 

PHPOOP学習しているので、ここではPHPのWAFの1つであるCodeIgniter」を使ってみよう。

 

CodeIgniterコードイグナイター)

CodeIgniterは使い方がシンプルで、覚えるルールが少ないので教材に向いているだろう。

それでは、CodeIgniterを使ってみよう。

 

準備

↑このページの「Downloadから「3.1.9.zip」という圧縮ファイルダウンロードする。(2018年10月現在バージョン3.1.9でした)

 

ダウンロードしたファイル解凍して、「CodeIgniter-3.1.9」というフォルダが出てきたら、「waf」という名前に変えよう。(「waf」はWeb Application Frameworkの略。)

今「waf」フォルダの中には、「index.php」というファイルや、「application」「system」などフォルダがあるね?

この「waf」フォルダを以前用意したXAMPPの中にコピーする。(参照:anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備)

=「C:\xampp\htdocs」(Cドライブの中の「xampp」の中の「htdocs」というフォルダ)の中に「waf」をコピーして下さい。

=「C:\xampp\htdocs\waf」という位置コピーできたらOK

 

動作チェック

これで「Welcome to CodeIgniter!」というWebページが表示されたら、CodeIgniter動作確認OKです。

 

CodeIngiterの設定

$config['base_url'] = 'http://localhost/waf/';

 

Webアプリ作成

それでは「Hello, world!」と表示させるシンプルWebアプリを作ってみよう。

 

MVC「C」作成する。

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

 

class Hello extends CI_Controller {

 public function index()

 {

  $this->load->view('hello_index');

 }

}

ここで注目して欲しいのは、「class Hello extends CI_Controller」という部分です。

フレームワークが用意している「CI_Controller」というクラス継承して、自分で「Hello」というクラスオブジェクト設計図)を作っている、という点です。

ここでOOPの仕組み~継承を使ってるわけですね。

 

MVCの「V」を作成する。

次に、

<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<!DOCTYPE html>

<html>

<head>

 <meta charset="utf-8">

 <title>Test</title>

</head>

<body>

 <p>Hello, world!</p>

</body>

</html>

 

これでWebアプリができました!

今回は簡単なので、MVC「M」は用意しませんでした。(CとVだけで完成)

 

Webアプリ動作確認

Webブラウザーで「http://localhost/waf/index.php/hello」というURLアクセスして下さい。

画面に「Hello, world!」と表示されたら、Webアプリ作成成功です!

 

Hello, world!」の表示だけではショボ過ぎるけど、Webフレームワークを使えばもっといろいろな機能が作れます

詳細は、CodeIgniterマニュアルを参照して下さい。

↑このページで「ユーザガイド(日本語)」を読んでみて下さい。

 

まとめ

 

次回は、OOP理解を深めるための参考書を紹介してみます

 

Webアプリを作るときデータベースがないと不便なので、次の次ぐらいにSQLを学ぼう。

MySQLデータベース)を使えば、掲示板などのWebアプリも作れるようになります

 


anond:20181015215004 未経験からプログラマーなんだが全然からない

anond:20181016015826 増田プログラマー養成講座 その1 パソコンの用意

anond:20181016164341 増田プログラマー養成講座 その2 プログラムデータ+処理、プログラム言語の種類

anond:20181016180059 増田プログラマー養成講座 その3 構造プログラミングの基本(順次、反復、分岐

anond:20181016193144 増田プログラマー養成講座 その4 子ども向け教材「Scratch」で構造プログラミング練習

anond:20181017161003 増田プログラマー養成講座 その5 オブジェクトとは何か?

anond:20181017191404 増田プログラマー養成講座 その6 OOPの種類、PHPの準備

anond:20181019181549 増田プログラマー養成講座 その7 OOPの仕組み(前半)

anond:20181020230044 増田プログラマー養成講座 その8 OOPの仕組み(後半)

anond:20181022232327 増田プログラマー養成講座 その9 MVCフレームワークを使ってみよう ←★今ここ★

anond:20181023184616 増田プログラマー養成講座 その10 OOP参考書

anond:20181024214737 増田プログラマー養成講座 コンテンツ一覧

竹村訳も含めて読んだことがなく、ジェンダー論などの知識もない素人が単に該当部分の前後英語として読んだ感じでは以下のように思った:

章のまとめ的な段落であることも踏まえると、この部分の those attributes は直前の true / false / real ... ではなくて前段落gender attributes と解する方が自然と思う。

gender attributes は acts とともに前段落で the various ways in which a body shows or produces its cultural signification と言い換えられている。これは たとえば「逞しさ」「優しさ」など、特定ジェンダーと結びつくとされる属性のことを指している、と素人には思われる(この議論文脈での常識的解釈については知らない)。バトラーはそれは expressive ではなく performative なのだという。表現的なものではなく行為遂行的なものだ、くらいに思われる。

まり、含意としては

ジェンダー自体は真とか偽とか(略)にはなり得ない。それどころか、「逞しさ」や「優しさ」のような行為遂行的な属性を確かに帯びているジェンダーは、まさにそれ故に、徹底して根本的に不確かなものともいえる」

と読める。

これを踏まえると、この段落の訳はほぼ竹村訳でよいが、those attribute を「そのような属性」と訳すと直前の「真実」などと解する誤解を呼ぶので、前段落を踏まえた理解を促す語を補った方が素人には親切な気もする。

加えて、incredible にポジティブ意味での「すばらしい」のような informal な意味も重ねて込められていると読むのはこの文脈では合わないし、そんな安っぽい言葉遊びをする理由がないように感じる。ここで斜体になっているのは単純に credible / incredible の対比と、確かな所与と思われているジェンダーが実は根本的に不確かなものといえるのだ、ということを強調したものと考えた方がいいと思う。その上で、それって incredible なことだよね、という読みを促すという意味では文彩の一種だと言えなくはないと思うが、解釈ファンシー過ぎる気もする。


【補足 2018.10.23

1.

竹村訳は誤訳範疇かという気がしてきた:

竹村As credible bearers of those attributes . . . を「そのような属性の確かな担い手とみなされているジェンダー」と訳しているが、As credible bearers を単純に読めば「信頼に足る担い手であるジェンダー」とか「確かな担い手であるジェンダー」であり、「とみなされている」というニュアンスを補う必要はない。ここはバトラージェンダーが「そのような属性の確かな担い手である」と考えており、それを前提に結論を述べるところとして読むのが素直だと思う。

竹村が「とみなされている」としたのは、おそらく竹村も those attributes が直前の true / false / . . . を指すもの誤読しており、「ジェンダーは真なるもの(略)にはなり得ない」と「真なるもの(略)という属性の確かな担い手である」という相反する命題接続する必要ができたためだと思う。そのため credible を「人びとがそう信じている」という雰囲気で読んで留保ニュアンスを加えたのではないか

those attributes を gender attributes ととれば「(「男らしさ」等の)属性の確かな担い手であるジェンダー」でそのまま意味が通じる。

ただし、竹村訳の前段落を読んでいないので、ひょっとしたら竹村訳のままでも正確な理解ができるのかもしれない。

2.

段落の expressive / performative:

performative を行為遂行的と訳すのはわりと一般的と思うが、適切な訳語は知らない。前段落でいわれていることは、一般的な語彙の延長で読めば、 gender attributes / acts は予め備わっている gender identity を基準として(たとえば)「男らしさ」と評価されるものではなく、反復して演じつづけることで事後的に特定ジェンダーが帯びる「男らしさ」なのだ、くらいの意味に思えた。

2018-10-11

ウヨ批判できればなんでもいい

新疆ウイグル自治区でイスラム容認しない方針 中国検察当局 | NHKニュース

id:hosyu_ha 「こんな暴力的な国に目をつけられてんのに基地を一つの地域に集中させてる国があるらしい。 こいつらがそこだけ狙う忖度するわけないっていい加減気づけよ」とは言わない宇予くん2018/10/11 01:56


これが俗に言うはてサです

2018-10-10

IT業界のカレシ

2018-09-14

「開発現場で役立たせるための設計原則パターン」への反論

開発現場で役立たせるための設計原則パターン

https://nekogata.hatenablog.com/entry/2018/09/10/163206

この記事はてブで大絶賛されてるが、個人的にはセンス無いなーと感じたので言語化してみる。

Notificationクラスが不親切。

Notificationクラスそもそも単一責任原則に反してない

開放閉鎖原則勘違いしてる

Notificationクラスと何のクラスが密結合なのか説明されてない

  • 『それ以前の問題というか「本来バラバラに書かれるべきものが、すべてここに書かれてて密結合しちゃってる」とみることができるかと思います。』?
  • 密結合というのであれば、コメント通知を変更した時にNotificationクラスとCommentクラスの両方に変更が生じてしまうことを示すべき

オブザーバーパターンが出てくる意味が分からない

今回の仕様を図で書くと

コメント→→→コメント通知

スター→→→スター通知

あしあと→→→あしあと通知

みたいな感じになるとする。

すると、今回スライド問題視しているのは矢印の右側の通知の部分が1クラス共通化されている点。

しかし、オブザーバーパターンの出番は図の矢印の部分が絡まり合って処理が複雑になってしまった場合

今回は1つのイベントから複数リアクションが発生することは想定しないので

オブザーバー不要なのは当然。選択肢に出てくるほうがおかしい。

そもそも問題認識(通知部分が問題)と解決策(矢印部分を解決)がズレてるから話がおかしな方向にいってる。

Notificationクラスサブクラスを作ろう、ならまだ分かる。

人間の可読性が考慮されてない

まとめ。

かに設計言語化するのは大事だが、言語化というのは「それっぽいことは幾らでも言える」危険性がある。そもそもプログラミングというのは芸術であり文学なんだからセンス無いのに言語化を頑張っても「一見それっぽく聞こえるけど間違ってる説明しか出てこない。

2018-09-04

[]増田流行入れ墨ネタの火元がどこかしらないのだけど

タトゥーあり」でも就職OK、世の中は変わった https://www.newsweekjapan.jp/stories/world/2018/09/ok-10.php

その翻訳記事

Tattoos No Longer Impede Getting A Job, Study Finds https://www.newsweek.com/tattoos-no-longer-impede-getting-job-1067035

そのネタ論文

Are tattoos associated with employment and wage discrimination? Analyzing the relationships between body art and labor market outcomes http://journals.sagepub.com/doi/pdf/10.1177/0018726718782597

-

ぱっと見アメリカでも受け入れられ始めたばかりなのだろうか

2018-08-22

セブンイレブンの新レイアウト馬鹿じゃないの?

店内に入って左端に紙パックやカップ入りのチルド飲料、右端にPETと缶飲料

「何か冷たいもの飲みたいな」と店内に入った時、店の端から端を往復しなきゃいけない。

これが従来のレイアウトなら、店内に入って突き当たりがPETと缶飲料、角を曲がればチルド飲料、と距離が近かったのに。

それとも、普通のお客さんは来店前にどのタイプ飲料買うか明確に決めてて行ったり来たりが必要なかったりするの?

それとも、こうすると店内の回遊率が上がってついで買いが増える、みたいなデータでもあったりするの?

気になってるの自分だけかと思ったら、ブコメで同様の意見を見かけたので書いてみた。

セブン、1万店で挑む「売り場大改装」の勝算 | コンビニ | 東洋経済オンライン | 経済ニュースの新基準

パックの飲料は左端、ペットボトルは右端という配置に未だに慣れない。アーキテクチャに沿ってUI設計したソフトウェアみたいだ。2018/08/18 11:22

2018-07-31

シェア」を「愛撫」に置き換えると愛情たっぷりになる

シェアさせていただきます!」→「愛撫させていただきます!」

ブックマークレット作るなら↓

javascript:void((function(){var d=document;d.body.innerHTML=d.body.innerHTML.replace(/シェア/g,'愛撫');})());

2018-07-10

anond:20180710105709

bodyの下にJS置いて即実行とかいやらしすぎるだろ・・・

anond:20180710105422

ready使うと完全にページが読み込まれるまでJSが動かないので、bodyの下とかにJSを置いて即実行するのが最近の主流。

今日気づいた事

HTMLに外部javascriptを読ませるなら、body最後が良い。

cssと同様にheadで読ませようとしたら

 functionの定義がされていないというエラーが表示され、

 IEの要素チェックソフト(?)上ではjsファイルが表示されなかったから。

2018-07-03

anond:20180703171657

できるよ

どうせ読み込み方間違えてるんだろ

<html>

<head>

<link rel="stylesheet" href="masuda.css">

<style type="text/css">

</style>

</head>

<body>

<table>

<thead>

<tr>

<th></th>

<th>column1</th>

<th>column2</th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

<td>foo</td>

<td></td>

</tr>

<tr>

<td></td>

<td>bar</td>

<td></td>

</tr>

<tr>

<td></td>

<td>baz</td>

<td></td>

</tr>

</tbody>

</table></body>

</html>





masuda.cssは↓

table {

counter-reset: rowCount;

}

table > tbody > tr {

counter-increment: rowCount;

}

table > tbody > tr > td:first-child::before {

content: counter(rowCount);

}

anond:20180703165428

<html>

<head>

<style type="text/css">

table {

counter-reset: rowCount;

}

table > tbody > tr {

counter-increment: rowCount;

}

table > tbody > tr > td:first-child::before {

content: counter(rowCount);

}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th></th>

<th>column1</th>

<th>column2</th>

</tr>

</thead>

<tbody>

<tr>

<td></td>

<td>foo</td>

<td></td>

</tr>

<tr>

<td></td>

<td>bar</td>

<td></td>

</tr>

<tr>

<td></td>

<td>baz</td>

<td></td>

</tr>

</tbody>

</table></body>

</html>

anond:20180703165928

ごめんダメだわ。やり方が違うのかも。

HTMLタグの中のbodyタグの中にtableコピペして、

CSS参照とあるけどまずは同じHTMLからのほうが良いかなと思って

bodyタグ最後javascriptscriptタグ書いて、そこにコピペしてる。

anond:20180703164607

こういうんじゃないの?

<html>

<head></head>

<body>

<table>

<thead><tr><th>番号</th><th>中身</th></tr></thead>

<tbody>

<tr><td>1</td><td>低能先生</td></tr>

<tr><td>2</td><td>Hagex</td></tr>

</tbody>

</table>

</body>

</html>

anond:20180703163232

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html lang="ja"&gt;

&lt;head&gt;
	&lt;meta http-equiv="content-type" content="text/html; charset=Shift_JIS"&gt;
	&lt;title&gt;


  
  

2018-06-16

アフィリエイターには紹介責任がないとでも思っているのか

ヒト◯が自分ブログコインチェックを紹介する記事を書いて、それにかみついた記事に、

「個人がアフィリエイトで儲かる時代」の終焉

さらっと個人的恨みを入れててワロタ そんなもん自己責任だろ。2018/06/01 09:49

&lt;script src="https://b.st-hatena.com/js/comment-widget.js" charset="utf-8" async&gt;&lt;/script&gt;

というブクマがあり、それに星が二つもついているのを見て、頭にきている。


知っての通り先日の知財高裁で、著作権侵害したツイートリツイートもまた、著作権侵害に当たる、という判例が出ている。

ツイッターへの画像投稿やそのツイートリツイート行為についての著作権等の侵害について、平成28年9月15日東京地裁判決をご紹介しましたが、このたび、その控訴審判決知財高裁から出されました。

http://www.soei.com/blog/2018/06/14/%E3%83%84%E3%82%A4%E3%83%83%E3%82%BF%E3%83%BC%E3%81%AE%E3%83%AA%E3%83%84%E3%82%A4%E3%83%BC%E3%83%88%E3%81%A8%E8%91%97%E4%BD%9C%E6%A8%A9%E4%BE%B5%E5%AE%B3%EF%BC%88%E6%8E%A7%E8%A8%B4%E5%AF%A9%EF%BC%89/

情報の共有者もまた、責任があると裁判所判断したわけだ。

そりゃ、商品サイトで紹介したアフィリエイター法的責任があるのかどうかは、判例がないのでわからない。裁判をしてみなければわからないだろう。

しかし、道義的責任は間違いなく、ある。


俺も、ヒト◯の記事を読んで、面白そうだと思って、コインチェック社に口座を開いて、そして損をした。


コインチェック社は犯人グダグダくだらないメールのやりとりをして思わず信用して添付ファイルを開いてしまったバカ社員のいるバカ会社で、ネムを購入した人間以外の口座停止の損害には一切補償しないクソ会社だったわけだ。

仮想通貨も、「どんな取引をしたのか履歴を誰でも確認できるので、透明性が高いんですよ!」とか言いながら、580億円も盗まれながらそのうえ犯人目星すらつかないようなインチキ技術だったわけだろ?

そのうえ、取り返すことすらできない。


現実社会で、580億円ものカネが盗まれながらつかまらないことがあるか?

それができるのはルパン3世ルパンレンジャーくらいだよ。


それに、だ。

カネを盗むような人々は当然反社会性の強い人物であり、彼らに盗まれたままにしておく、責任を問わない、ということは反社勢力にカネを貢ぐのと一緒じゃないか

カネを取り返さない、ということは反社勢力にカネを貢いでいることである、という自覚を、コインチェック社の人々は持っているのだろうか?

仮想通貨を煽った人々は、未熟な技術を煽った結果、自らが反社勢力の増大に間接的に加担した自覚はあるのだろうか?


しかも裏には北朝鮮中国が背後にあるんじゃないか、と言われているわけだ。

まり仮想通貨現金を入れた人間は、独裁国家北朝鮮天安門事件をなかったことに今もしている中国に、カネを貢いでいる可能性があるわけだ。

ネトウヨもそりゃ怒りますよ。


どこが夢の技術だ。未来を切り開くだ。何が落合陽一だ。何が『お金2.0』だよ。

未来を潰すな、といいながら、そういう奴らの正体は円天サポーターだったじゃねえか。


こんなことがあったから、CoinHiveを導入した人間が次々に逮捕されてるんだろ。

未来につながる技術

免罪符にやらかすのは許しませんよ、だっていざというとき被害額でかすぎだもん。額が大きくなる前に対応しますよ、と警察が考えたのは、コインチェック社の仮想通貨流出事件があったせいですよ。

はやく言えば、仮想通貨マイニングの件で結婚間近のデザイナーのモロさんを家宅操作させたのは、仮想通貨ブームを煽った人々ですよ。


アフィリエイターには、仮想通貨という概念を広めようとした法的責任はないだろう。

しかし、役所に『どうなりました? がんばってください』とおっしゃった首相夫人以上の責任は、あるのではないだろうか?


車を売ったセールスマンは、メーカー人間ではない限り、自動車構造的欠陥に責任はないだろう。

それでも、もしも自動車が欠陥のせいで事故ったら、購入者に、

申し訳ありません」

と謝るだろう? 法的責任がなくても。


それが道義的責任というものだ。


ところが、ヒト◯は、ヒト◯の記事を読んで口座を開いて損をした、という記事に対してどう反応したか

その、なんかごめんな

「その、なんかごめんな」

ですよ。この他人事感。


ヒト◯も、コインチェック記事を書いたときに、アフィリエイト契約を結んで紹介したからには、アフィリエイト収入を得たんだろう。


その結果、口座を開いて、あの騒動に巻き込まれて、仮想通貨NEMを買っていないのに、仮想通貨が下落するのを横目で見ながら口座取引が停止されたがためにカネを引き出せず、損をした人間が多数いたわけだ。

俺も損をした。

その額、いくらだと思う?

3,000円だよ!

おい、ふざけるなよ。

毎月の食費が30,000円の俺にとって、3000円あればなにができたと思う?

スクラッチ宝くじ10枚変えたんだよ!

それで、数億円分の夢が買えたわけだ。


まり結果的に数億円分の夢の夢が潰されたのだ。

しかしたら、今ごろ数億円の宝くじがあたって世界中旅行して回っていたかもしれない。

俺と同じように夢を潰えさせられた人々、大勢大衆が読む可能性のあるブクマTwitterセリフが「なんか、ごめんな」?


ふざけるなよ。

ちゃんとご自身が紹介した記事の上部で、、

「こんなインチキ企業を紹介して、ネムを購入した人以外の大勢の方に大きな損害を与えてしまって申し訳ありません」

と謝れよ。

三ヶ月くらい謹慎しなさいよ。

それが、セールスマン道義的責任というものじゃないか


アフィリエイターで、イキっている奴らにないのは、この種の誠実さだよ。

紹介した人間が、

自分には責任はありません」

「最終的に決断したのは購入者から自分関係ありません」

と、逃げるんだ。

まるで、お年寄りに金を売って大損をさせたくせに、逃げた豊田商事セールスマンのように。


ちなみに、豊田商事セールスマン、その後どうなったか知ってる?

同じようなねずみ講に大量に流れて、大成功したんだって

人を騙すノウハウがあり、人を騙すことに躊躇がなくて、昔の仲間同士のつながりがあって、世間から隠れて仕事しなければならないから結束力が高くて、

から、彼らは裏で繋がりながら大衆をだまくらかす仕事にその後も就いて、のうのうと生きて、青春謳歌してしまったわけですよ。


他人責任を問わない、ということは、こういう奴らをのさばらせておく、ということですよ。

(あ、砂鉄風になってしまった)

そそのかした人間には責任は発生しない?

じゃあ、日大内田監督はどうなる?

配下選手をそそのかして他大の選手を壊しても、責任はなかったの?


きちんと、ブログTwitterで、インチキ会社製品を紹介した責任について謝罪するというのは、当たり前の話じゃないの?

アフィリエイターには、その種の責任はないの?


これから茶のしずく石鹸のような商品が紹介されて大事故が起きても、サイトに紹介記事を書いたアフィリエイターたちは、自分には責任はございませんと頬被りをするつもりだろうか?

きちんとサイトで、申し訳ございませんと謝ることすらしないのだろうか?

俺には不思議でたまらない。

そりゃ、資本主義社会営業活動経済の根幹をなすものから営業活動自体否定しませんよ。

しかし「申し訳ございません」と謝るのはセールスしたもの責任じゃないの?

アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん