Aokashi Home リニューアルのお知らせ 第4回 帰ってきたhojiroLT(2017/2/18)

話す内容 1. 自己紹介 2. Aokashi Homeについて 3. Aokashi Homeのリニューアルについて 4. Aokashi Homeのリニューアル計画 5. よくありそうな質問

自己紹介 1. 今回は大学外の方がいるので詳しく

Aokashi(あおかし) ● Firefox 学生マーケティングチーム ● WWA Wing Team ● http://www.aokashi.net ● Twitter: @aokashi マップチップ作ったり、パソコン作ったりし ている。鉄道が趣味。デザインが好き。 こんなアイコンしています。

Aokashi Homeについて 2. 皆さんご存知だろうか

Aokashi Homeについて ● 私が運営するWebサイト。 ● http://www.aokashi.net ● 略称は あほ AH。 ● 作成したプログラムやミニゲーム色々を公開している。 ● 役に立たない資料も公開している。 ● 最近更新頻度が滞っている(後述)。

Aokashi Homeは最近更新が滞っている ● 近いうちにリニューアルを予定していて、余計な更新作業を省 きたいから ● 生きるのがつらいから ● パソコンの組み込み作業やゲームに目が入ってしまっている から

リニューアルについて 3. 凝っています

なぜリニューアルをする システムの面では ● 何かと時代遅れだから ● 動的サイトにちょっと嫌気が入ったから →動的サイトは更新が容易だけど、管理画面のプログラムが 付いている都合上乗っ取られたらまずい ● HTTPS接続じゃないから

メンテナンスの面では ● 今後LTで自己紹介をする際に 「http://www.aokashi.net/aboutme」 への誘導をしたいから →単純に言うと、自己紹介を作ったり、出したりするのに手間 がかかるから ● 更新しやすいWebサイトを作りたいから

BEFORE

AFTER

リニューアルで変わる(かもしれない)こと ● HTTPS接続になる。 ● VPSに移行する。 ● 静的サイトになる。 ● HTMLソースがチョットマシになる。 デザインは、こうなる。 ● 昔のWebサイトの色を引き継ぐ。アイコンはあえてドット風に。 ● ヘッダーとフッター、ページ内容で背景色を分ける。 ○ ページ内容の背景色は幅広く。閲覧する上での窮屈さを軽減。

参考: 昔のWebサイト http://coden.aokashi.net で過去のWebサイトを見ることが出来ます。

こんなところまで凝っています ● CSSの命名規則とかはサイト規模に依存しにくいSMACSSを使用。 ○ CSSの命名規則... HTMLの各要素につけるIDやクラスの名前の付け方は、 予め決めたルールを利用することで、不定期に開発したり、複数人で開発したりする際に 幸せになる。 代表例としてOOCSSやBEMがあるらしい。 ○ このため、CSSファイルも複数に分割。link要素入れるの手間がかかるんじゃないかと @importの存在を忘れてた。 ● 今回出したレイアウトはページで使うレイアウトだが、トップページ用のレイ アウトやエラーページ用のレイアウトなども設ける予定。

メニューのアイコン画像は、左図のように1ドット=4ピクセルの設定でわざ と拡大した状態で保存。 右図の左は1ドット=1ピクセルにした場合で、右はそれを2倍拡大した場 合。ぼやけにくい事がお分かりできれば良いです。

ヘッダーにロゴとメニューがある。 フッターは隠れてます(すいません許してください)が、 Webサイトの簡単な説明が入る。 閲覧の幅を稼ぐ目的で、サイドバーは消した。ただ し設けるかもしれない。そこは考える。

リニューアル計画 4. 実現の保証はしません

リニューアル計画 ● 2月頃: こんなものになるんだよ－と発表する←イマココ、VPSを借りる ● 3月上旬: WebサイトをVPSに移行、リニューアル ○ JavaScriptのアニメーションとかは導入せず、内容が閲覧できる程度の留める ○ 厳しい場合はリニューアル前の Webサイトも一応残すことにする ● 3月下旬: WebサイトにJavaScriptを導入して、凝っていく ● 4月以降: どんどん凝っていく

将来は Aokashi Home as a Servise (AHaaS) Aokashi Homeとしてのサービス サービスが提供できればいいなという構想

お約束 ただし、これはあくまで予定であって、実現を保障するものではありません。多 分別のことに楽しんでしまい、リニューアルちょっとしただけでまた変わらないか もしれません。 あとリポジトリ、あります。 ● https://github.com/aokashi/aokashi_base 参考になったWebページはリポジトリの説明部分にあります。

よくありそうな質問 5. 実際に出されたことはありません

システム ● VPSということはどのプログラムでWebサーバー構築するの →VPSできないので、とりあえずまずはApache。 →ある程度慣れたら別のところに移る。 ● 静的サイトジェネレータは何を使うの →とりあえずHugoを使う。 →後に、CSSのコーディングを楽にするプリプロセッサーを使いたい時には MiddlemanやMetalsmithに変えるつもり。 ○ Hugo...Go言語で作られたシンプルな静的サイトジェネレータ。 ○ Middleman, Metalsmith...Ruby Gemというパッケージマネージャーを通して入手できる 静的サイトジェネレータ。

● リンク集や掲示板とかはどうした →時代の流れに巻き込まれて死んだ →お問い合わせはメールかTwitterで、Ask.fmでも受け付けて います ● エイプリルフールネタはやるの →やりますが、クソサイトじゃないので絶対期待しないでくださ い コンテンツ

言っておきたいこと ● ドット絵っぽく表現するには画像にも配慮が必要になる。 ● CSSのFlexboxは良いらしい。 ● Visual Studio Codeの補完機能がなかなか良くてサクサク コーディングできた。 ● Webサイト開発のお供にFirefoxを是非ご利用ください。 ● プレゼン作るときにトラックポイントは結構しんどい。 ● バイト先探す度に若干の怖さを感じてきた。

ご静聴 ありがとうございました