「ブラウザー」を含む日記 RSS

はてなキーワード: ブラウザーとは

2019-03-15

今夜すべてのブラウザー

なんか検索しようと思って、スマホブラウザを立ち上げると、

前に開いていたページを再度読み込もうとするけど、

うそ記事読んだから、読み込み止めろと。俺のギガを無断で消費してんじゃねぇ、

今すぐ止めやがれ畜生めぇ、と叫びたくなるけど、

これを世界的に無くしたら、

帯域、電力をものすごく節約できると思うんだが。

東京ドーム20個分ぐらい。

知らんけど。

2019-02-07

引用おじさん」の会社での扱い

A.「仕事しないで、ネット掲示板また一日中やってるよ・・」

B.「増田顧問マインスイーパ以外の遊びを覚えたんだね・・」

どっちだと思う?

追記:みんなも席外す時は、ブラウザーを閉じるのを忘れずにね!!

2018-11-20

増田ブックマークしていない

ここ二年程増田にお世話になっている。

700近くブクマされた大切なエントリーもある。おすすめファンタジー小説のやつね。あれのおかげで読書ライフが光り輝いている。おすすめしてくれた増田達本当にありがとうございます

しかし、それなのに、自分増田スマホブラウザーブックマークしていない。

毎回増田とググってここにやってきている。

今日もやってる?と、暖簾をくぐる常連かのように。

さて。だからなんなんだ?と思うかもしれないが、特に何も意味は無い。

毎回出てくる増田貴久さんは増田存在を知っているのかな?

なんて思う位。

ちゃんブックマークしているんだろうな。

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

増田プログラマー養成講座 その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

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

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

 

index.php編集

Webサーバーの時間設定がズレていると、メッセージ作成したときに、作成日時もズレてしまます

(=12時に投稿したメッセージが、3時に投稿したことになってしまう、等。)

時間がズレてた場合は、Webサーバーの時刻を一時的に変更する処理を追加しておきましょう。

 

index.phpファイルの先頭に以下の内容を追加します。

上記フォルダの中の「index.phpファイルを開いて、先頭付近(2行目辺り)に以下の内容を追加します。

<?php

date_default_timezone_set('Asia/Tokyo'); // 2行目あたりに追加

 

動作確認

以上で、簡易チャットWebアプリが設置できました。

ブラウザーアクセスして、動作確認してみましょう。

 

 

以上で、データベースを利用した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:20181101230220 増田プログラマー養成講座 その16 Webアプリの完成見本(続き) ←★今ここ★

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

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

増田プログラマー養成講座 その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-27

GoogleからPixel 3をもらう方法

タイトル釣りです

はてなブックマーク - Pixel3を使ってみた感想を書いてみる|けんすう

http://b.hatena.ne.jp/entry/s/kensuu.com/n/n0446e4b766b5

>なぜ端末を配ってる?

Google一般人に売りたくてインフルエンサー(ネットSNS有名人)に持たせたい。でも彼らはiPhoneユーザAndroidには見向きもしない

Pixelエンジニア向けでは?

エンジニア連中が勘違いしてるだけで、少なくともGoogle微塵も思ってない。おそらくソフバンドコモ10万台だかを買ってもらうために、死ぬ気で一般人に売ると土下座させられた

>誰に配った?

普通は発表前に秘密保持契約下で関係者マスコミに配る。今回みたく発売直前にブロガーSNS有名人に配る事例も増えている(インフルエンサーマーケティング)

PR表記必要では?

先の記事はおそらく報酬が発生しておらず、広告主チェックもなく、いわゆるPR記事とは言えない。端末もらったと書いてるけど正確には期限のない貸し出しと思われる

>でも10万の端末もらってずるい

インフルエンサーにはこの手のガジェットが毎週クソほど送られてるし、案件となれば1本でお前らの年収を超えるので10万のスマホ1台で騒ぐ連中が首つっこむ世界じゃない

Appleは(or他の企業は)こんなことやらない

