onestop-techbook / gipotal

https://gipotal.vercel.app
MIT License
4 stars 1 forks source link

技術同人誌ポータルとは

世の中の同人誌が集うところ。 ジャンル問わず、著者問わず、 イベントやジャンル、関連ジャンルへのリンクが主体のポータルサイト。

技術同人誌ポータル is 何

世の中の技術同人誌がたくさん登録されているポータルサイト、 イベントごとでは検索性、網羅性が低いし、どのイベントに参加してるかわからないなど、 あるいは技術ごとの検索性も今一つです。 さらに、コロナ蔓延中の現在、オフライン(リアル)同人誌即売会が軒並み中止となっている昨今、あたらしい本に出合う機会は減少しています。オフライン(リアルの)イベントでこれまでできたような、前を通りかかった時にタイトル/表紙に惹かれて(チェックしてなかったけど)手にとってみるという巡り合わせはオンラインでは望み薄です

さらに、各サークルにとって、せっかく作った本をいかに告知していくかというのはかなり大きな課題です。個人でWebページを作っても、どれだけヒットするか。また管理コストもかなりですよね。Twitterでの告知は他の方法に比べると有効ですが、とはいえタイムラインの流れは早いのですぐ埋もれてしまいます。

なので、サークルのポータル/LPとしても使え、ジャンルやイベントごとにあたらしい本を探すこともできるサイトを作ってみようということになりました。

機能

1:サークルページ

サークルの紹介文と、そのサークルの出している本の一覧のページです。 また、サークル主のTwitterのタイムラインを表示するカラムがあったり、参加イベントが一覧にされているのも良いですね。Boothやとらのあなで委託していることもわかります。

2:本のページ

その本のカバー、中身のスクショ、目次等、中身の説明やターゲットなど、本の紹介ページです。また、発行時期も書いてあると良いですね。さらに、Boothやとらのあなといった書店委託へのリンクもあるので、そちらに飛んですぐに購入することができます。 そしてここには、その本に関連するタグが数個つけられるようになっています。

3:タグ・トピックスのページ

タグに基づいて、関連する本を一覧で見ることができます。 たとえば、”フロントエンド”というタグをクリックすると、そのタグを持つ本を一覧にすることができます。これにより、自分の興味あるジャンルについての本を一気にチェックすることができるでしょう。知らなかった本との出会い、買い逃した本との再会のチャンスにもなります。 そして、そこには、おすすめ/関連タグがあります。このタグにより、隣接・関連するタグを持つ本の一覧にジャンプできるでしょう。より上位な概念を探しに行ったり、逆に絞り込むための参考にすることができます。

4:イベントページ

イベントごとに、参加サークルを見ることができます。

メリット:

まずなんといっても、このサイトから購入ページに2〜3ホップで渡れるところでしょう。登録サークル数にもよりますが、イベント横断で世の中の(ほとんどの)サークルがそこにページを持っている、という状況ができれば最高です。

また、サークル主にとって、特定の技術や内容に関するタグで一定のクロール効果が得られるでしょう。これは初参加のサークルにとっても有益です。フォローフォロワーが少ないことが多いのと、特に大型イベントではチェックしきれませんから、「知っていれば買ったのに!」という不幸を回避しやすくできるかもしれません。

また、技術同人誌サークルとして、このポータルサイトがコミュ二ティになることも楽しみな未来です。

実装

セットアップ

事前条件

  1. Node.js LTS 最新版をインストールしてください。(Macなら homebrew + anyenv + nodenv が一番楽です)
  2. 当リポジトリの最新状態にしてください。 git pull origin master など

確認方法

$ node -v
v12.16.0

Node.js の v12.16.0 がインストールできていることが確認できる。

インストール

手順は不完全かもしれません。現時点では hasura ディレクトリ以下のデータがバグってるっぽいので、動作確認はとれていません。

# パッケージのインストール
$ npm i
# 設定ファイルを準備
$ cp .env.example .env
# ローカルでHasuraを立ち上げる
$ docker-compose up
# データベースのマイグレーションを適用する
$ npm run hasura migrate apply

# メタデータ(Hasura 固有の設定)を適用する
$ npm run hasura metadata apply
# 必要なコード生成をする
$ npm run codegen
# 開発モードで起動する ※3000 番ポートを空けていること
$ npm run dev
# Hasura Consoleを起動する ※9695 番ポートを空けていること
$ npm run hasura console

FAQ

Q. なんかインストールできないんだけど

エラー情報が分からないと判断ができないので、ターミナルに表示されたメッセージを全てコピペしていただけると何か分かるかもしれません。

Q. Module not found: Can't resolve '@/generated/graphql' エラーが出る

codegen が実行されていないか、失敗していて、コード生成がうまくいってないです。