ckoshienの投稿 - Crieit

キャップ野球専用スコアブック入力アプリをリリースした

2020-12-30T20:51:19+09:00

蓋野球スコア入力アプリ「CAP-SCOREBOOK」

https://cap-scoresheet.netlify.app

機能概要

非ログイン時(閲覧モード)
- 試合結果閲覧
- 試合内容閲覧
- 個人成績閲覧
- チーム成績閲覧
- リーグ成績閲覧
- ログイン時(入力モード)
- チーム新規作成
- 選手新規作成
- 試合新規作成
- スターティングメンバー設定
- 結果入力
  - 1球ごと入力
  - 1打席ごと入力
- 自責点・勝敗S入力

開発環境

NextJS(static export)
Netlify
検証機: Pixel4a(Android)/12mini(iOS)/PC
サーバ側: NodeJS
DB: MySQL
Docker-compose
ReactNative For Web
ユーザ認証: firebase

10/21 蓋世・エスト監督からスコアを共有できるアプリはないか聞かれる
10/25 1打席ごとの入力ができるWEBアプリの仮実装が終わる
10/30 スコアの活用方法思い付かずに実装中断
11/26
https://twitter.com/Yokoppe_cap/status/1331653356872298496
よこっぺさんの一言で中断してたスコアアプリの開発のやる気が復活する。
11/28 リーグ戦の帰りにkamiさんが「投球分析したいなぁ」と言う話をする。
11/29〜
ある程度実装が終わっていたアプリに1球ごとのコース分析機能を拡張したアプリに着手。
当初はReactNativeを使ったandroid/iOSアプリを想定。
12/1 ネイティブアプリから得意なWEBアプリへの舵の切り直しを宣言。
12/4 ReactNative For Webの採用を決定。
12/7 Hirooookiさんから投手視点への切り替えが欲しいとの要望を受けるhttps://twitter.com/gstiltonhs/status/1335606102675783680
12/11 配球分析機能の実装が完了
12/14 いらすとやからのデザイン変更
12/21 テストコードの実装に着手
12/30 α版リリース

今回新たに使った技術

ReactNative For Web

CSSが書きにくいと思って敬遠していたのですが、いざ使ってみるとモバイルに最適化されていて、きちんとスタイルを書けば複雑なUIも実現できたので、食わず嫌いはよくないなと。

開発する上で役に立ったこと

やっぱりみんなのSCOREの開発経験ですかね。
DB設計的にはCAP-SCOREBOOKの方が1球ずつ記録する分複雑なのですが、
CAP-SCOREBOOKにほとんどDB設計を応用できました。

今後の展開(β版へ向けて)

共同編集機能
スコアシート出力機能(需要があれば)

草野球のライブ配信を補助するツールを作った話

2020-09-20T00:57:20+09:00

草野球放送局

https://baseball-broadcast.vercel.app/

仕組み

「ツイキャスゲームズ」などのスクリーン配信に対応したサービスで、
スマホの画面を直接ストリーミング配信できることを利用して、
スマホ側でカメラを起動して画面を合成したらいいじゃないかという発想に。
react-webcamというライブラリ(canvasで描画している)とNextJSを組み合わせました。

使い方

使った技術

NextJS

最低でもQA画面と設定画面、合成画面が必要になると思っていたので、
NextJSを選択しました。

Vercel

デプロイ用のプラットフォーム

react-webcam

苦労したこと

カメラのデバッグ

セキュリティ的にカメラの起動条件がlocalhostか、https通信下だったので、最初はvercelに上げながら動作確認していましたが、途中からcodesandboxを使っていました。

iPhone/Chromeではカメラが起動しないとか。

スマホの向きを変えたときの描画

縦横の向きを変えたときにリサイズする処理を色々試したのですが、

addEventListener('resize')
再描画回避のためにuseRefを使う
縦横のサイズを入れ替える

どれも結局上手くいかず、stackoverflowなどを見ながら最終的にたどり着いたのはCSSでの表示制御でした。えぇぇぇぇぇ.....。

UI詰め過ぎ問題

スコアボードのUIを詰め過ぎてタップしづらいという問題が発生。
transform: scale(1.3)でコンポーネントごと1.3倍にして逃げました。
秘伝のたれを思いついた瞬間

import Webcam from "react-webcam";
import NHKBoard from "./NHKBoard";

const Home = () => {
  const videoConstraints = {
    facingMode: { exact: "environment" },
    aspectRatio: 1.78
  };
  return (
    {{
        width:'95vw',
        height:'95vh',
        position:'relative'
      }}
    >
      {{
          position:'absolute',
          top:0,
          left:0,
          width:'95vw',
          height:'95vh',
        }}
        videoConstraints={videoConstraints}
      />
      {{
          transform:'scale(1.3)',
          position:'absolute',
          bottom:0,
          right:0
        }}
      >
      
      
    
      )
}
export default Home;

IKEN

スコアボードの種類を選べるようにするとか、選手紹介を表示するとか機能拡張は考えていますが、一旦最小構成でリリースしますのでフィードバックいただけるとうれしいです！

https://ikens.net/ckoshien_tech/baseball-broadcast

A-FrameでVR選手ロッカーを作ってみた話

2020-09-01T23:08:37+09:00

①NextJSでaframe-reactを動かす

aframe-react

ReactJSでAFrameを動かすときはこれ。
aframe-react

NextJSは一部SSR(サーバサイドレンダリング)が走るので、クライアントで動作する状態になってからロードする必要がある。
参考: aframe-next-static

windowというグローバル変数が使えるようになればクライアント側で動作する状態なので、レンダリング完了フラグで管理する。

if (typeof window !== "undefined") {
      require("aframe");
      setRendered(true);
    }

②aframe-reactで書いてみる

aframeは配置するものが多いと意外とソースが長くなるので、
1個のLockerを構成する単位でコンポーネント化しました。
選手の情報をAPIから取得して、奇数と偶数の場合で振り分けています。

if (!rendered || !teamMembers) {
    return <>;
  }
return (
    
      {teamMembers.map((member,idx)=>(
        <>
        {idx%2 === 0
          ?
          :
        }
        
      ))}
      
      
    
  );

a-skyは背景、cameraはカメラの初期位置を定義しています。

これがRightLockerのソースです。
プログラム的に難しいことはないのですが、
座標や光源の調整などが結構面倒でした。
(..planeって光透過すんの？)

