aokashi / aokashi_home Goto Github PK

View Code? Open in Web Editor NEW

0.0 2.0 0.0 12.1 MB

Aokashi Home Base Files

Home Page: https://www.aokashi.net/

License: Apache License 2.0

JavaScript 36.68% MDX 30.86% TypeScript 32.46%

aokashi_home's Introduction

Aokashi Home

Aokashi Home のリポジトリです。 Web サイトの生成に Gatsby.js を使用しています。

開発方法

npm install
npm run develop

contents.aokashi.net で必要なファイル

本サイトを機能するには、 contents.aokashi.net に下記のファイルを配置する必要があります。 * のファイルは必須になります。

contents.aokashi.net
|- banner *
|  `- site_banner-takabo_edge2.png (EDGE2 のバナー)
`- restore
   `- (各復元サイトのディレクトリ)

ディレクトリ構成について

.
├── content
├── data
├── node_modules
├── src
├── static
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.ts
├── gatsby-node.ts
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

content: 旧サイトの記事ファイルです。旧サイトの内容の移植のために残していますが、移植なしに削除する場合もあります。
data: 旧サイトのデータファイルです。現サイトに含まれていないデータが含まれています。
src: ソースファイルです。詳しくは中の README.md をご確認ください。
static: ビルド時に配置されるファイルです。 src ディレクトリ内の画像ファイルでは最適化が行われますが、本ディレクトリ内では行われません。
gatsby-browser.js: Aokashi Home 全ページで実行される JavaScript ソースファイルです。
gatsby-config.js: Gatsby.js の設定ファイルです。
gatsby-node.js: Aokashi Home ビルド時に実行されている JavaScript ソースファイルです。
gatsby-ssr.js: SSR(サーバーサイドレンダリング) 技術に関する設定が含まれている JavaScript ソースファイルです。

ライセンスについて

Apache 2.0 ライセンスが適用されます。

ただし、下記のファイルは他人の著作物が含まれておりライセンス適用対象外のため、 本リポジトリ外では自由に使用することができません。

/src/data/wwa/ 内のスクリーンショット画像
- 使用したい場合はご連絡ください

aokashi_home's People

Contributors

Watchers

aokashi_home's Issues

サイドバーの使いみちを考える

ページ左に配置されるサイドバーだが、サイドバーに何を配置するか考える。

サイドバーを設置しないという考えもあり。

ポートフォリオの小学生にある「学年」を修正する

小学生は、学年の単位を「学年」ではなく「年生」となっているので、修正しておきます。

Netlifyの移行

現在、Aokashi Homeはwerckerを介してVPSにデプロイをしているが、以下の問題があるのでNetlifyに移行したい。

VPSの秘密鍵がwercker上に置いてあって、管理がちょっと危ない
WWAや素材などのコンテンツのあるところへデプロイしているので、操作ミスに伴うコンテンツ消去が怖い

使用システムの選定

#3 でお知らせがブログに集約されるため、使用システムがわざわざ HUGO である必要がなくなりました。

そのため、いっその事システムを変えても良いのではないか無いかと。

複数のゲームを扱う WWA 作品コンポーネントの扱いについて

依頼生活のような、1つのWWA作品で複数のゲームが存在する場合、 WWA 作品コンポーネントはどのように扱うべきだろうか？

現在 WWA 作品コンポーネントは Box コンポーネントを利用する形で実装しているが、各ゲーム毎に1つの Box コンポーネントを利用している。
そのため、このままでは BoxList コンポーネントの中に Box コンポーネントを実装する方法ができず、思ったとおりのレイアウトが作れない。

ページ内の画像を Gatsby によるレンダリングに差し替える

現在、ページ内の画像はトップページのロゴを除きすべて img 要素で直接レンダリングしていますが、これをすべて Gatsby でのレンダリングに差し替えます。

スライムの逆襲の既知の不具合 (2021/1/22 現在)

ロッドホテルサイル店の鍵の番号と店員が言う番号が違う
その他コマンドバトル関連での不具合あり

PrismJS がオーバーフローする

ソースコードの貼り付けで使用している PrismJS ですが、ソースコードの文字が領域内に収まらない場合に限りオーバーフローしてしまいます。

新トップページの検討

広く感じさせるように、トップページのコンテンツの配置を見直す。

スマートフォン

下部に各コンテンツと外部コンテンツのリンク、自分に関する簡単な情報を配置
上部は下部の配置で余った空間すべてを使用、**にロゴのみが配置される

PC

左に各コンテンツと外部コンテンツのリンクを配置 (テキストはアイコンの横)
下部は自分に関する簡単な情報を配置
そのまま画面**にロゴが配置される

自分について

スマートフォンもPCも、スクロールすると自分に関する情報が含まれている
大きく分けて基本情報、好きなものと作業環境、備考からなる
基本情報は左にアイコン、右に簡単な説明とソーシャルリンク
- ソーシャルリンクのアイコンは IcoMoon か FontAwesome のどっちか (もしくはこの2つ以外になるかもしれない)

資料集の Aokashi Home 併合

Aokashi Home の資料集は現在 Pukiwiki を使用していますが、これを Gatsby に統合します。
一応 1単語＝1URL は確保できそう (ポートフォリオのタグですでに実証済み) なので、よしなに移行できそうかなと思います。

WWA 関係のノウハウについてはこのまま移行せず、 WWA FanSquare のコラムに移行しようかと思います。

トップページのブログ記事のタイトルとリンク先が一致しない

ビルドのミスなのかもしれないんですが、トップページ下部にある最新のブログ記事で、前の記事のタイトルがテキストになっているのにURLは最新の記事のものになっているそうです。

RSSの取得に問題があるかもしれないので調べておきます。

tailwind css の扱いについて考える

元々、 sassの利用 と グリッドの概念があるCSSフレームワークの利用 を前提に Aokashi Home の制作を進めていたのだが、 tailwind css の場合だと、 @apply 機能が存在している関係上、構築しようとするとsassを利用する意義を無くしてしまう。

@apply 機能を利用しない方法もあるが・・・どうしようか？

ページヘッダーの扱いについて

ページヘッダーについて、普通のページでは、普通のページヘッダーで、 WWA やソフトウェアでは、特別仕様のページヘッダーで設定したい。

この場合、最適な方法は何だろうか？

謎めいた機械を追い求めて公開後の不具合一覧

#110 と同じように、見つかった不具合をひたすら集めます。
不具合が長期間見つからないことを確認した場合は Close します。

CSSをBulmaに段階的に移行

新Aokashi HomeはCSSフレームワークに Bulma を使用している。
スタイルに時間を掛けないようにする目的で導入したが、下記事情で結局半分使ってて半分使ってない状態で余計に時間がかかってしまっている。

ボタンの枠線が調整できない
思ったとおりのレイアウトが実装できない
- PCだと縦並び、スマートフォンだと横並びを実現しようとすると、膨大な数のクラスを書く必要になってしまい、その要素がどの要素なのか分からなくなる場合がある

しかし、後者はひとまず置いといて、前者については細かくカスタマイズすれば、コンポーネントCSSを作らずとも、現行の Aokashi Home 相当のデザインを再現できることが分かった。

各コンポーネントのCSSをできる限りBulmaに移行したり、変数を加えたりして、再現してみよう。

英棟市 PLiCy 公開後の不具合一覧

この Issue では、英棟市の PLiCy 公開後の寄せられた不具合を載せていきます。
長時間不具合の報告が無いと判断した場合に、この Issue は Close します。

Private Repository 化について

https://www.aokashi.net/informations/2019/06_17.html 参照のこと。

トップページやポートフォリオを今のPRに修正

トップページでは「製品や特徴を調べることが好き」とあるが、そうではなく「問題点から1つ1つ積み重ねることができる」に変更したいです。

また、 WWA Maker の開発までの過程で学習した React や TypeScript、 git などの習得以外にも、コンピューターの基礎をどう活用したかも含めたほうが良いと思います。もしできなければ大幅な改良が必要になるのではないかと・・・。

WWAページのWWA Wingチェックが正しく動作しない

WWA Wing 対応にチェックを入れる
どこかのページへ移動
ブラウザの戻るでWWA 一覧へ戻る
WWA Wing 対応にチェックが入っているのに、 WWA Wing 非対応の作品が表示されている

解決策

チェックボックスの checked の値を React の state と連動するようにしておく

gatsby-remark-autolink-headers のアンカーリンクの削除

gatsby-remark-autolink-headers は導入すると、アンカーリンクが見出しの左隣に付いてくるが、これを削除したい。

削除手順は https://www.gatsbyjs.org/packages/gatsby-remark-autolink-headers/ に含まれている。

Gatsby をバージョンアップ

久しぶりに Gatsby のサイト見たところ、 v4 になっているらしく、なんだかんだ浦島太郎みたいな状態なので、ちょっとバージョンアップを v2.x から v4.x に引き上げます。
v3 すら通すので、 v3 へのバージョンアップガイドなども読み通す必要になりそうです。

Bulma 0.9.0 のリリースに伴うアップデートの検討

Bulma 0.9.0 がリリースされました。
いくつか変更点があるようですが、現在使用している Aokashi Home に差し替えて影響が無いか確認しておきたいです。

特に気になる箇所

helpers CSS の非推奨化
余白を指定する CSS の追加
- これまで余白を指定するのであれば、セクション(だったかな？) クラスに頼る必要があったが、その余白が大きすぎたので、細かく指定出来るのは有り難い

ポートフォリオの自作PCにぱそ探の構成を掲載する

https://pasotan.com/builds/u/X6qKB をポートフォリオ「自作PC」に掲載し、構成の変更があった場合でも手元で簡単に変更できるようにします。

ポートフォリオページの制作

主な仕様

** (スマートフォンの場合は左) に矢印が表示される
その矢印の左右に項目が表示される (奇数なら左、偶数なら右)
各項目をクリックするとポートフォリオの詳細ページが表示される

nginx のリバースプロキシを docker 下で試す

#26 と #27 の実施にあたって、VPS内のnginxで設定を行う必要があります。

VPSではdockerを利用するつもりですので、試しに手元の環境で nginx を動かして設定しましょう。

ネットマニア消滅に伴いリンクを差し替え

今ネットマニアにアクセスしたところ、空白のページになっていました。

サイトが消滅してしまったようなので、リンクを差し替えます。

リンク先は Web アーカイブの中で正常に見れるページの最新版を取得しますが、無い場合はリンクは削除します。

パブリックリポジトリ化の検討

現在 Aokashi Home はプライベートリポジトリだが、下記の事情により、少しの工夫をすればパブリックリポジトリに戻しても問題ないはずである。

NGINX の設定によってWWA作品をリポジトリに含む必要が無くなった
パブリックリポジトリだとサイトの問題点を自由に共有できる

懸念点としてはポートフォリオに含まれる画像だが、下記の点で対策が取れるはずだ。

画像を外部サービスに移行し、表示する際はそのサービスの埋め込みを使用する (まつゆきのポートフォリオと同じ)
resources ディレクトリを新設し、サーバー側の設定でドキュメントルートを変更する
- 外部サービスの契約を必要としないものの、管理が大変になる

ヌル岬の戦い公開後の不具合一覧

WWAページの場所について

現在WWAプレイページとマップデータは www.aokashi.net/wwa 下に配置されているが、 GatsbyJSになると、リポジトリ下に配置する必要がある。

リポジトリ下に配置した場合は、CGIランキングが動作しなくなるため、出来れば別のサーバーに移行したい。

GatsbyJS だと指定したパスにアクセスすると外部のサーバーからリソースを持ってきて表示・・・というようにリソースを外部から引っ張ることはおそらく不可能なので、現状だと、 contents.aokashi.net とかに移行することになる。

現状の問題点

contents.aokashi.net 下に配置しても問題ないのか？サブドメイン名は変更になってしまうのか？
- 永久に変更しないなら良いけど、後にコンテンツ整理 (仮に contents.aokashi.net がコンテンツページのNodeプログラムに割り当てられた場合とか) でサブドメイン名が変更されてしまうと、移行しなくてはならない
- そうなった場合のために、 apache.aokashi.net とサーバープログラム毎に名前を割り当てる方法もあるが、この場合だと nginx に移行した際に移行が必要になるので無理
- となると、現状 contents.aokashi.net が一番無難ではないか？
- 一番怖いのは Gatsby や Netlify のアップデートで、何らかの形で WWA のページやマップデータが www.aokashi.net 下に配置できるようになった場合
そもそもCGIランキングは存続する必要があるのか？
- CGIランキングは相当レガシーなシステムになってしまったので、廃止でも良いのではないか？
もし contents.aokashi.net 下に移行した場合、リダイレクトは可能なのか
- Gatsby だとできるみたい

a11y 問題

#57 (comment) の a11y に関するエラーをどうにかする。

原因は下記の通りである。

Box コンポーネントの画像部分にクリックイベントが付与されているが、その画像要素が対話コンテンツではない
- 対話コンテンツとは、どの入力装置でもアクセス可能なコンテンツのことを指しており、ボタンやリンクについてはマウスの他にも、キーボードの Tab キーを通じてアクセスできるようになっている
- 今回の Box コンポーネントの画像はクリックイベントしか付与されておらず、 Tab キーを通じてアクセスすることができないので、アクセシビリティの問題が発生している

依頼生活 3章のバグ一覧

グレイズヒル南部で入れない家の入り口が扉で閉じられていない
シード島の洞窟近くの建物の入り口が扉で閉じられていない
シードモーテルで宿泊中のとき、営業のメッセージにある「部屋を出るとロックされる」は間違い、「施設を出るとロックされる」が正しい
東ニフア荘で鍵の返却タイミングが後になる
東ニフア荘で起床した際にメッセージが出てこない
東ニフア荘では食堂が用意されているのに、朝食がない (もしなければ無いことを言及したほうが良さそう)
東ニフアの森のボスねこのエリアの前にいるダークキャットが全然入口前に塞がされていない
東ニフアの森で見つかるお金は1,000場だが、実際に利用する場合としては寂しい？

WWA の Thanks の天使の血・悪魔の涙に image が含まれていない

ポートフォリオの記事「WWA Maker」で誤字がある

2015年になるとWWA Wingの登場に伴い、Webアプリケーションの開発が検討されることになりますが、当時は同じ作成ツールの開発を進めていた人もいたため、開発を控えていまいた。しかしながら、このまま放置した結果、 WWA Maker 以外で開発したいアプリケーションが存在しない結果となり、学部時代でまともにアウトプットできていませんでした。

の「開発を控えていまいた。」は「開発を控えていました。」ではないか。

借金返済！株ゲームの既知の不具合 (2021/01/22 現在)

鉱員証を取得するとメニューが潰れる
取引料金を払うと行員の宿で泊まれなくなる→空腹度が足りないと行員の宿で泊まれないようです
爆薬からの落盤で体力は減るが病院まで送られない

新 Aokashi Home の内容の決定

新しい Aokashi Home の内容を決める Issue です。

CSSの読み込み箇所を順次 gatsby-browser.js に移行

GatsbyJS への移行記事によれば、 gatsby-browser.js にCSSを読み込む箇所を加えれば、各ページコンポーネントでCSSを読むこむ必要が無いそうだ。

開発が一段落落ち着いたら行ってみよう。

要塞脱出の既知の不具合 (2021/1/22 現在)

Aランククリア途中、朝になっても母の発言が変わらない場合がある

スマートフォンメニューの検討

スマートフォンで閲覧した場合のメニューをどのように表示するか決めておきたい。

Box コンポーネントの扱いについて

Box コンポーネントは下記の用途で使用されるつもりである。

WWAの作品一覧
- スクリーンショット
- 複数ゲームが存在する場合は、各ゲームへのリンク
- 説明文
ソフトウェアの作品一覧
- 使用したアセットの提供元サイト
- 説明文
- GitHub リポジトリへのリンク
素材の一覧
- ダウンロードボタン
- 公開日時 (もしかしたら含めないかもしれない)

現状の Box コンポーネントでは、タイトルとリンクが標準で含まれている。
しかし、現状だとリンクのところでダウンロードリンクや GitHub マークなど、追加のスタイリングが必要になってしまうため、管理がしにくくなると予想される。

管理しやすい方法が無いか模索したい。

GatsbyJS が日付の項目を文字列として認識されてしまう

日付形式 (YYYY-MM-DD) で記述されているのに、 GraphQL での取得で date(formatString: "YYYY年 MM月 DD日", locale: "ja-JP") で呼び出すと下記のエラーが発生していて出力してもらえません。

Unknown argument "formatString" on field "date" of type "MarkdownRemarkFrontmatter"

行ったこと

markdown ファイル側の日付を文字列(ダブルクウォート付き)に変更 → 確認済み
YYYY-MM-DD 形式になっている → 確認済み
日付の範囲を超えていない (2019-08-32になっていない) → 確認済み
.cache ディレクトリの削除 → 変化なし

上記でできる限り行ったのですが、文字列形式で出力する以上、打つ手はありません。

暫定的な解決策としては、 formatString では使用せず、諦めて文字列として出力する方法になりますが、表示される形式が異なりますので moment や正規表現を利用してフォーマットを変える必要があります。

なお、日付のソートをしているポートフォリオトップについては、今の所文字列に変えたところで影響はありません。

パブリックリポジトリに配置できないファイルを外部サーバーに配置する

再配布の制限を理由にパブリックリポジトリに配置できないファイルを、別のサーバーに配置します。

こういった外部の著作物があるファイルについては Contentful といったヘッドレスト CMS で取ってきたほうが安全ですが、実現までに時間がかかることが予想されるので、下記の段階で配置場所を移行しておくようにします。

配置できないファイルを contents.aokashi.net 内に移行して、ファイル構成を Wiki に書き残す
外部ファイルを置くためのサーバーを別途用意して、その中にアップロードする
- クラウドヘッドレスCMSのファイル限定版？そういったサービスあるのかな？

base.sass に変更を加えると、反映が遅い

当サイトでは、モジュールCSSを扱う際に Bulma で定義された変数が利用できるようにするため、ベース用のCSSに Bulma の読み込みを含ませている。

ただし、CSSフレームワークを読むこむだけでも時間がかかる上、ベース用のCSSが変わってしまうと、各ページ、各コンポーネントでCSSビルドのが発生してしまう。
そのため、変更の反映に時間がかかってしまう。

このままでは、無駄のないCSSの管理が実現できない。
もっといい方法が無いか検討したい。

メニューのコンポーネントの扱いについて

Aokashi Home のメニューは

トップページメニュー
ヘッダーメニュー
サイドバーメニュー
フッターメニュー

の4つあり、それぞれ中身が異なる。
そのため、4つとも同じ Menu コンポーネントで管理するような方法はできない。

複数のメニューを、 girdsome + VueJS としてふさわしい方法でどう管理するか模索したい。

GatsbyJS の検討

これまで Gridsome を利用して Web サイトを構築していたが、 WWAMaker では React で制作することを考えると、 React ベースの GatsbyJS のほうが今後の勉強になるのではないか？
(また、別々のフレームワークを利用した場合、強みが出てこないので今後の就活に不利になる、ということになるかもしれない)

GatsbyJS を利用するにあたって、下記の内容を確認しておきたい。

ディレクトリ構成はどうか？
各ページをどのようにして構築しているのか？
OGP や構造化データには対応しているのか？ (おそらく対応しているはずだけど)
使用できる CSS フレームワークは？

公開時の準備調整

トピック機能の検討

#79 では、 Aokashi Home 資料集を Aokashi Home に統合する計画がありましたが、 Aokashi Roomのブログ記事でお知らせしたとおり、 MediaWiki による新規 Wiki 新設の方向で進めています。

そのうち、 Aokashi Home 資料集で公開していた WWA 関連の記事については、本リポジトリの Issue にして残す他、トピック機能の新設も考えています。

トピック機能とは、ジャンル問わない、今後頻繁に修正する可能性のある雑多な内容を集めるところで、記事については例えば「Java アプレットな WWA を起動する方法」とか「A列車で行こう9 で現実にありそうな街づくり」というようなものになると考えています。

新素材ページの検討

扱いやすくするように素材ページの考え方を見直したい。

要件

大規模な素材共有サイトほどの機能は持たない
- 検索機能はなくても良い
- タグもなくても良い
ただし、ソートはできるようにしておきたい
「WWA」「アイコン」「ツクールMV」の3種類に分類し、今後も増やせるようにしておきたい
可能であれば、最新の素材の一覧が表示できるようにしておきたい

VPSにCIを導入する

#26 について、もう1つの解決策として、 Netlify によるホスティングを諦めて、従来通りAokashi HomeをVPS内にホスティングする方法があります。

前回もwerckerでホスティングをしていましたが、下記の問題点がありました。

VPSの秘密鍵をサーバー上に保存してあるため、(無いと思うけど)werckerにトラブルが発生した場合に秘密鍵が漏洩されると危険、あと秘密鍵のメンテナンスが面倒
デプロイ方式は rsync だが、削除した分が反映されない
- これはリポジトリ外のWWAのマップデータが消去されないようにするための措置

ですので、もし今回の方法を取る場合は、下記で構築する形にしようと思います

GatsbyとWWAのマップデータ/ページを別の場所に配置して、指定したパス内であればWWAのドキュメントルートに、そうでなければGatsbyのドキュメントルートに遷移するように設定 (両者とも nginx で稼働出来ればリバースプロキシは不要になるかも？)
CIについてはVPS内で配置し、GitHubと連携を取る

「ネタ」WWA素材の追加

5000兆円欲しい!! やンョ゛ハー゛とかの、ネットでブームになったものを反映したWWA素材の追加を予定している。

なお、ネタの権利者とのトラブルを防ぐため、素材ページには

タグ「ネタ」を持つWWA素材は、インターネットで話題になったものを素材用に提供しています。
当該ネタに関して問題があったり、権利者からの申し立てがあったりした場合は、公開及び使用権の提供を中止にすることがあります。

を含むことにしよう。

リンクのフォーマットを統一

現在、ナビゲーションメニューといった、リンクを配置するコンポーネントのプロパティがバラバラになっている。

ポートフォリオ ... href と title
ナビゲーションアイテム ... link と name
BoxNav(WWA一覧の下にあるあれ) ... link と name
BackLink ,,, to
LinkButton ... href

それぞれに明確な意味を持っていればそれで良いのだが、そうでない場合は統一したほうが望ましい。