tashiroamane - dominickchen/cmrd GitHub Wiki
・リンク集（成果物）
・5W1H
・苦戦したところ
・反省
ゼミ論文
（12/13提出版）
https://drive.google.com/open?id=1tSiRzEjOGTNBhLo1OdNXPfqlFlvTkMYZ
（1/24ブラッシュアップ版）
https://drive.google.com/open?id=1rpcX-kCA-9pDqhfphlOXlOITWxFCGa7r
制作物トップページ
（アンケートフォーム）
http://infinityloops.xyz/tashiro/sikimei1.php
（色名閲覧）
http://infinityloops.xyz/tashiro/sikimeiserch.html
（その他ページのリンク一覧）
http://infinityloops.xyz/tashiro/
田代天音(たしろあまね) ドミニクゼミ1期生
主に戸山キャンパス
アイデア出し：2018年5月～
制作物決定：2018年10月末
PHP学習：2018年11月上旬
制作物制作：2018年11月下旬～12月上旬
調査・運用：2018年12月5日、6日
骨組みの立案：2018年11月中旬
論文執筆
（文献パート）：2018年11月下旬～
（調査パート）：2018年12月上旬～
・PHPにて色名を表示させ、名前を記入してもらうアンケートフォームを作成した。その回答はMySQLでデータベース化した。
・そのデータベースから指定した設問の回答だけを呼び出して閲覧できるようにするwebサイトを作成した。
・色を視覚し、「ある色名に当てはまる」と認識するメカニズムについて論じた。
・日本語における色の命名の歴史をまとめた。
・色命名の歴史の延長線上にあるものとしての調査結果をまとめた。
・色彩の認識、というものに興味があった。
・現代の私たちにとって色名は「既に定められたもの」である。しかしそれを改めて名づけるとなった場合どのように名づけを行うのか、ひいては色彩をどのように捉えているのかを知りたいと考えたから。
5月くらい：
「色彩の持つアウラ」（「色彩の持つエモみ」）というものに興味があり、写真から色彩を抽出して自分で名づけられるアプリを構想
→Adobe Captureを使用して試したところ、いまひとつピンとこずに頓挫
10月末：残り期間と相談し、カラーコードを入力したり色を選択したりすると伝統色名を表示するwebサイトを作成しようと考える
→先生に相談したところ、「制作物で何をしたいのかが明確でない」「色を名づけるという初期のゴールに立ち返るべき」とのFBを受け、軌道修正
→先生のアドバイスを受け、色名を名づけるwebサイトの制作をしようと固める
■11月頭：PHPの学習開始
『詳細! PHP 7+MySQL 入門ノート』を紙で購入。読みながらサンプルコードをいじる、という形式で学習。
前半はひとしきり何を行えるのかを習得し、後半は自分の制作物に必要そうな部分のみ試す、という形で学習。
これは、と思うところがあれば、サンプルコードを書き換えて自分の制作物っぽいものを作り、モチベーションを保っていた。
計1週間～10日くらいで学習を終える。
なお、何ができるのかは学習できたが、知識はついていない感覚。本当であればもう少し時間を取って、自力でコーディングすることをお勧めする。
■11月中旬～下旬：アンケートフォームのコーディング
先述のテキストのサンプルコードファイルをコピーし、内容を書き換えたりコードを付け加えたりという形で作成した。
7割くらい自力でできたものの、PHPとMySQLの連動ができない（原因：コードの不備）、コードを実行しようとしたらエラーが出る（原因：おそらくMAMPを起動していなかった）などで先生に相談しに行った。
何より期限までに完成させることを重視し、詰まった！と思ったらすぐに先生にアポを取るようにしていた。
その結果、技術面のサポートだけでなく、デザイン面のアドバイス（bootlegの使用・スマートフォン対応画面の作成）もいただいた。
ひいては結果閲覧画面の作成という新たなミッションも頂いた。
■11月下旬：結果閲覧画面のコーディング
こちらは本来行う予定ではなかったが、先生のアドバイスを受け急遽作成することにした。
HTMLで検索画面を表示させ、リンクを押すときに定義づけを行って、MySQLから必要な結果だけを呼び出すという構造で作成した。
サンプルコードに該当するものがなかったため、自力でコーディングしようと試みるが、指定した結果だけを表示させることができず、先生に相談。
その結果、ほぼ先生に作っていただくような形になってしまった。
普通にプログラミングを学習していれば、そうはならなかったのではないか、ということが反省点。
①LINEにて、ゼミLINEのメンバー全員、計38名に個別でアンケートフォームのURLを送付した。加えてインスタのストーリーに調査の概要を掲載し、声をかけてくれた3名にも調査を依頼した。指定した回答期限内（2日間）に投稿された回答は30件、うちゼミ生は27件であった。
②回答が完了したと知らせてくれた相手に対して、結果閲覧画面のURLを送付し、見た感想を送ってくれるように頼んだ。帰ってきた感想は15件であった。
11月の下旬にはアンケートフォームが完成していたが、論文パートとの兼ね合いで調査の実行を遅らせていた。
今考えると、調査を優先して進めていれば集計が楽だったし、余裕を持って集計方法を考えることができたのではないかと思う。
制作のテーマに対して、論文で何を論じてよいかわからなかったため、とりあえず図書館で本を借りて、論文のトピックを定めることからはじめた。
書きたいと思ったトピックを順不同にリストアップし、流れに沿うように並び替えるという形で論文の骨組みを作成した。
しかし書きたい・論じたいことが絞れていなかったため、論文が無駄に長くなってしまった。何を書くためにどの情報が必要なのかという取捨選択が必要。
また戸山図書館に絞って資料を調べていたら、中央図書館にいい（網羅性の高い）資料があることに提出直前まで気づかなかった。文キャン民は気を付けるべし。
PHPを用いて、ラジオボタンで選択をして検索を掛ける形式を考えていたが、先生に相談したところ、HTMLで書き、リンクから結果表示ページに飛ばすという形式をすすめられた。
以下が該当ページのコードである。
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>色名をさがす</title>
// BootstrapのCSS読み込み
<link href="css/bootstrap.css" rel="stylesheet">
// jQuery読み込み
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
// BootstrapのJS読み込み
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div><ul>
<div class="pt-3 pl-3">色から色名をさがす</div><br>
<div class="px-4"><h5>みたい色名を選んでください。</h5><br></div>
// ここから色名を表示させるコード
<div class="pt-3 pl-3">
<div style="width:200px; height:100px; background:#0067C0;">
</div></div>
<div class="pt-1 pl-3"><label>色A：</label><br></div>
<div class="pl-5">
<li><a href="sikimeimiru.php?param=iroa"> 呼ばれている色名</a></li>
</label>
<label>
<li><a href="sikimeimiru.php?param=nadukea"> つけられた色名</a>
</label>
</div><br>
// ここまでで1セット。以下5色ぶん繰り返し
<div class="pt-3 pl-3">
<div style="width:200px; height:100px; background:#007D7F;">
</div></div>
<div class="pt-1 pl-3"><label>色B：</label><br></div>
<div class="pl-5">
<li><a href="sikimeimiru.php?param=irob"> 呼ばれている色名</a></li>
</label>
<label>
<li><a href="sikimeimiru.php?param=nadukeb"> つけられた色名</a>
</label>
</div><br>
<div class="pt-3 pl-3">
<div style="width:200px; height:100px; background:#FFBE00;">
</div></div>
<div class="pt-1 pl-3"><label>色C：</label><br></div>
<div class="pl-5">
<li><a href="sikimeimiru.php?param=iroc"> 呼ばれている色名</a></li>
</label>
<label>
<li><a href="sikimeimiru.php?param=nadukec"> つけられた色名</a>
</label>
</div><br>
<div class="pt-3 pl-3">
<div style="width:200px; height:100px; background:#BE0032;">
</div></div>
<div class="pt-1 pl-3"><label>色D：</label><br></div>
<div class="pl-5">
<li><a href="sikimeimiru.php?param=irod"> 呼ばれている色名</a></li>
</label>
<label>
<li><a href="sikimeimiru.php?param=naduked"> つけられた色名</a>
</label>
</div>
</div><br>
<div class="pt-3 pl-3">
<div style="width:200px; height:100px; background:#838383;">
</div></div>
<div class="pt-1 pl-3"><label>色E：</label><br></div>
<div class="pl-5">
<li><a href="sikimeimiru.php?param=iroe"> 呼ばれている色名</a></li>
</label>
<label>
<li><a href="sikimeimiru.php?param=nadukee"> つけられた色名</a>
</label>
</div>
</label><br>
// 本当はここまででよかった。以下は苦闘の名残として残ってしまったが使えない検索ボタン
<div class="pt-3 pl-3">
<input type="submit" button type="button" class="btn btn-default btn-lg" value=" 検索 "></ul>
</form>
</div>
</body>
</html>
上記検索ページ同様、必要な色名だけを表示させる方法を先生に教えて頂いた。言い訳をすると、参考書を詰め込んだだけではだめだった。表示はこのような感じになる。
以下に該当ページのコードを掲載する。
<?php
require_once("lib/util.php");
// データベースユーザ
$user = 'testuser';
$password = 'creativemediard';
// 利用するデータベース
$dbName = 'color';
// MySQLサーバ
$host = 'localhost:8889';
// MySQLのDSN文字列
$dsn = "mysql:host={$host};dbname={$dbName};charset=utf8";
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>色名をみる</title>
<!-- BootstrapのCSS読み込み -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- jQuery読み込み -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- BootstrapのJS読み込み -->
<script src="js/bootstrap.min.js"></script>
<!-- Main Stylesheet File - workhtmlより。-->
<!-- テーブル用のスタイルシート -->
</head>
<body>
<div>
<?php
$param = $_GET['param'];
//MySQLデータベースに接続する
try {
$pdo = new PDO($dsn, $user, $password);
// プリペアドステートメントのエミュレーションを無効にする
$pdo->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
// 例外がスローされる設定にする
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
echo "データベース{$dbName}に接続しました。", "<br><br>";
// SQL文を作る（プレースホルダを使った式）
$sql = "SELECT age, gender,{$param} FROM colorname";
// プリペアドステートメントを作る
$stm = $pdo->prepare($sql);
// プレースホルダに値をバインドする
// SQL文を実行する
$stm->execute();
// 結果の取得（連想配列で受け取る）
$result = $stm->fetchAll(PDO::FETCH_ASSOC);
$columnName = "";
if ($param == "iroa") {
$columnName = "こう呼ぶ";
} else if ($param == "irob") {
$columnName = "こう呼ぶ";
} else if ($param == "iroc") {
$columnName = "こう呼ぶ";
}else if ($param == "irod") {
$columnName = "こう呼ぶ";
}else if ($param == "iroe") {
$columnName = "こう呼ぶ";
}else if ($param == "nadukea") {
$columnName = "つけられた名前";
}else if ($param == "nadukeb") {
$columnName = "つけられた名前";
}else if ($param == "nadukec") {
$columnName = "つけられた名前";
}else if ($param == "nadukeb") {
$columnName = "つけられた名前";
}else if ($param == "nadukee") {
$columnName = "つけられた名前";
}
?>
<?php
if ($param == "iroa" || $param == "nadukea") {
echo "<ul><div style=\"height:100px; background:#0067C0;\"></div></div>";
}
else if ($param == "irob" || $param == "nadukeb") {
echo "<ul><div style=\"height:100px; background:#007D7F;\"><br></div></div>";
}
else if ($param == "iroc" || $param == "nadukec") {
echo "<ul><div style=\"height:100px; background:#FFBE00;\"></div></div>";
}
else if ($param == "irod" || $param == "naduked") {
echo "<ul><div style=\"height:100px; background:#BE0032;\"></div></div>";
}
else if ($param == "iroe" || $param == "nadukee") {
echo "<ul><div style=\"height:100px; background:#838383;\"></div></div>";
}
echo "<table class = table >";
echo "<thead><tr>";
echo "<th>", "性別", "</th>";
echo "<th>", "年齢", "</th>";
echo "<th>", $columnName , "</th>";
echo "</tr></thead>";
// 値を取り出して行に表示する
echo "<tbody>";
foreach ($result as $row){
// １行ずつテーブルに入れる
echo "<tr>";
echo "<td>", es($row['gender']), "</td>";
echo "<td>", es($row['age']), "</td>";
echo "<td>", es($row[$param]), "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
} catch (Exception $e) {
echo '<span class="error">エラーがありました。</span><br>';
echo $e->getMessage();
exit();
}
?>
<div class="pt-3 pl-3">
<input type="button" button type="button" class="btn btn-default btn-lg" value="戻る" onclick="location.href='sikimeiserch.html'">
<br>
<div class="pt-3 pl-3">
</div></div>
</body>
</html>
・回答がスマホ・PCどちらでもできるようにした。
・フォームの質問文を参考文献を参考にして作成した。質問文に誤解を与えず、適切な答えをもらえるようにした。
・調査対象に選んだ色が、暗めの色に偏っていた。
JIS慣用色名を基準に「赤」「青」「黄」を選んだが、そのどれもが一般的な/私が想像していた「赤」「青」「黄」よりも暗く見えた。そのため、「一般的な色を見てもらって」それを何色と呼ぶか、という調査だったはずが、その暗さを表現する回答が多く、想定していたような回答を得ることができなかった。
・JIS慣用色名に拘ってしまった。既存の色名に依存せず、自由に色を名づけるという研究の趣旨が、JIS慣用色名に頼ることによって揺らいでいるのではないか、と今思えば考えてしまう。
・自分で色を選択できるほどの自信がなく、先行研究に倣ってJIS慣用色名を使用してしまった。
・JIS慣用色名に指定されているCMYKと、コーディングに用いるRGBとの間でぶれが発生することを認識していなかった。
・また、偏りが出ていることに気づいた時点で、再調査を行う時間があればよかったが、時間がなくそのまま考察につなげるしかなかった。
・そもそも時間がなさすぎて、論文内容の取捨選択・適切な考察など、様々なことがうやむやなまま提出してしまった。字数は36,000字で、前半だけ読むと文学部の論文みたいになっている。しかし焦点がぼけてしまったり、何の話をしているのかわからなくなってしまったり。見切り発車で書き始めてしまったので不要な部分が多い。
・RGB値などに基づいて、より明るい色の調査を行う。
・結果閲覧画面にコメント機能・スタンプ機能を設け、回答者同士が交流できるようにする。
・論文の前半で論じた日本語における色の名づけと、回答内容を照らし合わせ、傾向を見る。