#スーパーイカメーカー を支える技術

そもそもの構造

• 使用できるパーツ画像からjsonを用意
• それを元にパーツセレクターを描画
• セッティング状態を表すオブジェクトをポチポチ変更
• ポチポチする度にcanvas.drawImage -> canvas.toDataURLして表示

たったこれだけです。
HTML Canvasをよく知らない人は、サーバーレスでなんでこんなことが・・・！って感じかもですね。

React x flumpt

完全にやってみたかったドリブン技術選定です。
前にReactだけを使って後は適当に書くスタイルでアプリを書いたことがあって、結局ReactはPubSub機構なしには(= そしてFlux的に上からステートを流す)うまく使えないなーという結論だったので、今回ははじめからそれに準ずるものを使おうと思ってました。

こないだの翻訳記事でFluxするならReduxがオススメ！だって使ってる人多いから！ってのを書いた直後ですが、採用したのはReduxではなくflumptというものです。

redux への 不満を解消する為に, flumptというFlux実装を作った - Qiita

↑の記事やサンプルコードを見てもわかる通り、ほんとに薄い実装でわかりやすーいライブラリです。
同じくEventEmitterだけあれば十分やろーって思ってましたが、他にも色々できてさすがの一品でございました。
おかげで迷うことなく(そもそも大した規模じゃないけど)使えて助かりました。

READMEの変数名にtypoがあったりイベント名が変わってたりするのはそのうちなおるでしょう( ˘ω˘)ｽﾔｧ

<ul className="tab-header">
  // こういうループのためのmapとか
  {tabItems.map((item, idx) => {
    let isSelected = idx === selectedTabIdx;
    return (
      <li
        className={`
          tab-header__item
          tab-header__item--type-${item.group}
          // こういうクラス名のアレとか
          ${isSelected ? 'is-selected' : ''}
        `}
        onTouchTap={() => { this.onClickTab(idx); }}
        key={item.order}
      >
        <h2>{item.name}</h2>
      </li>
    );
  })}
</ul>

postcss

続・完全にやってみたかったドリブン技術選定です。
最近流行ってるだとかSassは死んだ！とかいろいろ聞く中、実際はどんなもんなんだろなーと。

結論としては、この程度の規模だとどっちでもいいです。
今回使ったのはこんな感じ。

{
  "use": [
    "postcss-import",
    "postcss-nested",
    "autoprefixer",
    "cssnano"
  ],
  "input": "./src/style/style.css",
  "output": "./dist/style.css",
  "autoprefixer": {
    "browsers": "last 2 versions"
  }
}

postcss-cliはwatchの機能もついてるので、特に不満はないです。
ただSassならオールインワンな内容が、postcssだと自分でプラグインを探してこないといけなくて、そこだけ毎回ハマる感じ。
プラグインを探すのは手間ですが、だいたい見つかるし、カスタマイズできるって分だけnode-sass単体より便利かなーと。

身の丈にあった技術選定をしたいのでcss-nextなことはやってません。

UIUX

絵を描いてくださった(そしてそもそもの言い出しっぺ)のは@jenga_inkさんですが、デザインは私です。
なので至らない点は多々あるのであんまり参考にならんですが一応気にかけた点。

• PCでもモバイルでもWebViewでも使える
• 絶対にかわいい絵が主役
• パーツのUIはネオンなイメージ

前もって全パーツ画像をフェッチする作りになってるので、確実に200リクエスト分くらい待つことになります。
ここの構造は最後まで迷ったんですけど、随時読み込みして遊んでる最中に待たされるのは嫌だったので、最初に間を持たせることにしました。

そこでみんな大好きジャッジくんさんです！これが意外に好反応で、やったった感があってちょっとニヤニヤしましたｗ

あとは最近のモバイルなら余裕だろうということで、overflow: scrollとかふんだんに。

WindowsとAndroidで確認してないのでそこだけ心残りが・・。
まぁ特に何も聞こえてこないので、なんとかなってると信じることにします！

やっぱりWebViewが嫌い

WebView内では、画像を長押ししても画像保存できません！＼(^o^)／

なのでこのサービスのTwitterへシェアするまわりの導線は正直微妙です。
まぁそれでもシェアするボタンがあれば最近の人はすぐシェアしてくれるってのは前回学んだので、いちおう設置。

あとはTwitterのWebIntentも嫌いです。
なんで画像の添付UI無いねん！