Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Sora Arakawa
December 26, 2021

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

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

Sora Arakawa

December 26, 2021
Tweet

More Decks by Sora Arakawa

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. あらすじ

    View full-size slide

  4. 時に、西暦2021年

    View full-size slide

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

    View full-size slide

  6. 学情チャンが生まれた

    View full-size slide

  7. 今日は何の話?

    View full-size slide

  8. https://gakujochan.com/

    View full-size slide

  9. の、システムの話

    View full-size slide

  10. ところで
    ・GXって何?

    View full-size slide

  11. ところで
    ・GXって何?
    → 知るか

    View full-size slide

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

    View full-size slide

  13. 学情チャン
    ・学情の擬人化
    ・学情チャンプロジェクト(通称:学プロ)が運営

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. カスのHTML問題



    Heading 2

    View full-size slide

  24. カスの表記問題
    ・表記揺れ
    「第1回」「第2回」「第三回」
    ・半角文字/全角文字の混同
    「!」「!」「?」「?」
    ・半角スペース/全角スペースの不統一

    View full-size slide

  25. 対策
    Linterの導入
    Prettierとかよくね?
    → Prettierは記法を統一するLinter
    初歩的な(?)ミスを訂正するものではない
    みたいなダメ文法はエラー吐いて死ぬ
    @ゆるぼ HTMLの文法ミスに対応したLinter

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide