陰干し記録

web業界に転職を目指す素人が、色々とwebサービスを頑張って作るブログ。寿司食べたい。

自分が作ったサービスを改めて理解する

サービス

諸用あって、2週間ほどサイト更新に手を付けられない日が続きました。

abrd.site

それで先日「そろそろ新しい事したいな～」と思ってソースを見返したところ、「え、なんだここ」と思う部分がなかなかありまして。

作っているときは「こことここが繋がって…」と分かっているのですが時間がたつと理解度が如実に下がっています。かなしい。

これはあんまり良くないな、ということで忘備録・復習用に「にゃんこうちのう」の中身の解説(記録)をしていきたいと思います。
当たり前ですがプログラミング歴1ヶ月の素人のコードなので参考にするところはありません。よろしくね。

逆に「ここはこうしろよな～」というのがあったらぜひぜひご連絡ください(やさしくね)。

 

 

トップ画面

form action="feeling/cats.php" method="GET">
<p><input type="text" name="feeling" placeholder="今の気持ちをひらがなで入れてね" size="30"></p>
<input type="submit" value="にゃんこ体現" class="btn btn-primary btn-l">
</form>

まずはトップページ。

ここは「自分の気持ち」の文字列を入力する部分。
このサイトのキモですが、重要な処理はaction先のページで処理するのでシンプルです。

methodをGETにしたのは前回書いたとおり、入力情報をURLに表示させてツイッターやらで呟けるようにするため。

入力ボタンを押したら次のページに飛びます。


ねこ表示ページ

<?php
$data = [];
$feeling = htmlspecialchars($_GET['feeling'], ENT_QUOTES, "UTF-8");

$positive01 = array('かわいい' , 'ねこ' , 'にゃんこ', 'たのしい' , 'よい' , 'よき', 'いい', 'つよい', 'つよみ','ばぶみ', 'ごきげん', 'むてき', 'さいこう', 'かっこいい', 'いけいけ', 'ぱりぴ', 'りあじゅう', 'ようきゃ', 'わらい', 'かんしゃ', 'しあわせ', 'そうかい', 'ゆかい', 'かんき', 'えくすたしー', 'ぜっさん', 'きぼう', 'ばんざい', 'ときめき', 'さつい', 'うれしい');
$negative01 = array('かなしい' , 'いかり', 'つらい' , 'つらみ' , 'つかれた', 'だめ', 'げつようび', 'しゃちく', 'いたい', 'ひりあじゅう', 'いんきゃ', 'いらいら', 'ふこう' , 'まけいぬ', 'なく', 'しつぼう', 'みじめ', 'むなしい', 'ふゆかい', 'げきど', 'いらだち', 'きもい', 'きもちわるい', 'ぶさいく','くさい','くさそう');
$surprise = array('おどろき', 'びっくり', 'なんと', 'まっど', 'くれいじー', 'なげき', 'ぜつぼう', 'いかり', 'やばい' , 'こわい', 'どうよう', 'しょうげき','すごい');

急にごちゃついてきたぞ～

何はともあれ前ページから受け取った情報を取得。ENT_QUOTESで特殊文字を無害にして$feelingに代入。

ポジティブ・ネガティブその他いろいろな感じの言葉を感情ごとにグループ分けしてとにかく配列に入れます。

感情に合わせてねこちゃんの画像を出すので、このarrayの数だけ表示するねこちゃんの画像が必要になるわけです。

うむむ、今更ですがなんだかつたない頭の内を公開しているようではずかしぃ

 

foreach($positive01 as $words){
  if(strpos($feeling , $words) !== false){
    $feeling_img = 'kawaii';
    $cat_id = 'watanabe';
    $feeling_txt = '<span>' . $feeling . '</span>' .'<br>という気持ち';
  }
}

foreach($negative01 as $words){
  if(strpos($feeling , $words) !== false){
    $feeling_img = 'tsurami';
    $cat_id = 'nakamura';
    $feeling_txt = '<span>' . $feeling . '</span>' .'<br>という気持ち';
  }
}

