趣味で開発したWebアプリケーションの私的まとめ ～その2～

BECCHU, BUMESHI!!は公開を停止しました

これまでに趣味で3つほどWebアプリケーションを開発しました。その当時を振り返りながら、まとめていきます。

開発したWebアプリケーション

1. クリエイターサポートツール(zennの記事)
   SUZURI APIを利用し、商品情報を取得、商品画像からSNS用のPR画像を生成できるアプリケーション
2. BECCHU
   あらかじめ登録されたデザインを選択し、色を自由にカスタマイズしてTシャツを作成できるWebアプリケーション
3. BUMESHI!!(zennの記事)
   美味しいものを共有する飲食店レビューサイト、現在開発中

今回はBECCHUについて、まとめます。

BECCHU

ソースコード

https://github.com/yukyu30/semiorder_suzuri

開発動機

SUZURI APIを使って、ユーザーがお好みのアイテムを作れるWebアプリケーションを作成したいと思い開発をはじめました。デザイン好きだけど派手で自分には合わないなと思い、購入しないことがありました。そこで、買う側がデザインを選び、好きな色で購入できるものができるようにしたいなというのもありました。私は手帳やペンに名入れをするのが好きです。自分だけのものという感じがしさらに特別感が増します。そのような特別感を作りたいというのも動機のひとつです。

目的・目標

『クリエイターさんのデザイン守りつつ、オンリーワンを作れる』

画像投稿機能をつけていないので、私が登録したデザインしか利用できませんが、以上のような目的があります。
デザインをカスタマイズできるのはいいですが、それが悪用されることを防ぐために、デザインを守りつつという前提を付けました。

アプリケーションの命名

BECCHUという名前は、アパレル用語である別注から来ています。
以下、FASHION PRESS(https://www.fashion-press.net/words/743#:~:text=別注とは、普通の,A」という商品を置く。)からの引用

別注とは、普通の注文とは異なり、特別に注文して作ること。また、その商品、アイテムのこと。

セミオーダーなども考えましたが、語感でBECCHUにしました。

デザイン

特別感を演出するために、黒と黄土色？が中心のデザインにしました。CAMPFIRE CROUDFUNDING AWARDのサイトの配色が好きで、いつかこの配色で作りたいと思っていました。
https://award.camp-fire.jp/2019/

スタイリッシュになるように角を丸くすることは減らしました。ボタンと分かりやすくするため,
ボタンのみ角を丸くしました。

言語やインフラの選定など

• 言語
  • php
    契約しているサーバーがphpかrubyに対応して、どちらかにするか決めることになります。今回はフレームワークを用いる前提だったのですが、サーバーがruby on railsには対応していなかったため、phpを使いました。
  • html, css
• フレームワーク
  • Laravel
    フレームワークを使いませんでしたが、静的なサイトを改修する際に、Bulmaやbootstrapに触れ、フレームワーク便利ーーーー！！となり今回Laravelを使用することにしました。
    CakePHPも検討しました。後発のフレームワークであり、近年人気がたかまりつつあるLaravelは比較的新しい日時に投稿された記事やドキュメントが多く、自分は調べながら開発を進めていくため、Laravelにしました。
  • Bulma
    色やデザインが好きで愛用していたので、CSSフレームワークにBulmaを使いました。(今はTailwindが好きです)
• データベース
  • MySql
    契約しているサーバーで提供されていたデータベースがMySqlであったため、MySqlにしました。
• サーバー
  • ロリポップ(スタンダードプラン)
    データベースを今後使うことを考え、ライトプランからスタンダードプランに変更しました。
• APIなど
  　- SUZURI API
  SUZURI APIでおもしろいもの作りたいなーと思いながらBECCHUを思いついたので、SUZURI APIを使う前提でした。

クリエイターサポートツールの時とは違い、データベースやフレームワークを取り入れた点で前よりもよくなったかなと思います...

使い方

1. 利用規約に同意したら、ボタンを押す
2. 作成したいアイテムを選択する
3. 利用するデザインを選択する
4. メインカラーを変更して、好きな色にする
5. これで作るを押す
6. プレビュー画面をみて、平気であれば詳細確認ボタンを押す

開発で難しかったこと

いつもよりコマンド操作が増えた

コマンドでファイルを作成したり、サーバーを起動したり、キャッシュを削除したりと、いままでコマンドで操作することは少なかったので、慣れるまで時間がかかりました。コマンドでファイルを生成することにより、自分が触れていないけどいい感じにしてくれるので、自分がわからない部分がでてきました。その部分を解消するために、1からファイルを作成するようにしました。
よく使うコマンドはZennのスクラップ機能でメモをしていったり、Laravelに関する情報をまとめていきました。
https://zenn.dev/yu_9/scraps/74ec6afe198058

SUZURIに画像を投げて、画像を登録する

今まで、SUZURIにあるデータを取得することしか行っていませんでしたが、今回は画像をSUZURIに登録するということが必要になります。うまく登録できずエラーが返されることが多発しました。
登録するデータの形式が異なっており、エラーがはかれていました。

画像の色をどう変えるのか

色を選択してももらい、画像処理を行い画像を生成します。for文で黒い画素をすべて指定された色に変えていく方法をはじめに考えたのですが、for文で全画素を調べていくのは処理が重くなりそうだったので最終手段としました。代わりにPHPのGDライブラリにあるimagelayereffectのIMG_EFFECT_OVERLAYを利用しました。背景の黒い部分と白い部分はそのままで、背景のグレーは前景にピクセルの色になるものです。
https://www.php.net/manual/ja/function.imagelayereffect.php
これを利用し、デザインの上に、選択された色で塗りつぶす処理をすると灰色の部分の色が変わります。また、白と黒の部分はそのままになるので意図的に色が変わらない箇所を作ることもできます。

開発していた楽しかったところ

作成したプログラムで外部のサービスを利用できる

自分のプログラムで、SUZURIにデータを登録できて、それが実際に購入できるようになるとても楽しかったです。書いていたプログラムで現実世界で使うアイテムを作れた...テンションめっちゃ上がって、Tシャツだけに対応させるつもりが他のアイテムにも対応させました。

このとき学べたこと

• Laravelについて
• MVCモデルについて
  MVCモデルは自分の思っていた以上に開発しやすかったです。最初は理解しにくかったものの、開発を進めて行くうちにそれぞれが分かれており、コードが複雑にならず開発しやすくなりました。前に作ったWebアプリケーション(クリエイターサポートツール)はすべてごちゃまぜだったのでフレームワークの恩恵を実感しました。

今自分が作るなら

• デザインのカスタマイズ時にレイヤー機能のように要素ごとにことなる色に変える機能を追加
  現在のシステムでは、単色のデザインしか利用できないので、色ごとに画像を分けて、色をそれぞれ個別に設定し、一枚の画像にするようにしたい。

最後に

次はBUMESHI!!について、まとめたいとおもいます。

次の記事：BUMESHI!!