サーバも含めたiOSアプリ開発を1から10まで説明(1/2)

#はじめに
こんにちは、らいうです。
基本的に大学生で、プログラミングやマジシャンやってます。
今回、記事に書くのは、このアプリについてです。
ぜひ、ダウンロードしてどんな挙動をするのか確認してみてください

part1:サーバも含めたiOSアプリ開発を1から10まで説明(1/2) ⬅️イマココ
part2: サーバも含めたiOSアプリ開発を1から10まで説明(2/2) *コーディングだけでUIもつくるよ
アプデ1:swiftで画面の表示が遅い時の対処法(iosのUIを更新する処理はメインスレッドで行う)
アプデ2:オフラインでもアプリが動くようにとSNSシェア機能の追加アプデ

７位当て App Store

我ながらに、このアプリは教材としてはかなりいいものになりそうな気がしたので執筆を始めました。
なぜなら構成要素として

• サーバサイド
  • データベース(sql)
  • API(php, json)
• フロントエンド
  • ios app(swift)
  • android(未完成、kotlin)

と、一通り触れる感じの構成になっていると後から気づいたので書いてみます。
はじめてiPhoneアプリを作ってみたい。オフライン完結のアプリ開発に飽きた、簡単なアプリ開発のフローってどんな感じなん？っていう人にはいい記事になっているのではないでしょうか。
※筆者は個人開発しか経験がないので業務でこのような感じにできているかはわかりません。
　コメントなどで、実際の業務フローなどを教えてくれる優しい方いたらうれしいです。

ざっくりサーバ側と、フロント側を分けて記事にしようと思っているので今回はサーバ側をまとめます。

#Recruit
先日、就職先が急遽決定いたしましたので、現在この枠は閉鎖中

現在大学４年生で、大学院進学を考えていますが、どこかのタイミングでエンジニアとしてのインターンをしたいと考えています。実際に現場で経験を積むことでスキルアップができると思っているからです（僕のフォローしている優秀な同年代のエンジニアもだいたいインターンをして技術を磨いていた）。
しかし、私は地方の大学生なので空きコマにインターン等ができなかったので、少し遅れを取ってしまっている（個人開発しかできなかった）と思っています。いいインターン先が見つかれば半年から１年の休学をするつもりです。
これを読んでいる方で、オススメのインターン先を知っている方いたら、コメントなりSNSなりで教えていただけると幸いです。

#アイデア
このアプリを作ろうと思ったきっかけは友人とドライブをしていた時に、車の中で「７位を当てる」ゲームをしたら想像以上に楽しかったことがきっかけです。ランキングトップ３は大体当たってしまうので７位をピンポイントで当てるようにすると急に難易度が上がって、案外盛り上がりましたｗ
人口７位の国、小麦生産量７位の国、国土が７番目に広い国
意外と難しいでしょ？ｗ
みんなもドライブのときとかに使ってくださいｗ
個人的に最近見つけた使い方は、話題に困ったときですねｗ
無言の時間がつらい時に、そういえば～の７位って知ってる？とかって切り出すとそれなりの時間は稼げますｗ

#全体像

サーバサイドは簡単なAPIとDBが接続されている状態です。
今回の場合DBに書き込みをするのは管理人の僕だけにしているので、読み出し機能だけで充分です。
よってサーバサイドにはDBの中身をjsonで返すスクリプトだけを置いておきます。
クライアント側では、リクエストをAPIに送って、jsonデータをもらって、そのデータをもとにアプリ画面を作っていくという流れです。

ちなみにサーバサイドは
http://zihankimap.work/hit_7th/datalist
こんな感じ

#サーバサイドの準備
まずはサーバサイドの準備をしましょう

まず、サーバはみなさんお好みのAWSなり、レンタルサーバなりを用意してください。
今回、ぼくはレンタルサーバを使っています。
月額88円の格安レンタルサーバがあるので僕はこれを借りています。
ちょっとしたものを作りたいときによく使っています。
http://88sv.net/

ドメインはお名前ドットコムとかで好きなものを取ってください
https://www.onamae.com/

安いものにすればサーバ代、ドメイン代、３年契約で合わせて５０００円前後で収まると思います。
ちなみに、お名前ドットコムで取得したドメインを88serverで使うときはDNS関連の設定をお名前ドットコム側でする必要があります。
https://www.onamae.com/guide/p/67

