ウェブカツ

初のWEBサービス公開「絵本の時間」制作後記

さて、ブログ更新が久々になってしまったぞ。
ここ最近は、初のWEBサービス作りに没頭しておりました。

「いったん完成」にした作品はこちらです ⇨ 「絵本の時間」

使ったもの:
・HTML/CSS
・JavaScript(JQuery)
・PHP
・Ajax

フレームワークを使わず、素のPHPだけで書いてます。
CSSに関しては、超便利という噂のBootstrapもflexboxもCSSグリッドも使わず、原始的なフロート(←言い方おかしい?)だけで組んでます。(パーセントでサイズ指定+メディアクエリで最低限のレスポンシブ対応)

何故なら、ウェブカツではまだ出てきてないから。
(そのへんHTMLCSS中級編以降で出てくるらしいです)

なので、そりゃ〜もう大変でしたよ。
途中、何度も投げ出しそうになりました(笑)

とにかく基礎練をみっちりやるのがウェブカツの特徴で、便利なフレームワークに手を出すのはその後にしろ!っていうのがウェブカツ(鬼顧問)の方針なんです。。自分で1からWEBサービスを作り切った後だからこそ、フレームワークの必要性もありがたみも分かるし、応用も効くんだってさ。

サーバーをどうするか

練習用に作ったアプリなのでべつに公開しなくても良かったんですが、公開の手順を一通り体験してみたかった事もあって、やってみました。

↓このへんの作業の事ですね。
・レンタルサーバ契約と、ドメイン取得
・データベースのお引越し(ローカル開発環境からサーバへ)
・ソース一式のアップロード
・ローカル環境では出なかったエラー対応
(恐れていたほど時間はかからず、2日ぐらいで終わりました。)

レンタルサーバ借りると固定費が掛かってしまうのが考えどころですが、まぁ今後作っていくその他諸々作品群をいろんな方に見てもらうための作品置き場があった方が良いかなと。
次の「WordPress部」に挑む時にも、サーバ環境で手を動かして実験しながらやった方が分かりやすいだろうし。

前々から使ってみたかったXSERVERへ。
(ちょうどキャンペーンやっててドメイン1個無料プレゼントでした)

ちなみに今この個人ブログはwordpressで、ロリポップ!というレンタルサーバを借りています。「安い」という理由だけで選んで、一年以上使ってきましたが、まぁだいぶ失敗でしたね。そのうちこれもXSERVERへ移そうと思っています。

ロリポップからXSERVERへ乗り換えて感じるのは、
・速度が速い気がする(未検証)
・操作パネルのUIが分かりやすい!(ここが実は重要だった)
・ググった時に出てくる情報量が多い

やっぱり結局メジャーなサーバ使っておいた方が良いですね。
XSERVERは初心者が選んでまず後悔しないサーバだと思います。

公開して良かったと思う事
・多くの人に見てもらえるし、実際動かしてもらえる
・サイトからメール送信の確認ができる(ローカル環境だと上手くいかなかった)
・他の端末・ブラウザでの実際の見え方を確認できる
(Windowsだとこう見える〜スマホだとこう見えるのか〜というのが、実機で確認できる)

書籍検索API

ところで絵本の書籍情報をDBへ登録する作業ですが、最初は手作業でポチポチやってまして、途中で

めんどくさ!!

となり、ググってみたら、なんと便利なものがありました。書籍のタイトルを渡すだけで、「著者」「出版社」「出版年月」「説明」「サムネイル画像」「ISBNコード」など、もろもろの情報をJSON形式で返してくれる無料の書籍検索APIなどという便利なものが、世の中にはあるんですね〜。先に探せば良かった・・・
そしてISBNコードがあれば、Amazonリンクも作れるんですね〜

教訓:まずググろう

せっかくなので、
絵本登録リクエスト画面からリクエストを受けたら
⇨タイトルから書籍検索APIを呼び
⇨返ってきたもろもろ情報をDBへレコード格納
ここまでを自動化してみました。
(一応運営者側で目視確認後、フラグを変えるだけで公開可能に。)

ぜひリクエストしてみてください。

これからWEBサービス部へ挑む人へ

WEBサービス部のアウトプットとしてオリジナルサービスを作る場合は、シンプル設計・最低限の機能に絞って、とにかくいったん作り切る事を優先した方がいいと思います。それだとつまらないかもしれないですが、実用性とか、差別化とか考えだすと、マジで終わらないです。想定外のところで色々と詰まるし、自分の予想よりはるかに時間掛かると思います。

「私でもみっちり2ヶ月掛かった」っていうと嫌な言い方ですが、一応私それなりにプログラミング経験ある方だと思っているんですよ。(経験年数の割にはショボショボなスキルしか無いけど)

なので、完全初心者スタートの方だと、どう考えてももっと時間掛かると思うんですよね・・・

本当はやりたかった事

・投稿に対するいいね機能
・チャット交流機能
当初はここまで作る予定でしたが、途中で見切りを付けてスパッとやめました。

最終的にこうなりました

画面(全12画面)
・ユーザー登録
・ログイン
・TOPページ(絵本一覧検索)
・絵本詳細
・絵本登録リクエスト
・マイページ
・プロフィール編集
・他人のページ
・パスワード変更
・パスワード再発行依頼
・パスワード再発行(認証キー入力画面)
・退会

DB(4テーブル)
・ユーザー
・絵本
・レビュー
・お気に入り

ウェブカツの後半を学んだ後、直したり肉付けしたりしていくかもしれません。

まとめ

3ヶ月前、JavaScriptなんて書いた事もなく、「PHPって、HTMLの親戚だよね?」ぐらいに思っていた私が、WEBサービスが動く仕組みをざっくり理解して、1人でここまで作れるようになったのは、ウェブカツのおかげです。

以上、だいぶ雑ですが、終わり。