2020-06-22

日記のプレビュー表記を作成する　#12

　プレビュー表記とは、カレンダーページから遷移できるページです。

　少し前に撮ったスクショなので、立ち絵が僕のままですが、サンプルとしてはこの画像のような感じです。
　その月に書いた日記一覧をプレビューできるページ、ということです。
　ちなみに今回は、めちゃめちゃ苦戦しました。

日記を取得する

　まず、データベースから日記を取得します。いつものように、URLから$_GET['date']となっている日付のパラメータを取得します。
　パラメータは、例えば「2020-06」や「1994-12」のように「年-月」という構成になっています。日記のテーブルの、dateカラムが、この年月から始まっているものを検索し、引っ張り出します。where句のlike文ですね。

しかし、うまくいかず……

　$sql = "select good_1, good_2, good_3 from myDiary where userId = :id and date like ':date%'";
    $stmt = $this->db->prepare($sql);
    $stmt->bindvalue(':date',$date,\PDO::PARAM_STR);

　このように、％のワイルドカードとbindvalue関数を使って検索をかけますが、エラーが出てしまいます。調べれば、原因はすぐにわかりました。

　$sql = "select good_1, good_2, good_3 from myDiary where userId = :id and date like :date ";
    $stmt = $this->db->prepare($sql);
    $stmt->bindvalue(':date',$date . '%',\PDO::PARAM_STR);

　$sqlの文字列の中ではなく、bindvalueの引数の中で％をつけることで、うまくいきました。勉強になった！

空のデータを抹消する

　無事に該当する月の日記を取り出すことに成功しました。しかし、前回にも少し触れましたが、データの中には１文字も書かれていない日記も登録されています。
　取り出したデータを愚直に全て表示してしまうと、空の日記まで表示されることとなってしまいます。

悪戦苦闘

　日記のデータは多次元配列となっているため、配列の消去にかなり苦労しました。

// 多次元配列の子要素が空の場合削除する（親要素は残る）
    foreach($data as $value){
      $res[] = array_filter($value, 'strlen');
    }
    // 子要素が消え去った親要素を消し去る
    foreach($res as $key => $value){
      if(empty($value) ){
        unset($res[$key]);
      }
    }

　まず、多次元配列の子要素が空だった場合、それらを全てarray_filterで抹消します。
　そうすると、中身ががらんどうになった親要素が残ります。
　それらをempty()による条件分岐とunset()によって、完全デリートするのです。

ここでミスに気が付く

　完璧だと思われた作戦は、大敗を喫しました。日記の中身は空でも、その空の日記の日付のデータは残っているという点を失念していたのです。
　つまり、子要素が完全に消え去ることはありません。
　これに対抗すべく、子要素の数が一個の場合、親要素を削除するという処理を攻撃表示で召喚します。子要素が一個ということは、そこに日付のデータしかない＝日記が空っぽということだからです。

　この処理の実装にも、悩まされました。
　for($i = 0; $i < count($data) ; $i++)というfor文を回し、該当した要素を削除していたのですが、条件を満たしていても削除される要素とされない要素があるのです。
　原因は、for文を回す回数をcount関数で決定していたことにありました。要素を削除する処理をしているので、要素の数が途中で変わるということをすっかり忘れていたのです。この部分を、あらかじめ設定した定数にすることで解決しました。

取り出したデータを表示する

　苦労して取り出したこれらのデータを、htmlに出力します。　sprintf関数を使い、html文にデータを組み込みます。

　うまくいきました！最新の日記ほど上に表示されるようになっており、スクロールで下の日記を見ることができます。

うまくいったと思ったのも束の間

　さて、ちょっと左の矢印を押して、５月の日記を表示してみましょう。

