Aokashi Home リニューアルのお知らせ/aokashi_home_renewal

第4回 帰ってきたhojiroLT - https://hojiro-lt.connpass.com/event/49487/

私のWebサイト( http://www.aokashi.net )のリニューアルに関するお知らせです。
リポジトリは https://github.com/aokashi/aokashi_base です。

Transcript

1. Aokashi Home リニューアルのお知らせ 第4回 帰ってきたhojiroLT(2017/2/18)
2. 話す内容 1. 自己紹介 2. Aokashi Homeについて 3. Aokashi Homeのリニューアルについて 4. Aokashi Homeのリニューアル計画 5. よくありそうな質問
3. 自己紹介 1. 今回は大学外の方がいるので詳しく
4. Aokashi(あおかし) • Firefox 学生マーケティングチーム • WWA Wing Team • http://www.aokashi.net • Twitter: @aokashi マップチップ作ったり、パソコン作ったりし ている。鉄道が趣味。デザインが好き。 こんなアイコンしています。
5. Aokashi Homeについて 2. 皆さんご存知だろうか
6. Aokashi Homeについて • 私が運営するWebサイト。 • http://www.aokashi.net • 略称は あほ AH。 • 作成したプログラムやミニゲーム色々を公開している。 • 役に立たない資料も公開している。 • 最近更新頻度が滞っている(後述)。
7. Aokashi Homeは最近更新が滞っている • 近いうちにリニューアルを予定していて、余計な更新作業を省 きたいから • 生きるのがつらいから • パソコンの組み込み作業やゲームに目が入ってしまっている から
8. リニューアルについて 3. 凝っています
9. なぜリニューアルをする システムの面では • 何かと時代遅れだから • 動的サイトにちょっと嫌気が入ったから →動的サイトは更新が容易だけど、管理画面のプログラムが 付いている都合上乗っ取られたらまずい • HTTPS接続じゃないから
10. メンテナンスの面では • 今後LTで自己紹介をする際に 「http://www.aokashi.net/aboutme」 への誘導をしたいから →単純に言うと、自己紹介を作ったり、出したりするのに手間 がかかるから • 更新しやすいWebサイトを作りたいから
11. BEFORE
12. AFTER
13. リニューアルで変わる(かもしれない)こと • HTTPS接続になる。 • VPSに移行する。 • 静的サイトになる。 • HTMLソースがチョットマシになる。 デザインは、こうなる。 • 昔のWebサイトの色を引き継ぐ。アイコンはあえてドット風に。 • ヘッダーとフッター、ページ内容で背景色を分ける。 ◦ ページ内容の背景色は幅広く。閲覧する上での窮屈さを軽減。
14. 参考: 昔のWebサイト http://coden.aokashi.net で過去のWebサイトを見ることが出来ます。
15. こんなところまで凝っています • CSSの命名規則とかはサイト規模に依存しにくいSMACSSを使用。 ◦ CSSの命名規則... HTMLの各要素につけるIDやクラスの名前の付け方は、 予め決めたルールを利用することで、不定期に開発したり、複数人で開発したりする際に 幸せになる。 代表例としてOOCSSやBEMがあるらしい。 ◦ このため、CSSファイルも複数に分割。link要素入れるの手間がかかるんじゃないかと @importの存在を忘れてた。 • 今回出したレイアウトはページで使うレイアウトだが、トップページ用のレイ アウトやエラーページ用のレイアウトなども設ける予定。
16. メニューのアイコン画像は、左図のように1ドット=4ピクセルの設定でわざ と拡大した状態で保存。 右図の左は1ドット=1ピクセルにした場合で、右はそれを2倍拡大した場 合。ぼやけにくい事がお分かりできれば良いです。
17. ヘッダーにロゴとメニューがある。 フッターは隠れてます(すいません許してください)が、 Webサイトの簡単な説明が入る。 閲覧の幅を稼ぐ目的で、サイドバーは消した。ただ し設けるかもしれない。そこは考える。
18. リニューアル計画 4. 実現の保証はしません
19. リニューアル計画 • 2月頃: こんなものになるんだよ－と発表する←イマココ、VPSを借りる • 3月上旬: WebサイトをVPSに移行、リニューアル ◦ JavaScriptのアニメーションとかは導入せず、内容が閲覧できる程度の留める ◦ 厳しい場合はリニューアル前の Webサイトも一応残すことにする • 3月下旬: WebサイトにJavaScriptを導入して、凝っていく • 4月以降: どんどん凝っていく
20. 将来は Aokashi Home as a Servise (AHaaS) Aokashi Homeとしてのサービス サービスが提供できればいいなという構想
21. お約束 ただし、これはあくまで予定であって、実現を保障するものではありません。多 分別のことに楽しんでしまい、リニューアルちょっとしただけでまた変わらないか もしれません。 あとリポジトリ、あります。 • https://github.com/aokashi/aokashi_base 参考になったWebページはリポジトリの説明部分にあります。
22. よくありそうな質問 5. 実際に出されたことはありません
23. システム • VPSということはどのプログラムでWebサーバー構築するの →VPSできないので、とりあえずまずはApache。 →ある程度慣れたら別のところに移る。 • 静的サイトジェネレータは何を使うの →とりあえずHugoを使う。 →後に、CSSのコーディングを楽にするプリプロセッサーを使いたい時には MiddlemanやMetalsmithに変えるつもり。 ◦ Hugo...Go言語で作られたシンプルな静的サイトジェネレータ。 ◦ Middleman, Metalsmith...Ruby Gemというパッケージマネージャーを通して入手できる 静的サイトジェネレータ。
24. • リンク集や掲示板とかはどうした →時代の流れに巻き込まれて死んだ →お問い合わせはメールかTwitterで、Ask.fmでも受け付けて います • エイプリルフールネタはやるの →やりますが、クソサイトじゃないので絶対期待しないでくださ い コンテンツ
25. 言っておきたいこと • ドット絵っぽく表現するには画像にも配慮が必要になる。 • CSSのFlexboxは良いらしい。 • Visual Studio Codeの補完機能がなかなか良くてサクサク コーディングできた。 • Webサイト開発のお供にFirefoxを是非ご利用ください。 • プレゼン作るときにトラックポイントは結構しんどい。 • バイト先探す度に若干の怖さを感じてきた。
26. ご静聴 ありがとうございました