foreach($surprise as $words){
  if(strpos($feeling , $words) !== false){
    $feeling_img = 'surprise';
    $cat_id = 'shimizu';
    $feeling_txt = '<span>' . $feeling . '</span>' .'<br>という気持ち';
  }
}

foreachを使って先程の配列を$wordsに代入。繰り返し処理させます。

if(strpos($feeling , $words) !== false)

で(入力された文字列)が(配列)内にあったらif内を実行。

$feeling_imgに代入される文字列はimgフォルダ内にあるgif画像のファイル名になります。

$cat_idにはねこのお名前が入ります。

のちのちデータベースからこの名前にマッチするものを引っ張る用ですね。

$feeling_txtは画像の下に表示される言葉です。

 

if(!isset($feeling_img)){
  $feeling_img ='notfound';
  $cat_id = 'notfound';
  $feeling_txt = 'ねこには少しむずかしい言葉でした。<br>(他の言葉を入れてね)';
}
if($feeling === ''){
  $feeling = 'notfound';
  $feeling_txt = '気持ちを入力してね';
}
  if(mb_strlen($feeling) > 10){
    $feeling_img = 'notfound';
    $feeling_txt = '長い言葉は難しかったみたい<br>(10文字以内で入力してね)';
  }

入力した文字列が配列になかったり、空だったり、不正な文章を入れられないようにする処理の部分。

最初のif文は「もしこれまでの流れで$feeling_imgに何も入ってなかったらそれぞれにnotfoundを代入・他の言葉を入れるよう促す」という処理。

次のif文は言葉が入ってないときの場合。同じくnotfoundねこちゃんを出します。

最後のif文は入力された文字列が10字以上だった場合の処理。notofoundキャットと警告文を表示します。

とりあえず前準備はここまで。次はデータベースに接続します。

データベースからねこちゃん情報を引っ張る

 $dsn = 'mysql:dbname=●●●;host=●●●;charset=utf8';
 $user= '●●●';
 $password ='●●●';

 try{

  $dbh = new PDO($dsn, $user, $password);
  $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $sql = "SELECT cat_name, cat_introduction FROM cats WHERE cat_id LIKE :cat_id";
  $stmt = $dbh->prepare($sql);
  $stmt->bindValue(':cat_id', '%'.$cat_id.'%', PDO::PARAM_STR);
  $stmt->execute();
  while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
    $data[] = $row;
  }

 }catch (PDOException $e){
 echo('接続エラー:'.$e->getMessage());
 die();
}

事前に作っていたねこちゃんを登録しているデータベース(mySQL)に接続します。

SQL文は正直まだ理解が浅いです…

$sql = "SELECT cat_name, cat_introduction FROM cats WHERE cat_id LIKE :cat_id";

ここ以外は定型的に打っていますね…(よくない)

$cat_idを持つねこを探し、ねこのお名前(cat_name)とねこの紹介文(cat_introduction)をcatsテーブルから引っ張ってきます。

 

 <img src="../img/<?php echo $feeling_img; ?>.gif" class="img-fluid mx-auto d-block catimg">
      <p class="catfeeling text-center">
        <?php echo $feeling_txt ?> </p>
      <table border="1" class="table table-bordered table-sm align-middle cat-table table-light">
        <?php foreach($data as $row): ?>
        <tbody>
          <tr>
            <td class="cat-icon align-middle"> <img src="../img/<?php echo $cat_id ?>.jpg"></td>
            <td class="cat-name align-middle">
              <?php echo $row['cat_name']; ?> </td>
            <td class="align-middle">
              <?php echo $row['cat_introduction']; ?> </td>
          </tr>
        </tbody>
        <?php endforeach; ?> </table>

(なんかめっちゃコードがカラフルだな…)

ようやくHTML本体に表示させます。

bootstrapで作っているのでclassが煩雑ですね。

$feeling_imgでgifを表示、$feeling_txtでそれに合わせた文章を出す。

データベースからのデータをtable内に表示させます。

htmlタグをまたいだphpの書き方は慣れないとけっこうしんどいですねぇ…

 

