PHPとPostgreSQLで作ったシステムのリニューアル

初めに

こんにちは。
私は個人開発でいろいろ作っては消してを繰り返しているなんちゃってプログラマです。
なんちゃってで、本業ではない為、こうした方が良いとかああした方が良いとかはきっとあると思います。
まぁ小さなところはご愛敬で

今回ツイッターフォロワー推移のTwitter Rankingをリニューアルしたので細かーいところまで技術的なところは寄稿しませんが、似たようなものを作ろうとしている人・・というよりはその周り部分で参考になればと思います。

サーバーの移転

普段愛用しているレンタルサーバーが新プランを出しました。
お！ってことで早速申し込んだのですが、旧プランから新プランへの移行パスは用意していなとの事で、正直絶望はしましたが、逆の立場になって考えたら、

まぁサーバーの構成当然変わるわな。

いろいろパージョンも上がるだろうし全部が全部移行するのは確かに無理があるな・・・
と、ぐっと理解して自分で移行を頑張る決意をしてみました。

PostgreSQLが使えない！

日本ではPostgreSQLのShareが非常に高いという事になっていますが本当ですかね？
レンタルサーバー業界でPostgreSQLを使えるところは非常に少ないです。
また、mysqlもだんだんと数が減ってきています。代わりにmariadbが浸透してきているから影響はありませんけどね。

さて、新プランで使えなくなったPostgreSQLですが、mariadbで作り変えるつもりだったのであまり影響はありません。
移行直後ですが、中のDBは何と***700万レコード！！***と中々に育っておりました。
sqlなので、データが多いからと言ってそこまで遅くなるものではないのですが、ちょっとクリックして開くまでの時間が

ん~遅いかな・・・

と思っていたので丁度良いと言えば丁度良いです。

遍歴

今回で三回目のリニューアルです。
・初代
　まぁダサいですね。フレームワークなどを考慮せずに昔の古き良き時代のhtmlを手書きでやってた感じです。

・二代目
　テンプレート屋さんが提供しているテンプレートを弄っていました。当時それがBootStorapである事を理解していませんでした。

・三代目
　BootStrapをある程度、自分であつかいこなせるようになったので、ベースはBootStrapで！

使用している技術

まぁぶっちゃけ皆さんがQiitaに寄稿しているようなものは殆ど使っていません。
Firebase
なに？それ？美味しいの？

Vue.js
なに？それ？美味しいの？

JavaScript
なに？それ？美味しいの？ ←これはあかんやろ

この程度の技量です。
歳もとってしまったのか、新しい物はなかなか頭に入ってこないですね。
JavaScriptなんかはみんな初心者にお勧めとか言っていますが、年寄りの初心者にはお勧めされても全く頭に入ってきませんよ。
FireBaseも認証簡単だよ！！って勧められましたが全く頭に入ってきませんでした。

という事で、自分が出来るこの３個+1個ぐらいしか活用していません。

BootStrap 生意気にも良くわからず 5
Mariadb 10.8
PHP これも生意気にも8です。
ajax 美味しくないのに努力してみました。

まぁ折角サーバーが最新スペックでいろいろ動いてくれているのだから使いたいじゃないですか
良く違いが分からないですが、いろいろ最新の技術（使ってないですけど）で動かしています。

PHP7 → PHP8に途中で作り変える事の意味

いやぁ失敗でしたね。
もう完全に死ぬかと思いました。
エラーの出まくりです。
7で動いている物を 8に書き換えては駄目です。
死ねます。

PHPの良いところである、サクッと書いてパッと公開する感覚が台無しです。

駄目な例

$a = $b + $c; //え？何があかんの？

こんな感じでphp7ベースで書いていたら死亡です

こんな感じにしないといけないんです。

正解

$b="";
$c="";
$a = $b + $c; //なんか違うの？

ん？
ってなりませんか？

それが大事！

$b=""; //大事manブラザーズバンドの [それが大事 ]
$c=""; //は、いい歌だからみんなyoutubeで聞いてみてね。

この２行が大事なんですよね。
つまり未定義の変数が使えなくなっているという事です。
もう、こころ折れまくりですよ。
大量の書き換え・・・・ Orz

php7で作っている物をノリでphp8にしてはいけません。
エラーがでまくりで、とてもでは無いですがやり切れませんでした。
これともう一か所だけ、異なる理由でエラーになったものがありましたが、98%はこの変数未定義エラーでしたね。

