先輩「ちょっと僕のポートフォリオサイト作ってくれない？」
672 Views
March 07, 21
スライド概要
https://yuruhachi-it.connpass.com/event/184538/ で発表したやつ。Docswell使ってみようと思って開発用PC内を探したら見つかった唯一の発表スライドpdfファイル。
ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。広い門の下には、この男のほかに誰もいない。ただ、所々丹塗の剥はげた、大きな円柱に、蟋蟀が一匹とまっている。羅生門が、朱雀大路にある以上は、この男のほかにも、雨やみをする市女笠や揉烏帽子が、もう二三人はありそうなものである。それが、この男のほかには誰もいない。何故かと云うと、この二三年、京都には、地震とか辻風とか火事とか饑饉とか云う災がつづいて起った。そこで洛中のさびれ方は一通りではない。旧記によると、仏像や仏具を打砕いて、その丹がついたり、金銀の箔がついたりした木を、路ばたにつみ重ねて、薪の料に売っていたと云う事である。洛中がその始末であるから、羅生門の修理などは、元より誰も捨てて顧る者がなかった。するとその荒れ果てたのをよい事にして、狐狸が棲すむ。盗人が棲む。とうとうしまいには、引取り手のない死人を、この門へ持って来て
関連スライド
各ページのテキスト
先輩「ちょっと僕のポートフォリオサイト作ってくれない？」 asmsuechan 1
俺「・・・」 2
先輩「金は出す。」 3
俺「任せてください」 4
登場人物 ワイ 先輩 大学院生(修士) 大学院生(博士) 去年ビルディットさんからお仕事貰ってました 大学の先輩ではない。 5
案件概要 ちゃんと個人事業者として請けました。 既に元となるHPは存在するリニューアル案件です。 納期は1ヶ月後で稼働は30時間程度。 6
出来上がったもの https://hiroki11x.github.io 7
要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 8
要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 9
楽に更新したい HTMLテンプレート用意してそこにYAMLとマークダウン で書いていくと楽かも？ 便利。 10
メンテナンサビリティの向上 個人で作ったものってメンテナンスが面倒で打ち捨てられがち 楽に更新し続けるにはメンテナンス性の向上が必須 ここを強く意識した 11
メンテナンサビリティの向上 Before After • index.htmlに全てが詰まっていた • React + TypeScript • DOMがjQueryのセレクタで複数JS • 適切なコンポーネント分割 • ライブラリのnpm管理 ファイルからいじいじされる • GitHub Actionsによる自動デプロイ • 使われているかわからないスタイル達 いわゆるレガシーフロントエンド いわゆるモダンフロントエンド 12
要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 13
日本語ページが欲しい こういうボタンが欲しい Reactのstateで切り替えるお手軽実装でこれを実現 /enとか/jaとかのURLが生える訳ではなくて同一ページ内で描写を切り替える 14
日本語ページが欲しい ←英語ページ 日本語ページ→ 15
要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 16
レイアウト/スタイル改善 元々Bootstrapが入っていたのでそのまま利用 Bootstrap久しぶりに触ったけどめちゃくちゃ進化してて驚いた Before After 17
レイアウト/スタイル改善 なんか新しいカラーテーマいくつか提案してよ 分かりました 18
レイアウト/スタイル改善 デフォルト、ダークモード、女子力、Soralized Light 19
レイアウト/スタイル改善 マカロン色はお気に召さなかった模様 20
その他(SEO対策) Google Chromeのlighthouseで計測 OGPやdescriptionの設定 (画像が重くてPerformanceがひっくい) 21
まとめ 個人で何か作る時はメンテナンス性がとても大事・・・ 特にWebインフラ面 。なるべくメンテナンスレスになるようにしたい。 (自動デプロイ, 静的ページ, Serverless) ポートフォリオ、打ち捨てられないように作っていきましょう 細く長く 22
終 対局ありがとうございました。 23