XS/XRの発表会にマスコミとインスタグラマー呼んで端末配ってる。発売日直前の同時刻に記事動画が一斉に出るのを不思議に思ったことない?

>むかついた、もう買わない

Pixelは放っておけばエンジニアとかオタクしか売れない。まずは一握りの人間を選別することで大衆を分断し、嫉妬させることでブランド認知を図るフェーズが先にある。買わせるための施策はその後で打ち出していく。

業界的には端末配って400ブクマホームラン級の大成功で、普通は50万払って記事書かせてもここまで伸びない。けんすう氏には今後も案件殺到するはず

>俺も欲しい

Googleは血眼になって配ってるので、ブログURLやインスタID添えて申し込めばワンチャンある。普段から自分ブランディングを怠ってる奴は論外

>そんな影響力ない

おとなしく「豆苗でけぇw」とでもコメントしてブラウザーを閉じるのが正解

2018-10-18

プログラムの実行環境の用意(paiza.io)

PHPの実行環境として、XAMPPを用意してもらったけど、これは後でデータベース練習をすることも考えてチョイスしました。

MySQLを使って「SQL」(問合型言語)の練習をするため。

だけど、PHPJavaを単体で動作確認するだけなら、オンライン上の実行環境提供してくれているサービスがあるので、それを使ってもOKだと思います

自分パソコンで実行環境を用意する作業も、初心者だと分かりづらくて面倒かもしれないからね。)

 

paiza.io

「paiza」はプログラミング学習や、プログラマー就職支援してるサービスです。

 

https://paiza.io/ja

このURLブラウザーで開いて、左上にあるプルダウンメニューで、「PHP」とか「Java」を選択したら、短いコード断片をテストできます。 

 

…っていうか、月額600円の有料会員に登録して、paizaのプログラミング講座を受講した方が、俺の下手な説明を読むよりも、ずっと分かりやすいかもwww

 

まあ、俺だったら、新しいプログラミング言語習得するときは、自分で本を買ってきて、自分パソコン動作させながら学ぶけど。

でも、プログラミング勉強する一番最初なら、こういう講座で質問しながら進めてもいいと思う。せっかく選択肢としてあるのだからね。

(俺はpaizaの回し者じゃないので、念のため)

 

anond:20181015215004

anond:20181017191404

2018-10-17

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

前回は、オブジェクト説明をした。

今回は、オブジェクトの使い方=オブジェクト指向プログラミングOOP)を学ぼう。

 

OOPの種類

オブジェクト指向プログラミングには、

  1. クラスベースJavaC++など)
  2. プロトタイプベースJavaScript、Ioなど)

などの分類があります

ここではクラスベースOOPを取り上げる。学習時間を短縮するために、Javaよりも簡単PHPOOPの基本を勉強してみよう。

 

PHPとは?

PHP (プログラミング言語) - Webページ作成のために用いられることの多い汎用プログラミング言語一種

PHPは誰でも手軽に使えるように工夫された、軽量なプログラム言語です。

 

PHPの準備

WindowsパソコンPHPを使うために、XAMPPというソフト無料)をインストールしよう。

 

XAMPPはいくつかバージョンがあるけど、ここではUSBメモリに保存できる「ポータブル」を使ってみよう。

↑このページにある「xampp-portable-win32-7.2.10-0-VC15.zip」をダウンロードして、ZIPファイルを展開します。

解凍して出てきた「xampp」をCドライブ直下コピーしてください。

これでPHPの実行環境XAMPP)の準備は完了です。

 

XAMPPの起動

Port(s)が「80,443」と表示されたら、XAMPP上のApacheWebサーバーソフト)が起動して、PHPが使える状態になってます

Apacheを止めるときは、「Stop」ボタンクリックします。)

 

PHPスクリプト作成

phpとは - はてなキーワード http://d.hatena.ne.jp/keyword/php

↓こんなかんじのサンプルコードがあるよね。

<?php

print("Hello, world!");

?>

プログラムソースコード増田に直接書くと、エスケープされて違う文字になるので、上の例では一部文字を置き換えてある。)