import { Entity } from "aframe-react";
import { Player } from "../../model/typedef";

type diff={
    x:number,
    y:number,
    z:number,
    rot_x:number,
    rot_y:number,
    rot_z:number,
    member:Player
}

const RightLocker:React.FC = ({x,y,z,rot_x,rot_y,rot_z,member}) => {
  return (
    <>
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: "/images/wood.jpg",alphaTest:0.1 }}
      position={{ x: x+0.7, y: y, z: z-4.3}}
      rotation={{ x: rot_x, y: -135+rot_y, z: rot_z }}
    />
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: "/images/wood.jpg", transparent:false}}
      position={{ x: x+0.7, y: y, z: z-5 }}
      rotation={{ x: rot_x, y: rot_y-45, z: rot_z }}
    />
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: "/images/wood.jpg"}}
      position={{ x: x, y: y, z: z-4.3 }}
      rotation={{ x: rot_x, y: rot_y-45, z: rot_z }}
    />
    {{ primitive: "box", width:0.5, height:0.3}}
      material={{ color:'gray' }}
      position={{ x: x+0.5, y: y-1, z: z-4.5 }}
      rotation={{ x: rot_x, y: rot_y-45, z: rot_z }}
    />
    {{ primitive: "plane", width:1, height:2}}
      material={{ src: member.ogp_image}}
      position={{ x: x+0.7, y: y, z: z-4.3}}
      rotation={{ x: rot_x, y: -135+rot_y, z: rot_z }}
    />
    {{type:"spot"}}
        material={{color:'yellow'}}
        position={{ x: x+0.3, y: y+1.3, z: z-4.5 }}
        rotation={{ x: rot_x-90, y: rot_y-10, z: rot_z-10 }}
    />
    
    );
};
export default RightLocker;

DEMO

まだ本サイトにはデプロイしていませんが、team/[チームID]/vr_lockerで各チームのVRロッカーを見ることができます。
- キャップ野球情報局・VRロッカー

【アップデート】Crieitバッジを作りました

2020-08-18T23:18:26+09:00

Crieitバッジ

GitHubなどに貼るCrieitバッジを作りました。

これが私(ckoshien)のバッジです。

ちなみにCrieit開発者だらさんはといえば....

....やっぱり強い強すぎる。

使い方

このコードの*****の部分を自分のユーザID(例:ckoshienとかdala00)に書き換えて貼るだけです。

