こんにちは、Yuiです。
実は7月5日から**#100日後に話題のwebサービスを立ち上げるワニ**と称して、100日チャレンジをしておりました。
大した成果は出せなかったのですが、一応完走したということで、その間に作ったサービスとできるようになったことなどをまとめて書いていきます。
実際のモーメントはこちら→https://twitter.com/i/events/1281676911056314368?s=21
#スキルのマッチングアプリAllesの改良
https://nandemokokan.bubbleapps.io/
これはNoCodeツールbubbleで作りました。NoCodeとは言えど、結構DB設計などをちゃんとしてないとだめで苦労しました。
とりあえず先日リリースしたこちらに関して、改良をしました。
— Yui☁個人開発 (@yui_active) July 5, 2020
・携帯でマイページの文字が縦に表示されてしまう問題をなくした
・ログイン後、検索ページにいけるように
・誰も気が付かないような微妙なデザイン調整https://t.co/VKMgYANn7Z
1日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/xtlKQduP1O
サービス内容としては、スキルとスキルを交換しようというシンプルなもの。
例えば、英語教える代わりにプログラミング教えてね、みたいな用途を意図して作りました。
通知機能とかはつけたのですが、なんかバグってしまうときがあります。
このアプリを作って、これはwebアプリではなく、ネイティブアプリのほうが相性が良いなと思って、flutterを勉強し始めることにしました。
baggage transfer様のHP制作(掲載許可済み)
これは5月頃に受けた案件です。
WPで作ったんですが、結構機能がもりもりなので、苦労しました。
完成したのが1日目のときなので、今回の100日間チャレンジにのせました。
このときに若干PHPでカスタマイズをしたりしました。
PHPははじめて触ったので文法のことなどは何もわからないのですが、(他の案件もあったので)WPのカスタマイズぐらいなら問題なくできるようになりました。
・9か国語対応
— Yui☁個人開発 (@yui_active) July 5, 2020
・自動見積もり機能
・会員登録機能
もろもろ組み込んだサイトようやく完成!
多分PCの方がレイアウト綺麗と思う🙆♀️
依頼されたものやけど、良いサービスなので使ってみてね(公開許可済み)https://t.co/bEGZHlUOEc
1日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/mzmt1Z9pQz
flutterの練習期間
このとき確かUdemyでflutterでtwitterクローンを作ろうみたいな教材を見ていたような気がします。
Googleログインの実装からその後が進まない件
— Yui☁個人開発 (@yui_active) July 6, 2020
なぜか@が入力できないからこの後の動きを確認できないww
@を入れないとメールアドレスとして間違ってると出るのに、@の入力だけができないw
利用:flutter, firebase
2日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/evb5VGBY6O
ただまあ見てわかる通りflutterもわからない、firebaseもわからないで結局わからないことだらけでした。(それはそう)
#たなばたまつり
そんなこんなしてるうちに7月7日になりました!なんか七夕のアプリを作りたいと思い立ったものの、すでに時間は7月7日の朝。ちゃんとしたアプリは作れないことは明確だったのでPWAで簡単に作ることにしました。
そして完成したのがこれ。
リリースしました!
— Yui☁個人開発 (@yui_active) July 7, 2020
面白いと思ったら拡散してもらえると嬉しいです。
七夕にクイズと大喜利で遊べるアプリです。
登録も一切不要なのでお気軽にどうぞ。https://t.co/t13D80OmXL#七夕で遊ぼう
3日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/BYF6zr3ECG
まあ見るからにクソアプリなのですが、1日で作った割には面白いかなと思います。(自分に甘い)
flutter続き
引き続きflutterの勉強の続きをやります。
前回のflutterとfirebaseでのTwitterクローンは完成したことはしたのですが、firebaseが全くわからなかったので、とりあえずflutterのみを勉強し直すことにしました。
とりあえずここまで完成(flutter)
— Yui☁個人開発 (@yui_active) July 10, 2020
中身はif文で動くだけの仕組みです。(まだ仕組みできてない)
適当に作りすぎて性格診断のはずが3枚目に性格自己判断させているというw
5日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/RlWpYuwskk
めちゃくちゃ単純なクイズアプリを作りました。
一応完成させました。
クソみたいな性格診断アプリできた
— Yui☁個人開発 (@yui_active) July 10, 2020
中身は点数制にして独断と偏見で振り分けてる
6日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/H20Y9XreZd
自分のお仕事用HP作る
そういえば私お仕事用のHPないな?ということに気がついて合わてて作ることにしました。
web制作の案件でなれてたのですぐにできました。
自分のPRページ完成!https://t.co/BJxQUSfjLm
— Yui☁個人開発 (@yui_active) July 11, 2020
制作時間約5時間半です。
お仕事下さい。
6日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/q0x6ikfoz9
3つめのflutterアプリ
簡単なものですが3つめのflutterアプリを作りました。
進捗@kboy_silvergym さんのYouTube見て作った
— Yui☁個人開発 (@yui_active) July 12, 2020
合計3つ簡単なアプリ作って、大体見た目部分は理解してきた気がするので、次からfirebaseと繋いでいきたい。(最初に先走ってfirebaseと繋いだ結果分からんくなったので、今度は慎重にいきたい笑)
8日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/xZBLImTgkX
これでなんとなくflutterの見た目部分だけはなれてきたような気がします。
Vue.jsの案件が決まる
そんなこんなしてるうちに案件が決まりました。
初の準委任契約です。
転職できないしもうニートで生きてくかと思ってたけどコードレビュー付きのwebアプリ開発案件決まった👀
— Yui☁個人開発 (@yui_active) July 15, 2020
過去に新規メディアの共同開発してたことと趣味で星占いAPI作ってたことが評価されたらしい。
なにかしらはしとくものだな。
10日目#100日後に話題のwebサービスを立ち上げるワニ
※余談ですが、私はもともと大阪で旅行会社で働いていて、エンジニアとして内定が出た&私生活の都合上東京に行くことになったので仕事を辞めて8月から東京の予定でした。が、6月にコロナの影響で内定取り消しになってから転職活動がうまくいってませんでした。
もうニートになるしかない!とやさぐれてたので助かりました。
とはいえ、Vue.jsははじめて触るので、flutterそっちのけで勉強することにしました。
Vue.jsで初アプリ完成
とりあえずUdemyで良さそうな教材を買って、Vue.jsを勉強してたら2日ぐらいで初アプリ完成しました。
Vue.jsは簡単にレイアウト整っていいですね。
このときにちょっとだけfirebaseを再度使いましたが、前にflutterで若干使ってたので、認証機能ぐらいは簡単に実装できました。
案件で必要になって一昨日から急遽勉強してるVue.jsの進捗状況です。
— Yui☁個人開発 (@yui_active) July 17, 2020
データの編集、更新が出来るようになった。
(ありがとうUdemy)
12日目#100日後に話題のwebサービスを立ち上げるワニ https://t.co/4GHRJ6ZKVK pic.twitter.com/g8u3x0kkhd
ビルドした!!
— Yui☁個人開発 (@yui_active) July 17, 2020
Vue.jsでの初アプリ(なお練習用に作っただけのUdemyで見たままのアプリ)
ログイン、連絡先の追加、編集、削除が出来る。
12日目#100日後に話題のwebサービスを立ち上げるワニ https://t.co/45Ci5CIAm2
Vue.jsをもっと勉強する
上記ではVuetifyを入れてサクッと作っただけだったので、細かい部分の書き方はわかってませんでした。
なので、再度初心に戻ってv-bindの動きなどを確かめます。
なんとなく動きがつかめてきた
— Yui☁個人開発 (@yui_active) July 17, 2020
v-onで書けるの便利だな
13日目#100日後に話題のwebサービスを立ち上げるワニ https://t.co/WOa3971y2W pic.twitter.com/2ZT1VjXzeM
埋め込みやスライダーなどもできるようになりました。
このへんで、公式ドキュメントの読み方とかがなんとなくわかってきます。
Vue学習しんちょくです。
— Yui☁個人開発 (@yui_active) July 22, 2020
Youtube埋め込みとスライダーなど出来るようになったよ
16日目#100日後に話題のwebサービスを立ち上げるワニ https://t.co/I8BaSpOSSn pic.twitter.com/vZgvwTO2Xo
flutterほとんどしなくなる
flutterも地道に進めてたんですが、ちょっと案件の都合上時間が取れなくなり(言い訳)この発信の後はflutterに触ることはほとんどなくなります。
でも結構楽しかったので、またちゃんと勉強して今度こそはアプリを出したい!
flutterも地道に勉強進めてます。
— Yui☁個人開発 (@yui_active) July 23, 2020
難しくてUdemyで同じところを5回ぐらい繰り返して見てる・・。
18日目#100日後に話題のwebサービスを立ち上げるワニ https://t.co/9lENKppbVq pic.twitter.com/zvbMR6hpXC
素のJavaScriptを使ってゲームを作る
Vue.jsで案件を進める中で、そもそもJavaScriptの知識が足りないと感じたので、基本から勉強し直すことにしました。
ちゃんと修正しました。
— Yui☁個人開発 (@yui_active) July 29, 2020
でもレイアウト整えるの疲れてしまったからもう良いかな・・。笑
23日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/mPl2n2LesE
一応github pagesで公開はしたんですが、途中でやめた関係でかなりの糞レイアウトなので、見るときは自己責任でお願いします。(https://yuikoito.github.io/game/)
でもこんな単純なものですが、結構学びになることは多く、実際の案件では結構書けるようになりました。
英語でBot作る
こうしてる間に登壇に呼ばれたので参加する用の簡単なBotを作りました。5分ぐらいで作ったので本当にクソ。
多分わりと会話にならないことも多いとは思いますが、お暇な方ぜひ英語で話しかけてください。
— Yui☁個人開発 (@yui_active) August 1, 2020
作業時間5分ぐらいの本当にスクリプトを埋め込んだだけのものです。https://t.co/ok2bBfumur
26日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/yGIiUKCAN4
TODOアプリリリース
puzzllyさんで講座を出すことになったのでそれ用の簡単なTODOアプリを作りました。
todoistみたいなの作りました。
— Yui☁個人開発 (@yui_active) August 12, 2020
シンプルながら結構デザイン組んだので、少し効率の悪い作り方をしてしまったけど良い勉強になった!https://t.co/NCnOxwWcjd
37日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/F99c2b4aME
ネコリスリリース
またまた遊びでJavaScriptを使ってテトリスならぬネコリスを作りました。
(PCのみ対応)
このときにcanvasをはじめて使いました。簡単に表示ができて面白いですね。
まったくレイアウト整えてないけど、とりあえずあげときます。
— Yui☁個人開発 (@yui_active) August 21, 2020
よければ遊んでね。ネコリス。
PCの←→↓キーで移動します。↑を押すと回転。
消すごとにだんだん速くなる。
46日目#100日後に話題のwebサービスを立ち上げるワニ https://t.co/Jyi7QWymiL pic.twitter.com/9J3GHgEH0z
これを利用してのいのちのテトリスも。
いのちのテトリス作ったぜ
— Yui☁個人開発 (@yui_active) August 26, 2020
50、51日目#100日後に話題のwebサービスを立ち上げるワニ https://t.co/PVthmWGRSK pic.twitter.com/2Hfd4E3Zgu
しばらく発信サボる
この辺あんまり詳しく書くとあれなので書きませんが、受けた案件が炎上しまして。笑
本当に時間が取れなくなったのでいのちのテトリスの後3週間ぐらい発信をサボりました。
最後につくるアプリ決める
やっぱこのままじゃだめだと思って最後につくるアプリを決めました。
こういうの作ることにした。
— Yui☁個人開発 (@yui_active) October 2, 2020
100日間に合わんなあ・・w
82〜87日目#100日後に話題のwebサービスを立ち上げるワニ pic.twitter.com/a524HvgObh
ほんやくんリリース
webアプリが間に合わないと思ったので、せめてということでLineBotをリリースしました。
結構話題になって嬉しかったです。
多分制作時間は10時間ぐらいですが、時間をかけたアプリが偉いわけじゃない!と自分を奮い立たせて発信しました。
(内心はこんなのリリースしてごめんなさいという気持ちだった)
画像を送信するだけで、勝手に画像内の言語を認識して何でも日本語に変えてくれるLineBot作りました!
— Yui☁個人開発 (@yui_active) October 5, 2020
英語、中国語、ドイツ語、フランス語あたりは動作確認してます!(他の言語でもOK)
良いな〜と思ったら拡散してもらえると嬉しいです!
これからwebアプリ化もします! pic.twitter.com/PrAG1o1gHO
#Pic Translatorリリース
絶対に間に合わないと思ってたアプリですが、無事リリースできました。
ボタン一つで写真から文字起こししたり、母国語に翻訳するアプリ作りました!!
— Yui☁個人開発 (@yui_active) October 15, 2020
ボタン一つでコピー可能、多言語に対応してます。
登録不要で利用できます。#PicTranslator
拡散してもらえると私が喜びます!https://t.co/A28rXwMMB5
100日目#100日後に話題のwebサービスを立ち上げるワニ
こちらに関しては詳細はリリース記事に書いたのでよければ読んでください。
これにて、100日間の挑戦は終わりました。
できるようになったこと、できなかったこと
できるようになったこと
- React、TypeScript、Vue.jsを使って働くことになった
- React、TypeScript、Vue.jsが何となく分かるようになった(仕事で使った)
- 月収100万超えた(上記の案件により ※1ヶ月だけなのでボーナス月)
- SSRとCSRが理解できるようになった
- 簡単なwebアプリなら1週間ぐらいでリリースできるという自信ができた
- API接続完全に理解した
- 公式ドキュメントを読めるようになった(今まではわからなさすぎて途中で眠気が来てた)
できなかったこと
- 結局ネイティブアプリリリースできなかった
- flutter理解できなかった
- firebase認証機能しかわからなかった
感想
上記の通り、大したことはできなかったので、正直悔しいです。
ただ、私生活も入れるなら、少なくとも経済的には死なない程度のお仕事はエンジニアとして入るようになったので、自分に甘く、まずまずの結果だったということにしておきます。
もし次回するとすれば、次は100日間で写経をする、とか、●●のアプリをリリースする、とか、何かひとつの目標に対して進めたいなと思います。