PHP8を触る人は１時間かけてこれ読みましょう。
https://qiita.com/rana_kualu/items/c110cb244c3ee38c6859

Herokuって本当にいいの？

はい。食わず嫌いです。
触った事ないのに批判するのもあれですが、無料で使えるという事でいろいろお勧めされている感じはわかります。
しかし、いかんせん制限が強いイメージしかないです。
そして、なんとなく遅い感じがします。
これは無料枠で動かしているからなんですかね？いろいろHerokuで作ったサービスが公開されていて、アクセスすると既に閉じられていて・・・が多いのもやっぱり無料のせいですかね？、触ってみるとちょっともっさりしている物が多い気もします。

レンタルサーバーは駄目なんですかね？私はPHPとMySQL（MariaDB）が使えれば満足する人なのですがPythonとか使える場所もありますし・・・
そして、VPSと比較して他人の影響を受けるからとか心配する声も時たま聞こえます。
でも、他人の影響を受けないVPSでは使えるリソースが限られていたりしますが、私が移行する前のレンタルサーバーのCPUメモリは使いたい放題でしたので、気づかないうちに影響を受けていた事があるかもしれませんが、ハイスペックCPUを超低価格で利用できていた感じがします。
因みに移行後のレンタルサーバーはハイスペックではなく超超ハイスペックCPUでとても買えない値段の物です。利用に制限がついてしまいましたがその制限に到達する事はまずないでしょう。

月額400円~500円ぐらいですが、個人開発する人は無料のHerokuとかもいいかもしれませんが200円とかのサーバーでも用途が合えばメッチャ性能が良い物ありますからね。

TwitteAPIがバージョン 2になっちゃった・・

新しいバージョンが出る事は別に悪い事ではないのですが、長年変わらなかった古いバージョンは恐らく近い将来バイバイでしょうね。
そのため、こちらも新バージョンで取り直しですよ・・・

TwitterAPIの利用申請ですが、決して難しくないのですが英語なので温度感が分からないんですよね。
私の場合こんな感じでした。
ご参考にしてください。

１回目
Q.おい！お前が作りたいのは何なんや？　→英語で
A.こんなんやで～　→英語で

２回目
Q.説明が簡単すぎる！！もうチョイ詳しくかけや！！！　→英語で
A.お！返事きよった　もうちょいくわしくかくでー　→英語で

３回目
Q.さらにもう一声　→　日本語で
A.いや、初めから日本語でお願いしますよ・・・・　→日本語で超詳しく

こんな感じのやり取りで許可をもらえます。

他の人はどんな感じなのかな？綺麗な英語で初めから書けば一発合格とかあるんですかね？

知らない人の為に！
TwitterAPIの利用許可が下りていない状態でDevelopperツールにログインしても見える内容が異なります。
画面が英語で分かりにくいだけで、しっかり書かれているかもしれませんが、審査に合格した後でなければ見れないページがあります。
英語が苦手な人！
グーグル翻訳で何とかなるのでそこではあきらめないで！！

データの移行

さて、周りの話はこれぐらいにして実際にどのような感じだったのか。
まず、700万行のデータですが、正直大したことないです。
データにして100MBぐらいのかわいい物です。
ただ、アップロードはphpmyadminではできませんでした。
時間がかかり過ぎで制限にどうしても引っ掛かります。

そのため、サーバーに直接ログインして流し込む必要がありますね。
サーバーにつないだらこんな感じでMariaDBにつなぎます。

こんな感じ

mysql -h ホスト名 -D DB名 -u ユーザー名 -p

普通はホスト名は意識しなくて良い場合が殆どだと思いますが、私が利用しているサーバーでDBとWebを分けているプランの物がありましたので。

サーバー上で直接バルクインサートすれば、だいたい20秒ぐらいで流し込みは終わります。
50MBぐらいからきつくなる気がするので大量データの流し込みを検討している人は意識しておいた方が良いです。
※直はすごいんだぜ～（ザ・グレイトフル・デッド）

と、このような形でpostgresqlからMarriaDBへのデータ移行は大した話はありません。
CSVにしてCSVで入れるだけですので

Jsonさんとのお付き合い。

専門家ではないのでここいらはQiitaの記事見ながら頑張った感じです。
第二代目まではAPIで取得した情報を配列に格納し、オリジナル関数でDBのテーブルに格納してテーブル内で結合して本番テーブルに格納する手法を使っていました。簡単かつ高速なんですよね。ただ、都度SQLを書く必要があるというのも若干の欠点ではあります。
そして、MariaDBもPostgreSQLも、そしてMySQLも最近のDBは直接Jsonファイルを弄る事ができます。APIで取得した情報はJSON形式ですので、この機能をつかわでか。

