メソロギア電卓なるものを作ったので使用技術とか

メソロギアのもろもろの計算をやってくれるツール「メソロギア電卓」なるものを作りました。 この記事ではそれを紹介します。

メソロギア電卓のサイトはこちら

メソロギア電卓の使用技術

• Gatsby(gatsby-starter-default)
• @material-ui

使ったものを書き出してみると少ないですね。 実際、メソロギア電卓自体は非常にシンプルな技術で実装されています。

メソロギア電卓の内部

calculate = (r, f, t) => {
    this.setState({damage: r * (f + 1) * (t + 1)})
}

この程度のシンプルな計算で出来上がっています。 今回対象にしている計算はだいたい一行で書けるため、複雑なことなど何もないです。

material-uiを用いたアコーディオン

アコーディオンにstyleを適用して

import MuiAccordion from "@material-ui/core/Accordion"

export const Accordion = withStyles({
    root: {
        boxShadow: 'none',
        margin: 0,
    },
    expanded: {
        margin: 0,
    },
})(MuiAccordion)

// 上のスタイル適用済みアコーディオンを読み込み
import { Accordion, AccordionSummary, AccordionDetails } from "../components/accordion"

// jsxの必要な場所で
<Accordion className="calc">
    <AccordionSummary>
        <h2>銃士算</h2>
    </AccordionSummary>
    <AccordionDetails>
        <Gun></Gun>
    </AccordionDetails>
</Accordion>

こんな風に書くだけ！ 簡単ですね！

デザインに関して

デザインに関しては「余計なことをしようとするとろくなことにならない」という格言に従い、大したことはしていません。 カッコ悪いmerginを削除して終わりです。

gatsby-starter-defaultもmateral-uiもそもそもがかっこいいため余計なことは不要。 強いていうならgatsbyそのままの紫から別の色に変えようかなーくらい。

こんなシンプルな実装で意味あるんですか？

意外と意味あるっぽいです。 それなりに反響をいただきました。

ゲーム中に暗算すればいいため必要性を疑問視していたのですが、公開してみると案外いい反応もらえます。 シンプルな計算であっても勝手にやってくれるのであれば利用したくなるのが人間というものなのかも。

Analyticsを仕込んでいないため、どのくらいのアクセスがあったかはわかりません。 次からは不精せずに仕掛けます。

まとめ

Gatsbyの練習がてら作ったサイトでしたが、結構いい感じでした。 利用される電卓になるとよいですね。