■webサービスを作ってみたので紹介と公開までの流れ

はじめまして。

プログラミング初心者ながらwebサービスを作ってみたので、それの紹介と実際何を勉強して作ったのかについて書きたいと思います。

制作したサービス

Yowaii

偉人同士の年齢差を調べられるサイトです。

https://yowaii.com

昨今、偉人が登場するゲームが多くなり、私自身がそれらのゲームをプレイする中で、どのくらいの年齢差があるのだろう？と疑問に思ったため作ってみました。

年の差萌的なやつです。

誕生日ベースでの計算なので、認知されている年齢差と一歳ほどずれてしまうことがあるので、それについては日付を指定して再計算して合わせられるように今後したいと思っています。

使用している技術

html/css

javascript

ajax

php

作ってみた流れ

1.基本的な勉強

html/cssについては基本的な事が分かる程度、プログラミングについては本当の基礎の基礎がちょっとわかる程度ぐらいの知識しかありません。

まず、基本的な勉強についてはProgateで行いました。

知ってる内容も多かったですが、一番やりやすかったので・・・。

ドットインストールは契約して何個かやったんですけど、いきなり知らない関数とかをぶち込んできたりして挫折しました。

2.作りたいものに必要な技術を調べた

今までに自分で作ったことがあるのは、簡単な掲示板だけでした。

今回はそれとは全く違う技術が必要になるため、とにかくgoogleで検索しまくりどうやれば実装できるのかを調べました。

・年齢差を計算して表示する

・一気にたくさんの人を計算できるようにする

・画面変異なしで使えるようにしたい

初期に考えたのはこんな感じです。

3.実際に作ってみた

『画面変異なしで行うにはajax』など調べた情報片手にとにかくwebサービスを作り始めました。

基礎もめちゃくちゃやりこんだわけじゃないので、とにかく調べつつ、まるで英語の授業の翻訳の如く一つづつやっていきどうにか完成！

php,javascriptの関数やajaxの書き方など、ネットには古い情報もあってどう書けばいいのかわからないことも多く、そこはかなり困りましたね。公式のマニュアルもみたのですが難しい書き方で初心者にとっては結構つらいです・・・。

あと、年齢差を計算するプログラムができたところで、HTML/CSSでデザインも作りました。

複雑なデザインではないので、プログラムと比べてすんなりできたかと。

4.問題発生！どうやってデータを集めるか

なんとか形ができたわけですが、大事なことを忘れていたことに気付きます。

それが、どうやって偉人のデータを集めるのかということ。

仮想環境の中では１０人位のデータを入れて計算していたのですが、当然多くの人に使ってもらうのにそんな少ないデータでは対応できません。

はじめは、ゲームや漫画に出ている有名どころだけを集めようかと思ったのですがどうしてもデータが偏ってしまいますし、あまりおもしろくないような気がしたので、wikipediaから偉人のデータをあつめられないか？と思いその方法を考えることにしました。

ちょうど、wikipediaにはhttps://ja.wikipedia.org/wiki/%E6%AD%B4%E5%8F%B2%E4%B8%8A%E3%81%AE%E4%BA%BA%E7%89%A9%E4%B8%80%E8%A6%A7

歴史上の人物一覧

というページがありましたから、ここからデータを撮ってきたらいいんじゃないかと思ったんです。

最初は手入力でデータベースに入れようと思ったのですが、当然膨大なデータを手入力なんかやってられないため、どうにかプログラムで集められないかといろいろ調べた結果、スクレイピングという技術を見つけました。救世主思ったんです。その時は・・・。

スクレイピングについてなんにも知らないけど、これさえあればwikipediaから偉人のデータを大量に取得できるのでは？？？？と考え、スクレイピングについての基礎を調べ実際にターミナル上でPythonスクリプトを使い適当なwebサイトのtitleを取得することができたわけですが、よく調べてみるとwikipediaはスクレイピングしちゃだめらしく、ここで完全に開発がSTOPしました。

データをどうやって集めるか調べてるときの方が、webサービス本体を作るよりも大変だったような気がします。

wikipediaではdumpファイルというものを配信しており、wikipediaすべての情報が入ったファイルだそうで、これを使って一部のデータを取り出す方法の記事を書いてくださっている方はたくさんいたのですが、正直難しい内容過ぎて初心者には1mmも理解できませんでした…。