　心を抉るエラー文です。
　その月の日記を一つも書いていない場合は、データが存在しないので、データベースに検索をかけたときにエラーが出ることが原因です。
　データを一つも取り出せなかった時は、空文字を返すことで万事解決……な、筈はありませんでした。
　これまでに様々な処理を行ってきましたが、それらに渡るデータが空文字なら、エラーが起きてしまいます。故にデータベースから取り出したモノが空文字なら、そもそもそれらの処理を行わず、空文字を返すという処理を行いましょう。

    if(!empty($tempDiaryData)){
      // 空の日記を消す処理
      $tempDiaryList = $this->_eraseEmptyDiary($tempDiaryData);
      // 番号を降り直す
      $diaryList = array_values($tempDiaryList);
      return $diaryList;
    }else{
      return '';
    }

　html部分に表示させるものが空文字であっても、エラーが起きてしまいます。故にここでも、データが空文字なら、そもそも処理を行わないようにしました。emtpy関数サマサマです。

ダメ押しのエラー

　三つのいいこと記入欄を全て埋めていないとエラーになることが判明しました。単純に、日記の書かれていない空のデータがエラーを引き起こしているようですね。
　日記を表示させる関数にて、データを直接表示させていましたが、ワンクッション処理を挟みましょう。変数を用意し、データが空なら空文字を、そうでなければデータの文字列を代入します。

　うまくいきました！

表示させる文字数を限定する

　ここまでくれば、あと一歩です。今のままでは、以下の画像のように、日記の文字数が長いとレイアウトが崩れてしまいます。

　mb_strlen関数で文字数を測り、一定以上なら、mb_substr関数でその先を切り捨てるという処理を放ちます。その後、文字列に「……」を連結し、文章が続くことを視覚的に示唆しましょう。　

　完成です！慣れない処理やエラーの連続で、とても大変でした。しかし、それだけにやりがいのある部分だったと思います。

気がついたこと

　面倒な処理の大半が空っぽの日記が含まれることに起因するものでした。
　ということは、つまり……最初から空っぽの日記はデータベースに登録しないという風にすれば、全てが解決したのではないでしょうか……？
　完全に盲点でした。次回までに修正します。

2020-06-16

日記を書いた日はカレンダーにマークが付くようにする　#11

プログラミング美少女ポジティブ日記

　タイトルの通りです。

　この画像のカレンダーは初期に作成したダミーですが、このように、日記を書いた日はカレンダーに●マークが記される機能を追加しましょう。

実装していく

　カレンダーを動的に生成する際、URLから年月日のパラメータを取得しています。このパラメータを利用し、データベースから日付とユーザーIDで、適当なデータを取り出します。データを取り出せたのなら、その日に日記を書いている、ということです。<span class="filled">●</span>の文字列を挿入してやりましょう。

　いい感じ……ん？　こんなにたくさん日記を書いていたでしょうか。
　ちょっと6月9日を覗いてみます。

　空っぽです。
　新しい日で日記編集画面を開き、何も書かないまま保存をすると、空の日記が登録される仕様になっているのが原因です。空とはいえ、そこに日記が存在するとプログラムは判定しています。

解決していく

　日記の存在を判定する際、日記の中身を一つ一つ確かめる処理を挟みます。怖い先生の持ち物検査みたいですね。
　日記の中身は「いいこと１」「いいこと２」「いいこと３」「その他」の４つで成り立っているので、foreachを回し、一つ一つの中身を確かめます。
　全てが空の場合は、日記が存在しないという判定を下すようにするのです。
　その結果……

　見事、きちんと日記の中身があるときだけ、丸印が付くようになっています。
　これによって、自分がいつどれだけ日記をつけたのか、わかるようになりました。

　それでは、今回はこのあたりで。

2020-06-16

日記投稿・編集機能を作成する　#10

プログラミング美少女ポジティブ日記

日記を表示させる

　まずは日記を適切に表示させないといけませんね。MySQLを用い、日記テーブルを作成します。

create table myDiary(
  id int not null auto_increment primary key,
  userId int,
  date varchar(50),
  good_1 varchar(450),
  good_2 varchar(450),
  good_3 varchar(450),
  other text
);