こんなクリエイト文を書きます。

CREATE TABLE `TBLNAME` (
  `idst`       int(10)     NOT NULL AUTO_INCREMENT,
  `json`       json        DEFAULT NULL
  PRIMARY KEY (`idst`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

ここいらがMongoDBとかNoSQLの感覚になってくるんですかね。

RDBMS形式ではないDBは苦手なので沢山触っていなのですが、このJSON形式での格納

クッソ遅い

ですね。
話にならないです。
スキーマレスDBってみんなこんな感じなのかな？とてもでは無いですが使い物にならないという感想です。
因みにこんな感じで作ると検索は超高速になります。

検索させるならこんなんだ！

CREATE TABLE `TBLNAME` (
  `idst`  　　  int(10)     NOT NULL AUTO_INCREMENT,
  `json`       json        DEFAULT NULL,
  `name`       varchar(300) GENERATED ALWAYS AS (JSON_UNQUOTE(JSON_EXTRACT(`json`, '$.name'))) VIRTUAL,
  `username`   varchar(300) GENERATED ALWAYS AS (JSON_UNQUOTE(JSON_EXTRACT(`json`, '$.username'))) VIRTUAL
  PRIMARY KEY (`idst`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

まぁ私はRDBMSの形が好きなので、このまま使わず、さらに、ここから普通の形式に変換して格納して使っています。

非同期通信の採用で出来上がった子は超高速で動きます。

サーバーが高速化した事もありますが、今回非同期通信を採用した事が大きいですね。
実際に早くなったわけではなく、早くなった気がしてならない。

試してみてください。

ツイッターフォロワー推移のTwitter Ranking

ここのこの画像の場所に AKB と入れてみてください。

検索結果は上限で27個に、しているので（3*9ね）大量には出力されないですが、びっくりしませんか？この高速さは。

多分、普通に検索してクリックした速度と同じ速さなのですが、クリックが無い分早く感じます。

そう、感じているだけ

何ですよね。クリックした結果と非同期通信で速度が変わるわけないので。
という事で、試しに導入してみたAjaxヤバいですね。
PHPの非同期通信はもっと流行ってもいいのでは？と思います。
※私が知らないだけで一般的？

クリックという動作が無いだけでここまで高速に感じるというのもおかしなものですが、PHPを学んでいる人はAjaxの非同期通信を早いうちに身に着けた方が良いと思います。↓わかりやすいです。
https://qiita.com/Taku94/items/3b45243f34553200a10f
　　　　　　　　　　↑
今回のQiitaの寄稿はこの記事を紹介する事に一番の意味があったのではないかと思います。

見た目は完全にBootStrapにおまかせ

昔からBootStrapは臭いが強いとかよく言われていましたが、どんな臭いなんですかね？嗅いだこと無いからよくわかりませんがデザイン面は楽なので完全に依存しています。
これモーダルですが、これ書くだけで・・・

クリック一つでポップアップ

<!-- Modal -->
<div class="modal fade" id="ddg" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLabel">ここにタイトルを</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
    // ここにグラフを持ってくる
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

このポップアップを作る事ができます。※中のグラフは別ですよ。

オフィシャルマニュアルを覗けばかなり詳しく書いています。
https://getbootstrap.jp/docs/5.0/components/modal/

BootStrap臭って良い匂いなんじゃないですかね？

若いエンジニアよSQLを学びなさい。

まぁどっちだっていいとは思うんですが、昔からDBとネットワークどっちが好きと聞かれると大体、みんなネットワークなんですよね。
なぜかDBって人気はないんですよね・・・ネットワークエンジニアって響きがかっこいいからですかね？

SQLを覚えればデータ操作が楽しくなります。逆に大量データをsql無しで裁くのはつらいと思います。
プログラマーを目指すとどこかで必ずぶち当たると思いますので、ぶち当たったら、苦手意識を持たずにSQLも学んでみてください。

爆速化したTwitterRanking

大きく以下２点の採用で高速化に成功しました。

Ajaxによる非同期通信
最新のMariaDB採用とコードの見直し

現在TAG付けに協力してくれる人を募集中です。アイドルなり、政治なり各種業界に詳しい人は是非よろしくお願いします。
ツイッターフォロワー推移のTwitter Ranking