  |
はてなキーワード: フォルダとは
ここ1年～半年でアダルトVRを取り巻く状況は大きく変わった。
具体的には、制作本数がここ半年で10倍以上に増え、リリースされる全アダルト作品のうちVR作品はすでに3割を超えている。
また、PCという母艦を必要としないスタンドアロン型の低価格なVRゴーグルが発売されたり、PS4という母艦が必要ではあるがPSVRが値下がりしたりと、ハードウェア面でも大きなモメンタムを持った流れになっている。
さて本稿では、無料アダルトVR動画の泉である「PornHub」をPSVRで楽しむ方法についてメモしておこうと思う。
ネットを探せばすぐに見つけられる程度のことしか書かないので、意欲的なVRユーザーにとっては旧聞に属することばかりになろうと思う。お許し願いたい。
4. LITTLSTARで再生する
目的の動画ページの動画の下、いいねボタンなどの並びに「VR」というタブがあるのでこれをクリックするとダウンロードボタンが下に現れる。
一番左の「VRビデオ ダウンロード」というボタンをクリックするとMP4ファイルのダウンロードが始まる。こんなに簡単でいいのかと思う。
ふつうのデータダウンロード同様に右クリックメニューが使えるので、DL先やファイル名をここで指定してもよい。
ただしVR動画は巨大なので（20分で1GBを超えるものもある）、まずは再生時間の短いものから試すとよいだろう。
PornHubのCDNはCDNといいつつスループットは悪く時間がかかるうえにちょいちょいエラーでDLが止まる。停止してすぐなら止まったところから再開できることもあるが、気づかず放置するとまた最初からやり直しとなるので注意されたい（セッション寿命を短く設定しているのだろう）。
PornHubプレミアム会員への登録は、さしあたり必要ない。
ダウンロード速度 → たいして速くならない
ハイクオリティ版ダウンロード可 → 解像度は同じ、ビットレートのみ倍。フリー版で十分
後述するPS4アプリ「LITTLSTAR」はファイル名でVR動画のタイプを判別するので、DLしてきた動画を実際にPCで再生してみて、タイプに応じたファイル名をつけてやる。
VR動画の画面レイアウトは右眼用・左眼用ふたつの映像を「上下に並べるタイプ」と「左右に並べるタイプ」の2種類あり、PornHub上の動画も2つが混在している。
上下に並べるタイプを「オーバーアンダー」と呼び、左右に並べるタイプを「サイドバイサイド」と呼ぶ。
さらに、録画範囲も、「全天球360度」をカバーしたものと、「上下左右180度（前半球）だけ」を写したものがあり、これも作品によってまちまちである。
つまりVR動画には「360度オーバーアンダー」「360度サイドバイサイド」「180度オーバーアンダー」「180度サイドバイサイド」の4種類があることになる。
もっとも、この中で「180度オーバーアンダー」は使われているのを見たことがない。
Googleの提唱するVR180というVR動画規格が180サイドバイサイドなので、今後はこれが主流になっていくだろう。
オーバーアンダー／サイドバイサイドは一目見ればわかるが、360度か180度かはよく見ないとわからない。わかりやすい判別ポイントは「壁」。室内で録画されている作品の場合（大半がそうだが）、壁が3面しか映っていなければ180度、4面の壁が映っていれば360度動画である。また、360度動画は画面の右端と左端がループしているのでこれも判別ポイントになるだろう。
ファイル名の末尾を以下のようにする。
| タイプ | ファイル名 |
|---|---|
| 360度オーバーアンダー | _ou.mp4 |
| 180度オーバーアンダー | _180_ou.mp4 |
| 360度サイドバイサイド | _sbs.mp4 |
| 180度サイドバイサイド | _180_sbs.mp4 |
たとえば「180度サイドバイサイド」の「ハラビロカマキリの産卵.mp4」は「ハラビロカマキリの産卵_180_sbs.mp4」となる。
「_180」がない限り360度と解釈されるので、自分がわかりやすいように「_360_ou」などと書くことは問題ない（判別には影響しない）。
また、_ou (over under) の代わりに _tb (top bottom)、_bt (bottom top)、_sbs (side by side) の代わりに _lr (left right)、_rl (right left) などと書いてもよいようだ。
リネームの済んだ動画ファイルをUSBメモリにコピーするが、フォルダが決まっている。
メモリのルートディレクトリ（一番浅いところ）に「LITTLSTAR」というフォルダを作り、その中にコピーする。リトルスターという名前だがスペルに「E」がないので注意。
LITTLSTARフォルダの中は階層化してもかまわないが、再生ソフト LITTLSTAR の一覧表示には反映しない（サブフォルダの中身も引き出されてフラットに一覧化される）。
コピーが済んだらUSBメモリをPS4のUSBスロットに装着しよう。
PlayStationStoreで「Littlstar VR Cinema」というアプリ（無料）をゲットする。
https://store.playstation.com/ja-jp/product/UP8821-CUSA06120_00-JPPS400000000001
起動するとメニューの一番右に「ライブラリ」という項目がある。ここを開くとUSBメモリの内容が一覧されているはずだ。
LITTLSTARは海外のアプリのせいか、決定が「×」、キャンセルが「○」で日本とは逆の操作体系となっているので慣れないうちはイラッとすると思う。
以上。
大学は受け身で授業を受けるところではなく、自分で勉強していくところだ。
嘘だと思うなら好きな大学に潜り込んで授業を聞いてみるとよい。「こんなものか」と思うだろう。
もし東大に優秀な学生がいるとしたら、彼が優秀なのは「東大の授業を受けたから」ではなく彼自身が自力で勉強したからだ。
あなたのいる大学が東大だろうが偏差値の低い大学だろうが学問を学ぶためにやるべきことはあまりかわらない。
その分野の名著、定番書と呼ばれるものをどんどん読んでいこう。
ただ読むのではなく数年後に自分が研究者側になることを意識して考えながら読もう。
この記述は正しいのか？反例はないのか？全体の論理の流れはどうなっているのか？もっとエレガントに証明できないか？
東大生に比べて偏差値の低い大学の学生が不利なのはおそらく共に学ぶ人がいないことだ。
議論する相手や輪講をする相手が見つからないなら教授陣に相談に行こう。
どんな偏差値の大学だろうが教官はまともな研究者だ。彼らはあなたの強い味方になる。
そうしたらその研究室の教授にメールを出してみよう。東大だろうがハーバードだろうが臆することはない。
「研究生にしてください」「学科を転向したいのですが相談に乗ってください」「あなたの研究室に入るにはどうしたら良いですか？」
といったメールを彼らは国内外からよく受け取っているので対処に慣れている。
仮に返事がないならおそらくあなたのメールは迷惑メールフォルダに入ってしまったのだと思う。めげずに別の人にも送ってみよう。
（フリーメールアドレスは迷惑フォルダに入りやすいので大学のメールアドレス xxx.ac.jp から送った方がよいと思う）
あなたの知識と理解度が研究レベルに達していればどの大学でも入ることができる。
（ただし分野による。例えば物理学科なら素粒子理論と宇宙論は別格。どの大学でも入るのは厳しい。）
増田は悪くない。運が悪かった。
そして娘さんの人生は終わっていないよ。
ここがスタート地点だ。
よかったら娘さんに印刷して渡してほしい。（anond以下を削ってね）
それから検索すると「XX研究室に入るにはどうしたら良いですか？」といった FAQや、勉強法、心構えをまとめたページがたくさん出てくると思う。
数学は体力だ！ - 筑波大学 理工学群数学類/大学院数学専攻
すぐに思い出せたもの３つだけ載せておく。
いや、その気持はすげえわかるけれど、でもそれを言うと、一神教が言うところの「社会というのは男性主導で作るのが正しい、女性は貞淑に従うべき」ってのも、論理としては誤のフォルダでしょ？ つまりは現代の価値観でで歴史上のその時点でに行動を判断はできねーよね、に行き着くわけでさ。
今現在の判断はいま現在の価値でするにとどめて（つまりこの場合、現代日本社会においてラディフェミは過剰な暴力で不要）、本来どうであるべきであったか、本質的に正解だの不正解だのみたいなところに突っ込んでも、益は少ないと思うわけよ。
ってなわけで「歴史のある時点においては必要とは言わないまでも意味のあった思想だった」「でも現代日本社会においてはちょっとそぐわねえと思うよ」って記事書いた。
基本は、同じなので前回やった更新処理をちょっと変えれば削除もすぐできます。
投稿されたメッセージを削除する機能を、Webページに付けてみよう。
前々回作ったメッセージの一覧の中に、削除ページにジャンプするリンクも入れておいた。
<td><a href="welcome/delete/<?php echo $item['id']; ?>">削除</a></td>
ブラウザーでHTMLソースを見ると、ここが以下のようなHTMLに書き換わってる。
これは「メッセージID番号が2のメッセージ」を削除対象にして、削除ページにジャンプする。
ユーザーが「http://localhost/waf/welcome/delete/2」というURLで、削除ページにアクセスしたら、コントローラーで「2」を受け取って使いたい。
CodeIgniterでは、URLの文字列を解析して、使うことができる。
以下のようにコントローラーを改造してみよう。
// 削除画面
public function delete($id = '')
{
$this->load->view('chat_delete');
}
delete()メソッドの引数で、URL中の「2」の部分を受け取れる。
「$id = $this->uri->segment(3);」でも受け取れる。
ユーザーに「本当に削除しますか？」みたいな注意喚起をしておきたい。
<?php defined('BASEPATH') or exit('No direct script access allowed');?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="<?php echo base_url(); ?>">
</head>
<body>
<form action="welcome/delete" method="post" accept-charset="utf-8">
<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>
<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番号を仕込んでおく。
// 削除画面
public function delete($id = '')
{
$id = $id ? $id : $this->input->post('id');
$action = $this->input->post('action');
$this->chat_model->delete_message($id);
}
$data['talk'] = $this->chat_model->read_message_by_id($id);
$this->load->view('chat_delete', $data);
}
で、モデルに用意したデータ削除用メソッドを呼び出しているだけ。
次は、モデルでdelete_message()メソッドを用意しよう。
// 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();
}
SQLの「DELETE」を使えば、指定したレコード（１件分のデータ）を削除できる。
「DELETE FROM talk WHERE id = ?」で、talkテーブルのmessageをidを指定して削除している。
データを削除した後の挙動は、メッセージID番号がなくなるので、削除ページに表示できるメッセージデータがなくなる。
（例）id=2のデータを削除したら、SQLで「SELECT * FROM talk WHERE id = 2」を取得しても、空のデータ＝データがない状態。
その場合は、
<p>※該当するメッセージがありません。（または削除済です。）</p>
と表示させてる。
以上で、SQLの「DELETE」を使ったデータの削除ができた。
長々と説明したが、今回の大事な点は、SQLの「DELETE」の使い方だ。
以上で、MVCフレームワークを使ったOOPの使い方とSQLの使い方を見てきた。
（SQLはSQLだけで説明したほうが良かったね！MVCフレームワークの説明とSQLの説明が混在すると要点が分かりづらくなる？）
anond:20181015215004 未経験からのプログラマーなんだが全然分からない
anond:20181016015826 増田式プログラマー養成講座 その１ パソコンの用意
anond:20181016164341 増田式プログラマー養成講座 その２ プログラム＝データ＋処理、プログラム言語の種類
anond:20181016180059 増田式プログラマー養成講座 その３ 構造化プログラミングの基本（順次、反復、分岐）
anond:20181016193144 増田式プログラマー養成講座 その４ 子ども向け教材「Scratch」で構造化プログラミングの練習
anond:20181017161003 増田式プログラマー養成講座 その５ オブジェクトとは何か？
anond:20181017191404 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備
anond:20181019181549 増田式プログラマー養成講座 その７ OOPの仕組み（前半）
anond:20181020230044 増田式プログラマー養成講座 その８ OOPの仕組み（後半）
anond:20181022232327 増田式プログラマー養成講座 その９ 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)要件定義
：
前回は、Webアプリの骨組み（スケルトン）に、SQLでデータの追加と取得をやりました。
前回作ったメッセージ一覧に、[編集]のリンクも入れておいた。
<td><a href="welcome/update/<?php echo $item['id']; ?>">編集</a></td>
という１行の部分。
ブラウザーでHTMLソースを見ると、以下のようなHTMLになってるはず。
これは「メッセージID番号が2」を対象にして、編集ページにジャンプすることを意味する。
「http://localhost/waf/welcome/update/2」というURLで編集ページにアクセスしたら、メッセージID番号の「2」を受け取れるようにしたい。
// 更新画面
public function update($id = '')
{
$this->load->view('chat_update');
}
CodeIgniterでは、URLから文字列を取り出す方法がいくつか用意されている。
// 更新画面
public function update()
{
$this->load->view('chat_update');
}
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()メソッドで順番を指定すれば取得できる。
データベースでメッセージ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();
}
「WHERE id = 2」とすれば、メッセージID番号が2のメッセージのデータが「talk」テーブルから取り出せる。
もし該当するデータがなければ、返されるデータは空になる。（データが返ってこない。）
CodeIgniterの「row_array()」は、１件分のデータを配列の形にして返すメソッドだ。
<?php defined('BASEPATH') or exit('No direct script access allowed');?>
<!DOCTYPE html>
<html>
<head>
<base href="<?php echo base_url(); ?>">
</head>
<body>
<p>メッセージを変更して「更新する」ボタンを押してください。</p>
<form action="welcome/update" method="post" accept-charset="utf-8">
<label>メッセージ</label>
<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>
データベースから取り出した１件分のメッセージを表示する部分を追加した。
<input type="text" name="message" value="<?php echo $talk['message']; ?>">
の「<?php echo $talk['message']; ?>」という部分だ。
これで変更したいメッセージの本文を表示できる。
あと、編集したメッセージをWebサーバーに送信できるように、Formタグや送信ボタン（「更新する」の部分）も追加した。
<input type="hidden" name="id" value="<?php echo $talk['id']; ?>">
という１行も仕込んである。
// 更新画面
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);
}
メッセージID番号を指定して、データベースから取り出し、Viewに渡すデータを用意している。
ユーザーがメッセージの編集をして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()メソッドを用意しよう。
// 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();
}
SQLの「UPDATE」を使えば、指定したレコード（１件分のデータ）を更新できる。
「UPDATE talk SET message = ? WHERE id = ?」で、talkテーブルのmessageをidを指定して更新している。
CodeIgniterの「affected_rows()」メソッドは、更新した行数を返す。＝成功なら1行、失敗なら0行となる。
コントローラーの「$id = $id ? $id : $this->input->post('id');」という行は、$idの受け取り方が2パターンあるので、それに対応している。
＝編集ページの表示で、1回目の表示と、2回目以降の表示で、$idの受け渡し方が変わっている。
URLに埋め込む方法（上記の1回目のような方法）は、ユーザーが勝手に値をいじれるので、基本的には使わない方が良い。
以上で、SQLの「UPDATE」を使った、データの更新ができた。
長々と説明したが、今回の大事な点は、SQLの「UPDATE」の使い方だ。
CodeIgniterの使い方や、Webサイトの作り方（FormタグなどのHTMLの知識）は、オマケ程度に見ておいて欲しい。
次回は、データを削除するSQL「DELETE」の使い方を見てみよう。
anond:20181015215004 未経験からのプログラマーなんだが全然分からない
anond:20181016015826 増田式プログラマー養成講座 その１ パソコンの用意
anond:20181016164341 増田式プログラマー養成講座 その２ プログラム＝データ＋処理、プログラム言語の種類
anond:20181016180059 増田式プログラマー養成講座 その３ 構造化プログラミングの基本（順次、反復、分岐）
anond:20181016193144 増田式プログラマー養成講座 その４ 子ども向け教材「Scratch」で構造化プログラミングの練習
anond:20181017161003 増田式プログラマー養成講座 その５ オブジェクトとは何か？
anond:20181017191404 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備
anond:20181019181549 増田式プログラマー養成講座 その７ OOPの仕組み（前半）
anond:20181020230044 増田式プログラマー養成講座 その８ OOPの仕組み（後半）
anond:20181022232327 増田式プログラマー養成講座 その９ 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でデータの削除
：
メモアプリはたくさんあるがWEBページを保存する機能をもったものは今のところこの2つである。OneNoteはMicrosoftアカウントを取得すれば５GBのストレージつきのアプリが無料で利用できるためOneNoteを使いたいところだがOneNoteにはいくつかの問題がある。その問題とは以下の通りである。
タグを使った分類ができない
テキストや添付ファイルをドラッグ＆ドロップで貼り付けることができない
手間を惜しまなければOneNoteでも十分だがWEBや紙媒体のスクラップを日課にしている人にとっては負担が大きい。これらの機能に月600円を出せるならEvernoteを使った方が良いだろう。
おじいちゃん
コール男「お電話ありがとうございます。XXXXXのコール男です」
おじいちゃん「色んな絵柄がいっぱい出てくるところの、上の所に絵柄があったと思ったんじゃがの」
俺「(もしかして、絵柄ってアイコンのことか？フォルダアイコンが見えないって言ってねぇか？）」
コール男「少々お待ちください……分かるものに代わりますので、申し訳ありませんが今しばらくお待ちください」
♪～～～～♪
保留中
俺「フォルダのアイコンが見えなくなったみたいな感じに言ってませんか？」
保留あけ
コール上司「コンピューターとか書いてあるところのの絵柄が見えなくなってしまったということですね！」
前回は、Webアプリの骨組み（スケルトン）までを作って、製作の過程を見てみました。
今回は、データベースのCRUD操作を行なって、チャットのメッセージを追加／取得／変更／削除する機能を実装してみましょう。
Webアプリを作るときに、「Visual Studio Code」というIDE（統合開発環境）を使ってみましょう。PHP用の各種プラグイン（「PHP IntelliSense」「PHP Debug」など）を入れておけば、便利に使える。
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html>
<head>
<base href="<?php echo base_url(); ?>">
</head>
<body>
<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>
本当はセキュリティーを考慮して、入力値の検査（バリデーション）とか、もっといろいろな仕込みが必要だが、ここでは練習なので省略します。
<?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->output->enable_profiler(true); // for debug
}
// 初期画面
public function index()
{
$action = $this->input->post('action');
$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');
}
}
SQLを説明したかったのに（SQLとは本質的に関係がない）Webアプリの説明が延々と続いた。（説明の方法を変えた方がいいねｗ）
データベースにデータを保存（追加）するSQLコマンド「INSERT」を使ってみよう！
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Chat_model extends CI_Model
{
public function __construct()
{
parent::__construct();
}
// 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();
}
}
以上、メッセージの追加を実現するために、MVCの各パーツを用意した。これでメッセージの追加だけができるようになった。
これだけではメッセージの取得＝表示がまだできないので、次はデータベースからメッセージのデータを取得して、Webページに表示できるように改造しよう。
SQLの「SELECT」を使えば、データベースからデータを取り出せる。
メッセージのデータを取り出して、Webページの表示で使おう。
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Chat_model extends CI_Model
{
public function __construct()
{
parent::__construct();
}
// 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()
{
$query = $this->db->query($sql);
return $query->result_array();
}
}
これでデータベースからデータを取り出すSQL、メソッドがモデルに用意できた。
<?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->output->enable_profiler(true); // for debug
}
// 初期画面
public function index()
{
$action = $this->input->post('action');
$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');
}
}
これは全部CodeIgniterで用意されている機能なので、マニュアルを読めば使い方が分かるようになってます。
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html>
<head>
<base href="<?php echo base_url(); ?>">
</head>
<body>
<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>
<table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">
<tr>
</tr>
<?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>
（説明文が300行を超えてしまった！これ以上は増田で表示できない。）次回はメッセージの変更をやってみよう。
anond:20181104161900 増田式プログラマー養成講座 その17 Webアプリの骨組み
anond:20181104233013 増田式プログラマー養成講座 その18 SQLでデータの追加と取得 ←★今ここ★
anond:20181110120715 増田式プログラマー養成講座 その19 SQLでデータの更新
：
今回は、Webアプリを作る途中の過程を見て、作る雰囲気を一緒に味わってみましょう。
最近のフレームワークは、「設定より規約」（CoC、convention over configuration）という発想で作られている。
フレームワークの規約（使用ルール）に従うと、プログラマーは作業量が減って、楽ができる。
設定より規約（convention over configuration）とは、開発者の決定すべきことを減少させ、単純にするが柔軟性は失わせないというソフトウェア設計パラダイム。
使用しているツールが実装した規約が開発者の望む動作と一致していれば、設定ファイルを書く必要もない。実装規約と望みの動作が違っている場合、必要な動作を設定しなければならない。
最近のフレームワークは「設定より規約」アプローチを採用しているものが多い。
例えば、Ruby on Rails、Kohana、Grails、Grok、Zend Framework、CakePHP、Symfony などがある。
CodeIgniterの使用ルールは、マニュアルやチュートリアルで確認できる。
↑このページの「アプリケーションフローチャート」を見てみよう。
それでは、CodeIgniterでプログラマーが用意する部分のM（Model）とV（View）とC（Application Controller）を、骨組みから作ってみよう。
事前準備として、前々回と前回のWebアプリ完成見本を用意するところまでやっておこう。
スケルトン（skeleton, 骨格）とは動物や人間の骨格。
コンピュータのプログラムコードの骨格部分。プログラムコード作成では、初期段階でスケルトンを作成し、その後で詳細部分を肉付けしていく。
まずは、MVCのCの骨組みを作ろう。
Controllerは、ユーザーからのリクエストを受け付けて、ModelやViewに指示を出す監督です。
上記フォルダの中に「Welcome.php」というファイルを作る。（デフォルトであるはずなので、それを使ってOK）
CodeIgniterのルールで、Application Controllerを置く場所は「application/controllers」というフォルダになっている。
CodeIgniterのルールで、一番最初に呼び出されるApplication Controllerは「Welcome.php」というファイルになっている。
→これは「C:\xampp\htdocs\waf\application\config\routes.php」という設定ファイルで決められている。
「Welcome.php」の中身を以下にように変更する。
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Welcome extends CI_Controller
{
// 初期画面
public function index()
{
}
// 更新画面
public function update()
{
}
// 削除画面
public function delete()
{
}
}
これがチャットのApplication Controllerとして動作する最小限の内容＝骨格だ。
という行に注目してみよう。
CodeIgniterで用意されてる「CI_Controller」クラスを継承して、プログラマーが「Welcome」クラスを作ってる。
継承によって、フレームワークが用意してる様々な機能をWelcomeクラス内で使えるようになる。
「Welcome」クラスの中に、「index()」「update()」「delete()」という３つのメソッドを用意した。
CodeIgniterのURLは、Action Controllerのクラス名やメソッド名とひもづけられている。
「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()メソッドが呼び出される。
次にMVCのVの骨組みを作ろう。
ビューは、表示する画面の部分です。HTMLでWebページの構造を書きます。
以下の内容にして保存する。
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="<?php echo base_url(); ?>">
</head>
<body>
</body>
</html>
以下の内容にして保存する。
<?php defined('BASEPATH') or exit('No direct script access allowed');?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="<?php echo base_url(); ?>">
</head>
<body>
</body>
</html>
以下の内容にして保存する。
<?php defined('BASEPATH') or exit('No direct script access allowed');?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="<?php echo base_url(); ?>">
</head>
<body>
</body>
</html>
Viewファイルの追加に合わせて、Controllerも一部変更します。
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Welcome extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
// 初期画面
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()」は、クラスからインスタンスが作られるとき、自動的に実行されるメソッドだ。コンストラクターは、初期化＝最初にやっておくべき下準備を書いておく。
CodeIgniterには、リンクの表示を補助する「URLヘルパー」という機能が用意されている。
上記のように書くとURLヘルパーを呼び出して、使えるようになる。
各Viewファイルの以下の行でURLヘルパーを使っている。＝「base_url()」という関数がURLヘルパーの１つ。
というメソッドによって、Viewファイルの「welcome_index.php」を呼び出し、画面を出力します。
これでMVCのCとVの骨組みができた。
今の段階でWebブラウザーで各ページを表示させると、各Viewファイルの中身が表示される。
次にMVCのMの骨組みを作ろう。
モデルは、具体的な処理内容（ロジック）を書いて、データを読み書きする部分です。
上記フォルダの中に「Chat_model.php」というファイルを作り、以下の内容にして保存する。
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Chat_model extends CI_Model
{
public function __construct()
{
parent::__construct();
}
}
CodeIgniterで用意されてる「CI_Model」クラスを継承して、プログラマーが「Chat_model」クラスを作ってる。
「Chat_model」クラスのコンストラクターには、以下のように書いている。
Modelの追加に合わせて、さらに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');
}
// 初期画面
public function index()
{
$this->load->view('welcome_index');
}
// 更新画面
public function update()
{
$this->load->view('chat_update');
}
// 削除画面
public function delete()
{
$this->load->view('chat_delete');
}
}
と書いて、「Chat_model」というモデルを読み込むようにした。
これで、モデルに用意するいろんな機能をコントローラーで使えるようになる。
以上で、MVCの骨組み（スケルトン）だけを作成するプロセスを見ていきました。
次回は、データベースのCRUD操作を行なって、チャットのメッセージを追加／取得／変更／削除する機能を実装してみましょう。
anond:20181015215004 未経験からのプログラマーなんだが全然分からない
anond:20181016015826 増田式プログラマー養成講座 その１ パソコンの用意
anond:20181016164341 増田式プログラマー養成講座 その２ プログラム＝データ＋処理、プログラム言語の種類
anond:20181016180059 増田式プログラマー養成講座 その３ 構造化プログラミングの基本（順次、反復、分岐）
anond:20181016193144 増田式プログラマー養成講座 その４ 子ども向け教材「Scratch」で構造化プログラミングの練習
anond:20181017161003 増田式プログラマー養成講座 その５ オブジェクトとは何か？
anond:20181017191404 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備
anond:20181019181549 増田式プログラマー養成講座 その７ OOPの仕組み（前半）
anond:20181020230044 増田式プログラマー養成講座 その８ OOPの仕組み（後半）
anond:20181022232327 増田式プログラマー養成講座 その９ 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でデータの追加と取得
：
携帯電話認証で携帯電話番号が弾かれている原因を知りてえんだよ！
Twitter「ご利用ありがとうございます。
お客様のメールアドレスが登録されたTwitterアカウントのパスワードリセット用のメールをお送りしました。メールに記載されているリンクをクリックし、アカウントの新しいパスワードを作成してください。新しいパスワードの登録時に問題が発生した場合、他のすべてのTwitterアカウントからログアウトしたパソコンからリセットリンクにアクセスしてください。
注意: パスワードをリセットするリンクには、セキュリティ上の理由から有効期限が設定されています。リンクの有効期限切れで新しいリンクが必要な場合は、このメールに返信してください。
これ８度目なんだけど。まだログインできないんだけど。
「anond:20181101225335 増田式プログラマー養成講座 その15 Webアプリの完成見本」の続きです。
Webサーバーの時間設定がズレていると、メッセージを作成したときに、作成日時もズレてしまいます。
（＝12時に投稿したメッセージが、3時に投稿したことになってしまう、等。）
時間がズレてた場合は、Webサーバーの時刻を一時的に変更する処理を追加しておきましょう。
「index.php」ファイルの先頭に以下の内容を追加します。
上記フォルダの中の「index.php」ファイルを開いて、先頭付近（2行目辺り）に以下の内容を追加します。
<?php
以上で、データベースを利用したWebアプリが用意できました。
コピーで作成しただけでは、プログラムの意味が分からないと思うので、次回以降プログラムの部分を解説してみます。
次回は、
を見ていきましょう。
anond:20181015215004 未経験からのプログラマーなんだが全然分からない
anond:20181016015826 増田式プログラマー養成講座 その１ パソコンの用意
anond:20181016164341 増田式プログラマー養成講座 その２ プログラム＝データ＋処理、プログラム言語の種類
anond:20181016180059 増田式プログラマー養成講座 その３ 構造化プログラミングの基本（順次、反復、分岐）
anond:20181016193144 増田式プログラマー養成講座 その４ 子ども向け教材「Scratch」で構造化プログラミングの練習
anond:20181017161003 増田式プログラマー養成講座 その５ オブジェクトとは何か？
anond:20181017191404 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備
anond:20181019181549 増田式プログラマー養成講座 その７ OOPの仕組み（前半）
anond:20181020230044 増田式プログラマー養成講座 その８ OOPの仕組み（後半）
anond:20181022232327 増田式プログラマー養成講座 その９ 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アプリの骨組み
：
前回は、Webアプリのモックアップ（ハリボテ）を作るところまでやりました。
データベースを使ったWebアプリを作って、データベースの基本操作（CRUDの４つ）を練習してみよう！
ざっくりと、以下のような流れで作っていきます。
（参考 anond:20181017191404 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備）
講座その６を参考にして、XAMPPを起動させて、ApacheとMySQLをスタートして下さい。
（参考 anond:20181022232327 増田式プログラマー養成講座 その９ MVCフレームワークを使ってみよう）
講座その９を参考にして、XAMPPの中にCodeIgniterをインストールしておきます。
（参考 anond:20181024214133 増田式プログラマー養成講座 その11 データベースを使ってみよう）
講座その11を参考にして、MySQLにWebアプリ用のデータベースとテーブルを作成しておきます。
講座その11で、データベースの練習で「chat」というデータベースを作ってみました。
そのとき「message」というテーブルを作りましたが、今回Webアプリで使うテーブルとして新たに「talk」というテーブルを作成します。
（補足：前に作ったテーブル「message」の中に、テーブル名と同じ「message」という名前のカラム（列）を作ってました。これでも問題ないんだけど、プログラムを書くとき、テーブル名とカラム名を混同しないようにしたいので、念のため作り変えときましょう。）
SQLで「talk」というテーブルを作る場合、以下のようなSQL文になります。
CREATE TABLE `talk` (
`create_at` datetime NOT NULL,
`update_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
このSQL文をphpMyAdminで実行すれば「talk」テーブルを作れます。
これでデータベースの準備ができました。
CodeIgniterで使う「URL」の表示方法をちょっと変更しておきたいので、Apache（Webサーバーソフト）の設定を変更しておきます。
（「URL」＝情報がどこにあるのかを示すインターネット上の住所）
（Apacheの「mod_rewrite」という仕組みによって、URLの扱い方を変更します。）
（例）
変更前： http://localhost/waf/index.php/welcome/
↓
変更後： http://localhost/waf/welcome/
というように、URLの中にある「/index.php」という文字列を表示させない設定にします。
Apacheの設定は「.htaccess」という名前の設定ファイルを用意して変更します。
RewriteCond %{REQUEST_FILENAME} !-f
「.htaccess」の書き方を理解するには、「正規表現」という仕組みの知識が必要です。
まだ「正規表現」を勉強してない段階では、とりあえずコピペして使って下さい。
を行ないます。
「config.php」をIDEやエディターで開いて、以下のように変更する。
最初は、
$config['index_page'] = 'index.php';
になってるけど、「index.php」を削除して、「''」（空）にしておく。
「databese.php」をIDEやエディターで開いて、以下のように変更する。
'dsn' => '',
'password' => '',
'database' => 'chat',
（※上記のように、MySQLのusernameとpasswordは「root」（管理者）のデフォルト設定を使ってます。）
上記フォルダの中に「Welcome.php」というファイルを作って、内容を以下のようにします。
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Welcome extends CI_Controller
{
{
parent::__construct();
$this->load->model('chat_model');
// $this->output->enable_profiler(true); // for debug
}
// 初期画面
{
$action = $this->input->post('action');
$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');
$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');
$this->chat_model->delete_message($id);
}
$data['talk'] = $this->chat_model->read_message_by_id($id);
$this->load->view('chat_delete', $data);
}
}
上記フォルダの中に「welcome_index.php」「chat_update.php」「chat_delete.php」という３つのファイルを作って、内容を以下のようにします。
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html>
<head>
<base href="<?php echo base_url(); ?>">
</head>
<body>
<form action="welcome/index" method="post" accept-charset="utf-8">
<label>メッセージ</label>
<input type="text" name="message">
<input type="hidden" name="action" value="add">
</form>
<table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">
<tr>
</tr>
<?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>
<?php defined('BASEPATH') or exit('No direct script access allowed');?>
<!DOCTYPE html>
<html>
<head>
<base href="<?php echo base_url(); ?>">
</head>
<body>
<p>メッセージを変更して「更新する」ボタンを押してください。</p>
<form action="welcome/update" method="post" accept-charset="utf-8">
<label>メッセージ</label>
<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;?>
</form>
<p><a href="welcome/index">戻る</a></p>
</body>
</html>
<?php defined('BASEPATH') or exit('No direct script access allowed');?>
<!DOCTYPE html>
<html>
<head>
<base href="<?php echo base_url(); ?>">
</head>
<body>
<form action="welcome/delete" method="post" accept-charset="utf-8">
<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;?>
</form>
<p><a href="welcome/index">戻る</a></p>
</body>
</html>
上記フォルダの中に「Chat_model.php」というファイルを作って、内容を以下のようにします。
<?php
defined('BASEPATH') or exit('No direct script access allowed');
class Chat_model extends CI_Model
{
{
parent::__construct();
}
// 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()
{
$query = $this->db->query($sql);
return $query->result_array();
}
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アプリの完成見本（続き）」
へ続きます。
タイトル通り、スマホゲーの主人公（格）のキャラクターが嫌いになってしまった。
スチルが綺麗で画面の外まで見たいと思うほどに好きだ。
イベ前は推しが出てほしい、頑張っている姿が見たいと祈るような気持ちで課金している。
しかし最近は高レアで出てくれないのでお布施になりつつある…。
そんな思い入れのあるスマホゲーの主人公キャラが嫌いになった経緯をざっと書こうと思う。
主人公が所属するグループと私の推しグループがメインのイベントが来た。
大変でも、辛くても、頑張っていく推し達が見られると思っていた。
すれ違いながらも先輩が後輩を指導する話だった。
よくある話だ。教え、教えられ、先輩も後輩も互いに成長したね！ なんて話はたくさんある。
だがその内容がリアルすぎていけなかった。
「なんでできないの？」
「やる気あるの？」
というセリフは私の心を抉った。
働いたことのある人なら一度は言われたことがあるのではないだろうか。
概要も仕事の仕方もよく知らないまま会社に命令されて現場に放り込まれる後輩。
即戦力が欲しいのに現場に来たのは新人だったので「どんな仕事か会社から何も聞いていないの？」と後輩に聞く先輩。（このときの後輩は世界で一番仕事ができない気分になる）
私のトラウマが掘り起こされた。
研修や指導の場において「なんでできないの？」というセリフはキツイ言葉だ。
教わり方は人それぞれだし、教え方も人それぞれだ。
だが、できる人ができない人を見下すように聞こえる言葉は「教える人」が言ってはいけない言葉である。
だって「できない」から「教ろうと」してるのだ。「できる」のなら「教わろうと」なんてしないのだ。
会社でそういうことを言われた経験がある私は過去の記憶が蘇って気が滅入ってしまった。
イベントやストーリーで主人公がどんなに良いことを言っていても
という気持ちになって頭に入ってこない。
いっそゲームそのものが嫌いになってしまえたら良いのに推しがいるからできない。
主人公が空気とか、苦手とか、調子がいいことばかり言うとか、そういうのは平気なのに、
「会社で相手を見下す人と同じ事をした主人公」というのは私にはダメらしい。
アプリのアイコンになっている主人公が嫌いだ。でも推しは好きだ。
主人公が嫌いだけど好きなキャラがいるからその作品を見ている、
あるいはプレイしている人は世の中にどれほどいるのだろうか。
Webブラウザでも5chブラウザでもLINEでもそうなんだけど
画像を保存しようとするといちいちどのフォルダに保存するのか選ぶウィンドウが開く
んでこれが重い。マジで。正直ウザすぎる
保存場所なんていちいち変えないし、変えたければあとでまとめて移動するから、一律にダウンロードフォルダに保存してくれないかな
今回は、データベースを使ったWebアプリの制作を通じて、SQLの使い方を確認してみましょう。
Webブラウザー（Google Chromeなど）で動作するアプリのこと。
ウェブアプリケーション（Web application）は、インターネット（もしくはイントラネット）などのネットワークを介して使用するアプリケーションソフトウェアである。
多くの場合、これらのアプリケーションは、Webブラウザ上で動作するプログラミング言語（たとえばJavaScript）によるプログラムとWebサーバ側のプログラムが協調することによって動作し、ユーザはそれをWebブラウザ上で使用する。
Windowsパソコンを使ってたら、「XAMPP」を使ってすぐにWebアプリを試作できる。
以前の講座（その６、その９）を参考にして、XAMPPとCodeIgniterを用意しておこう。
最近のアプリの作り方は、「デザインスプリント」と呼ばれる方法が流行ってます。本やネットの情報がたくさんあるので調べてみよう。
ざっくりと、以下のような流れです。
それでは順番にやってみよう。
以前にデータベースの練習をしたとき、「後で簡単なチャット（おしゃべり）ができるWebアプリを作ってみたいと思う。」と言ったので、今回のアイデアは「チャットを作る」にしよう。
Webページを作るには、HTMLやCSSの知識が必要だ。HTMLやCSSを使ったことがなければ、本やネットの情報で勉強してみよう。
今回はCSSを使わずに、HTMLだけでシンプルなWebページを作ってみよう。（練習だから余計なもの、無駄を省きたい。）
特にこだわりがなければ、Microsoftの「Visual Studio Code」という無料のIDE（統合開発環境）を使ってみよう。
インストール方法や使い方、メニューの日本語化のやり方は、検索して調べてみよう。
「mock」フォルダの中に
テキストエディターで保存するとき、文字コードを「UTF-8」にしておく。
「index.html」ファイルをエディターやIDEで開き、以下のような内容に編集して保存します。（コピペする場合、行頭の字下げ（インデント）の全角スペースを半角スペースに置換して下さい。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<label>メッセージ</label>
<input type="text" name="message">
<button>投稿する</button>
</form>
<table border="1" cellpadding="5" cellspacing="0" bordercolor="#CCCCFF">
<tr>
</tr>
<tr>
<td><a href="edit.html">編集</a></td>
<td><a href="delete.html">削除</a></td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</body>
</html>
「edit.html」ファイルをエディターやIDEで開き、以下のような内容に編集して保存します。（コピペする場合、行頭の字下げ（インデント）の全角スペースを半角スペースに置換して下さい。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<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">
</head>
<body>
<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」を開いてください。「編集」や「削除」、「戻る」をクリックして、チャットの画面を確認してください。
実務では「仕様書」という書類を大量に作る場合もありますが、時間と労力の無駄になっている場合が多々あります。（紙の仕様書はあまり使われる機会がない）
紙の仕様書（アナログ）の代わりに、モックを仕様書（デジタル）として使うと、その後の段階がスムーズになります。
どうしても紙でなければ困る場合以外は、モックをそのまま仕様書として使ってみましょう。
モック（動くハリボテ）を作るための便利なツールがいろいろあります。
ちょっと長くなったので、モックを基に機能を実装（プログラミング）するのは次回にしましょう。
anond:20181015215004 未経験からのプログラマーなんだが全然分からない
anond:20181016015826 増田式プログラマー養成講座 その１ パソコンの用意
anond:20181016164341 増田式プログラマー養成講座 その２ プログラム＝データ＋処理、プログラム言語の種類
anond:20181016180059 増田式プログラマー養成講座 その３ 構造化プログラミングの基本（順次、反復、分岐）
anond:20181016193144 増田式プログラマー養成講座 その４ 子ども向け教材「Scratch」で構造化プログラミングの練習
anond:20181017161003 増田式プログラマー養成講座 その５ オブジェクトとは何か？
anond:20181017191404 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備
anond:20181019181549 増田式プログラマー養成講座 その７ OOPの仕組み（前半）
anond:20181020230044 増田式プログラマー養成講座 その８ OOPの仕組み（後半）
anond:20181022232327 増田式プログラマー養成講座 その９ MVCフレームワークを使ってみよう
anond:20181023184616 増田式プログラマー養成講座 その10 OOPの参考書
anond:20181024214133 増田式プログラマー養成講座 その11 データベースを使ってみよう
anond:20181026145516 増田式プログラマー養成講座 その12 データベースの参考書
anond:20181028152656 増田式プログラマー養成講座 その13 SQLの文法
anond:20181031014212 増田式プログラマー養成講座 その14 Webアプリの試作品を作成 ←★今ここ★
anond:20181101225335 増田式プログラマー養成講座 その15 Webアプリの完成見本
：
例えばこれは英検準１級レベルのものから36個抜き出してみた結果だけど、どれも日本でよく使われているなってものばかり。まぁ意味は限定されたりするけど。
使われてない語に関しても、高校でよく習った語ばかりで、知らない人はそんなに多くないのではないか。いつの間にこんなに侵略されてたんだって気がする。
カタカナの言葉を見たときに「このカタカナの言葉はどういう意味なんだろう？」というふうに考えられる人は、英単語を覚えるときに苦労しなさそうだなって思った。
もしかするとカタカナで書かずにアルファベットで書くようにしてもいいのでは。「今季のbudgetは少なかった」みたいな。
| 英単語 | 日本語での見え方 | 備考 |
|---|---|---|
| budget | バジェット | |
| decline | スマートディクラインなど | 日本語での使用は稀 |
| indicate | インジケーターなど | |
| resident | レジデント | 介護施設などで見る |
| issue | イシュー | 雑誌のタイトルや会議で使用される |
| chemical | ケミカル | 固有名詞ではよく見かける語 |
| ignore | × | |
| furthermore | × | |
| potential | ポテンシャル | |
| measure | メジャー | |
| reveal | × | |
| generate | ジェネレーターなど | |
| species | スピーシーズ | 映画のタイトルなどで見かける |
| ban | 垢バンなど | |
| consumption | コンシューマーなど | |
| nevertheless | × | |
| eliminate | エリミネーターなど | バイクの名前 |
| associate | アソシエイト | |
| contract | コントラクト | |
| eventually | × | |
| expense | × | |
| alternative | オルタナティブ | |
| illegal | イリーガル | |
| confirm | × | |
| renew | リニューアルなど | |
| adequate | × | |
| predict | × | |
| current | カレントフォルダなど | |
| threat | × | |
| restrict | × | |
| regularly | レギュラーなど | |
| transportation | トランスポーターなど | |
| enable | × | |
| convince | × | |
| overall | オーバーオール | |
| regulation | レギュレーション |
前回まで手続型言語の基本（構造化プログラミング、オブジェクト指向プログラミング）を見てきた。
今回から問合型言語のSQLを学び、データベース（DB）を使ってみよう。
大量のデータを記録して、活用するために特化したソフトウェアが「データベース」だ。
データベースには、いろんな種類があるけど、今回学ぶのは「リレーショナル・データベース」（RDB）だ。
データベースがなかった時代の人々は、大量のデータを扱うのに苦労していた。
データベースを活用すれば、人間は脳の記憶力を補完して、膨大な知識を扱うことができるようになる。
キミも今日からデータベースを活用して、記憶力を100億倍にしよう！ドラえもんの暗記パンなんて目じゃないぜ！！！
MySQLは無料で使えるRDBです。MySQLでデータベースの練習をやってみよう。
それではさっそく、以前インストールしたXAMPPで、MySQLを使ってみよう。
Port(s)が「80,443」「3306」と表示されたら、PHPとMySQLが使える状態になってます。
Webブラウザー（Google Chromeなど）で、「 http://localhost/phpmyadmin/ 」というURLを開く。
「phpMyAdmin」は、MySQLを管理するツールです。
「phpMyAdmin」で検索したら、使い方を紹介する記事が、たくさん見つかります。
phpMyAdmin(ピーエイチピーマイアドミン)はMySQLサーバーをウェブブラウザで管理するためのデータベース接続クライアントツールで、PHPで実装されている。
検索したら、こんなのがありました。
後で簡単なチャット（おしゃべり）ができるWebアプリを作ってみたいと思う。（Twitterをショボくしたシステムｗ）
チャット用のデータベースとして「chat」という名前のデータベースを作ろう。
これで「chat」という空のデータベースが1個できた。
「chat」データベースの中に、テーブルを1個作ってみよう。
すると「名前」「データ型」「長さ/値」「デフォルト値」…などの空欄がたくさん並んだ画面が表示されただろう。
これら4段の下にある「ストレージエンジン:」欄は「InnoDB」にしておく。
ここまで入力したら、画面右下にある「SQLのプレビュー」というボタンをクリックしてみよう。
すると、
CREATE TABLE `chat`.`message` (
`id` INT NOT NULL AUTO_INCREMENT ,
`create_at` DATETIME NOT NULL ,
`update_at` TIMESTAMP on update CURRENT_TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ,
というSQL文が表示されただろう。
これが「SQL」というデータベースを操作するプログラミング言語の書き方なんだ。
今はツールを使って自動的にSQL文を作成したが、SQLの文法を学べば、自分で書けるようになる。
とりあえず、今はphpMyAdminでMySQLを簡単に操作してみよう。
すると、画面左側のデータベース一覧で、「chat」の下に「message」というテーブルが表示されるようになっただろう。
データベースと、その中のテーブル（表）を作ったけど、まだデータが入ってないので空のままだ。
すると、
INSERT INTO `message` (`id`, `create_at`, `update_at`, `message`) VALUES (NULL, '2018-10-24 12:34:56', CURRENT_TIMESTAMP, 'Hello, world!')
というSQL文が表示されただろう。
これがデータを操作するSQL文の一例だ。これも後でSQLの文法を学んでみよう。
これでデータが1件追加できた。
こんなかんじで、とりあえず、phpMyAdminでMySQLをいろいろいじって練習してみよう。
次回以降の予定は、
といったかんじです。
anond:20181015215004 未経験からのプログラマーなんだが全然分からない
anond:20181016015826 増田式プログラマー養成講座 その１ パソコンの用意
anond:20181016164341 増田式プログラマー養成講座 その２ プログラム＝データ＋処理、プログラム言語の種類
anond:20181016180059 増田式プログラマー養成講座 その３ 構造化プログラミングの基本（順次、反復、分岐）
anond:20181016193144 増田式プログラマー養成講座 その４ 子ども向け教材「Scratch」で構造化プログラミングの練習
anond:20181017161003 増田式プログラマー養成講座 その５ オブジェクトとは何か？
anond:20181017191404 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備
anond:20181019181549 増田式プログラマー養成講座 その７ OOPの仕組み（前半）
anond:20181020230044 増田式プログラマー養成講座 その８ OOPの仕組み（後半）
anond:20181022232327 増田式プログラマー養成講座 その９ MVCフレームワークを使ってみよう
anond:20181023184616 増田式プログラマー養成講座 その10 OOPの参考書
anond:20181024214133 増田式プログラマー養成講座 その11 データベースを使ってみよう ←★今ここ★
anond:20181026145516 増田式プログラマー養成講座 その12 データベースの参考書
：
前回はオブジェクト指向プログラミング（OOP）で使う様々な仕組みについて学びました。
OOPの文法を学んだ後、OOPの長所が発揮される場面をどうやって説明したらいいのか？を考えてみた。
横田の意見を参考にして、「フレームワーク」を使って、OOPの使い方を見てみよう。
framework →「枠組み」「骨組み」「構造」などという意味の英語。
システム開発で使われる「フレームワーク」とは、よく使われる機能のパーツを用意して、まとめて１つのパッケージにしたプログラム群のことだ。
イメージとしては、いろんなおかずが入ってる豪華な幕の内弁当のようなものだ。
ただし、ご飯のマスだけが空になっていて、プログラマーが自分でご飯を用意しないと、弁当としては完成していない形になってる。
普通の白いご飯を作って追加しても良いし、好みや必要に応じて、炊き込みご飯やまぜご飯を作って追加しても良い。
ゼロから豪華な幕の内弁当を作るのは大変だけど、ご飯だけ用意すれば完成するので楽ができる。
プログラムの開発でフレームワークを使うと、プログラマーは必要最小限のコードを書くだけでアプリを完成させられるので楽ができる。
「フレームワーク」と似た用語で「ライブラリー」という用語がある。
弁当を作るときに使いたいおかず（ライブラリー）を自分で考えて探し出し、選ばないといけない。
（フレームワークは最初からおかずが全部用意されているので、自分でわざわざ選ばなくてもOK）
プログラムの動作で見た場合、フレームワークとライブラリーでは決定的な違いがある。
↑このページの「図1●フレームワークにおける制御の反転」という図解を見てみよう。
「制御の反転」（Inversion of Control、IoC）といって、自分の書いたコードが主役から脇役になってる点が違う。
（主役と脇役という説明は適切ではないかもしれないけど、イメージとしてはそんなかんじ？）
フレームワークはいろんな機能が全部入りで、こいつを使えば、ちょっとコードを書くだけで、高機能なアプリがすぐに作れる。
ここでは「MVCパターン」という仕組みで作られた「MVCフレームワーク」を使ってみよう。
MVCは「Model」「View」「Controller」の略で、MとVとCの３つを自分で用意すれば、アプリが作れちゃう仕組みだ。
MVCの歴史は古くて、GUI（Graphical User Interface、グラフィカルユーザインタフェース）を作る方法の定番だ。
→「MVC 仕組み」でGoogle画像検索すると、分かりやすい図解がいろいろ出てくる。
（参考）
Wikipediaの説明は、文章が学術的で難しいけど、正確な説明になってると思う。
↑このページの「MVCの概要」という図が、MVCの仕組み＝動作の流れを分かりやすく説明してる。
こういうプログラムの設計に関するノウハウは、「アーキテクチャー・パターン」という分野に蓄積されている。詳細はGoogle検索してみよう。
Webアプリを作るときに使われるMVCフレームワークには、いろいろある。
有名なものとして、
などが挙げられる。
PHPでOOPを学習しているので、ここではPHPのWAFの１つである「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 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備）
＝「C:\xampp\htdocs」（Cドライブの中の「xampp」の中の「htdocs」というフォルダ）の中に「waf」をコピーして下さい。
＝「C:\xampp\htdocs\waf」という位置にコピーできたらOK。
これで「Welcome to CodeIgniter!」というWebページが表示されたら、CodeIgniterの動作確認はOKです。
$config['base_url'] = 'http://localhost/waf/';
それでは「Hello, world!」と表示させるシンプルなWebアプリを作ってみよう。
<?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」というクラス（オブジェクトの設計図）を作っている、という点です。
次に、
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>Hello, world!</p>
</body>
</html>
今回は簡単なので、MVCの「M」は用意しませんでした。（CとVだけで完成）
Webブラウザーで「http://localhost/waf/index.php/hello」というURLにアクセスして下さい。
画面に「Hello, world!」と表示されたら、Webアプリの作成が成功です！
「Hello, world!」の表示だけではショボ過ぎるけど、Webフレームワークを使えばもっといろいろな機能が作れます。
詳細は、CodeIgniterのマニュアルを参照して下さい。
↑このページで「ユーザーガイド(日本語)」を読んでみて下さい。
Webアプリを作るときデータベースがないと不便なので、次の次ぐらいにSQLを学ぼう。
MySQL（データベース）を使えば、掲示板などのWebアプリも作れるようになります。
anond:20181015215004 未経験からのプログラマーなんだが全然分からない
anond:20181016015826 増田式プログラマー養成講座 その１ パソコンの用意
anond:20181016164341 増田式プログラマー養成講座 その２ プログラム＝データ＋処理、プログラム言語の種類
anond:20181016180059 増田式プログラマー養成講座 その３ 構造化プログラミングの基本（順次、反復、分岐）
anond:20181016193144 増田式プログラマー養成講座 その４ 子ども向け教材「Scratch」で構造化プログラミングの練習
anond:20181017161003 増田式プログラマー養成講座 その５ オブジェクトとは何か？
anond:20181017191404 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備
anond:20181019181549 増田式プログラマー養成講座 その７ OOPの仕組み（前半）
anond:20181020230044 増田式プログラマー養成講座 その８ OOPの仕組み（後半）
anond:20181022232327 増田式プログラマー養成講座 その９ MVCフレームワークを使ってみよう ←★今ここ★
anond:20181023184616 増田式プログラマー養成講座 その10 OOPの参考書
：
今回は、オブジェクトの使い方＝オブジェクト指向プログラミング（OOP）を学ぼう。
などの分類があります。
ここではクラスベースのOOPを取り上げる。学習時間を短縮するために、Javaよりも簡単なPHPでOOPの基本を勉強してみよう。
PHPは誰でも手軽に使えるように工夫された、軽量なプログラム言語です。
WindowsパソコンでPHPを使うために、XAMPPというソフト（無料）をインストールしよう。
XAMPPにはいくつかバージョンがあるけど、ここではUSBメモリに保存できる「ポータブル」を使ってみよう。
↑このページにある「xampp-portable-win32-7.2.10-0-VC15.zip」をダウンロードして、ZIPファイルを展開します。
解凍して出てきた「xampp」をCドライブ直下にコピーしてください。
Port(s)が「80,443」と表示されたら、XAMPP上のApache（Webサーバーソフト）が起動して、PHPが使える状態になってます。
（Apacheを止めるときは、「Stop」ボタンをクリックします。）
phpとは - はてなキーワード http://d.hatena.ne.jp/keyword/php
<?php
?>
（プログラムのソースコードを増田に直接書くと、エスケープされて違う文字になるので、上の例では一部文字を置き換えてある。）
（上記の表示の中で、全角文字の不等号「＜」「＞」を半角文字の不等号に置き換えて下さい。）
（増田はプログラムのコードを貼付けられないのか。不便だな！）
PHPの教材は、本やネット上の記事、動画などたくさんある。自分で分かりやすいものを探して読んでみよう。
3分程度の動画が30個＝90分。最初は内容を理解できなくてもいいから、とりあえず全部一通り見てみよう。（1巡目は雰囲気だけつかめばOK）
2巡目以降は分からないことがあったらノート等にメモして、後で１つずつ解明していこう。
著者あとがき
私はGitを学ぶのに、実はとても苦労しました。それと同時に、「きっと同じように困っている人が他にもたくさんいるはずだ」と考えました。「理解するのに数日かかることを、短い時間でパパッと学べるコンテンツを作りたい」そう思いつき、「マンガでわかるGit 第１話」を個人サイトにて公開したところ、いきなり、はてなブックマークで800ブックマークされました。
“つまづきポイント”を先回りするために
私は、Gitを使い始めて以降、わからないことがあったら「つまづいたことノート」に書いてきました。なお、本書の執筆にあたっても、日々勉強しながら解説を書くという形でした。わかばちゃんが「なんでこうなるの？」と疑問に思う部分は、私が過去につまづいた部分です。
（今回は、PHPの準備、PHPの基本文法の理解までで終わってしまったorz）
（URLのリンクを10個以上貼ると、日記が書き込めないみたいなので、増田では記事を分割せざるを得ない。）
次回は、OOPに関係している内容（#18～#24）を一緒に確認してみよう。
anond:20181015215004 未経験からのプログラマーなんだが全然分からない
anond:20181016015826 増田式プログラマー養成講座 その１ パソコンの用意
anond:20181016164341 増田式プログラマー養成講座 その２ プログラム＝データ＋処理、プログラム言語の種類
anond:20181016180059 増田式プログラマー養成講座 その３ 構造化プログラミングの基本（順次、反復、分岐）
anond:20181016193144 増田式プログラマー養成講座 その４ 子ども向け教材「Scratch」で構造化プログラミングの練習
anond:20181017161003 増田式プログラマー養成講座 その５ オブジェクトとは何か？
anond:20181017191404 増田式プログラマー養成講座 その６ OOPの種類、PHPの準備 ←★今ここ★
anond:20181019181549 増田式プログラマー養成講座 その７ OOPの仕組み（前半）
anond:20181020230044 増田式プログラマー養成講座 その８ OOPの仕組み（後半）
anond:20181022232327 増田式プログラマー養成講座 その９ MVCフレームワークを使ってみよう
anond:20181023184616 増田式プログラマー養成講座 その10 OOPの参考書
：
書き方は釣りっぽいけど、今30代前半以下のPCユーザーにはフロッピーディスクを実際に見たことがない人達が多いはずで、あのアイコンが「保存のメタファー」として直感的でなくなってるのは確かだと思います。
ただ、検索を虫眼鏡アイコンで、電話を黒電話アイコンで、電気を稲妻アイコンで表象するのと同じように、ひとたびユーザーの側に「これはこういうもの」という強力な連想が確立・共有されてしまえば、ユーザーが必ずしもその表象されてる実物を知らなくても大きな問題は起きないようにも思います。
それより何より、自分が昔から気になってるのは、この保存アイコンに代表される「機能アイコン」の特殊性についてです。多くの人々が感じているように、機能アイコンには意味がわかりにくいものが多い。たとえばWordやExcelだとこんな感じ：
https://gyazo.com/c0d77ae6fd252d756b40f95da10c9cc7
https://gyazo.com/f2807738b32978daa8edb8ab9f9b8441
「これアイコンにする意味あんのかな、単体で見ても全く意味わからんな」というものがたくさんあるよね。
何で機能アイコンってわかりにくいか、考えたことありますか？ デスクトップメタファーでは、コンピューターの中にあるオブジェクト（ファイルやディレクトリ）を実世界に存在する書類やフォルダに見立てて、それをアイコンとして表現することで直感的に理解・操作できるようにしているわけですが、機能アイコンはそうじゃないんですよね。機能アイコンが表現したいのは、オブジェクトではなく、アクション（行動・働きかけ・変化）なんです。
①その機能を表象するモノをそのまま使う（フロッピーや虫眼鏡や錠前など）
②その機能を表象するモノに、動作や変化を示唆するプラスやマイナスやバツや矢印を重ねる（削除行に×マークをつけたスプレッドシートなど）
③その機能を実行したときの視覚的結果を表す（中央寄せや下罫線など）
このうち①は、実世界での活動になぞらえられるような基礎的機能にしか使えない。②は、もともと小さい機能アイコンにさらに小さい意味素を付け加えることになるので、とても見にくいうえに、似たような機能アイコンを区別しにくい。③は、ごく簡単な結果であればよいけれど、複雑だったり抽象的だったりする結果を表現することはほとんどできなくなる（たとえば、上のExcel機能アイコンの「アイテムの後ろの空行を削除する」や「XPS形式の添付ファイルとして電子メールで送信」など）。①②③のいずれも、アクションをオブジェクトで表現することに本質的に無理があるからわかりにくいわけです。
じゃあ、なんでそんな「本質的に無理がある」ものがここまで普及して広く使われているのか。この問いを突き詰めると、機能アイコンはもはや直感的理解を助けるためのメタファーではないからだ、という答えにたどり着きます。
例えば、わかりにくい（アイコンとしての具象性が劣っている）からといって機能アイコンを取り去るとどうなるか考えてみると、「いや、やっぱちょっと困るな」となる人は多いのではないでしょうか。もしリボンUIに文字だけで機能がずらずら並んだらものすごく見にくいし、目的の機能を探しにくい。つまり機能アイコンの利点は、今では①UIの省スペース性（たくさんの機能を有限のUI領域に整然と詰め込める）と、②瞭然性（学習さえ済んでいれば、文字列の読解処理を経ずに瞬時に判別できる）の2つにあるのです。
機能アイコンはデスクトップメタファーとは違って、ユーザーの学習コストは下げてくれない（直感的理解は全く支援しない）けど、一度学習してしまえば、日々その機能を利用するときの操作コストは格段に下げてくれます（元増田も、保存アイコンがないよりは、フロッピーアイコンのままのほうがずっと楽なはずです）。これが確実にユーザーエクスペリエンスを向上してくれているわけですね。
個人的には、だから機能アイコンのことは機能シンボルって呼ぶ方が実態に則してるんじゃないかなと思ってます。アイコンは偶像だけど、シンボルは約束事、協約ですからね。