　「日記のID」「紐付けのためのユーザーID」「日付」「良いこと１」「良いこと２」「良いこと３」「その他」というカラムで構成されています。ダミーデータとして、適当にユーザーIDを３とし、2020年6月5日と2020年6月6日の日記を挿入しておきます。
　日記の表示にはshowMydiaryというメソッドを使います。引数にURLの日付パラメータと、ユーザーIDを渡します。それらを条件に、MySQLのSELECT文でデータを取得しましょう。
　「いいこと１」「いいこと２」「いいこと３」「その他」と表記を分けたいので、配列としてデータを取り出し、それらをhtml文に組み込みます。

　いい感じです。きちんと、日付に対応した日記が表示されています。
　しかし、ここでバグが。

日記をつけていない日はエラーになる

　日記をつけていない日は、データベースに該当する日付がないため、データを取り出せずエラーが起きます。当然といえば当然か……。
　これに対応すべく、データ取得がうまくいかなければ、返す配列を全て空にするという処理を叩きつけます。

//日付とidで日記を検索し、取得
    $sql = "select good_1, good_2, good_3, other from myDiary where userId = :id and date = :date";
    $stmt = $this->db->prepare($sql);
    $stmt->bindvalue(':date',$date,\PDO::PARAM_STR);
    $stmt->bindvalue(':id',$id,\PDO::PARAM_INT);
    $stmt->execute();

//取得に失敗したら配列を全て空に。成功したらそのまま返す
    $res = $stmt->fetch(\PDO::FETCH_ASSOC);
    if($res === false){
      $res = array_fill(0, 4, '');
    }else{
      return $res;
    }

　これにより見事、からっぽの日記でも表示することができるようになりました。

日記投稿・編集を可能にする

　右上にある羽ペンマークから、日記編集画面にジャンプできます。元のページと同じパラメータを渡してやるだけなので、至極単純です。
　テキストボックスのvalue属性には、日記を表示させた時と同じ処理で、文字列を埋め込みます。これによって、日記をつけていた日は、その内容がそのままテキストボックスに入ります。

　編集画面にて右上の保存ボタンを押せば、テキストボックスの内容が同ページにPOSTされます。POST内容がデータベースに登録された後、日記閲覧画面にリダイレクトします。

　内容をデータベースに登録する際、同じ日付とユーザーIDの日記が既に存在するかをチェックしています。
　存在していた場合はUPDATE処理を、存在しなかった場合はINSERT処理をかけるように分岐させております。

　アプリの要でもある日記編集機能を実装することができました！
　それでは、今回はこの辺りで。

2020-06-15

日記表示機能を作成する　#09

プログラミング美少女ポジティブ日記

　カレンダー上で日付をクリックすると、日記が表示されるようにしましょう。

日記閲覧ページに飛ぶ

　カレンダーの日付に、aタグを追加します。
　そのままでは数字しかクリックに反応しません。マス目全体をクリックできるようにしたいので、aタグをブロック要素に変更し、widthとheightを100％に設定します。
　aタグをブロック要素にすると、text-alignが使えなくなるため、文字が中央配置でなくなります。なので、適切なpaddingとmarginを設定します。

　しっかりとa要素がマス全体に広がっていますね。ちょっとはみ出してしまっているので、親要素であるtd要素に「overflow: hidden;」を設定し、はみ出た部分を非表示とします。
　これにて、マス目をクリックすることで日記閲覧ページに飛ぶことが可能になりました。

URLにパラメータを与える

　例えば、2020年の6月1日のマスをクリックしたら、2020年の6月の1日の日記を表示させないといけません。
　それを実現させるために、URLにパラメータを与えます。

$date = $day->format('Y-m-d-D');
      $body .= sprintf('<td><a href="/myDiary.php?date=%s" class="youbi_%d %s">%d</a></td>', $date, $day->format('w'), $todayClass, $day->format('d'));