上記の表示の中で、全角文字の不等号「<」「>」を半角文字の不等号に置き換えて下さい。)

増田プログラムコード貼付けられないのか。不便だな!)

以上で、PHPプログラミングの準備と動作確認ができた。

 

PHPの基本文法

PHPの教材は、本やネット上の記事動画などたくさんある。自分で分かりやすものを探して読んでみよう。

ここではドットインストールPHP入門を参考にしてみよう。

 

3分程度の動画が30個=90分。最初は内容を理解できなくてもいいから、とりあえず全部一通り見てみよう。(1巡目は雰囲気だけつかめOK

 

「つまづきノート」の作成

2巡目以降は分からないことがあったらノート等にメモして、後で1つずつ解明していこう。

著者あとがき

 

私はGitを学ぶのに、実はとても苦労しました。それと同時に、「きっと同じように困っている人が他にもたくさんいるはずだ」と考えました。「理解するのに数日かかることを、短い時間でパパッと学べるコンテンツを作りたい」そう思いつき、「マンガでわかるGit 第1話」個人サイトにて公開したところ、いきなり、はてなブックマークで800ブックマークされました。

 

“つまづきポイント”を先回りするために

私は、Gitを使い始めて以降、わからないことがあったら「つまづいたこノート」に書いてきました。なお、本書の執筆にあたっても、日々勉強しながら解説を書くという形でした。わかばちゃんが「なんでこうなるの?」と疑問に思う部分は、私が過去につまづいた部分です。

 

ドットインストール PHP入門
(1) PHP利用の準備

 

(2) 構造プログラミングの基礎知識

 

(3) オブジェクト指向プログラミングの基礎知識

 

(4) その他、Webサイト作成一般的知識

 

(今回は、PHPの準備、PHPの基本文法理解までで終わってしまったorz

URLリンク10個以上貼ると、日記が書き込めないみたいなので、増田では記事を分割せざるを得ない。)

次回は、OOP関係している内容(#18~#24)を一緒に確認してみよう。

 


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 増田プログラマー養成講座 コンテンツ一覧

2018-10-16

増田プログラマー養成講座 その4 子ども向け教材「Scratch

今回は、子ども向けプログラミング学習教材「Scratch」(スクラッチ)を使って、一番簡単構造プログラミング手法を学んでみよう。

 

Scratchとは何か?

Scratch (スクラッチ) は、MITメディアラボが開発したプログラミング言語学習環境である

初心者最初に正しい構文の書き方を覚えること無く結果を得られる、遊び心のある実験インタラクティブアニメーションゲームなどの製作を通してさらなる学習のやる気を起こさせることを意図している。

 

 

タイルプログラミングとは何か?

プログラムのパーツをブロックで並べて、プログラムを作る方法

スクラッチタイルプログラミング一種

プログラミング視覚的に理解やすいので、初心者お勧めです。

 

オンライン版のScratch

スクラッチオンライン版とオフライン版がある。

ここではインストール不要で、ブラウザー上で動作するオンライン版を使ってみよう。

(※オフライン版を使いたい場合は、「Scratch インストール」で検索すれば、インストール方法が紹介されている。)

 

構造プログラミングのパーツを並べてみる

順次(上から下へ並べた順番に処理を実行していくこと)

10歩動かす」などのパーツを上から下へ順番に並べてつなげればOK

 

反復

オレンジ色の「制御」のところにある「10回繰り返す」というパーツを使えばOK

Javaの「for」に相当する機能

 

分岐

オレンジ色の「制御」のところにある「もし[ ]なら」というパーツを使えばOK

Javaの「if」に相当する機能

 

スクラッチの遊び方

Scratch 使い方」で検索すれば、スクラッチの使い方がいろいろ紹介されている。分かりやす記事YouTube動画を探して、いろいろ練習してみよう。

 

参考書

Amazon.co,jpで「本 Scratch」を検索すれば、いろいろ参考書が出てくる。

日本Scratch第一人者と言えば阿部和広先生だろう。とりあえず彼の本を読めばScratchの使い方は理解できるはずだ。

 

まとめ

 

以上で、構造プログラミングの基本である順次」「反復」「分岐」の使い方が理解できた。

次回は、手続プログラミングの後半であるオブジェクト指向プログラミング」を学習してみよう。

 


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 増田プログラマー養成講座 コンテンツ一覧

2018-06-23

Markdownは何がすごいの?

この前、

・ 「HTML書かなくてもいいんですよ!!」← 今はHTML書く時代じゃないだろ…

・ 「テキスト打つだけで見出しとか箇条書きとか書けます」← 増田でも見出しと箇条書き書けてるんだが

・ 「みんな使ってるからフォーマットデファクトスタンダードになっている」← フォーマットならテンプレートを用意するもの

・ 「ExcelWordで書くよりも検索やすい」← なぜ突然Excel比較を?

・ 「![タイトル](URL)で画像も貼れちゃいますよ!!」← 画像は選んで貼る時代じゃないのかよ…

・ 「書き方がシンプルからタイピング回数が減ります」← スマホで ### とか半角にして打つのめっちゃダルいし、IMEでいちいち半角にするのもダルいけど

・ 「プレビューを表示しながらMarkdownを書けるエディターがあって便利」← 例えば増田プレビューを見なくても書けます

・ 「あと、自動HTML化できるんですよ!!」← 今はHTML書く時代じゃないだろ!!

…などという回答を得たんだけど、Markdownを使う利点(同じソフトウェアや、同じWebサービスで使わない場合比較して良くなる点)が知りたい。

 

「〇〇ができる」と言う前に「それが必要でなくなること」のほうが大事

 

【追記:2018/06/23 9:37】

自分ひとつつけました。

・ 素朴なテキストしか入力できないブラウザーでも、Wordみたいな体裁付きの文章をかける

Markdownの利点は、ブラウザーの記入欄がWindowsメモ帳以下だからこそ成立するのではないでしょうか。

2018-02-15

anond:20180215234454

ブラウザーと同じで、選択肢が狭まれユーザーに将来的な不利益が発生するかもしれない、という懸念はたしかにあるかも

2018-01-20

仮想通貨オートサーフ

この1,2か月、仮想通貨界隈の盛り上がりと、暴落後の阿鼻叫喚を眺めながら、不思議既視感にとらわれていた。

10年以上前オートサーフ流行し、急速に凋落した頃の雰囲気そっくりだったからだ。2005年から2006年頃にかけての話だ。


オートサーフとはなにかというと、

インターネット界隈で、オートサーフは、広告掲載したウェブサイトウェブブラウザー上で回転させるトラフィックエクスチェンジのことである。したがって、オートサーフ広告掲載したウェブサイトに大量のトラフィックを呼び込むことができる。メンバーは閲覧するサイト毎にクレジットを稼ぐことができ、このクレジットは、オートサーフの回転に追加することで、メンバーサイト広告することができる。オートサーフ業者に料金を支払う外部の広告掲載者は、サイトを追加することができる。

https://en.wikipedia.org/wiki/Autosurf


一見して、よくわからない説明かもしれない。あたりまえだ。その理由は後ほど。

ようするに、投資にうとい人間にとっては、オートサーフとは、業者お金を預けて、ブラウザー上で広告を表示させて放っておくと、預けたお金がたちまちのうちに何倍にもなるという、きわめて魅力的な「投資」話に見えたのだ。

12 DailyProとHYIP


オートサーフ業者のなかで最大手12 DailyProというアメリカ業者で、ユーザーが$6から$6,000の金額を預けると、12日間で144%の利益が得られると公言して、多数のユーザーを集めていた。

から見ると、じつにあほらしい話に見えるが、当時はこれがもっともらしい投資話に見えるようなネット上の光景があったのだ。その話も後ほど。

2005年の末頃には雨後の筍のように多数のオートサーフ業者が乱立し、高利率をうたってユーザーを集めていた。

特に利率が高く、リスクも高いサイトHYIPと呼ばれていたのだが、そのリスクとはどういうものかよくわかっている人はあまりいなかったように思う。

(HYIPの公言する利率がどのようなものであったかの例として、本エントリーの末尾に当時受信したスパムメールを貼っておく)

利率が高いサイトほど胡散臭いという共通認識はあった。

実際、運営開始当初は高い利益分配報告をしていたHYIPのサイトが、やがて運営を停止し、ドメインごと消滅するという事態は珍しくなかった。

そのようなことが続くと、オートサーフ広告業からの出稿料金をユーザー間で分配しているのではなく、ユーザーが預けたお金を分配しているだけのねずみ講ではないか、と危惧する人が出てくるのはもっともなことだった。

そしてその危惧は的中した。

2006年2月SECアメリカ証券取引委員会)は12 DailyProを恒久的に営業停止とした。

SEC捜査により、12 DailyProは世界中で30万人以上の投資家から5000万ドル以上を集めた巨大なねずみ講であることが明らかになった。

12 Daily Proの運営カリスジョンソン逮捕され、12 DailyProは運営停止後、法定管財人管理下に置かれた。

当然、12 DailyProにお金を注ぎこんでいたユーザーは大混乱に陥った。

法定管財人はその後数年間にわたり12 DailyProの清算状況をユーザーメールで報告しつづけたが、ユーザーに戻ったお金ほとんどなかったと思う。



日本での反応


日本インターネット界隈では、2005年にはオートサーフに関する話題が盛り上がりを見せていた。

各種掲示板では有利なオートサーフ業者に関する議論が行われ、ブログ上で収益報告をする記事が相次いだ。

「楽して高収入」をうたいながら、オートサーフ業者への登録手順を解説し、アフィリエイト収入を得たり情報商材販売する者が現れた。

そういった人々は、オートサーフのことを、まだそれほど世の中に広がっておらず、知っている者(情報強者)だけが得することのできるおいしい「投資話」だとしていた。

このような「投資話」で読者を煽った人びとは責任を取らず、消えた。

昨年から仮想通貨への投資話がネット上で盛り上がりを見せていたとき自分にはオートサーフのことが思い出されて、投資する気にはなれなかった。

もちろん、仮想通貨オートサーフでは、技術的な背景も、行われている投資の規模も全く違う。それはわかる。

だが、仮想通貨が盛り上がりを見せたときの、日本インターネット界隈での反応、うごめいている人々の素性が、オートサーフ騒ぎの時と、あまりにもよく似ていた。

筋の悪い「投資話」の特徴



今回、仮想通貨暴落を受けて、筋の悪い「投資話」に共通する日本インターネット界隈の反応を、自分自身経験則としてまとめておく。


筋の悪い「投資話」の特徴

  1. これは海外からもたらされた新しい情報だとして、ブログで騒ぎ始める人物が現れる
  2. 騒ぎ始める人物は、アフィリエイト情報商材で読者から金を集める山師的な素性の者が多く、秘密めかして自分権威であることを装う
  3. 投資話」の内容は、ネット上で投資するだけで、多大なリターンが得られる楽なものであるが、仕組みがよくわからない
  4. 山師煽りを受けて、あまり勉強ができそうでない、金融リテラシーの低そうなユーザー投資を初め、自分最先端を行っており、賢いのだと、ブログソーシャルメディアでイキり始める
  5. 上記煽りを受け、金融リテラシーが低く、所得も低いが、真面目なユーザーが、人生一発大逆転のチャンスだとして「投資話」に飛びつき、真面目に論じ始める
  6. 投資話」がもっともらしい「投資」に見え始める





参考:HYIPの広告メール

New and Good HYIP!! Auto-Withdrawals!

http://dischargefunds.com/

125% after one day (Auto-Withdrawal)

Plan Spent Amount (US$) Daily Profit (%)

Plan 1 $1 and more 125.00

68% daily for 2 days(Auto-Withdrawal)

Plan Spent Amount (US$) Daily Profit (%)

Plan 1 $1 - $100 65.00

Plan 2 $101 - $5,000 68.00

165% after two days (Auto-Withdrawal)

Plan Spent Amount (US$) Profit (%)

Plan 1 $5 - $100 160.00

Plan 2 $101 - $5,000 165.00

2017-12-27

ポモで埋まった異世界生活

https://twitter.com/shinkai35/status/945771033696509952 へのリプライです。書くところが無いので、ここに書きます。この話は全てフィクションで、実在人物組織には一切関係ありません。

1.ブラウン管に広がる世界

その日、文筆家しんかいはPCから出るピピピ・・・と言う異音で目を覚ました。翌日が休日である事に安心しきって、ついついツイッターリツイートされてきたポストモダニスト著作いかおかしい話であるかを語っていたはずなのだが、顔にキーボードの模様をつける結果となっている。実感は沸かないが寄る年瀬には勝てない。相対主義が何を主張しようが、ヒトにはその限界がある。そんな事を思いながら、テレビスイッチを入れようとしたとき、しんかい異変に気づいた。

部屋に置いてあるそれは、平面的で画面が大きな液晶テレビではなく、画面は小さいが奥行きのある立方体、昔懐かしいブラウン管のもので、ダイアル式のスイッチチャンネル選択するそれだ。電源のオン/オフ金属トグルスイッチがついており、もしかしたら産まれから実際に目にしたテレビの中でもっとも古いものかも知れない。背面から出て壁につながっているテレビ線のコード同軸ケーブルではなく、平たいプラスチックの両端に二本の細い線があるものだ。もう平成も終わろうとしているのに昭和過ぎる。が、昭和であってもテレビの裏の埃は変わらない。くしゃみが出てきた。

パチンと電源を入れる。ヴォンと音を立てた後、数秒の間を置いて粗い絵が映し出された。4Kや8Kのテレビ宣伝をみるたびに、もう走査線の本数を向上させてもと思うが、いやおう無しにでもその重要性を認識せざるを得ない絵だ。北朝鮮テレビよりひどい。2017年12月27日、朝7時のニュースが始まった。アナウンサーの「おはようございます」は、普段通りの番組だが、他は普段通りとは言い難いものであった。見慣れたコンピュータグラフィックス今日見出しが、アナウンサーの横の黒板に置き換えられている。ボードですらない。何より、国家放送第一と言っている。

しんかいチャンネルを回してみた。チャンネルはかくんと90度づつ回転し、四つしかチャンネルが無いことがわかる。ぐるっと一回転させる。四つあるチャンネルのうち、一つは白黒の画素が激しく入れ替わるノイズが流れていたが、三つは使われていた。国家放送第二、国家放送第三、ノイズ最初国家放送第一。どうやら、国家放送しかないようだ。第二はこの時間帯なのに正しい文学について解説し、第三は老人が正しい体操実践している。しんかいは、この時点でテレビ登場人物全員が、カーキ色の上着を着ており、一列に並んだ大きめのボタンをきっちり留めていることに気づいた。

チャンネル国家放送第一に戻す。国民服のようなものを着たアナウンサーが読み上げるのは交通事故気象情報と言うところは、公共放送ニュース番組と同じだ。しかし、一つ一つについて解説を丁寧に与えていく。しばらく唖然としながら番組を見つめ、思わず「何だ?」とツイートした。ニュース解説があるだけであったら、驚かなかったかも知れない。しかし、先々月の災害被災者感情を、微分可能多様体と言う単語を持ち出して説明しようとしている。そう、ポストモダンだ。ポストモダンについては日本有数の知識を有すると自認しているが、寒気についてのポストモダン解釈は初めて聞く。

はっきり認識はできているが、全く理解ができない状況。自らの視覚聴覚を信じることができない。思わず、「テレビポストモダンになっている」となっているとツイッターに書き込む。「え、愛知だけでは?」「柄谷行人が死んだりでもした?」「ポストモダンに“なる”はおかしいだろう」とリプライが返って来る。誰もこのポモな国家放送を観てはいないようだ。ブラウザーポータルサイトニュースを見ても、特段、テレビ放送に関するものはない。ツイッターフェイスブック検索でも、しんかいと同じものを見ている人はいないようだ。

このブラウン管テレビけが、ポモな国家放送を流しているのであろうか。アンテナ線は壁につながっているが、これはモックなのであろうか。手の込んだ悪戯しか考えられない状況ではあるのだが、手の込みすぎたところが気になった。目の疲れを感じる。気づくと一時間国家放送を観ているのだが、同じ内容が繰り返し放送されているわけではない。チャンネルは三つ。ブラウン管テレビ昭和風ではあるが、チャンネルスイッチは特製だ。粗雑な出来とは言え、かなりの労力だ。現実とも夢とも断言できない。

しんかいは電器店にいって、他のテレビを観ることに決めた。冷静に考えればテレビを摩り替えられたとしか思えないわけで、窃盗警察に届出を行なうべきだが、この国家放送が持つリアリティがそれを躊躇わせた。無理な体勢で寝てしまったので二度寝の誘惑もあるが、“ブラウン”管からの一つの連想が心をざわめかしていた。ブラウン管発明者はフェルディナントだが、ポストモダン思想批判者にも有名なブラウンジェームズロバートブラウンがいる。

著作「なぜ科学を語ってすれ違うのか」でブラウンは、国家などの社会的構築物が必然ではなく、人々の考えの偶発的な結果によるものと考えると、社会が人々の考えを統制しだしてファシスト国家に陥る危険性を指摘していた。また、ポストモダン科学方法への懐疑は、科学の進展を阻害し、技術進歩を阻害する事になる。つまりブラウン管に映し出される世界徹頭徹尾ポストモダン支配された世界と言える。

ポモの危険性を指摘してきたしんかいにとっては悪夢しか言いようが無いのだが、しんかいは心踊っている自分自覚していた。日常からにじみ出る不穏な世界兆候アニメでは親しんだ別世界がそこにある。「けものフレンズ」は好物だ。このときしんかいは、柄谷行人の『日本近代文学の起源』の結核の話をすっかり忘却していた。ポストモダン思想支配された世界であれば、繁華街の電器店がいか危険場所であるかは、最もしんかい理解しているはずであるのにである

2.服装以外は昭和40年

テレビに見入っていたので気づかなかったが、家を出る前に、アパートの部屋が狭くなっている事に気づいた。振り返れば玄関が見える狭さなので迷子にはならないが、間取りも見覚えが無い。六畳一間と台所、バストイレ付きではあるが、便器和式である。昨夜、帰宅する家を間違えたのであろうか。しんかい映画パトレイバー the Movie」の帆場のアパートしか、似たような物件を見たことが無い。

机の上のPCの下には、書きかけの原稿用紙が散らばっていた。題は「科学のためのポストモダン思想からの脱却」とある。見覚えのある字ではあるが、自分のものを含めて久しく手書き文字を読んでいないので、誰のものかは思い出せない。大判封筒も置いてある。宛名は、自分であった。送り主は「鈴木幸子」とある。中はゲラ刷りで、赤が入っていた。出先で原稿を読もうと封筒を手に取る。

ポストが大きい金属製の重い扉をあけると、アパートの外側の廊下に出た。二階だ。表札は確かに自分名前が書かれている。鍵がないので施錠できないがやむを得ない。ところでここは一体どこなのか。スマートホンを出して地図アプリ位置検索をかける。すぐに「こんな所でスマホが使えるわけが・・・」と思うが、現在位置はあっさり示された。GPSの電波は届いている。インターネットも使えた。自分場所が異世界なのか、そうでないのか、明らかになってきた状況を元にしても判断が出来ない。

かなりの資力が必要になるが、古いアパートの部屋に自分を押し込む事は可能だ。しかし、衛星測位システム電波までは防ぐ事ができなかったのであろう。聖戦士ダンバイン以来、主人公が異世界に飛ばされる娯楽作品に親しんできたしんかいは、密かに期待した状況が否定されて落胆する。まだ十分な確信が持てないが、これは壮大な仕掛けの悪戯だ。街の中心部に向かえばはっきりするであろう。しんかいは、金属の音を響かせながら階段を降りていった。

5分後、しんかい自分が異世界にいる事を確信した。悪戯とすれば、神の仕業であろう。スマホ地図アプリ位置情報は機能していたが、道路の舗装が汚く、空気が汚れていて、高いビルが無いので空が見上げやすい。そして、旅行先でしかたことが無い路面電車が走っていた。しんかいの知る名古屋市には市電が無い。しかし、ベージュと赤と緑のカラーリング路面電車が走っている。地図アプリ位置情報は、間違いなく名古屋だ。

道を歩く人々の服装は、男性国家放送局アナウンサーが着ていた国民服女性もんぺ姿である。しんかいは人々が自分凝視するのが気になって仕方が無かった。しんかいの格好はPコートチノパンである。この世界では明らかに浮いている。この恥ずかしさをツイートして紛らわせたい衝動に駆られたが、文章だけでは何を書いても気がおかしくなったと思われるであろう。国民服もんぺ女性市電が映った写真を撮って、「ここはどこ?」とつけてアップロードをした。「戦時中名古屋市」とリプライがつく。

戦時中なのであろうか。朝のニュースではそのような事は一切言っていなかったし、テレビ戦後で、カラー化は高度成長期最中だ。昭和40年代ぐらいが相場に思える。状況を把握するために、一日中テレビを観ていた方が良かったかも知れない。古くて小さな家電店が目に付く。中に入ると、期待通りテレビが置いてあり、放送を見ることが出来た。店主は商売っ気の無い老人で、都合が良いことに客に関心がないようであった。テレビ出演者は全員、国民服もんぺであり、ドラマですらそうであった。アパートの部屋のテレビけがおかしいと言うのは否定された。

しばらくテレビに見入っていたが、空腹を感じてきた。何かを食べたいと思うが、この世界食事をとる方法が思いつかない。飲食店はあるようだが、市電で使われている硬貨は見かけないものだった。この世界で使える金を持ち合わせていない。このままでは行き倒れ、帰宅をしても孤独死になってしまう。途方に暮れたところで、家電店に若い痩せた男が入ってきた。肌が白い。「単一電池・・・」と言ったところで、ゴホゴホと口を押さえて倒れこむ。指の隙間から見える、鮮血。小説の中でしか知らないが、即座に結核と言う単語が思いつく。店主は男の様子を気にせず、「ろうがいかい。向かいの店のホメオパシーが効くよ」と電池を出してくる。これは、不味い。

しんかいは、危機を感じて慌てて電器店の外に出た。ドンと人とぶつかる。「ごらぁ、前を見て歩け!」と旭日章のついた帽子かぶってサーベルをつけたおっさん、明らかに警官に怒鳴られる。反射的に「すいません」と謝るが、警官はしんかいを上から下まで舐めるように見ると、「おまいさん、なんちゅー格好をしている。ちょっと署まで来い。三日はぶち込んでやる」と言い出した。その瞬間、中で物が落ちて割れる音がした。「お客さん、ちょっと、しっかり」と言う店主の声がする。警官はそちらが気になったのか、店の中に入った。

しんかいは、その隙を見逃さず走り出した。一瞬「逮捕されれば食事は出るかも知れない」とも思ったが、この体制国家的な異世界では逮捕されれば拷問を受ける可能性もある。どこにも行く宛てが無いと言うわけでもない。持って来た封筒の裏側には、住所が書いてあった。何者かは分からないが、「鈴木幸子」を頼る事にしよう。少なくとも、この世界のしかいを知っている人物である事は確かだ。

2017-11-30

よくWebデザイナーなんかのウンコタレが「IEとかクソブラウザー」「MSブラウザ作るな」とか言ってやがるが、あのなあ、IE時代では、他のブラウザーも似たり寄ったりだったんだよ。ただ未だにIE使っている人がいるだけで、IEが悪いわけじゃねーだろうが。クズ

ウンコタレWebデザイナーども

アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん