Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
学情絶叫ウェブシステムGX
Search
Sora Arakawa
December 26, 2021
Programming
0
120
学情絶叫ウェブシステムGX
静大情報LT大会 -2021年12月-
Sora Arakawa
December 26, 2021
Tweet
Share
More Decks by Sora Arakawa
See All by Sora Arakawa
arkw vs. サーバ移転 -2024年1月版-
arkw
0
100
なれる! 村上さん Misskeyサーバ構築入門
arkw
0
260
Cloudflare Tunnelで自宅サーバを公開してみた
arkw
0
920
5分でわかる!? 7セグメントLED制御
arkw
0
52
ヤフオクで原付買った話
arkw
0
160
パソコンの消費電力と省エネ化のおはなし
arkw
0
250
"成果物"を作ろう(提案)
arkw
0
230
Python(+α)でスマートプラグを制御してみた
arkw
0
1.1k
C++とDXライブラリでLTタイマーを作った話
arkw
0
320
Other Decks in Programming
See All in Programming
CSC307 Lecture 14
javiergs
PRO
0
220
Introduction of Happy Eyeballs Version 2 (RFC8305) to the Socket library
coe401_
1
220
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
CSC307 Lecture 13
javiergs
PRO
0
150
OpenAI/Gemini APIを使って EPUBを翻訳するCLIツールをつくってみた
tomiyan
0
790
CSC307 Lecture 11
javiergs
PRO
0
240
How to use Macrobenchmark
veronikapj
0
160
小さな開発会社を作った理由
polidog
0
1.9k
20240706_CDKConf
takuyay0ne
0
1.2k
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
AHC035解説
terryu16
0
730
Rust.Nagoya #1
codemountains
0
170
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Scaling GitHub
holman
458
140k
Become a Pro
speakerdeck
PRO
15
4.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Navigating Team Friction
lara
181
13k
Docker and Python
trallard
37
2.9k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
2.9k
Designing for humans not robots
tammielis
247
25k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Transcript
学情絶叫 ウェブシステム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/
None
の、システムの話
ところで ・GXって何?
ところで ・GXって何? → 知るか
ところで ・GXって何? → 知るか ・行情2年の地獄「Webシステム設計演習」とは無関係です
学情チャン ・学情の擬人化 ・学情チャンプロジェクト(通称:学プロ)が運営
学情チャン 非公式ポータル ・学情チャンの紹介や各種リンクをまとめたページ ・https://gakujo.arkw.net/ ・ロゴはこの頃からあった ・2021年5月24日公開~6月4日閉鎖 → 改修の後、学情チャンプロジェクトに譲渡
None
None
構成 ・ロリポップ! レンタルサーバ 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回」「第2回」「第三回」 ・半角文字/全角文字の混同 「!」「!」「?」「?」 ・半角スペース/全角スペースの不統一
対策 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など) ・記述ルールを策定する ←これが一番楽
ToDo
None
ご清聴ありがとうございました