　aタグのリンク先に日付のデータを渡します。2020年の6月1日(月)なら、「2020-06-01-Mon」という文字列がURLの最後に渡されるはずです。
　実際に、カレンダーで6月1日をクリックしてみましょう。

　いい感じです。日付表記はダミーの6月10日で固定されていますが、URLを見ると、しっかりとパラメータが渡っているのがわかります。

日付を正しく表示する

　URLのパラメーターを、年月日にバラしていきましょう。
　「2020-06-01-Mon」というパラメータがあったとしたら、「2020」と「06」と「01」と「Mon」に分けます。

$year = substr($_GET['date'], 0, 4);
$month = substr($_GET['date'], 5, 2);
$day = substr($_GET['date'], 8, 2);
$youbi = substr($_GET['date'], 11);

var_dump($year);
var_dump($month);
var_dump($day);
var_dump($youbi);

　substrを使えば、適切に切り出すことが可能ですね。

　「06」や「01」がそのまま表示されると見栄えが悪いので、アタマに０がついていた場合はそれを取り除きます。また「Mon」なら「月」、「Tue」なら「火」と、日本語に変換するためのswitch文も追加しましょう。
　……スクリーンショットの撮影を忘れてしまいましたが、ともあれ、それらのデータをhtml部分に出力すれば、日付表記は完成です。

左右の矢印で日付を切り替えられるようにする

　カレンダーと同様に、左右の矢印で、前日や次の日の日記を表示できるようにします。
　カレンダーでは、URLから取り出したパラメータ（2020-06など）で月単位のDateTimeオブジェクトを作成し、それに-1したものを前の月のリンク、+1したものを次の月のリンクとしていました。
　日記では月単位でなく、日単位のDateTimeオブジェクトを作成し、同じ処理でリンクを作成すればOKです。
　ただし、日記のパラメータには「Mon」といった余計な曜日表記が存在するので、substrでそれらを切り抜く必要があります。また、前や次のリンクを作成する際に、URLに曜日表記を再び連結する処理も忘れてはいけません。

　このように、日記の表示を切り替えられるようになりました！

　次回は、いよいよ日記を書く処理を作っていきましょう。それでは、今回はこのあたりで。

2020-06-15

カレンダーを動的に表示する　#08

美少女ポジティブ日記プログラミング

　さて、こちらにおわしますカレンダーですが

　ダミーテキストを表示させているだけなので、実際のカレンダーとは異なります。せめて実際の2020年6月のカレンダーを作れよと思わないこともないです。
　また、それっぽい左右の矢印をクリックしても、何も起きません。なので、各月のカレンダーを動的に表示できるよう、DateTimeクラスを使って改造していきましょう。

完成したものがこちらです

f:id:Kyokuya_jao:20200615213551g:plain — gif変換が上手くいかずチカチカしております

　かの有名な動画教材サイトドットインストールのレッスンそのままなので、カレンダー作成自体に特筆すべき点はありません。
　だがしかし、順風満帆にいかぬのがプログラミングというもの。主に２点の不具合に苦しみました。

不自然な空きスペース

　1日が日曜日な月において、不自然な空きスペースが生まれるという不具合が発生しました。

原因

●空のtr要素が存在する

　カレンダーというものはご存知の如く、１行につき７マス(月〜金)の日付で構成されています。つまり、日曜日で改行しているのです。
　このカレンダーもその例に則り、日曜日になるとtr要素の閉じタグと開始タグ(≒改行)が押し込まれるよう設定されています。

    foreach ($this->_period as $day){
      if($day->format('w') == 0){
        $body .= '</tr><tr>';
      }(以下省略)

　つまり、月の始めが日曜日だと、その直前にtr要素の閉じタグと開始タグが挟まれ、空のtr要素が生じることとなります。その空のtr要素が、不自然な空きスペースを生み出しているのでしょう。

●table要素に高さが設定されている

　table要素の高さは親要素と同等(height: 100%;)となっております。
　試しにtableの高さ要素を消したところ、レイアウトは崩れましたが、空きスペースはなくなりました。

　tr、td要素の高さは、元々設定されておりません。それらの親要素であるtable要素に合わせようとして、空きスペースが生じたということでしょうか。

解決策

●tr要素が空の時、非表示にする

　CSSの:emptyセレクタを用い、trの中身が空だった場合、そのtrを非表示(display: none;)とします。

　しかし、これだけではうまくいきませんでした。:emptyセレクタは、要素の中に空白や改行が存在した時点で無効化されてしまうようです。
　それならばと、jQueryを用い、trの中にtd要素がない場合、空白すらも消し去って完全に空っぽにするようにしましょう。

　この方法により、解決しました。冒頭のtr要素に「firstTr」クラスをつけ、firstTrクラスの中のtd要素の数を計算しています。tdの数が0だった場合、firstTrクラスの中身を跡形もなく消しとばしております。これによって、:emptyセレクタが利くようになりました。

　うまくは行きましたが、少々強引なように思えます。そして、次の方法が最適だと知ることになるのです。

●tr要素に高さを設定する

　原因の項目でも挙げましたが、tableに高さが設定されていることが問題なので
　tableの高さを消し、代わりにtrに高さをつけることで、全てが解決しました。めでたしめでたし。

　さて、カレンダーの動的な生成はこれにて完成しました。

バグはこれだけに非ず……

　カレンダー上で、当日のマスは薄い黄色で示されるよう設定したのですが　このスクショ撮影日時は2020年6月15日であるにも関わらず、なぜか2020年5月23日になっているのです。
　ローカル環境の問題なのでしょうか……？

　グローバル環境で解決するなら、今の段階では致命的ではないと判断したので、とりあえずは放置しておきます。

　それでは、今回はこのあたりで。

2020-06-14

美少女を作成する　#07

美少女ポジティブ日記プログラミング

　さて、いよいよこのWebアプリの要でもある、美少女を作成しましょう。
　美少女というのは、なんといっても「美少女が褒めてくれる日記」という題名の実に25%を占める単語です。対して、一見肝心に思える日記という単語の占有率は約17%。美少女がいかに大切な要素か、定量的に示されてしまいましたね。

　美少女を用意する方法は、様々です。

フリー素材を利用する
イラストレーターに依頼する
自分で描く

これでいきましょう。

美少女を描いていく

　勢いで購入したものの、５〜６回使用した後に放置されていたペンタブを引っ張り出し、イラスト作成ソフトを起動します。

　アタリを描きます。サッと描いたかのように言っていますが、実際は3Dデッサン人形アプリ等を使いながら、七転八倒しつつ描きました。

　アタリを元に、手癖でササッと顔をデザインしましょう。

　ややフレッシュすぎる感じがあります。髪の毛はもう少し長くしましょう。目はいい感じなので、このままで。

　髪型を決め、服もそれっぽく決め……

　線画が完成しました。途中過程を省きすぎだろと我ながら思いますが、描くことに夢中になっていたら撮影を忘れてしまっていたので、ご容赦ください。

　あとは色を塗るだけです。出来るだけアプリのデザインに合った配色を考え、バケツツールで塗っていきます。
　適当に影を落として……

　完成です！
　見紛うことなき美少女です。「美少女が褒めてくれる日記」に相応しいキャラクターだと思います。

　実際に画面に落とし込みました。しっかりと画面に調和しているのではないでしょうか。

　この子の名前を決めましょう。PHPのフレームワークとして有名な「Laravel」から拝借し、"ララ"という名前で決定しました。
　まぁ、この日記の開発にLaravel使っていないのですけども。

　ついにこの世に産み落とされたララちゃんと共に、今後の開発に尽力していきます。
　それでは、今回はこのあたりで。