[個人開発]プログラマーなら気になっちゃうWebサービスを作ってみた。

まえがき

こんにちは、北海道札幌市で活動しているWebエンジニアチーム「fact」です。
弊チームは2020/5より活動開始したチームです。現在エンジニア歴１〜２年のメンバーが2名で活動しています。メンバー募集中！（特にWebデザイナーが欲しい）

今回は、プログラミング言語を学習した人、学習する人なら一度は気になる「アレ」を可視化してみました！

この記事では、今回作成したサービスの概要から使用技術、どのような過程で作成したかを記載します。
個人開発に興味のある初学者にとっても有益な情報かもしれません！

ぜひ、最後までご覧ください。

目次

1.作ったWebサービス
2.作成の流れ
3.使用技術について
4.今後について
5.あとがき

1. 作ったWebサービス

サービス名：プログラミング言語ランキングサイト
URL：　https://programming-ranking.com
サービス内容：GitHubのプログラミング言語別リポジトリ数、Qiitaの言語別記事投稿数を各サービスのAPIから毎日バッチ処理で自動集計し、日別・週別・月別の増減数をもとに、「今、最もアクティブなプログラミング言語」ランキングを作成し、グラフ化しています。(サービス名そのまんま・・・)
※もちろんデータは自動集計しているので、毎日更新です！

プログラミングを学習するとき、その言語がどれくらい人気なのか〜とか、将来性あるの〜とか、いろいろ気になりますよね。

今回は、そんな悩みを解消するためにサービスを作成してみました。
本サービスは、ランキング表示だけでなく言語別の紹介記事も用意しているので、学習言語選定に必要な情報を集めることも可能です！

２. 作成の流れ

要件定義〜設計 (約1週間)

factメンバーが２名で気心知れた仲であったこともあり、ガチガチに仕様を決めきらず、機能ごとに要件定義〜設計を簡易的に行いました。（なんちゃってアジャイル）

反省点：あ、これ最初に決めときゃよかったね・・・・。って項目で後戻りすることもあり、個人開発且つ、小規模サービスとはいえ、設計の大切さを改めて実感。

実装　(約２週間)

バックエンドと、フロントで作業を完全に分担。
両サイドのデータの入口と出口だけを取り決め、あとはお互い不干渉。
もくもくと実装を行いました。
このタイミングで、言語別の紹介記事も作成しました。これが一番きつい作業だった・・・・・・・・。
モチベーションが上がらなすぎて、二人でカフェに集まり、雑談しながらやりました。

テスト (約１週間)

なんちゃってモンキーテストを実施。
ガチャガチャ動かして不具合を洗い出しては修正って感じで進めました。

3. 使用技術について

サーバ：さくらサーバ
バックエンド：PHP（Laravel）
フロントエンド：HTML, CSS, JavaScript（Angular.js）

以下で少し掘り下げていきます。
※各担当者が分担して記載しているので文体が違いますがご容赦ください。

サーバ

レンタルサーバーのさくらサーバーを利用しました。
理由としてはサーバーサイドの言語はPHPであったため、Apacheが最初からインストールされ、PHPの実行環境も整っていることからです。

GitHubからさくらサーバーへ自動デプロイ

2人での開発であったため、スピード感を出すために、GitHubからさくらサーバーへ自動デプロイする仕組みを構築しました。
GitHubへソースをプッシュすると、さくらサーバーが最新のソースをGitHubからプルしてくるイメージです。
※さくらの~/www/プロジェクトフォルダ/laravel-sample/にララベルプロジェクトがある想定です

さくらサーバーへssh接続

ssh [e-mail]

さくらの公開用フォルダ(www)に自動デプロイ用のファイル作成(deploy.php)

cd ~/www && touch deploy.php

deploy.phpの記述

<?php
chdir('./プロジェクトフォルダ/laravel-sample')
exec('git pull')

上記の設定をしたら、あとはGitHubのWebHookを使用して、ソースにプッシュがあったら自動でdeploy.phpを呼び出すように設定します。

※もしWebHookからさくらサーバーへうまく接続できない場合は、GitHubにさくらサーバーの公開鍵を登録していないか、.htaccessファイルが原因かと思います。

バックエンド

PHPのフレームワークLaravelを使用しました。
※担当者が実務でちょうど使っていた為、学習も兼ねて。

作成した機能としては、

バッチ処理

メイン機能です。
GitHub APIとQiita APIから日別の言語別リポジトリ数、記事数を取得し、データベースに格納する。という処理です。

処理自体は、Laravelの artisan make:command をベースに開発していきました。
上記で作成したCommandを時間決めてcronに登録する感じですね。

API

上記バッチ処理で取得した情報をSQLで集計し、前日との差分及びランキングをフロントに渡すためのAPIです。
クエリが複雑になってしまったため、eloquentで書かず、ヒアドキュメントを使い長文のSQLを直書き!!

レビューでボコボコにされそうな実装だけれど、これも個人開発ならでは。
個人的には、こっちの方が逆に保守性高い説まである。と思っている。

管理画面

Laravel Adminで作成しました。
本サービスに記載している記事や、広告などは管理画面から、CMS的な感じで編集できるといいよね〜という声から管理画面を作成することにしました。

Laravel Admin、マジで便利。（個人開発には持ってこいって感じ）
導入時は「ちょっと何言ってるかわからない」って感じでしたが、すぐに完全に理解。
２〜３回バグを出しましたが、学習コストも高くなく、一瞬で管理画面構築完了。

フロントエンド

JavaScriptフレームワーク、AngularJs(1.4)を使用しました。
※開発者のスキル的に1系のほうが得意であったため

作成した機能としては、

SPA

画面の実装をSPA(シングルページアプリケーション)で作成しました。
Angular.jsの機能である、ルーティングを使用しました。
個人的にAngularJSのルーティングの記述は見やすいためおすすめです。

グラフ表示

各言語のGitHubのリポジトリ数とQiitaの記事投稿数の数値をデータとして、
グラフ化し毎日、週間、月間の単位で表示する機能を作成しました。
グラフを0からJavaScriptで作成するのは不可能ではないのですが膨大な時間を要するため、
今回はchart.jsというライブラリを使わせていただきました。
chart.jsは、各数値を指定のjavascriptオブジェクトに変換するだけなのでかなり使い勝手が良かったです。

ランキング表示

上記の、グラフで表示された各言語の数値が大きい順にランキング形式で表示する機能を作成しました。
Bootstrapを使用して、ランキングは見やすいようにカード形式で表示しています。
カードをクリックすると、その言語の詳細ページへ遷移して様々な情報も見れます

4. 今後について

弊チーム初のWebアプリケーションリリースということで、今後もどんどん活動してく予定です。
本システムも、まだまだ改善の余地ばかりですので、ユーザの声を取り入れつつ改善していこうと考えております。
また、次回作を作成したらこちらに記載させていただきます！

5. あとがき

弊チームfact(https://fact-cs.com) は、一緒にWebアプリケーション開発を行ってくれるWebデザイナーを募集しています。できれば北海道札幌市で直接MTGが出来る方。
もし、興味がありましたら、是非弊チームサイトお問い合わせフォームからご連絡をお願いします！！