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

学情絶叫ウェブシステムGX ～Development the system and manage contents in the
server.～ Sora Arakawa (arkw) 2021/12/26 静大情報LT大会＠静岡大学浜松キャンパス「#静大情報LT」でツイートすると画面上部に表示されます!

自己紹介 Sora Arakawa（arkw） • 静岡大学情報学部行動情報学科 B2 • 所属：某室（長）、xRサークルはまりあ、ICON
• 愛知県岡崎市出身→静岡県浜松市在住 • 光回線開通しました • https://arkw.net/ • シンフォギア未履修(ここ重要)(OP曲がすき)

あらすじ

時に、西暦2021年

学情システム、墜ちて燃えて尽きて、そして―

学情チャンが生まれた

今日は何の話？

https://gakujochan.com/

の、システムの話

ところで・GXって何？

ところで・GXって何？ → 知るか

ところで・GXって何？ → 知るか・行情2年の地獄「Webシステム設計演習」とは無関係です

学情チャン・学情の擬人化・学情チャンプロジェクト（通称：学プロ）が運営

学情チャン非公式ポータル・学情チャンの紹介や各種リンクをまとめたページ・https://gakujo.arkw.net/ ・ロゴはこの頃からあった・2021年5月24日公開～6月4日閉鎖 → 改修の後、学情チャンプロジェクトに譲渡

構成・ロリポップ! レンタルサーバ gakujochan.com/114514 とか入れるとエラーページが出る・クライアントサイド：HTML、CSS、JavaScript（jQuery）・サーバサイド：PHP（独自CMS v1）

独自CMS ・CMS？サイトジェネレータ？・他のサイト用に書いたプログラムを転用・別ファイルのHTMLをテンプレートに合成する・URLは「https://gakujochan.com/?p={HTMLファイル名}」・NoSQL（DBMS不使用）

独自CMS index.php ←メインプログラム list.php ←ページリスト page/ ←ページHTML格納フォルダ css/ img/ js/
…（以下略）

・pageディレクトリにHTMLファイルを格納する

<?php $list = [ "reference" => "資料集", "rules" => "学情チャンとのお約束",
"contest" => "コンテスト", "404" => "404 Not Found", "illustcon_1" => "第1回学情チャンイラストコンテスト", "illustcon_2" => "第2回学情チャンイラストコンテスト", "writecon_1" => "第1回書いたよ学情チャンコンテスト" ];

<?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"); ?>

// タイトル <title><?php if (isset($title) == "") { echo "学情チャン
公式ウェブサイト"; } else { echo "".$title." - 学情チャン公式ウェブサイト"; } ?></title>

// 本文 <div class="wrapper-columns-right"> <?php echo $main ?> </div>

構成・独自CMS v2を開発済み、そのうち実装予定・list.phpを廃止ページHTMLの1行目にタイトルを記述する

カスのHTML問題 <a href = “***”> <a href=“***”style=“font-size: 20px;”> <b style=“font-size:
23px;”> <p><h2>Heading 2</h2></p>

カスの表記問題・表記揺れ「第1回」「第２回」「第三回」・半角文字／全角文字の混同「！」「!」「？」「?」・半角スペース／全角スペースの不統一

対策 Linterの導入 Prettierとかよくね？ → Prettierは記法を統一するLinter 初歩的な（？）ミスを訂正するものではない <p><h2></h2></p>みたいなダメ文法はエラー吐いて死ぬ＠ゆるぼ HTMLの文法ミスに対応したLinter

対策 Vue.js / Nuxt.jsに移行 <Contest v-bind:number=“3” v-bind:name=“書いたよ学情チャンコンテスト“ v-bind:status=“end” /> みたいに書けると楽？
ビルドはGitHub Actionsで…

対策その他・独自CMSに文法チェック／記法チェックを付ける・ちゃんとしたCMSを入れる（WordPressなど）・記述ルールを策定する ←これが一番楽

ご清聴ありがとうございました

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

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

Sora Arakawa

More Decks by Sora Arakawa

Other Decks in Programming

Featured

Transcript