このことを知らなかった僕はここで、１日ほど詰まりました。
あとはwinSCPなりcyberDuckなりのFTPソフトも用意しておくといいかも（タイムスリップした気分ｗ）

#サーバサイドの実装
では

• DB
• API

を作っていきましょう。

まずはDBを作ります。　
sql文で作ってもよさそうですが、テーブルが一個あれば十分なので
phpMyAdminにログインしてNewで新しいテーブルを作って僕は”world_ranking”と名付けました（あとから問題を追加するときに国内の問題も追加したので名前にちょっと後悔ｗ）。
そしたら、ググるなりしていろいろなランキングをさがして、問題をつくりました。

構造としては
id : auto increment （自動で１ずつ値が増えていくのでほぼノータッチ）
title : ここに入れた文字列が問題のタイトルとなります
1st ~ 10th : それぞれの答え
data1 ~ data10 : それぞれのデータ
memo : 必要に応じて（日本がランキング外のときに書いたりする）

e.g)
title : 人口ランキング
1st : 中国
data1 : 1,395,380,000
memo　：　””

id以外はvarchar型にしました。
問題追加するときは、スクレイピングなんかも考えましたが、ソースごとにフォーマットが違うので諦めました。

次にphpでAPIを作ります。
APIといってもAPIキーもないし、超絶お粗末なAPIですｗ

datalist.php

<?php 
    $mysqli = new mysqli("", "", "", "");
    if ($mysqli->connect_error)
    {
        echo $mysqli->connect_error;
        exit();
    } 
    else
    {
        $mysqli->set_charset("utf8");
    }


    try 
    {
        $sql = "SELECT * FROM world_ranking";
        $res = $mysqli->query($sql);
        
        foreach ($res as $value) 
        {
            $temp = array();
            
            $temp = ['id'=>$value['id'],
                     'title'=>$value['title'],
                     '1st'=>$value['1st'], 
                     '2nd'=>$value['2nd'], 
                     '3rd'=>$value['3rd'],
                     '4th'=>$value['4th'],
                     '5th'=>$value['5th'],
                     '6th'=>$value['6th'],
                     '7th'=>$value['7th'],
                     '8th'=>$value['8th'],
                     '9th'=>$value['9th'],
                     '10th'=>$value['10th'],
                     'data1'=>$value['data1'],
                     'data2'=>$value['data2'],
                     'data3'=>$value['data3'],
                     'data4'=>$value['data4'],
                     'data5'=>$value['data5'],
                     'data6'=>$value['data6'],
                     'data7'=>$value['data7'],
                     'data8'=>$value['data8'],
                     'data9'=>$value['data9'],
                     'data10'=>$value['data10'],
                     'memo'=>$value['memo']
                    ];
            $data[] = $temp;
        }

        $php_json = json_encode($data, JSON_UNESCAPED_UNICODE);
        // $geo_data = var_dump($php_json);
        echo $php_json;

    }  catch(PDOException $e) {
        echo $e->getMessage();
        die();
    }

    $mysqli->close();
         
 ?>

まず
mysqliでDBに接続します。パスワードとかIDは自分でを入れましょう。
sqlは"world_ranking"の中身全部もってこいやーっていう感じです。
resには、それぞれのカラムがデータとして入っているので、foreach分でループを回して
各ループでtempという変数を、連想配列で初期化して
データの名前：データ
という形で連想配列を作ります。
作った連想配列を
try文の最初で定義したdataの配列に追加してあげます。
以下データがすべて読み終わるまでループです。

なので、
最終的にはdataは連想配列の配列という形になります。

ループ処理が終わったら、json_encode関数でdataをjsonにエンコードして
echoで出力といった形です。

このファイルをでサーバに設置して、ブラウザでそのパスをたたいてやると、
http://zihankimap.work/hit_7th/datalist
こんな感じのが出てきます。

ひとまずここまでがサーバサイドです。

#今回はここまで
お疲れ様です。
意外とさっくりできたんじゃないでしょうか？

次回は、xcodeを使ってswiftでios開発の方をやっていきます。

part2: サーバも含めたiOSアプリ開発を1から10まで説明(2/2) *コーディングだけでUIもつくるよ