テニスプレイヤーがLaravelでWebサービス作ってみた

自己紹介

恥を晒して生きていくのも悪くないと思います。
普段はITインフラの運用を行っています。

作ったもの

Teniguru Tennis&SNS

どんなサービスか、詳しくはテニスプレイヤーがLaravelでWebサービス作ってみた_サービス編に記載しました。

テニスが趣味なのでテニス関連のサービスを作りました。私自身は下手です。
テニスプレイヤーは参加したい練習会を探して自由に参加できます。コートを確保したけどテニスしてくれる人がいない！という方は自分で練習会を主催することができます。
似たようなサービスもありますが使いづらかったりするので自分で作ってしまおうと考えました。

制作期間

「こういうものを作ろう」と思い至ってから今の状態になるまでは 4ヶ月 かかりました。
Laravelはもちろん以下に示す使用技術はひとつも触ったことがなかったので勉強しながらです。事前知識がある方なら1ヶ月くらいで同じようなものができてしまうのではないでしょうか。

使用技術

今後、個々に詳細な記事を上げる予定です。
基本的に最新版を使っています。

フロントエンド

jQuery3.2

jQuery最高の教科書を使って学びました。ズブの素人が入門して、それなりに使えるようになれる本です。フルカラーで楽しいです。この本のお陰で表現の幅が物凄く広がりました。ネットに転がってるコードをある程度理解してからコピペできるようになれます。

Masonry.js + imagesLoaded.js

Masonryは画像などを等間隔に並べてくれるプラグイン、imagesLoadedは画像をロードした後に表示させることでレイアウトが崩れるのを防いでくれるプラグインです。超有名どころみたいですね。上記の教科書でも紹介されていました。

DataTables

表をいい感じに表示してくれるjQueryプラグインです。Bootstrap4に完全対応しており、専用のマニュアルもあるなど親和性が高いです。

Bootstrap4

2018年1月に出たCSSフレームワークです。こいつのお陰でCSSやjsを全く理解していなくても見た目がいい感じのサイトを作成できます。jQueryでCSSの知識が必要なので結局勉強するハメになりました。ズルよくない。Bootstrap4のCardsというコンポーネントとMasonry.jsの相性が凄く良かったです。 ブラウザの大きさを変えると練習会のパネルがうねうね動きます。他にも色んなところで使っています。
個別記事にしました。

FontAwesome

Bootstrap4推奨の絵文字ライブラリです。無料版でも多数の絵文字が使えます。FontAwesomeを眺めて使いどころを妄想するのが癒しです。

バックエンド～ミドル

Laravel5.6

Laravelのお陰でアプリ開発ができたようなものです。PHPフレームワーク Laravel入門で自習しました。MVCフレームワークというものに初めて触れましたが入門には丁度いい難易度かと思います。この本を読んだ後、日本語公式サイトで深掘りしてから開発に取り掛かればもう少しスムーズだったかなとは思いました。これからWebバックエンドを始めようと思っている方はLaravelがおすすめです。

MySQL5.7

特別なことはしてないですが、絵文字でも文字化けしないように文字コードはutf8mb4にしたほうがよいです。

インフラ

Freenom

https://www.freenom.com/ja/index.html
無料でドメインを取得できるサイト。トップレベルドメインはマイナーなものしか選べないが、機能的には問題ない。
ドメインには有効期限があるので、定期的に更新が必要。

nginx

php-fpmやOCSP、gzip圧縮、HTTP/2など Webサーバ側で出来る、サイトの表示をできるだけ効率的に、速くする仕組み を簡単に使えます。流行りのWebサーバです。
nginxでphpとLaravelを動作させるのにconfを多少いじる必要がありますが、組み合わせ自体はスタンダードなのでいくらでも情報がでてきます。
nginxでのOCSP、gzip圧縮、HTTP/2設定について書きました。

GCP(GCE)

AWSより安い。最初はロリポップ！というレンタルサーバを使っていました。月額500円で利用でき、面倒なphpやnginxのインストールも必要ないので初めはこちらでもいいかもしれません。

Let's Encrypt

3ヶ月の期限付きですが、無料でSSL証明書を取得できます。更新も可能です。さくらのナレッジが正にnginxへLet's Encryptを導入する手順なのでこれ通りにやりました。

その他

アフィリエイト

A8.net

正直何でもよかったです。スマホ向けに最適化させたかったのと、今回のCards+Masonryに相性のいい広告を探していました。バナーサイズが色々選べるので今回のサイトにマッチすると思い採用しました。

Google AdSense

設定しているのはスマホで閲覧すると画面下に開閉可能な広告が出るものです。毎回出るわけではなく、ユーザがイラつかない程度に出てくれるそうです。
他にも、AdSenseが自動でサイトの構造を把握して、それらしい場所に広告を表示してくれるオプションもあります。自分でコードを書く必要がないのでお手軽ですが、表示してほしくない場所に表示されたりもするので注意が必要です。なおAdSenseの審査には10回くらい落ちました。

googleに広告を出す

google AdWords

こちらはgoogleにお金を支払って広告を出すものです。googleで「テニス SNS」「テニス　コート」などで検索すると広告が表示されます。クリック課金なので、表示されただけでクリックされない場合は課金は発生しません。月々いくらまで遣うか自由に決められるのもよいです。

ソースコード管理

BitBucket

無料で使えるソースコード管理ツールです。ローカル環境で開発したコードを本番へ簡単にデプロイできます。本来はチームで開発するときに使うツールです。GitHubでもいいのですがオープンソースにする意味も勇気もなかったです。
信じられないですがこれを使うまでWinSCPでちまちまコピーしてました。

課題

コンバージョン皆無。
このサービスでコンバージョンと言えば、練習会が作成されて、プレイヤーが参加して、実際に開催されるまでの流れになります。SNSなので人が増えないと仕方ない部分はあります。AdWords出しっぱなしにするか自作自演くらいしか思いつきません。よい方法を模索中です。

終わりに

パソコンが一台と、実現したいアイデアさえあればすぐに実践できるWebは本当に魅力的です。 記載した技術を全部使う必要は全くないので、とりあえず気になるところから触ってみてほしいと思います。