読者です 読者をやめる 読者になる 読者になる

毛の生えた素人だけど2ヶ月かけてチャットのWebサービスを作ってみた

自己紹介:自分

簡単なandroidアプリ作れるくらいの趣味プログラマー。htmlとcss手打ちするくらいはできるレベルの素人。

 

プログラミング経験ほぼなしの初心者が「作ってみた系記事」に影響を受けているうちにずるずると開発を継続して作った話です。

作ったもの

これ http://tri-chat.net/

f:id:FRISKER:20151120225418p:plain

サービス名はTriChat、3人でテキストチャットが楽しめるというもの。簡易な掲示板機能も付いている。

製作開始から公開までの期間

2ヶ月+数日

 

環境

レンタルサーバさくらのVPS  (サーバ移転しました)→ GMO クラウドVPS

OS:Ubuntu

サーバ:apache2

言語:PHPjavascript

データベース:mysql

デザイン:bootstrap3

 

あと開発にはeclipseを使った。

 

なぜつくったか

Webサービス開発に興味はあったもののプログラミングはあまり得意ではなかったので「あんなん無理!!」と諦めていたが、いわゆる”素人だけどWebサービス作ってみた”系の記事を読んでいるうちにその気になってしまった。

 

もともとhtmlとcssで借りたサーバにホームページを作るくらいはできたし、プログラミング方面ではandroidキッチンタイマー作ってドヤ顔できるくらいの知識はあったので「ちょっと頑張ればもしかしたらできるんじゃね?」と甘い考えで挑戦することを決意。

 

それで「何つくろうか?」と思案した結果、もともとチャットが好きで暇なときなどによくやっていたのでチャットに決定。

 

開発開始前に毎日1時間2週間ほどドットインストールhttp://dotinstall.com/phpjavascriptのお勉強。

 

まずはアイデアをまとめた

匿名で登録なし、ランダムにマッチングして3人でチャットできるサービス。

 

ユーザはランダムにチャットルームに割り振られ、3人揃った時点でチャット開始。テキストエリアに文字を入力し発言ボタンで発言。退出ボタンで退出。一人退出しても二人残っていたらチャットは継続。最後の一人になった時点でチャット終了。

 

あと掲示板で伝言機能もつける。

 

技術的には

 websocketを使った。参考にしたのはこちらの記事:PHPでWebSocket - demouth::blog

 

当初は掲示板をデータベースとphpで作った延長線上でチャットも作ろうとした。掲示板ベースにjavascriptでちょちょっと部分読み込みにすればなんとかなるだろうと。

 

しかし発言があるたびにいちいちデータベース呼び出して書き込んで参加者全員に再読み込みするのは非効率すぎる。

 

なによりmysqljavascriptを使ったやり方では退出時の処理がうまく行かなかった。

 

javascriptでブラウザを閉じるボタンを押した時のイベントでシグナルを送ってサーバ側で退出の処理をしようとしたが、閉じるボタンを押した時以外の終了などなんらかの理由でシグナルが送られない場合の退出処理ができなかったためだ。

 

負荷や退出時の処理を実現しようと四苦八苦した結果、websocketを使えば問題が解決できそうなことに気付いた。

 

websocketというのはクライアントとサーバ間で双方向通信を行う技術のことで、比較的新しい技術だ。これによってデータベースを使わずにユーザ同士のメッセージのやりとりが可能になり、リロード連発戦術が原因の負荷が軽減できた。またサーバ側からクライアントであるブラウザの死活確認が出来たため、退出時の処理も安定して行えるようになった。

 

自分の中ではwebsocket導入までの間の、phpとデータベースとjavascriptで「掲示板もどきチャット」を抜けだそうとしていたところが一番の山場だった。

 

デザイン

今風のポップで明るくマットな感じに仕上げようと思った結果bootstrap3を使う事に決定。

uiも今風にあわせシンプル至上主義になびいてみた。

 

イメージ的にはLineっぽい吹き出しで3人のコメントがどんどん流れるものにしたかった。

 

使い方は「わかりやすさ」最優先に

いかにユーザが迷わないようにするかが一番のポイントだった。来てくれた人を迷わせてはいけないので、選択肢は少なく、なにをすればいいか一目瞭然になるようにつくりこんだ。

 

実際の画面

訪問ユーザの導線を意識したトップページ

トップページ

f:id:FRISKER:20151121001859p:plain

 

大きく「チャットを始める」ボタンを表示。掲示板の一覧ページとスレッド作成ボタンも大きく表示。

 

チャット画面

本人は左、相手は右。ユーザはそれぞれ緑、赤、青の三色でコメントが区別される。

cssで吹き出しっぽくするのにかなり手こずった。

 

f:id:FRISKER:20151121002535p:plain

 

 チャットが嫌になってもボタンひとつで退出できる

深夜のテンションでおかしくなった人と出会っても左下の黄色い退出ボタンを押すだけで・・・

f:id:FRISKER:20151121002818p:plain

 

この通り!簡単にチャットが終了できる。

f:id:FRISKER:20151121002926p:plain

「次の相手を探す」ボタンを押すとまた次のチャット相手とおしゃべりができる。

 

実際にやってみて素人がwebサービス開発をするということについてわかったこと

実際にプログラミングしている時間自体はあまり長くなく、調べ物・環境の構築・バグ取りがほとんどだった。

 

