ポケモン図鑑ジェネレーターを2日かけて作ったよ!!

どうもふうや(@fwww0707)です。

昨日こんなことをつぶやいて、、、、

 

サービスの開発に1日以上かかってしまいました。

宣言通りジェネレーター作りましたよジェネレーターを!!

fwww-lab.com

ポケモン図鑑ジェネレーターで初代ポケモン図鑑が自作できる

サンプル

ポケモン図鑑ジェネレーターで作ったサンプルがこちら↓

f:id:fwww:20171212152448p:plain

使い方

お手本がこちらのピカチュウのポケモン図鑑なのですが、

f:id:fwww:20171212152713p:plain

それに従って下記画像にある通りフォームに必要事項を入力していくだけです。

f:id:fwww:20171212152815p:plain

また上記画像に書いてあるとおり漢字や特殊文字には対応していませんのでご注意下さい。

ひらがなとカタカナ、英語の大文字、小文字が使用できます。

また画像は特殊な形式で読み込むためサーバーには一切アップロードされません。

もちろん作成したポケモン図鑑画像もです。

各種フォームの注意事項ですが、

Numberは3文字まで、右側は10文字まで、下側の説明は18文字までそれぞれ入力できます。

それ以上入力しても反映されないのでご注意下さい。

画像は初代ポケモン図鑑に少しでも近づけるために画質を悪く仕上げるように施しています笑

完成イメージを確認する

左カラム(スマホの場合はフォーム上)で随時ポケモン図鑑の完成イメージを確認することが出来ます。

作成したオリジナルなポケモン図鑑を保存する方法

フォームの右下にあるダウンロードボタンを押下することでダウンロードできます。

またスマホでは新規タブで作成した画像が開くと思いますので長押しで保存して下さい。

使い方まとめ

需要がありそうで無いようなポケモンずかんジェネレーターですが、皆様のご要望にその都度出来る限り答えてこれから少しずつ機能を追加していこうと思います。

開発秘話

ポケモン図鑑のDOM要素作るの大変だった笑

元々は型となる画像に字や画像を重ねる仕様で良かったのですが、それでは完成イメージをユーザーが確認できないので、DOM要素仕立てで施しました。

html2canvasにCSSのfilterが効かない

html2canvasはDOM要素をcanvas仕立てに出力するjQueryのライブラリですが、どうもCSSのfilterが効かず2、3時間苦戦しました。

どうしても出力画像をグレースケールにしたかったため、最終的にはhtml2canvasをローカル管理して少しばかり改造しました笑

File APIがものすごく便利だった

基本画像はアップロードするものですが、ローカルからの画像をBASE64形式でサーバーにアップロードせずとも読み込むことが出来たのは感動しました。

一番心配だったのがアップロードされた画像の管理(Cronで定期的に削除する予定だった笑)だったのでものすごく今回の開発に助かりました!

やっぱりサービス開発はBootstrapベースだなあ

今回は標準のBootstrapとマテリアル化するbootstrap-material-designライブラリを使っています。

特に後者!

Bootstrapを一発でマテリアル化してくれるのでホント便利です。

MAMP上で開発していたのにPHPを使わなかった

PHPを使うだろうと想定してMAMP上で開発していたのですが、html、css、javascript(jQuery)だけで済みました。

正直サーバーサイド触りたかったなと、、、笑

まとめ

1日で作ると宣言したものの2日かかってしまいました笑

しかし、こんな猛スピードでサービス開発を成し遂げたのはこれが初めてだったのでとても勉強になりました!

これからもこのような形で何か思いついたらサービス開発してみようと思います!

ありがとうございました!!

fwww-lab.com