手入力で頑張るべきか、とにかく調べてdumpデータから取り出すためのスクリプトを勉強するべきか・・・。いろいろと悩み、質問サイトを使おうとしたり、なにかないかとgoogle検索しまくったりして時間を無駄にしていたわけですが、そんなとき一つのサイトを見つけたんです。

https://yakumobooks.hatenablog.jp/entry/2017/12/20/080000

MediaWiki APIを使ってWikipedia上の作家の生年月日＆没年月日を自動で取得する

神がいた。

5.自分が出来る技術で情報を集めた

APIを使い、帰ってきたデータの中から生年月日、没年月日を取得する。

私がやりたいことが詰まっていました。

とはいえそのままでは私の用途とちょっと違っていたので、調べてCSVファイルに出力できるようにしたり、正規表現を変更して多くの人に対応できるようにしました。

技術としては、javascriptで取得したデータをPHPに送り、PHPからCSVに書き込む形ですね。

本来ならターミナルを使ってバーっとできたら良かったのかもしれませんが、私が今できる技術でやろうとしたらこうなりました。

PHP使用のためにわざわざ仮想環境で作業したので、ちょっとめんどくさかったです。そしてcyberduckは落ちまくりました。

完成といくつかの問題点

情報をいれてたCSVファイルをmysqlに入れて、かぶったデータなんかを削除したことでなんとか完成することができました。

https://yowaii.com

自分が一番最初に想像した通りに作れたので個人的には満足度高い状態です。

ですが、作ってみて気づいた問題点がいくつかあります。

生年月日の間違い

wikipediaの記事は一人の人が書いているわけではなく、多くの人が書いているため、生年月日の書き方が結構違います。

そのためうまく収集できないところが結構ありました。

技術力がきちんとあればあつめられたのかもしれませんが、今の私ではここが限界です・・・。

できるだけ間違っているデータは消したり修正したりしましたが、完全にチェックできているわけではないのでそこをどうするかというのが大きな問題の一つですね。

登録されている人物

現在登録されてる人物は、https://ja.wikipedia.org/wiki/%E6%AD%B4%E5%8F%B2%E4%B8%8A%E3%81%AE%E4%BA%BA%E7%89%A9%E4%B8%80%E8%A6%A7の記事を参考にしています。

そのため、有名だけど入っていないという人物がいるかも知れません。

ユーザーが検索したデータを保存しておき、そこからAPIを使って検索してmysqlに登録するなどをする？など考えないとですね。

誕生日ベースの検索

年齢差を比較するということで、基本となる人物の誕生日ベースで年齢差を検索しています。

そのため、たとえば８月２４日に何歳差なのかなど日付指定しての年齢差はわからないため、歴史的資料においての年齢差と見た目一歳の誤差が生まれてしまう可能性が高いです。

今後日付を指定して再計算できるといいかなと考えています。

実際に作ってみて感じたこと

処女作は、どこにでもあるような掲示板で、本当に一からアイデアを考えて作ったwebサービスはこれが初めてでした。

用途としても限られていますし、多くの人は使わないサービスかもしれませんが自分としては結構楽しめました。

というかプログラミング自体が楽しく感じました。

やっぱりデータをちゃんと集められて動いたときはめちゃくちゃ興奮しましたね。

今回はちょっと触って終わりになってしまったのですが、スクレイピングは結構面白そうだと思いましたし、今までPHPとJavascriptしか言語は触れてなかったのですが、pythonにも興味が出てきたところです。

やっぱり基礎練習をひたすらやるよりも実際にプログラミングを使ってなにかを作ってみるのが一番楽しくていい学習方法かなと私は思いました。

よくプログラミングの勉強方法において『好きなものを作ろう』と言われるのはこういうことなのでしょう。

とはいってもまだまだ技術力がないのは変わらないので、いろいろ調べたりまた違うサービスを作ってみたりとなにかやってみたいと思っています。

もっとプログラミングの勉強をしたいですし、はやく技術力をつけて楽しいことしたいです。

正直、学生の頃からきちんとプログラミングを勉強すればよかったと今になって本当に後悔しています。

Permalink | 記事への反応(9) | 15:18

ツイートシェア