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

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

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

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

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

今回はクリエイターサポートツールについて、まとめます。

クリエイターサポートツール

開発動機

開発動機しては、動的なサイトを作りたかったというだけです。もともと、静的なサイトを作成し公開していましたが、動的なサイトも作ってみたいと思い、開発を始めました。RubyかphpでWebアプリケーションを作成することになったのですが、phpを触ったことがあったのでphpで開発をはじめました。(この時、Rubyを学べばよかったと後悔しています)
ちなみに、プログラミング経験としてはC,C++,Python,Javaがすこしできるくらいです。

目的

『PR画像をもっと気軽に作れるようにしたい』
SUZURIは趣味で利用する人やクリエイターさんがといった方が多いと感じています。クリエイターさんはPR画像を作ることが多いですが、趣味でPR画像を作成する方少ないと考えました。
なので、ポチポチしてスマホでPR画像が気軽に作れるようにしたいなと思いました。

アプリケーション名からわかるようにSUZURIでショップ開いている人をサポートできるようにできるツール群をつくりたいということをクリエイターサポートツールにしました。(結局、PR画像生成のみですが...)

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

• 言語
  • php
    前述したように契約していたサーバーのメニューにPHP設定と書かれており、phpなら環境構築をせずに動作しそうだっため、phpにしました。
  • html, css
    sassやscssはこの当時知りませんでした。
• フレームワーク
  • なし
    フレームワーク？聞いたことあるけどよくわからん、今は手をつけずに作ろうという考えだったと思います(早く手をつけるべきだった)
• データベース
  • なし
    MySqlを使えますが、認証はSUZURI APIで行うことができるので使用しませんでした。セキュリティについての知識が乏しいので個人情報などのデータを保持したくないという考えでデータベースはなしにしました。
• サーバー
  • ロリポップ(ライトプラン)
    静的なサイトを公開するために契約。大学のサークルのサイトを作成する際に利用していたので、使ったことがあるロリポップを契約という感じです。
• APIなど
  • SUZURI API
    もともとSUZURI APIを使ってアプリケーションを作りたいなと思っていたため、最初から利用することにしていました。
    SUZURIで作りたいなと思った理由としてはSUZURIが好きだから、SUZURI APIを利用する際のサンプルコードやドキュメントがあり、開発しやすそうだったからです。

基本的に知らないことが多かったので、いまできる構成でこのようになりました。

使い方

1. SUZURIと連携する
2. SUZURIに登録してあるアイテムが表示されるので、PR画像に載せたいアイテムを選択する
3. 生成ボタンをおして、画像を生成する
4. 生成された画像を保存して、SNSでシェア

開発で難しかったこと

まずAPIってどうやってつかうの????

phpに初めてふれ、APIを利用するのも初めて...という状況でAPIってどうやって使うの???crulとは、get?post?tokenみたいな状態でした。
知らないことは調べるしかないので調べていきました。
手始めに、SUZURI APIのドキュメントを読みました。認証を理解するために、ドキュメントにでてきたOAuth認証が何なのかしらべました。認可サーバーに認可リクエストを送るためにGETメソッドを利用するんだな...などと調べながらコーディングをしていきました。
SUZURI APIに関する記事などがあるのでそちらも調べながら進めていきました。

作成したサンプルプログラム

https://github.com/YU9-30/suzuri_api_practice

参考にしたもの

https://qiita.com/TakahikoKawasaki/items/e37caf50776e00e733be
https://note.com/deconbatch/n/n87fbc7d19c4e

画像の保存はどうする

画像を生成し、ユーザーは画像をダウンロードすることになります。

• 画像生成したあとにブラウザ閉じたらまた作成しなおしになる
• 生成された画像のアクセス権限はどうする?

データベースがないのでユーザーごとに画像のアクセス権限をつけることはできませんでした。
PR画像を生成するのはもともと、SNSでPR画像を投稿するためのものであることから、PR画像をサイト内で表示することとしました。誰でも生成された画像を見れるようにすることで画像生成後ダウンロードせずに、ブラウザを閉じても一覧画面からダウンロードできるようになります。
画像をクリックすることでSUZURIのショップにとぶようにリンクを設定しました。

動作風景

画像をクリックしたらSUZURIのショップに飛ぶようにする

画像をクリックすることでSUZURIのショップにとぶようにしましたが、データベースを使っていなかったため、画像とそれに対応するショップのリンクを対応づけて保存することができませんでした。そこで画像生成する際にはSUZURIのアカウントでログインしているので、SUZURIのアカウント名が取得できます。そこで[SUZURIのアカウント名]_[日時].pngと名前をつけて保存することにしました。SUZURIのショップURLはhttps://suzuri.jp/[SUZURIのアカウント名]となるので、ファイル名からSUZURIのアカウント名を取り出し、リンクを設定しました。

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

商品情報を取得できた！！

OAuth認証が分からなかったが、OAuth認証を行い、商品情報を取得でき、商品一覧が画面に表示されたときはめちゃくちゃ楽しかったです。

実際の画面

これ使えば、自分のサイトに商品一覧を表示できるじゃん！！とか思って、実装しました。
商品を取得して、それが並ぶだけでも結構楽しいです。
(suzuriで販売しているアイテムを表示するサイトをつくりましたが、htmlに手打ちしていました。)

###　Porcessingの知識が役に立った
Porcessingというプログラムを書いて画像を作成するツールがあるのですが、CGの講義でPorcessingを学びました。クリエイターサポートツールでは商品画像を合成して、一枚の画像にするのですがその際にPorcessingをつかった経験が役に立ちました。学んでいて損することはないと改めて実感しました。PHPには画像処理に使えるGDライブラリを使用しました。

このとき学べたこと

• APIの利用方法
• GET,POSTなどの意味と利用方法
• OAuth認証について
• PHPについて

フレームワークを使わないことで、純粋な動作とかを知ることができたところはよかったのかなと考えています。ただ、今はセキュリティの面や拡張のしやすさからフレームワークを使っていきたいです。OAuth認証で連携する機能を実装できたのは、今後TwitterやGoogleの認証を実装する際にも役に立つのでやった良かったです。

今自分が作るなら

• ログアウト機能を実装
• 生成した画像の公開、非公開を選択できる
  • データベースを利用してユーザーIDと生成された画像の紐づけをして、アクセスを制限することもできるようにする。(SUZURI APIでは非公開のアイテムも取得でき、生成する画像に未発売のアイテムを利用することもできるため)
• サイトのデザイン
  • cssを一つ一つ書いていたので、Bulmaやtailwindで作り直したい
• Laravelを使って、リファクタリング
  • ページネーションとか実装したい
  • 基本的に実装が不十分な状態
  • クリエイターサポートツールと言っているのに、ひとつの機能しかない

最後に

作った当時のことを思い出すと、もっとこうできたのではないかと思うので少しは成長しているのかなと感じました。
次回は同じくSUZURI APIを利用したBECCHUについてまとめます。

次の記事：BECCHU