<p class="small">このねこちゃんをツイートする</p>
<a href="https://twitter.com/share" class="twitter-share-button" data-text="<?php echo $feeling; ?>ねこちゃん #にゃんこうちのう" data-size="large">Tweet</a>

twitterのツイート文もechoで入力された文が出るよう記述。

titleタグも同様な感じです。

だいたい仕組みとしてはこんな感じでしょうか。 (力尽きた)

まとめ

そんな大それた機能はありませんし、プロから見たらひどいコードかもしれませんが、自分が作った第一号サービスということでなかなか愛着があります。

正直このサイトはGET処理を勉強するための1発モノのつもりでしたが、意外にもデータベースの練習にもいい塩梅を醸してくれました。

これからも何かしら覚えたときは実験場にしてみたいと思います。

それでは 

 

はよエンジニアに転職したですねえ

abrd.site

プログラミング初心者が「猫があなたの気持ちを代弁するサイト」を作った

初のウェブサービス(?)リリース

さっそく一週間サボってしまった…

いけね、いけね。

というわけで早速phpを使ってサイトをひとつ作成。

 

にゃんこうちのう-にゃんこがあなたの気持ちを体現するよ

f:id:inubayashi:20180612001407g:plain

↑一言で言うとこのような感じのサイトです。

フォームに「悲しい」「楽しい」などの気持ちを入れると、にゃんこがその気持に合わせてグイグイ動きます。

 

タイトルは流行りに乗って人工知能に掛け合わせたわけですが、裏には知能はありません。

 

虚無とarrayです。

 

仕組み

実際の仕組み的にはまず、「$positive」、「$negative」などの気持の配列に「かわいい」、「かなしい」などのそれっぽい文字列をたくさん入れます。

お次はトップページのformに入力された文字列をgetで習得し、先程の配列からstraposでマッチする文字があるか判定します。

そんでもってマッチしたものに合わせてimg要素のsrcと文面をechoで書き換える感じです。

 

postではなくgetにしたのはURLでツイートできるように…という思惑です。

 

…人工知能の気配は感じませんね。

完全に人力だ!

 

もっと効率の良い書き方があるのでしょうが、今の自分にはこれができるだけの実装ですね。

しょぼくても楽しんでもらえるように猫をダバダバと動かしてごまかしています(できてるか?)

そこが一番のセールスポイント。

 

期間

無の状態からphpの勉強に1週間(データベースまで)。

仕組みを考えて実際のコーディングに1日。

猫のGIFを描くのに2日(5時間くらい)?

htmlはbootstrapで作ったので2時間ほど。

 

なんで猫のGIFに一番時間かけてんだ。

 

今後の課題

現状3体ほどしか猫を用意してないので猫の種類を増やす。

(でもプログラミングの勉強をしたいんだから正直あまりそこにかまける意味はないかも。)

色々とダメなところのツッコミとかももらえると嬉しいです。

 

次のサービス

せっかくphpを勉強しているんだから、次はデータベースを使ったサービスを作ってみたいですね。

できるだけ2週間以内に!

とりあえず作っている間はめちゃ楽しかったです。

 

転職できるようがんばるぞウラ～

f:id:inubayashi:20180602181843g:plain

 

今日から頑張ってく

サービス

はじめまして犬林です。

 f:id:inubayashi:20180602181843g:plain

現在通販系の仕事をやっているのですが、仕事でHTMLをちょっといじる関係からweb業界の世界に興味が出てきた社畜です。

何かいいいですよね、自分でサービス作ってエンターキーをタタッ、ターン!とか押せたり…

 

そんなわけで転職を考え始めたわけですが、それなら未経験だろうが成果物があったほうが良いだろうと。

ていうか無いと弾かれるんだとか(未経験OK求人なのに…!)

 

ということでここでは、色々作ってその記録やら忘備録をつけていきたいと思います。

目標として2週間に1つサービス、というか何かしらをリリースできるようにがんばる!

 

とりあえず今はphp勉強中です。

学習した機能を使ったサイトを来週中には1つ出します。

…出せるはず。

 

…全く面白みのない文章だけど最初ならまあそんなものでしょう。

いい感じに転職できるよう頑張っていきます。

 

それでは