[![Crieit経験値](https://ogp-vercel.vercel.app/crieit/*****)](http://crieit.net/users/*****)

どうやって作ったか

着想

mikkameさんのQiita のスコアをGithub風バッジに変換するサービスを見てCrieit版作ろう！と思いました。

技術的なこと

shield.io版からアップデートしました。
現在はvercel + NextJS + puppeteerでスクレイピングした情報で一旦画面を作ってスクリーンショットを撮っています。

結果的にvercelを2台分(スクレイピング/スクリーンショット)使っています。

バックエンド

vercel/NodeJS(lambda)
puppeteer

puppeteerでcrieitのユーザページをスクレイピングして経験値を取得しています。

async function getCrieitBadge(user_id) {
  const browser = await puppeteer.launch({
    args: chrome.args,
    executablePath: await chrome.executablePath,
    headless: chrome.headless,
  });
  const page = await browser.newPage();
  await page.goto("https://crieit.net/users/"+user_id);
  await page.setCacheEnabled(true);

  const itemSelector = "#app > #container > div.row > div > p.mb-2 > span:nth-child(1)";
  const itemSelector2 = "#app > #container > div.row > div > p.mb-2 > span:nth-child(2)";
  var item = await page.$(itemSelector);
  var item2 = await page.$(itemSelector2);
  var data = await (await item.getProperty('textContent')).jsonValue();
  var data2 = await (await item2.getProperty('textContent')).jsonValue();
  await page.close();
  await browser.close();
  return data;

}

現在は画像を1日キャッシュするようにして返しています。
ではよいCrieitライフを!!

NextJSでマークダウンエディタを扱う際の注意点

2020-06-07T23:44:07+09:00

SSR(サーバサイドレンダリング)の影響

draft.jsやtui-editorに共通して言えることですが、
元々ブラウザでの動作を想定して作られているので、
NextJSなどのSSR環境下ではwindow、documentなどの変数の中身がundefinedになり、動作しなくなります。

Next.JSではSSRを無効にできる

With no SSR

インポート方法を変えることでSSRを無効にできるオプションがあります。
dynamic import自体はES2020で導入される構文だとか。

const DraftEditorNoSSR = dynamic(
  () => import('../components/DraftEditor') as any,
  { ssr: false }
)

Draft.jsを断念した理由

draft.jsでは再描画した際にカーソルが行の先頭に戻るというバグがあります。
公式リポジトリでは行の最後に移動する対処も議論されていますが、文章の中で編集したくなったらどうするんだ....という声もちらほら。

How to stop DraftJS cursor jumping to beginning of text?

さっさと見切りをつけてToastUI editorに移りました。
そうです、crieitにも採用されているエディタですね。

Toast UI Editorで実装できた!

ただし、Toast UI Editorはrefを使わないと値が取れず、
マウントされていない状態でrefがnullになってしまうことにかなり苦しめられました。

changeイベントがeditorで発火するのでフラグを更新するようにして、外側でrefを使ってデータを取り出すという実装になりました。
それから、画像アップロードをdisabledにしました。

editorコンポーネントを使いまわしたかったので、
表示用の初期値initialValueと値を更新して外部に渡すsetFuncをpropsとして与えています。

const DraftEditor = ({ initialValue, setFunc }) => {
  const editorRef = createRef();
  const [changed, setChanged] = useState(false);

  useEffect(() => {
    if (editorRef.current && changed) {
      setFunc(editorRef.current.getInstance().getMarkdown());
      console.log("set");
      setChanged(false);
    }
  }, [editorRef.current, changed]);

  return (
    {{
        width: "100vw",
      }}
    >
      
        {{
            change: (e) => {
              setChanged(true);
            },
          }}
        />
      
    
  );
};

export default DraftEditor;

export type DraftEditorProp = {
  initialValue: string;
  setFunc: Dispatch;
};

アニメのレコメンドサービス、NextJS化しました。

2020-05-16T23:29:13+09:00

先週アニメのレコメンドサービスを作ったばかりなのですが、
業務でNext.jsとReact hooksが必要になり、
勉強がてらソースコードの少ないものをリメイクしてみました。

サービスのURL

Annictさじぇすと!

Next.js

Next.jsはReactJSを用いたフレームワークです。
Next.jsの環境構築【これからはじめるNext.js】

Next.jsのメリットとしては読み込むファイルが軽量になった分パフォーマンスが向上することでしょうか。

環境構築

今回環境構築の参考にしたのはこちら

(プロジェクトルート)
　├ components (コンポーネント類)
　├ context (React contextを格納するフォルダ)
　├ hooks　(React hooksを格納するフォルダ)
　├ lib
　│　└ gtag.js　(analytics)
　├ pages
　│　├ _app.tsx　(レイアウト)
　│　├ _document.tsx　(index.htmlに相当)
　│　├ index.tsx
　│　└ works
　│　　　└ [id].tsx　(idは可変なのでdynamic routes)
　├ public
　│　└ images
　└ styles　(CSS)

pages

ファイルシステムの構造がそのままWEBシステムのパスになります。
例外として、_app.tsxと_document.tsxがあります。

_app.tsx

レイアウトを担当。

const App = ({Component,pageProps}:AppProps) => {
    Router.events.on('routeChangeComplete', url => gtag.pageview(url));
    return(
        
            
                
            
        
    );
}

_document.tsx

いわゆるindex.htmlに相当。
あれ、これclass構文だったわ。（コピペ）

class MyDocument extends Document {
  render() {
    return(
      
        
        　
        
        
        
        
        
      
      )
  }
}

export default MyDocument;

index.tsx

export interface Work{
      image:{
        recommendedImageUrl:string
      },
      twitterUsername:string,
      annictId:number,
      watchersCount:number,
      title:string,
      seasonYear:string,
      seasonName:string,
      wikipediaUrl:string,
      syobocalTid:string
  }


const Index:NextPage = () => {
    const [pageNum,setPageNum] = useState(1);
    const [data,setData] = useState();
    const store = useContext(storeContext);

    useEffect(() => {
      const f = async()=>{
        let resData;
        if(store.query.length === 0){
          resData = await fetchSeasonWorks(store.seasonName);
        }else{
          resData = await fetchByTitle(store.query);
        }
        setData(resData);
        console.log(resData);
      }
      f();
    },[store.seasonName,store.query]);

    const myRef = useRef(null);

    ....

hooks

hooksを格納する....はずなのですが、ビューとロジック分離するの失敗してるので
またどこかで使うでしょう(笑)

context

今回はreduxの代わりにcontextで全体の状態を管理します。
【React + Typescript】useContext の値を子コンポーネントから更新

type StoreContext = {
  seasonName: string;
  query:string;
  setSeasonName: (seasonName: string) => void;
  setQuery: (query: string) => void;
};

const defaultContext: StoreContext = {
  seasonName: CURRENT_SEASON,
  query:'',
  setSeasonName: () => {},
  setQuery: () => {},
};

export const storeContext = createContext(defaultContext);

export const useSeasonName = (): StoreContext => {
  // state名はThemeContext typeのプロパティに合わせる。
  const [seasonName, setSeason] = useState(CURRENT_SEASON);
  const [query, setQ] = useState('');
  // 関数名はThemeContext typeのプロパティに合わせる。
  const setSeasonName = useCallback((current: string): void => {
    setSeason(current);
  }, []);
  const setQuery = useCallback((current: string): void => {
    setQ(current);
  }, []);
  return {
    seasonName,
    query,
    setSeasonName,
    setQuery
  };
};

個々のコンポーネントでも状態を持っています。

gtag

Next.jsでGoogle Analyticsを適用する

lintに苦戦...

がっつりtypescriptを書いていたわけではなかったので、
nextjsはなかなかビルドを通してくれませんでした。
ParsedUrlQuery typings should allow undefined values

function isString(value: unknown): value is string {
      return typeof value === "string"
    }
    const id = isString(router.query.id) ? router.query.id : ""
    useEffect(()=>{
      const f = async () => {
        if(router !== undefined && router.query !== undefined){
          const resData = await fetchByWorkId(id);
          setData(resData);
        }
      }
      f();
    },[router.query]);

netlifyにデプロイ

netlify.tomlに必要なルーティングを記述します。

[build]
  base = "/"

  # next exportの出力先
  publish = "out/"

  # next buildからのnext exportでファイル生成
  command = "yarn run build && yarn run export"

[context.production]
  command = "NODE_ENV=production yarn run build && yarn run export"

[[redirects]]
  from = "/"
  to = "/index.html"
  status = 200
[[redirects]]
  from = "/works/*"
  to = "/works/[id].html"
  status = 200

アニメのレコメンドサービスを作りました。

2020-05-08T19:25:38+09:00

サービスURL

https://annict-suggest.netlify.app/

アニメの類似性をどう計算するか

コサイン類似度

人工知能を使わずにアニメのレコメンドサービスを作ろうと思ったのがきっかけです。
ユークリッド距離は触ったことがあるので、他の指標としてコサイン類似度が面白そうだと思いました。
ユークリッド距離は2点間の距離、コサイン類似度は2点のベクトル同士の角度です。

使った指標

約3300の作品に対して「見た」「見てない」のベクトルを作ってコサイン類似度を算出しようとしました。
「あにこれ」のように成分分析されているタグの類似度を計算するのもありだと思いました。

挫折

導入は比較的楽なように思えたのですが、計算量が尋常ではありませんでした。事前にフィルタリングを何もかけていなかったため、3300レコードx3300レコードの計算をしようとしていて、あまりに時間がかかるので諦めました。

アイテムの類似性について考察してみる

結局SQL

例:ID4342の作品を見たユーザを抽出して、
それらのユーザが他に見た作品のうち共通している人数が多い順に30件を取得する。

select 
    sum(st2.watch_status) as count,
    st2.work_id,
    w.title
from status st2
-- ID:4342の作品を見たユーザを取得
inner join (
    select 
        st.user_id 
    from status st
    where st.work_id = 4342
 )st3
on st2.user_id = st3.user_id
inner join works w
on w.annict_id = st2.work_id
-- 作品自身を除く
where st2.work_id != 4342
group by st2.work_id
order by count desc
limit 30

今回使った技術

GraphQL(Annict API)
ReactJS
NodeJS(TypeScript)
twitterAPI
netlify

データの棲み分け

最新のデータが欲しい場合はAnnictAPI(GraphQL)、分析データが欲しい場合はDBから読み込み、というようにデータの棲み分けを行っています。

GraphQLでエイリアスを使う

Annict API
ユーザが見たアニメと見ているアニメ両方が欲しい場合、
エイリアスを使うと複数条件が記述できる。

query {
      user(username:"${username}"){
       annictId,
       works(state:WATCHED){
         nodes{
           annictId
           title
         }
       }
      ing:works(state:WATCHING){
         nodes{
           annictId
           title
         }
       }
      }
    }

CSP(コンテンツセキュリティポリシー)

アニメのOGPがない場合は公式twitterアカウントの画像を使用しているが、CSPなどで同じサイトでないコンテンツは表示できなくなったので、
URLに「twitter」が含まれる場合はサーバにプロキシさせて画像を読み込むようにした。

ご意見

こちらから使ってみた感想・ご意見をお寄せください。

slack流量計ver3をリリースしました。

2020-04-27T21:53:23+09:00

slack流量計とは

サービス運営者コミュニティ「運営者ギルド」のslackの統計情報を可視化するアプリケーションです。

ver2リリース記事

ver3で何が変わったの？

VPSに移設

これまでslackに統計情報を集計するbotアプリケーションとして運用していましたが、サーバをVPSに移設しました。

WEBアプリケーション化

貴重なslackのリソースを消費せずにWEBで閲覧できるようになりました。(要slackサインイン)

puppeteerでのスクリーンショットは廃止

使っている技術

ReactJS
NodeJS/Express/TypeScript
passport
node-cron
chart.js
slack/client

技術的な話

react-bootstrap-table2をbootstrap CSSを適用せずに作る

分析機能を作ることが多いので、表を多用するのですが、react-bootstrap-table2というコンポーネントを結構使っています。

これまではbootstrap CSSを適用した後にこれでもかというぐらいCSSを上書きしていたのですが、今回は自力でキャレットを実装できました。
ページネーションもlist-style-type: none;に気づいてサクサク実装。
CSSいじるの楽しい！

th{
    font-size: 12px;
    .dropdown>.caret{
        &::after{
          font-family: "Font Awesome 5 Free";
          content: "\f0d7";  
        }
    }
    .dropup>.caret{
      &::after{
        font-family: "Font Awesome 5 Free";
        content: "\f0d8";  
      }
    }
    .caret{
      &::after{
        font-family: "Font Awesome 5 Free";
        content: "\f0d7";  
      }
    }
  }

  ul.pagination{
  display: flex;
  list-style-type: none;
  text-align: center;
  li.page-item{
    >a.page-link{
      text-decoration: none;
      background-color: #555555;
      padding: 3px;
      margin-right: 3px;
      color: white;
    }
    &.active > a.page-link{
      text-decoration: none;
      background-color: #bfbfbf;
      padding: 3px;
      margin-right: 3px;
      color: #555555;
    }
  }
}

passportを使ったslackサインインの実装

これは前回twitterサインインの実装をしたのが役に立ちました。

以下ソース抜粋

import passportConfig from './passportConfig';
import * as session from 'express-session';
const MySQLStore = require('express-mysql-session')(session);
passportConfig();
const passport = require('passport');

app.use(passport.initialize());
app.use(passport.session()); 
app.use(
  session({
    secret: '＊＊＊＊＊＊',
    resave: false,
    store: new MySQLStore(dbConfig),
    saveUninitialized: false,
    cookie:{
      httpOnly: false,
      secure: false,
      maxage: 1000 * 60
    }
  })
);

passport-slackはシリアライズ/デシリアライズを使っていないようなので、
実装個所は変わりますが、認証が成功した際にセッションに情報を格納するといけました。

(req: Request, res) => {
        req.session.user = req.account;
        res.redirect(BACKEND);
      }

自分だけのオリジナル紙面を作れる「スポーツ新聞メーカー」をリリースしました。

2020-04-23T00:32:48+09:00

サービスURL

https://sports-news-maker.netlify.app

何ができるか

新聞名
見出し
試合のスコア(3-10イニングまで)
画像
縦見出し
写真のキャプション

を編集してこのようなオリジナル紙面を作れます。

特徴

入力フォームの隠蔽

パワプロ風画面ジェネレータで作ったコンポーネントを流用しています。
クリックするまで入力フォームが出ない仕様です。

縦書きの見出し

縦書きをCSSでデザインしています。
writing-modeというプロパティだけでは、英文字が横になってしまうので、text-orientationというプロパティで英文字対応を行っています。

style={{
            writingMode:'vertical-rl',
            textOrientation:'upright',
            fontSize:`calc(6vw - ${store.getState().newsTitle.length/2}px )`,
            margin:5,
            width:'1em',
            whiteSpace:'nowrap',
            fontWeight:'bold'
          }}

レスポンシブ

フォントサイズや画像の大きさ、マージンなどを画面の幅によって変わるようCSSで実装しています。

可変イニング数

3～10回までイニング数を変えることができるようになっています。

セピアフィルター

画像に新聞らしくセピアフィルターをかけています。
へぇ、CSSってこんなこともできるんだ!という新しい発見がありますね。

{{
          maxWidth:'85vw',
          objectFit:'cover',
          filter:'sepia(30%)',
         }}
        src={this.state.image_src}/>

振り返り

今回はほぼ一日で作ったので、またフロントで完結しています。
時間があればOGPでシェア機能つけたら面白いかもしれません。
あとは試合スコアのチーム名を長くすると表示が乱れるのは課題です。
幅を固定してフォントサイズを文字長で反比例させればいいですかね。

React/NodeJS/Passportでtwitterログインを実装してみた

2020-04-14T20:37:13+09:00

こちらの記事をベースにしてReactJS/NodeJSのシステムにtwitterログインを組み込んでみた。
https://qiita.com/itagakishintaro/items/e5a0481b51e6a17b304c

主に異なるのは型指定が緩めななんちゃってtypescriptを使っているところか。

実装したもの

蓋々交換機能

https://cap-baseball.com/cap_exchange

技術的なこと

passport-config.ts

export default function passportConfig() {
  var TWITTER_CONSUMER_KEY = "*****";
  var TWITTER_CONSUMER_SECRET =   "*******";
  var passport = require("passport"),
    TwitterStrategy = require("passport-twitter").Strategy;

  // Sessionの設定
  passport.serializeUser(function (user, done) {
    done(null, user);
  });
  passport.deserializeUser(function (obj, done) {
    done(null, obj);
  });

  passport.use(
    new TwitterStrategy(
      {
        consumerKey: TWITTER_CONSUMER_KEY,
        consumerSecret: TWITTER_CONSUMER_SECRET,
        callbackURL: "https://********/auth/twitter/callback",
      },
      function (token, tokenSecret, profile, done) {
        passport.session.user = profile;

        // tokenとtoken_secretをセット
        profile.twitter_token = token;
        profile.twitter_token_secret = tokenSecret;
        process.nextTick(function () {
          return done(null, profile);
        });
      }
    )
  );
}

auth.ts

NodeJSでtwitter認証からのコールバックなどを担当するコントローラ。

import * as express from "express";
import * as session from 'express-session'; 
import { Request } from "./interface/express.Request";
const passport = require("passport");

export class Auth{
    public router: express.Router;
    constructor() {
        this.router = express.Router();
        this.router.get("/twitter", passport.authenticate('twitter'));
        this.router.get("/twitter/success", this.success);
        this.router.get("/twitter/callback",
                passport.authenticate('twitter', 
                    { successRedirect: 'https://******/api/v2/auth/twitter/success',
                      failureRedirect: 'https://******/' })
        )}


    private success(req:Request,res:express.Response):void{
       if(req.session.passport !== undefined){
        res.json(req.session.passport.user.username);
       }else{
           res.sendStatus(401);
       }
    }
}

express.Requestインターフェースの拡張

import * as Express from 'express';
export interface Request extends Express.Request {
 session:any;
}

app.ts

import { Auth } from './auth';
import * as session from 'express-session';
import passportConfig from './passport-config';
passportConfig();
const passport = require("passport");

app.use(passport.initialize()); 
app.use(passport.session()); 
app.use(
  session({
    secret: '********',
    resave: false,
    saveUninitialized: false,
    cookie:{
      httpOnly: true,
      secure: true,
      maxage: 1000 * 60 * 30
    }
  })
);

ReactでNodeJS/Passportから認証情報を受け取る

credentialsオプションが必要。

  const response = await fetch('/auth/twitter/success',
  {
    method:'GET',
    credentials: "include",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      "Access-Control-Allow-Credentials": true
    }
  });

認証が終わったタイミングで認証情報を受け取る

認証のためのウインドウを開き、
そのウインドウが閉じられたタイミングで親の画面をリロードする。
リロードの際に認証情報を受け取っている。

onClick={()=>{
                    const authWindow = window.open('/auth/twitter','newTab');
                    var timer = setInterval(function() { 
                        if(authWindow.closed) {
                            clearInterval(timer);
                            window.location.reload();
                        }
                    }, 1000);
                }}

(改良版)パワプロ風画面ジェネレータを作ってみた

2020-03-14T22:03:11+09:00

作ったサービス

https://pawapro-gen.netlify.com/

一旦書いたボード

web1week - パワプロ風画面ジェネレータを作ってみた

時間的に残りの機能間に合わないかと思っていたので、最低限動く機能で出したのですが、結論から言うと間に合いました。

インライン編集機能

当初はフォームとプレビュー機能を分けて作っていたのですが、
ほとんど全てインラインで編集できるように変更しました。

twitterシェア機能

OGPサーバの構築

以前slack流量計を作った際に、web表彰のスクリーンショットを撮っていたので、OGP作成にはそれほど抵抗はありませんでした。

あとはだらさんの作成されてるOGPサーバを参考にさせていただきました。

OGPサーバの構築に使った技術

NodeJS
Express
TypeScript
puppeteer
VPS
docker-compose

ロジック

ジェネレータからDBにデータを登録する
登録されたデータをもとにpuppeteerでスクリーンショットを撮る
DBに画像を格納する
OGPのサーバ問い合わせにはDBに保存してある画像を使用する
- OGPサーバに直接アクセスさせると負荷が集中してサーバが落ちるため

DB登録処理は既存のAPサーバに追加

OGPサーバは別コンテナ

twitter投稿

アプリ起動時componentDidMountのタイミングでUUIDを生成するようにしました。
react-shareというライブラリを使い、
beforeOnClickメソッドでDBへの登録を行っています。
ローディング画面も作りました(同時にバグ生成)。

{
              store.dispatch(switchLoading(true));
              let isSuccess = await postData();
              store.dispatch(switchLoading(false));
              if(!isSuccess){
                alert('データの保存に失敗しました。時間を空けるか、リロードして再度作成してください。')
                return new Error();
              }else{
                return Promise.resolve();
              }

            }}
          >
            保存してシェアする！

苦労したこと

画像のキャッシュ

ヘッダでキャッシュコントロールしたことがなかったので若干はまりました。

OGPのトリミング問題

twitterやFacebookでOGPの上下左右がトリミングされる問題があり、
Jimpなどで余白の拡張をしようと思ったのですが、時間がなかったこともあり、
React側でマージンをとってスクリーンショットを撮る際に余白ができるように修正しました。

できなかったこと

チーム・選手画像のアップロード

OGPの生成で手一杯だったので、base64化してDBに格納するところまで考えられませんでした。後々追加する予定。

共通の設定をリポジトリ化する

2020-01-13T14:41:18+09:00

経緯

現在、私が運営しているサービスのうち、

野球スコア掲載プラットフォーム
みんなのSCORE
キャップ野球総合サイト
キャップ野球情報局

この2サービス、共通のアプリケーションサーバを持っていてUIが異なるだけなのです。

画像や設定など、2つのサイト(異なるリポジトリ)間で同じものを共有したい場合、
別のリポジトリからnpm installするのがよいようです。

実際に作ってみる

今回は試合のIDとyoutubeやtwitterのツイートを紐づけするconfigファイルを
共通リポジトリに置きます。

今回作ったリポジトリのindex.js

export { twMovieConfig } from './config/twMovieConfig';
export { youtubeConfig } from './config/youtubeConfig';

共有したいファイルをexportする。

package.json

{
  "name": "common",
  "version": "0.0.202001131200",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

インポートする側のpackage.json

 {
    "dependencies": {
    ........
        "common": "https://github.com/ckoshien/common.git"
    }
  }

課題

変更があった場合は毎回npmインストール
package-lock.jsonを削除しないとインストールできない
package.jsonのバージョンを上げないと変更があったと認識されない

2019年はUI力を上げた年だった

2019-12-31T13:33:23+09:00

2019年、色々なものを作ったので少しずつ振り返ろうと思います。

経緯

元々、業務系のサーバサイドのプログラムを得意としていたのもあって、WEBサービスのUIは全く無関心というかCSSの中身もよくわからない状態でした。

作ったものを振り返る

画像多めですが、駆け足で振り返ります。
UIに目覚めたのは8月のぐらいでしょうか。
10月後半からは怒涛の毎週リリース(毎週末何か作っては発表)をしていました。

1/4 slack流量計

slack流量計の新バージョンをリリースしました
運営者ギルドで使っているslackの投稿数を可視化するツールです。
あぁ、これまだ2019年でしたか....。

2月-6月

2月

2月末。試行錯誤していますが、振り返ると首を傾げたくなるデザイン...。

4月

今の野球成績管理システムはこのあたりでfixした模様。

5-6月

このあたりから野球スコア管理システムのver3を製造開始。

8/18 タイピングスコア管理システム

タイピングスコア管理システムを作った

社内向けのタイピング練習システム。このあたりから若干UI凝り始めた。

8/21 キャップ全国大会非公式サイト

キャップ野球全国大会の非公式特設サイトを作った

このサイトが事実上の転機になりました。
自分でUIを作るのに試行錯誤してCSS書きまくって...桜吹雪まで飛ばしてます。このあたりからUIの大切さとかUIへのこだわりとかが生まれた気がします。

9/9 CSSでtrans-am

CSSアニメーションでトランザム！
CSSアニメーションの作り方が何となくわかった回。

10/6 野球スコア管理システムver3

10/21 ドラフトなう！

ドラフト風画像作成サービス「ドラフトなう！」を作りました

ドラフト会議に間に合わなかったやつですね！

10/27 アニメランキング作成サービス

アニメランキング作成サービスをリニューアルしました

11/17 音楽ランキングメーカー

音楽ランキングメーカーをリリースしました

Reactのドラッグアンドドロップが気に入ったのもあってUIを流用して別カテゴリでサービスを作ってみた。

12/1 優勝ラインシミュレータ

優勝ラインシミュレーター作りました
これはクソ(UI)アプリ。ちょっとしたいきさつがあってクソアプリアドベントカレンダーに載りました。

12/2 ボウリング幹事アプリ

ボウリング幹事アプリ
MQTTを使った表示画面同期を実装しました。

12/8 イベントカレンダー「ふたびより」

イベントカレンダー「ふたびより」

12/11 キャップ野球チームページ作成(wix)

東京世田谷キャッパーズ

12/14 キャップ野球情報局

CMS風サイトを作りました

react-big-calendarの攻略

2019-12-22T23:48:32+09:00

イベントカレンダー機能

Reactで作ったCMSにカレンダー機能を実装しました。

動作イメージ

カレンダー機能をリリースしました！ pic.twitter.com/uY5j3YkkCV
— キャップ野球情報局 (@cap_bb_info) December 22, 2019

使ったライブラリ

アジェンダテーブル

theaderとtbodyが連動していないため、OSSに初めてプルリクを出してみました。
とりあえず応急措置としてスタイルで固定で横幅を指定します。

th.rbc-header:nth-child(1){
  min-width: 77px;
}
th.rbc-header:nth-child(2){
  min-width: 121px;
}
th.rbc-header:nth-child(3){
  width: 100%;
}

表示の日本語化

import globalize from "globalize";
require("./globalize.ja.js");
const localizer = globalizeLocalizer(globalize);

globalize.culture.ja.js

localizerはreact-big-calendarにpropsとして渡します。

ツールバーの日本語化

こちらはglobalizeに対応していないハードコーディングなので、
CSSで元の文字を0pxにし、要素を増やす形で置き換えます。

/*文字置き換え*/
.rbc-btn-group > button{
  font-size: 0px;
}
.rbc-btn-group:nth-child(1) > button:nth-child(1)::before{
  font-size: 14px;
  content: '今日';
}
.rbc-btn-group:nth-child(1) > button:nth-child(2)::before{
  font-size: 14px;
  content: '←';
}
.rbc-btn-group:nth-child(1) > button:nth-child(3)::before{
  font-size: 14px;
  content: '→';
}
.rbc-btn-group:nth-child(3) > button:nth-child(1)::before{
  font-size: 14px;
  content: '月';
}
.rbc-btn-group:nth-child(3) > button:nth-child(2)::before{
  font-size: 14px;
  content: '週';
}
.rbc-btn-group:nth-child(3) > button:nth-child(3)::before{
  font-size: 14px;
  content: '日';
}
.rbc-btn-group:nth-child(3) > button:nth-child(4)::before{
  font-size: 14px;
  content: 'スケジュール';
}

props

components

event(月・週・日で表示されるコンポーネント)とagenda(スケジュールで表示されるイベント)の動作を記述できる。

Event = ({ event }) => {
    return (
      
        {event.title}
      );
  };

  EventAgenda = ({ event }) => {
    return (
      {
          this.setState({
            isOpen:true,
            selectEvent:event
          })
        }}
      >
        {event.type}/{event.title}
      
    );
  };


components={{
            event: this.Event,
            agenda: {
              event: this.EventAgenda
            }
          }}

onSelectEvent

agendaで表示されるコンポーネントが選択されたときに発火するイベント
(ここではポップアップモーダルを開く)

onSelectEvent={(event,e)=>{
              this.setState({
                isOpen:true,
                selectEvent:event
              })
          }}

eventPropGetter

event.typeによってスタイルを変える処理
参考：Change color of react-big-calendar events


          eventPropGetter={(event, start, end, isSelected) => {
            let bgColor;
            let fontColor;
            switch (event.type) {
              case "練習会":
                bgColor = "#BF7A87";
                fontColor = "aliceblue";
                break;
              default:
                bgColor = "#386537";
                fontColor = "aliceblue";
                break;
            }
            let newStyle = {
              backgroundColor: bgColor,
              color: fontColor
            };
            return {
              className: "",
              style: newStyle
            };
          }}

キャップ野球向けイベントカレンダー作ってみました。【12/12 update】

2019-12-08T00:51:56+09:00

キャップ野球向けイベントカレンダー

https://cap-calendar.netlify.com/

最近キャップ野球関係のサービスをいくつか作っているのですが、

キャップ野球・全国大会非公式特設サイト
野球リーグスコア管理システム ver3α
優勝ラインシミュレーター

まだ普及途上にあるマイナースポーツなので、色々広報手段が足りないようで「こんなイベントカレンダー欲しい」という声を聞いたので作ってみました。

検討した仕組み

マイブームというわけではないのですが、個人開発ではDBレスのサービスを作ることが多いです。スキーマの設計が面倒なのと個人でデータを持ちたくないのが....。

最近作った主なDBレスサービス

キャップ野球・全国大会非公式特設サイト
ドラフト風画像作成サービス「ドラフトなう!」
アニメランキング作成サービス「Annict Access 3」
音楽ランキングメーカー
優勝ラインシミュレーター
ボウリング幹事アプリ「bowling party manager」

timetree

カレンダー共有ということで一番最初に考慮したのがtimetree。
ただし、外部公開されているAPIの中にカレンダーに登録されているイベントの一覧を取得するAPIがないことがわかり(19/12/7時点)、採用を断念しました。

google calendar API

定番のカレンダー。ただし、現在公開されているv3 APIはOAuth必須となっている。極力ユーザに余計なアクションをさせたくなかったので選択肢から外しました。

google public calendar

googleカレンダーには誰でも閲覧できる「公開カレンダー」があり、
その仕組みを調べていたところ、OAuthなしでデータを取得できるという結論に達しました。

イベントの種類タグ

イベントの種類を分類するために、イベントのタイトルにタグをつけてもらう方式にしました。
例：【イベントの種類】【イベントの場所】タイトル

強敵、正規表現....

エンジニアとして避けては通れない道なのはわかっているのですが、1つめの【】の中は取得できるものの、繰り返しの取得ができず、

(ノ｀Д)ノ彡 ┻━┻　←こんな感じになりました

結局文字列を再帰的に検索するという力業で解決しました。
文字列処理はHSP時代に腐るほどやったんや....

findTag=(str,tags)=>{
    console.log(tags)
    let beginIdx = str.indexOf('【');
    let endIdx = str.indexOf('】');
    if(beginIdx !== -1 && endIdx !== -1){
      let tagStr = str.substring(beginIdx + 1,endIdx);
      tags.push(tagStr);
      this.findTag(str.substring(endIdx + 1,str.length),tags);
      return tags;
    }else{
      return tags;
    }
  }

ロースキルでごめんなさい。

採用フォント

普段Noto Sans JPを好んで使っているのですが、Noto Sans JPのままでは若干固いイメージだったので、M PLUS Rounded 1cを使っています。

動作イメージ

未実装の機能

更新日時順表示

ボウリング幹事アプリを作りました。

2019-12-02T07:00:07+09:00

この記事はなんでも Advent Calendar 2019の2日目の記事です。
昨日はだら@Crieit開発者さんの「お金も名声も得ることを考えなかったら何を作りたいんだろう？」という記事でした。

ボウリング幹事アプリを作りました

練習用のレーンを用意しました。ご自由にお使いください。
- https://letsbowling.netlify.com/editor/sandbox

どんなアプリ?

ボウリング大会などの幹事さん向けに、複数レーンにまたがる大会のスコアのリアルタイム共有などができるアプリです。
閲覧専用(参加者向け)と管理用(運営者向け)でURLを分けています。

URLシェア(QRコード)

選手情報入力

チーム名・選手名を入力できます。

各ゲームスコア入力

内訳は入力できないのですが、スコアを入力すると後述のソート機能を使うことができます。

ソート・HDCP算出機能

合計モード
合計を算出、ソートしたいゲームにチェックを入れます。
HDCPモード
HDCP(ハンディキャップ)はチェックを入れたゲームを対象に計算され、HDCPの項で選択したゲームのスコアとハンディキャップの合計でソートします。

動作イメージ

開発期間

3週間(平日夜とか土日)

使っている技術

MQTT

先日、MQTTを使ってみようという記事を書きましたが、このWEBアプリの目玉の技術です。
このアプリはDBサーバなしで動いていますが、MQTTでメッセージを送受信して複数人で同じデータ(ローカルストレージ)を共有することによって画面共有を実現しています。

DBサーバ立てるの面倒だな、ローカルストレージを共有する方法ないかな、と思ってたどり着いたのがこれ。後はWebRTCやWebSocketは候補にありました。

複数台(PC/モバイル)で同じ画面を見ながら操作していただくとわかると思いますが、表示を同期することができます。
これをサーバ(DB/AP)への問い合わせなしで実現しました。

ReactJS

react-beautiful-dnd
ドラッグアンドドロップ
react-notification-system
メッセージ通知

local storage

データの保存に各端末のローカルストレージを使っています。

おわりに、今年リリースしたもの

08/18リリース：タイピングスコア管理システム
08/21リリース：キャップ野球・全国大会非公式特設サイト
10/06リリース：野球リーグスコア管理システム ver3α
10/21リリース：ドラフト風画像作成サービス「ドラフトなう!」
10/27リリース：アニメランキング作成サービス「Annict Access 3」
11/04リリース：野球リーグandroidアプリ
11/17リリース：音楽ランキングメーカー
12/01リリース：優勝ラインシミュレーター
12/02リリース：ボウリング幹事アプリ「bowling party manager」

MQTTを使ってみよう

2019-11-21T23:48:51+09:00

MQTT(MQ Telemetry Transport)とは？

wikipedia

通信プロトコルの一種でPub/Sub型のデータ配信モデル。
軽量プロトコルのため、主にIoTの分野で使われていることが多いです。

Pub/Sub型

Pub/Sub型に関わるのは次の3者。

Publisher メッセージを出す人
Subscriber メッセージを読む人
Broker 配送業者(中継サーバ)

履歴の残らないLINE、という感じでしょうか。

中継サーバを立ててみよう

eclipse-mosquittoというMQTTサーバのdockerイメージが配布されています。

今回はホストの1883番ポートにmosquittoサーバを公開します。
さらにリバースプロキシの後ろに配置するため、nginxと同じnetwork(ここではdefault)に接続します。

docker-compose.yml(抜粋)

  mosquitto:
    image: eclipse-mosquitto
    hostname: mosquitto
    container_name: mosquitto
    ports:
      - "1883:1883"
    volumes:
      - ./mosquitto.conf:/mosquitto/config/mosquitto.conf
    networks: 
      - default

moquitto.conf(一部)

# ========================================================
# Default listener
# ========================================================
# Port to use for the default listener.
port 1883
# Choose the protocol to use when listening.
protocol websockets
# listener port-number [ip address/host name]
listener 9001

nginx.conf(listen 443)

 location /mqtt {
            proxy_pass  http://mosquitto:1883/;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
  }

クライアント(react)側実装

import PahoMQTT from "paho-mqtt";
const uuidv4 = require('uuid/v4');

//wssを利用する
const client = new PahoMQTT.Client(
    '******',443,uuidv4()
 );

 export const connect=()=>{    
    client.connect({
      userName: "******",
      password: "********",
      useSSL: true,
      onSuccess,
      onFailure
    });
    client.onMessageArrived = onMessageArrived;
    client.onConnectionLost = onConnectionLost;
}

const onSuccess=()=>{
    client.subscribe(TOPIC);
}
const onFailure=()=>{
    console.log('connect failed.')
}

export const onMessageArrived=(message)=>{
    console.log(message.payloadString);
}

export const send=(message)=>{
    client.send(TOPIC, message, 0, false);
}

function onConnectionLost(responseObject) {
    if (responseObject.errorCode !== 0) {
      connect();
    }
  }

アドベントカレンダー

crieitアドベントカレンダー「なんでも」

2日目に登板予定です。
MQTTを基礎技術に使ったアプリを作る予定です。

音楽ランキングメーカーをリリースしました。

2019-11-17T01:32:03+09:00

https://music-ranking-maker.netlify.com/
- URLシェアの例

開発のきっかけ

UIが似ているのでお気づきの方もいらっしゃると思いますが、10/27にリリースしたアニメランキング作成サービスの派生プロジェクトです。
楽曲の情報も持てないかな、と思ってちょっと調べたところ、itunes search APIを見つけました。

動作イメージ

アニメランキング作成サービスとの違い

楽曲試聴機能

今回使ったライブラリ：react-player
音楽プレイヤーを実装するにあたり、いくつかのコンポーネントを検討しましたが、最初のうち、あまりにUIが簡素(開発者が自由に作れる)で敬遠していました。

ただ、controlsオプションでHTML5 Audioのネイティブプレーヤーを表示できることに気づいたのでこちらを採用しました。

JSONPの解釈

アニメランキング作成サービスではGraphQL APIを使用していましたが、
itunes search APIはRESTでGETリクエストを送るだけです。
ただし、今回はサーバ側ではなくクライアント側の実装なのでCORS問題が発生します。
クエリパラメータにcallbackを指定して、fetch-jsonpでJSONPを扱います。

itunes search APIへの問い合わせ。ページングとURLエンコード済み

(async()=>{
        if(keyword !== undefined){
            let url = 'https://itunes.apple.com/search?term='+encodeURIComponent(keyword)+'&offset='+((pageNum-1)*50)+'&limit=50&media=music&country=jp&lang=ja_jp';
            let resp = await fetchJsonp(url);
            let response = await resp.json();
            if(response !== null){
                store.dispatch(loadData(response.results))
                console.log(store.getState());
            }
        }
    })().catch(
        error=>{
          console.log(error);
        }
    )

要素内スクロール

アニメランキング作成サービスではあまり使っていなかったのですが、
下部にプレイヤーが表示されるため、

.scroll{
    height: calc(100vh - ヘッダの高さ);
    over-flow: scroll;
}

スクロールを実装しています。

選択時にUIがガタガタする問題への対処

アニメランキング作成サービスではまだ改善できていませんが、
選択前と選択後で枠線の太さを変える実装をしているため、UIががたつくという問題がありました。
あらかじめ同じ太さで目立たない色の枠線にしておき、選択された際に色のみを変える方法を取っています。

AnnictAccess3をリニューアルしました！

2019-10-27T21:29:52+09:00

進捗的にはこの記事の続きなのですが、大幅にリニューアルを敢行しました。

サービスURL

https://annictaccessv3.netlify.com/

動作イメージ

今回の機能改善点

「アニメ選択」画面の実装

ランキングに追加中の番組の強調
年を指定して番組一覧を表示

以前のバージョンでは全体から上位30位までを固定で抜き出してそれをソートする形でした。

視聴者数の表示

今回苦労したこと

画像取得に制限がある問題

取得数を制限する
→外部APIを探す
→herokuにキャッシュさせる処理を書く

    if(isExistFile('./public/'+req.params.url +'.jpg')){
      res.sendfile('./public/'+req.params.url +'.jpg');
    }
    try {
    client.get('users/show',{screen_name: req.params.url},
        async(error, tweets, response)=>{
            if(error) return Promise.reject(error);
            console.log(response.statusCode)
            if(response.statusCode===200){
                  var json = JSON.parse(response.toJSON().body)
                  let imageRes = await fetch(json.profile_image_url);
                  downloadFile(json.profile_image_url,'./public/'+req.params.url+'.jpg')
                  res.redirect(json.profile_image_url);
              }
          })
  } catch (error) {
    console.error(error)
  }

未実装の機能

映画版ランキングメーカー
- the movie db APIからデータを取得する準備中です。
- 日本語/英語両対応するかも？
twitterシェア機能

既知の不具合

画像が読み込めなかった場合、クリックできる範囲が狭くなる
画像取得の際にtwitterAPIの制限に引っ掛かる

今回使っている技術

ReactJS/Netlify

ReactJS...フロントエンドの画面や通信を司るjavascriptのフレームワーク
Netlify...Reactアプリなどを簡単にデプロイできるプラットフォームサービス

NodeJS/Heroku

NodeJS...サーバサイドjavascript。
Heroku...NodeJSやRailsなどサーバサイドアプリケーションをデプロイできるプラットフォームサービス

graphQL

サーバにデータを問い合わせるクエリ言語の一つ。
REST APIの後継と言われている。

 let query = gql`query {
          searchWorks(orderBy: {field: WATCHERS_COUNT, direction: DESC} seasons: ["${req.params.year}-spring","${req.params.year}-summer","${req.params.year}-autumn","${req.params.year}-winter"]) {
            edges {
              node {
                  title
                  seasonName
                  seasonYear
                  annictId
                  twitterUsername
                  watchersCount
              }
            }
          }
        }`