そもそも作りたいと思っているWebサービスに必要な技術にどの言語が適しているのか調べる時点で挫折しかけた。おそらく他の開発に挑戦した人も自分と同様に「Java?PHP?テキスト中心ならPerlがいいらしいけど、Rubyとかいうのも人気みたいだし・・・」と言語選択から右往左往するという経験をしたはず。

 

開発に挑戦する者の挫折ポイントの8割はきっと開発環境構築

ひと通り言語やデータベース、サーバなどについてアイデアがまとまっても油断はできない。最初の難関が待ち受ける。開発環境の構築である。

 

計画を建てて調べ物をしている段階では極端な言い方をすると日常のネットサーフィンの延長なので気楽なものだが、実際に環境を構築する段階から作業のハードルが跳ね上がる。

 

環境の構築は「あれ?PHPってどんな環境用意すればいいんだっけ?」「apache?confファイルどこ?ドキュメントルートも迷子だよ?」と最もイライラが募るポイントでもある。

 

実際の開発自体は全く進展していないため充実感も得られにくい。

 

実際に開発が始まって

サーバなりPHPなりmysqlなりインストールしてパス通して、環境が整ったことを確認してやっと実際の開発に取り掛かれる。ここまでかかってやっと本当の意味での開発のスタートである。長かった。

 

実際に記念すべき開発スタートを切って、実際に手をつけ始めて初めてわかることが一つある。それは一般的な開発のイメージといえばひたすらキーボードをカタカタ打ち続けている姿を想像するが、実際には違うということだ。

 

なにせ現実には調べ物とソースを眺めている時間がほとんどなのだ。

 

ソースコードとにらめっこ→数文字修正して実行→エラーor思い通りに行かない→ソースコードとにらめっこ→数文字以下略・・

 

の繰り返しである。

 

何時間も躓いた挙句、エラーの原因が;や"や>の打ち忘れ消し忘れであることは少なくない。

 

そしてエラーが解決したら再び調べ物である。不毛だ。

 

ついに完成、満を期して公開・・・のつもりが

ローカル環境で実装とひと通りのテストを終え、今度は家庭内LAN環境につながったスマホからPCから接続しチャットがちゃんと機能することを確認してドヤ顔になる。

 

完成した満足感と胸の高鳴りを抑えながら、最後の作業が待っている。本番環境への配置である。

 

ローカルとは違い、今度は公開用の環境である。サーバのレンタルにドメインの取得など、開発とは別にやらなければならないことはまだたくさん残っている。

 

実際にレンタルサーバを借りる段階でも用途に沿わないサーバを借りるなど、いくつかの失敗をした。(最終的にさくらのVPSで落ち着いたGMO クラウドVPS

 

自分の用途に合ったサーバを借りた後も、設定でひたすらコケる。いままではローカルの環境で開発していたが、今度は外部のサーバである。

 

外部のサーバの場合ローカルと違い100%ターミナル(映画とかでハッカーが眺めてる文字だけの画面)での作業である。

*環境によって異なります。

 

ひと通り設定が終わっても今度はセキュリティの問題が出てくる。

 

sshのポートを変えたりiptablesファイアウォールの設定をしたり、php側でもデータベースのためにプリペアドステートメントやら出力時のサニタイズやらで時間を取られなかなか公開にこぎつけない。

 

安定してサービスを続けるためにサーバ側でプロセスの死活管理も必要だったりと、想定していなかった未知の領域に足を突っ込んだ気分になってくる。

 

そして今また問題が・・

チャットサービスの根底に関わる問題が浮上した。

 

それはそもそも人がいないので「チャット自体が開始されない」という問題である。ウケるw

 

もし他のサービスであれば人が来ればサービスを提供できるが、TriChatはチャットサイトだ。新規サイトにユーザが来ること自体奇跡的なうえ、しかも同時来てチャットをしてくれなければwebサービスの提供自体が成り立たないのだ。

 

なによりの問題が自分の作ったWebサービスのコンセプト自体に根ざすものなのだが、TriChatは3人でチャットをするサービスだという点である。

 

一日に10人も来ないのに、同時に3人も集まるわけがない

 

ユーザが訪れてくれてもそこにあるのは「テスト」とだけ書かれて(僕が書きました!)虚しく放置された掲示板、そして「チャット相手を探しています」画面をひたすら眺め続けるというユーザ体験だけである。

 

調子に乗って「二人なんてフツーじゃん!一歩先を行って3人にしようぜ!!」と安易に思い至ったコンセプトに怒りすら湧いてくる。

 

これから作る人は最初の段階で完成後の事態をイメージしておくことが必要だということを忘れないでいてほしい。

 

webサービス立ち上げ後は集客の壁が、特にコミュニケーション系の場合は最大の砦である

自分はチャットだったが、facebookとかtwitterに憧れてコミュニケーション系のサイトを作ってみた他の作ってみた系の人たちもきっと初期集客という高い壁が立ちはだかったに違いない。

 

SNS系に限らずユーザ同士が交流することがメインのサービスは作る段階ではなく公開後が一番難しいところなのかもしれない。

 

最後まで読んでくれた方々に

長ったらしい上に読みづらい文章なのに最後までお付き合いいただきありがとうございました。

 

やってみると開発者気分が楽しめたり、環境構築で小学生の時のゲームのコントローラーを叩きつけたくなるあの時の気分を味わえたりと、山あり谷ありの時間を経験できるのでぜひみなさんも挑戦してみてください!

 

 できたもの:これ↓

 

本当に最後までありがとうございました。