一人でWebサービスを開発した話 – とらぷぐ.com編
どもども、プログラマとは名乗れないレベルの弱小趣味コーダーが一人で頑張ってPHPを使いWebサービスを開発した記録を残しておきます。あまり参考になるようなものではありませんが、使用した言語・技術についてまとめようと思います。
Contents
自己紹介
このような開発記の記事のお約束的な感じで、まずは自己紹介をしておこうと思います。
自分は、学生コーダーとして趣味でプログラミングをしている感じのニート(予定)です。今までの開発歴としましては、javaでのAndroidアプリ開発やC#での超簡単なwinアプリ開発などです。ほかにもいろいろ手を出しましたが、何かそれっぽいものができるたびに飽きちゃって続かない感じですでした。そんな自分が今回Webサービス開発に挑戦しました。
作ったもの紹介
次に、何を作ったのかを紹介します。
今回作ったWebサービスは、「とらぷぐ.com」というTRPGのキャラクターシートをオンライン上で管理し、編集・検索・共有しようっていう感じのサービスです。ちなみに、「とらぷぐ」はTRPGを無理やり読んだときに思いついた名前です。覚えやすいと思いますがどうでしょうか…。
開発に乗り出した理由
今回開発に乗り出した理由は大きく分けて2つあります。
まずは「このサービス」を作った理由になるのです。TRPGをよく遊ぶ人ならご存知と思いますが、すでにオンライン上でキャラクターシートを管理できるサービスは存在します。しかし、対応しているのが特定のシステムだけだったり、見た目が分かりづらいものだったりと、個人的に完全に満足できるほどのものはありませんでした。そんな背景から(最悪自分用でもいいから)簡単にキャラクターシートを管理できたらいいなぁと思って開発しました。
もうひとつの理由は、サービスを「つくった理由」になるのですが、ネットで「○○開発してみた」や「xxを開発して思ったこと」といった記事を読んでいるうちに自分でも作りたい!!となるわけですよ…。特に作りたくなったのが、Webサービスなんです。で、気づいたらなんか一つのサービスが誕生していました。
という感じの単純な理由で開発に乗り出しました。
余談ですが、こんな開発したい熱バリバリの状況になったのが卒論真っ只中で、しばらくモンモンと数か月過ごしていました。結局卒論が終わる前にサービスが出来上がっていました。(バグつぶしを含めたら卒論提出後になるけど…。)卒論?知らんなそんなもの。
使用した言語・ライブラリ・技術
次に使用した技術関係を超簡単にまとめていきます。ちなみに、言語やライブラリ、CMS、アプリケーションなど様々な種類の単語がごっちゃになっていますが、目をつぶってください。
html/css/javascript
これらはWeb系開発なら避けて通れない道だと思います…。特別書くこともありません。
Bootstrap
Bootstrapは最近(もう「かなり前」から?)たくさんの人が使っているCSSテンプレートだと思います。デザイナーでないセンスが乏しい自分のような人でもそれっぽいサイトを作ることができます。グリッドシステムをはじめとするクラスが定義されているので、タグに対応するクラスを付与するだけでデザインがなされるという、かなり使い勝手はいいツールだと思います。…が、Bootstrapを使用しているサイトはどうにも同じようなデザインになってしまうという問題があります。本サービスもかなりBootstrap臭のするデザインになってしまっています(いつかは脱臭したいなぁ)。
PHP
PHPはサーバーサイドの言語ですね…。Webサービスのサーバ側というと、このPHPかRuby(on Rails)もしくはjavaが選択肢として挙げられるしょうか。今回PHPを採用した理由は、「CMSとしてのWordPressを使ってWebサービスを作ろう」という隠しテーマを掲げていたためです。ローカルの開発時はPHP5を使用していましたが、運営開始時にPHP7なるものがあることを知り、サーバではPHP7で動いています。
WordPress
WordPressはブログを作るためのアプリケーションというイメージがあるかもしれません。実際、この備忘録サイトもWordPressで作られていますし…。しかし、WordPressは「投稿」や「ユーザ」を管理するのが得意なんです。つまりこれをWebサービスに活用すればいろいろな手間を省くことができちゃうんです。ﾑﾑｯ!!実際にネットサーフィン(死語?)をしているといろいろな方がWordPressを使ってWebサービスを開発しています。
本サービスでは、ユーザの管理と作品データの管理をWordPressに任せています。さらにはWordPressのプラグインを用いることで、細かいところでスクラッチしないで済んでいます。個人で開発・運営する分にはこのくらいゆるくやってもいいですよね？
XML
XMLはHTMLと同じようなマークアップ言語ですが、本サービスでは、ユーザさんから登録してもらったキャラシートの保存に使用しました。XMLってあまり繁盛していないのか、参考文献が少なく、構造もよく分からないで作ってしまいました…。XMLってオワコンなのでしょうか？XMLの現状やXMLに変わる新技術等、何か知っている方はどうか教えてください。
追記 2017/06/16
現在は大改修をしたため、BootstrapとWordPressは排除し、全てフルスクラッチのものに置き換えてあります。ユーザ情報とかを新体制に移動させるのが大変でした。
(追記 おしまい)
画像関係
GIMP
GIMPは画像作成・編集に使用しました。これはフリー版のフォトショといえるほどの高性能画像ソフトです。自分のようにニートでバイトもしていないような人にはもってこいのソフトだといえると思います。というよりアドビ製品が高すぎるんです。もし開発したサービスが大当たりしたらアドビ製品を使い倒してやるんだ…。
PowerPoint
もう一つはPowerPointです。なぜ急にプレゼンソフト？と思われそうですが、個人的には、PowerPointはとても使いやすいデザインソフトだと思います。図を自由に動かせる、xyzのどの軸でも回転できる、図形同士の角をくっつけやすいという面からとても使い勝手がよかったです。簡単な図形を組み合わせるようなアイコンの場合はかなり有効だと思います。(もっと使いやすいソフトがあったら教えてください。)今思うと、オフィスソフトも普通に高いか…今回は学生特権で使えました。
今回のWebサービスのサイコロ型っぽいアイコンは、PowerPointでアイデアを練りその後GIMPでちょちょいとして完成させました。
閑話ですが、このサービスの紹介PVもPower Pointを用いて作成しました。やはり、簡単な図形を扱わしたら最強だと思います。(もっと使いやすいソフトが(ry )
さくらのVPS
今回開発したプログラムを稼働させているのは「さくらのVPS
」さんの1GBプランです。はじめてのVPSということもありまして、色々躓くことはありました。しかし基本的な部分はさくらさんで用意されていますし、みんな大好きGoogle先生で聞いてみれば、たくさんの先駆者さんが書いてくださった参考文献が大量にあるので、そこまで苦しまずにすみました。ちなみに、サービスの運営環境はCentOS6+Apache+PHP7+mysqlの基本構成です。
ConoHa (追記 2016/06/16)
現在はConoHaというVPSでサービスを運営しています。理由としては、まずは自分が運営している他のサイトが全てConoHaで運営しているため、統一したかったというのがあります。統一する意味は明確にはありませんが、一つのコントロールパネルで自分のサイトが並んでいるのがロマンに溢れていたためそうしました。もう一つの理由はさくらさんのサーバーではマシンリソースを持て余していたので、より低スペックで安価なものに変えたかったからです。現在使っているのはConoHaの512MBプランという最低プランです。最低プランではありますが、本サービスを運営するには十分です。お値段も一ヶ月630円とかなり安価です。
(追記 ここまで)
お名前.com
本サービスのドメインはお名前.com
で取得しました。こちらはほぼほぼ説明不要と思いますが、おそらく日本最大手のドメインポータルサイトです。特にこだわりがなければとりあえずここで取得しておけば問題ないと思います。
まとめ
今回は初めてのWebサービス開発ということで、プログラミングだけでなく、サイト全体やアイコンのデザイン、ユーザビリティ(出来栄えは微妙ですが…)、そしてセキュリティとなかなか大変でした。しかし、今回は作りたいものを作っていたため、最後までやる気を持続させることが出来ました。
これからもちょっと機能追加を考えています。また、皆さんが使っていくに連れバグが出てくるはずなのでそれの修正を頑張っていきます…。というわけで、これからとらぷぐ.comをよろしくお願いします。