2019-12-04に投稿
なんでも 4日目

イラストを上手く描けるようになりたい人のためのイラスト投稿サービス

この記事はなんでも Advent Calendar 2019の4日目の記事です。
昨日はウラルさんの「どうして物を作ってしまうのか」という記事で、クリエイターの熱い気持ちがジンジン伝わってきました。

どうして物を作ってしまうのか

話はちょっと逸れますが、ウラルさんの記事を読んで時、私はふと金曜ロードショーの「いやぁ、映画って、本当に素晴らしい物ですね」という水野さんのセリフを思い出しました。(みなさんわかりますでしょうか?わからない方は検索してください)
私は小さい時、なんでこの人は「いやぁ、ターミネータって最高ですね。」とか、今日放送された映画については言わずに、最初に映画の存在そのものを素晴らしいと言うのだろうか?と不思議に思っていました。(頑張って寝ずに最後まで観れたことが誇らしい子供だった時は不満だったのです。)
ただ、今ならなんとなくわかります。
例えばサッカーで、ゴール前でありえないような素晴らしいプレイを観た時、その選手のプレーに感動すると共に、サッカーというスポーツに出逢えて良かったと感動します。それと同じように、ある一本の映画を観て、その作品を作り出した根源である「映画」システムそのものに感謝してしまって「映画って素晴らしい!」と伝えたかったのだと思います。

「この作品(Webサービス)が作れたから良かった」ではなく、物づくりそのものに出逢えて良かった。というウラルさんの記事に心打たれました。

前置きが長くなりました。本題に入ります。

自己紹介とテーマ

こんにちは。
かとのぼと申します。
個人でウェブサービスを開発しています。
最近は「メモや日記ついでに英語学習」というサービスの宣伝を頑張っています。

さて、今回の私のアドベントカレンダーは新サービスを作った話です。

今回作ったサービスは、今はまだイラストが上手くないけど上手くなりたい人たちが集まり、練習した絵を投稿するイラスト投稿サービスです。

その名も「イラスト頑張るクラブ(仮)」です!(ほとばしるネーミングセンス!!)

イラスト頑張るクラブ

【トップ画面】
スクリーンショット 2019-12-03 15.28.36.png

【ホーム画面】
スクリーンショット 2019-12-03 15.29.04.png

これからイラストとか上げる予定です。

作った経緯:絵が上手いと個人開発にかなり有利なのでは?と思ったから

現在、個人開発で特に難しいなぁと思っているのが宣伝やデザインです。

個人開発は総力戦と言われますが、宣伝に関してはお金をかけずに大企業やベンチャー企業と戦わないといけないですし、デザインに関しては、ユーザーの目が肥えてインスタグラムやTwitterのような洗練されたデザインじゃないとそもそも使ってくれない状態です(阿部寛のようなサイトがもっと増えてくれれば…)

それで、個人開発で、お金がかからずに宣伝効果抜群なものってなんだろうか?と考えていて、ビビッと思いつきました。

それが、「絵」です。(安易)

漫画とかイラストって、Twitterでも個人の方が活躍されていて、しかも評判に上がることが多いですよね?

自分でお洒落なイラストが描ければ、デザインやサイトの世界観にオリジナル要素を加えることができます。
面白いイラストや漫画が描ければ、宣伝になります。
つまり、デザインと宣伝の両方を強化することができます!

そこで、イラスト技術を伸ばそうと決めました。

じゃあどうやったら早く上達できるのか?

とにかく描くしかないだろう…。

加えて、描いた絵を外部(ネット)に公開することで緊張感を持たせる方が良いだろうと思いました。

下手な人が投稿できるサービスがない

投稿先を探した時に気付いたのですが、イラスト投稿サービスって、当たり前ですけどクッソ絵が上手い人しかいません。魔法でも使っているのか?って絵ばかりなのです。
ここを利用していたら、いくら根拠なき自信があるタイプの自分でも自信がなくなるだろうな…とすぐ思いました。

Twitterに投稿しても良いですが、自分のイラストの記録がタイムラインで流れてしまいますし、もし心ない人に目をつけられて誹謗中傷でもされたら立ち直れないでしょう…。

下手でも恥ずかしくなく投稿できて、なんとなく一緒に励ましあえる同士がいて、自分の描いた絵の成長が実感できるようなサービスをください!

残念。もちろん、そんなものはありません。

なら!無いなら、自分で作ってしまえば良い!

パンがないなら、自分たちで作れば良い!(フランス革命が起こらなかった平和な世界線のマリー・アントワネット)

そのための個人開発だし、そのためにコードを勉強したんだ。

と考えて、このサービスを作りました。

技術的な話(興味ない人は、次の「こだわった点」までスキップしてください)

