鍋をやりたくてサイトを立ち上げた話

これはなに

• 鍋をやるために鍋.netというサイトを立ち上げた
• クソサイトでもいいじゃない。やっていく気持ちが大切。

なぜ

• 鍋をやりまくるぞという強い気持ち
• jQueryもサーバサイドも見たくないよ
• React完全に理解した

どうやって

鍋をやる際の３大要素を成立させるためのサイトを作った。

1. Google スプレッドシートにレコード追加するだけのサイトを作った

HTMLでフォームを作り、IFTTT経由でGoogle スプレッドシートにレコード追加するだけのサイトを作りました。IFTTTのWebhook便利。
これで３大要素は抑えることができたな。

2. 調整・アーカイブができるように掲示板を作った

DBよくわからんし、レンサバでできる範囲で解決したい。
ということでPHPで作ることにして、下記のサイトを参考にしてみた。
phpの簡易掲示板の作り方 - Qiita
PHP:特定dirからファイル名のみ取り出すやり方色々 - Qiita
PHPでファイルのアップロード、ダウンロード - Qiita

画像をアップロードして表示するだけの掲示板のソース

ページネーションも画像圧縮もしてないからどんどん重くなる。

photo.php

<h1>画像アップロード</h1>
<?php
$dir = "images/";
$filelist = glob($dir . '*');
foreach ($filelist as $file) {
	if (is_file($file)) {
echo <<< eof
  <li><img src="{$file}" width="300" height="300"></li>
eof;
	}
}
?>

<!--送信ボタンが押された場合-->
<?php if (isset($_POST['upload'])): ?>
    <p><?php echo $message; ?></p>
<?php else: ?>
    <form method="post" enctype="multipart/form-data">
        <p>アップロード画像</p>
        <input type="file" name="image">
        <button><input type="submit" name="upload" value="送信"></button>
    </form>
<?php endif;?>

3. スケジュールをなんか簡単に表示したい

日程のボタン押したらモーダルが開く挙動ををなんか遠回りに実装した。

• 絶対にjQuery使いたくない
• Markdownでサクッと日程ごとの記事作りたい

日程のボタンを押すと・・・

モーダルが開く

jQuery使いたくないからReact使った

1. npm使いたくないからまずはyarnを入れた

   $ npm install --global yarn
   

2. 楽したいのでgeneratorを使ってアプリの雛形を作った

   $ yarn create react-app nabe_net
   

3. モーダルをサクッと実装するためにModalモジュールを使った
   Schedule.js

   import { useState } from "react";
   import Modal from "react-modal";
   import Date221216 from "./schedules/Date221216";
   
   function Schedule() {
       const [date221216ModalIsOpen, set221216ModalIsOpen] = useState(false);
   
   
       return (
           <div className="Schedule">
               <div>
                   <h2>開催予定</h2>
                   <div className="date221216 scheduled_date"
                       variant="contained"
                       color="primary"
                       onClick={() => {
                           set221216ModalIsOpen(true);
                       }}>
                       12月16日(金)
                   </div>
               </div>
   
               <Modal isOpen={date221216ModalIsOpen}>
                   <div>
                       <Date221216 />
                   </div>
                   <div className="close" onClick={() => set221216ModalIsOpen(false)}>
                       閉じる
                   </div>
               </Modal>
           </div>
       );
   
   }
   
   export default Schedule;
   

4. モーダルで表示する内容をMarkdownで書くためにreact-markdownモジュールを使った
   Date221216.js

   import ReactMarkdown from "react-markdown";
   
   const markdownText = `
   ## 2022年12月16日(金)の予定
   - 場所: [最寄りの駅](https://goo.gl/maps/)
   - 日時: 19:00~
   - 費用: 酒や食べ物
   - 連絡先: 000-1234-5678
   - 備考：-
   `
   
   function Date221216() {
       return <ReactMarkdown>{markdownText}</ReactMarkdown>;
   
   }
   
   export default Date221216;
   

5. ビルドしてサイトにデータをアップする

   $ yarn build
   

なんか楽になった気がしない・・・

まとめ

目的と手段が混沌としてきました。
この内容だったらWordpressやGatsby使えば早かったような気もしますが、これはこれで良かったんだ（きっと）
今後は通知機能や予定の投稿機能を実装するぞ！