学情絶叫ウェブシステムGX

静大情報LT大会 -2021年12月-

Transcript

1. 学情絶叫 ウェブシステムGX ～Development the system and manage contents in the server.～ Sora Arakawa (arkw) 2021/12/26 静大情報LT大会＠静岡大学 浜松キャンパス 「#静大情報LT」でツイートすると 画面上部に表示されます!
2. 自己紹介 Sora Arakawa（arkw） • 静岡大学 情報学部 行動情報学科 B2 • 所属：某室（長）、xRサークルはまりあ、ICON • 愛知県岡崎市出身→静岡県浜松市在住 • 光回線開通しました • https://arkw.net/ • シンフォギア未履修(ここ重要)(OP曲がすき)
3. あらすじ
4. 時に、西暦2021年
5. 学情システム、 墜ちて燃えて尽きて、 そして―
6. 学情チャンが生まれた
7. 今日は何の話？
8. https://gakujochan.com/
10. の、システムの話
11. ところで ・GXって何？
12. ところで ・GXって何？ → 知るか
13. ところで ・GXって何？ → 知るか ・行情2年の地獄「Webシステム設計演習」とは無関係です
14. 学情チャン ・学情の擬人化 ・学情チャンプロジェクト（通称：学プロ）が運営
15. 学情チャン 非公式ポータル ・学情チャンの紹介や各種リンクをまとめたページ ・https://gakujo.arkw.net/ ・ロゴはこの頃からあった ・2021年5月24日公開～6月4日閉鎖 → 改修の後、学情チャンプロジェクトに譲渡
18. 構成 ・ロリポップ! レンタルサーバ gakujochan.com/114514 とか入れるとエラーページが出る ・クライアントサイド：HTML、CSS、JavaScript（jQuery） ・サーバサイド：PHP（独自CMS v1）
19. 独自CMS ・CMS？サイトジェネレータ？ ・他のサイト用に書いたプログラムを転用 ・別ファイルのHTMLをテンプレートに合成する ・URLは「https://gakujochan.com/?p={HTMLファイル名}」 ・NoSQL（DBMS不使用）
20. 独自CMS index.php ←メインプログラム list.php ←ページリスト page/ ←ページHTML格納フォルダ css/ img/ js/ …（以下略）
21. ・pageディレクトリにHTMLファイルを格納する
22. <?php $list = [ "reference" => "資料集", "rules" => "学情チャンとのお約束", "contest" => "コンテスト", "404" => "404 Not Found", "illustcon_1" => "第1回 学情チャンイラストコンテスト", "illustcon_2" => "第2回 学情チャンイラストコンテスト", "writecon_1" => "第1回 書いたよ学情チャンコンテスト" ];
23. <?php include_once "list.php"; $id = $_GET["p"]; if (isset($id) == "") { $id = "top"; } else { if (!file_exists("page/".$id.".html")) { $id = "top"; } $title = $list[$id]; } $main = file_get_contents("page/".$id.".html"); ?>
24. // タイトル <title><?php if (isset($title) == "") { echo "学情チャン 公式ウェブサイト"; } else { echo "".$title." - 学情チャン 公式ウェブサイト"; } ?></title>
25. // 本文 <div class="wrapper-columns-right"> <?php echo $main ?> </div>
26. 構成 ・独自CMS v2を開発済み、そのうち実装予定 ・list.phpを廃止 ページHTMLの1行目にタイトルを記述する
27. カスのHTML問題 <a href = “***”> <a href=“***”style=“font-size: 20px;”> <b style=“font-size: 23px;”> <p><h2>Heading 2</h2></p>
28. カスの表記問題 ・表記揺れ 「第1回」「第２回」「第三回」 ・半角文字／全角文字の混同 「！」「!」「？」「?」 ・半角スペース／全角スペースの不統一
29. 対策 Linterの導入 Prettierとかよくね？ → Prettierは記法を統一するLinter 初歩的な（？）ミスを訂正するものではない <p><h2></h2></p>みたいなダメ文法はエラー吐いて死ぬ ＠ゆるぼ HTMLの文法ミスに対応したLinter
30. 対策 Vue.js / Nuxt.jsに移行 <Contest v-bind:number=“3” v-bind:name=“書いたよ学情チャンコンテスト“ v-bind:status=“end” /> みたいに書けると楽？ ビルドはGitHub Actionsで…
31. 対策 その他 ・独自CMSに文法チェック／記法チェックを付ける ・ちゃんとしたCMSを入れる（WordPressなど） ・記述ルールを策定する ←これが一番楽
32. ToDo
34. ご清聴ありがとうございました