制作期間は2週間です。毎日2時間くらいで、最後の方は4時間くらいやったと思います。

使った技術は、フロントエンドに「Vue.js」、バックエンドには「Firebase」、デザインフレームワークは「Buefy」です。

ちょっと難しかったのは、画像投稿の際に、データ節約のためにサムネイルを作成する点です。

ただ、Firebase Extensionsに画像のリサイズができる機能があることを教えていただいて、比較的簡単に実装することができました。

今回は少しFirebase Extensions Resized Imagesの実装について触れておきます。

Firebase Extensions Resized Imagesとは?

FIrebase Extensionsは、Firebaseの拡張機能の一つです。

この機能を設定すると、画像をFirebase Storageにアップロードした際、指定したサイズに画像を自動でリサイズし保存してくれます。

詳しくはこちらの記事が参考になります。
[Firebase Extensions] Resize Images

設定自体は非常にシンプルで簡単ですので、導入に関してもそこまで難しいことはないかと思います。

ただし、この機能はまだ導入されたばかりで、実際に使用しているサービスや使用例の記事は極端に少ないので、自分で使う時には苦戦する箇所もあるかと思います。

私が大きく躓いた点は三つありました。

第一は、リサイズする元の画像の名前に、ちゃんと拡張子をつけないとリサイズ後のデータに名前が正しくつかない点

Firebase Extensions Resize Imagesは、元の画像のファイル名に拡張子をつけないとリサイズされた後の画像の名前が消えるから注意

第二が、リサイズ後の画像データがコンソール上だと正しく表示されない点。ずっとグルグル回った状態になっています。これはおそらくFirebase側の表示バグです。ただ、これがなんかのエラーだとずっと調べたり考えていたのでここの開発に相当時間を取られてしまいました。

第三に、リサイズ後の画像の保存が、

画像を投稿 → 画像リサイズ → StoregeのURLを取得→FirestoreにURLを入れる

と言う流れができない点です。

URLデータを取得できれば楽なんですが、それができませんでした。そのため、Storageの名前を保存して、Firestoreからデータを取得する時に参照してURLを引っ張ってくる実装になっています。
この実装はちょっとややこしいです。

コードの例を上げます。
条件:
1. フロントはVue.js
2. 画像の元は「katonobo.png」で、リサイズ後の画像は「katonobo_200x200.png」となる
3. リサイズした画像をStoregeに「thumb/katonobo_200x200.png」というパスで登録した。
4. 画像名「katonobo_200x200.png」は「post_image_200x200」と言う変数名でFirestoreに入れておいた
5. firestoreのコレクションは「user」で、このユーザーが投稿した画像のサムネイルの一覧を取得したい場合。

firebase.firestore().collection('user').doc(this.post_user_id).collection('posts').get().then((querySnapshot) => {
                querySnapshot.forEach(async (doc) => {
                    var data = doc.data()
                    data.thumb = await firebase.storage().ref('thumb/' + data.post_image_200x200).getDownloadURL()
                    this.posts.push(data)
                })
            }) 

このような感じで、Firebaseからデータを引っ張ってきて突っ込む前に

data.thumb = await firebase.storage().ref('thumb/' + data.post_image_200x200).getDownloadURL()

でこのStorageのURLを取得するという実装になります。
今のところこの方法が一番良いかなと思っていますが、もし良い方法があったら教えて欲しいです。

こだわった点

イラスト頑張るクラブの目的は、

  • 絵がいくら下手でも気兼ねなく投稿できること
  • 仲間と励ましあえること
  • 成長を実感できて、モチベーションを上げられること

この3つです。

この目的を果たすために、自分が良いと思った時に押せる「スキ」ボタンと、最初の頃より絵が上手くなったと思った時に押せる「成長している!」ボタンをつけました。
スクリーンショット 2019-12-03 10.35.58.png
このボタンなら、下手でも成長しているなら押すことができますし、モチベーションが上がります。

もしイラストの練習考えている人はウェルカム!

以上です。

私はこれから、このサービスを利用してイラストの練習をして行こうと思っています。

半年後にPixivにイラストを投稿したり、Twitterに漫画を上げれるようにするのが目標です。

もしちょうどこんなサービス探していた!と言う人や、イラストやろうかな?と思った人がいたらぜひ参加してください!

いやぁ、しかし、なんとかアドベントカレンダーまでに間に合ってホッとしています。

ですが、12月はまだまだこれからです!

そして、明日のアドベントカレンダーはかつおさんです!とても楽しみです!

それではこの辺で。サヨナラ、サヨナラ、サヨナラ。

ツイッターでシェア
みんなに共有、忘れないようにメモ

katonobo

昨日お蕎麦食べた。

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント