先輩「ちょっと僕のポートフォリオサイト作ってくれない?」

672 Views

March 07, 21

スライド概要

https://yuruhachi-it.connpass.com/event/184538/ で発表したやつ。Docswell使ってみようと思って開発用PC内を探したら見つかった唯一の発表スライドpdfファイル。

profile-image

ある日の暮方の事である。一人の下人が、羅生門の下で雨やみを待っていた。広い門の下には、この男のほかに誰もいない。ただ、所々丹塗の剥はげた、大きな円柱に、蟋蟀が一匹とまっている。羅生門が、朱雀大路にある以上は、この男のほかにも、雨やみをする市女笠や揉烏帽子が、もう二三人はありそうなものである。それが、この男のほかには誰もいない。何故かと云うと、この二三年、京都には、地震とか辻風とか火事とか饑饉とか云う災がつづいて起った。そこで洛中のさびれ方は一通りではない。旧記によると、仏像や仏具を打砕いて、その丹がついたり、金銀の箔がついたりした木を、路ばたにつみ重ねて、薪の料に売っていたと云う事である。洛中がその始末であるから、羅生門の修理などは、元より誰も捨てて顧る者がなかった。するとその荒れ果てたのをよい事にして、狐狸が棲すむ。盗人が棲む。とうとうしまいには、引取り手のない死人を、この門へ持って来て

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

先輩「ちょっと僕のポートフォリオサイト作ってくれない?」 asmsuechan 1

2.

俺「・・・」 2

3.

先輩「金は出す。」 3

4.

俺「任せてください」 4

5.

登場人物 ワイ 先輩 大学院生(修士) 大学院生(博士) 去年ビルディットさんからお仕事貰ってました 大学の先輩ではない。 5

6.

案件概要 ちゃんと個人事業者として請けました。 既に元となるHPは存在するリニューアル案件です。 納期は1ヶ月後で稼働は30時間程度。 6

7.

出来上がったもの https://hiroki11x.github.io 7

8.

要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 8

9.

要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 9

10.

楽に更新したい HTMLテンプレート用意してそこにYAMLとマークダウン で書いていくと楽かも? 便利。 10

11.

メンテナンサビリティの向上 個人で作ったものってメンテナンスが面倒で打ち捨てられがち 楽に更新し続けるにはメンテナンス性の向上が必須 ここを強く意識した 11

12.

メンテナンサビリティの向上 Before After • index.htmlに全てが詰まっていた • React + TypeScript • DOMがjQueryのセレクタで複数JS • 適切なコンポーネント分割 • ライブラリのnpm管理 ファイルからいじいじされる • GitHub Actionsによる自動デプロイ • 使われているかわからないスタイル達 いわゆるレガシーフロントエンド いわゆるモダンフロントエンド 12

13.

要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 13

14.

日本語ページが欲しい こういうボタンが欲しい Reactのstateで切り替えるお手軽実装でこれを実現 /enとか/jaとかのURLが生える訳ではなくて同一ページ内で描写を切り替える 14

15.

日本語ページが欲しい ←英語ページ 日本語ページ→ 15

16.

要件 1. HTML直書きで更新が大変だから楽にしたい 2. 英語ページしかないから日本語ページが欲しい 3. レイアウト/スタイル改善 16

17.

レイアウト/スタイル改善 元々Bootstrapが入っていたのでそのまま利用 Bootstrap久しぶりに触ったけどめちゃくちゃ進化してて驚いた Before After 17

18.

レイアウト/スタイル改善 なんか新しいカラーテーマいくつか提案してよ 分かりました 18

19.

レイアウト/スタイル改善 デフォルト、ダークモード、女子力、Soralized Light 19

20.

レイアウト/スタイル改善 マカロン色はお気に召さなかった模様 20

21.

その他(SEO対策) Google Chromeのlighthouseで計測 OGPやdescriptionの設定 (画像が重くてPerformanceがひっくい) 21

22.

まとめ 個人で何か作る時はメンテナンス性がとても大事・・・ 特にWebインフラ面 。なるべくメンテナンスレスになるようにしたい。 (自動デプロイ, 静的ページ, Serverless) ポートフォリオ、打ち捨てられないように作っていきましょう 細く長く 22

23.

終 対局ありがとうございました。 23