クレメアメーカー

クレメアメーカーを勝手に作ってみた理由

釈迦SEゆうき

クレメアさんに何も伝えず、勝手にクレメアメーカー作りました。
なんで作ろうと思ったのかを適当に書いていこうかなと思います。

1.作ろうと思ったきっかけ

とある日の夜にシャンプーしていたとき、
「フリーランスになったし、なんか実績作らないとな〜。」
「でも何作ろうかな〜。」
「いけゆうさんのクレメアさんがクルクル回るの面白かったな〜。」

「そいや強い女メーカー流行ってたな〜。」

「・・・クレメアさんのマークってjavascriptで作れるんじゃね？」
「それで強い女メーカーみたいなの作ったら面白いんじゃね？」
「よし、クレメアメーカー作ってみるか！」
って感じで作ろうと思いました。

2.作るために考えたこと

まず〇〇メーカーを作るために考えたことは、
・レスポンシブ
言わずもがなCSSで表示をPC・SPそれぞれ最適化するために必須だなと
・なるべくシンプル
クレメアさんのイメージ的にゴテゴテな感じではない
・ドメイン取る？クレメアさんのブログに渡す？
これは悩みました。渡すのは簡単ですが、メンテナンスするのめんどいなと
・画像を組み合わせて作る（断念）
クレメアさんの星マーク部分を画像で切り替えて作成しようかとも思いましたが、
画像作る→作ったことはないから時間かかりそう
フリー素材→汎用性ない
最後に自由度が少ないと思ったので画像で作成は断念しました。
・canvasで描画して作る？
画像で断念して次に考えたのが、クレメアさんのマークをよく見てみると

画像1

円2つ（実際の描画は4つ）に星マーク1つだからcanvasタグで描画できそうだなと思い、cannvasタグで描画することにしました。
・CSSはBootStrap
実務で使ってたっちゃ使ってたのですが、ちゃんと調べてはなかったのでこれを機に使用してみることに。
・jQueryは使わずjavascriptオンリーで作る
実務はほぼjQueryばっかだったので、javascriptちゃんと使ってみようと考えたのでjavascriptで作成しました。
・作った画像を保存できるようにする
これはマストだろう。作った画像保存できないと意味がないので。
・ハッシュタグのTLのウィジェットを置く
クレメアメーカーほぼほぼ完成した後に調べたら、ウィジェットサービス終了のため、自作しないと行けない・・・保留することに
・クレメアさんのマークを1度ずつズラす
昔クレメアさんが毎日1度ずつズラしていたのを思い出し

これも作成途中で取り入れようかなとも考えましたが、まずは完成が優先だなと保留することにしました。
こんな感じで考えたり、保留したりを頭のなかで繰り返していながら作成してました。

3.作ってみての感想

クレメアメーカーを思いついたのが2019年5月中旬くらいで、作り始めたのは6月下旬くらいからです。実質の作成時間は調べ物含め5日くらいかなと思います。

4.最後に

コードの説明についてはqiitaの方に投稿しています。
実際のコードを見てみたい・作っているときにこういう風に思考していたのを見てみたい方は覗いてみてください。

実際のコードについてはgithubにあげているのでそこからご覧ください。


いいなと思ったら応援しよう！