こんにちは。今回は石垣島コーヒースタンドのサイトがどうやって作られているのか、
ちょっとだけ裏側をお教えいたします。コーヒーのお供にどうぞ！

サイトを作るとは

まずはじめにサイトを作ることについてちょっとだけ説明しますね。
皆さんが普段検索などで表示されるサイトはHTMLというもので構成されています。


<p>Hello</p>
<a href="/">Home</a>


pタグやaタグと言われる決められた形で書くことでブラウザ(SafariやGoogle Chrome)が認識して私達が見えやすいように表示してくれます。

ボタンの色や大きさが違うものがありますよね。それはCSSというものを書くことで見た目を変更できます。
このHTMLとCSSからなるページがいわゆるサイトと呼ばれるものになり、公開することでいろんな人が見れるようになるということです。

私達石垣島コーヒースタンドもHTMLとCSSで作ったものをみんなが見れる場所に公開しているということです。ではそのみんなが見れる場所というのはどこなのでしょうか？

みんなが見れる場所とは

みんなが見れる場所、それはサーバーです。
サーバーというと難しい感じがしますが、基本的に中身はパソコンです。ただ皆さんが持っているパソコンと違い、画面やキーボードなどはありません。パソコンの中身だけがいくつも並べられて本棚のようになっているのです。

サーバーには住所とされるものが割り振られています。それがIPアドレスというものです。
192.168.0.1といった数字とドットで表現されています。
IPアドレスでサイトを表示することも可能ですが、ちょっと面倒ですよね。そこでドメインというものを使います。私達でいうとishigaki.stands.coffeeですね。このドメインはこのIPアドレスという割り振りを設定しているのでドメインだけでサイトを表示することができます。

皆さんのパソコンやスマホにもIPアドレスが付与されていますが、サイトを全世界に公開するためのアドレスとは違います。ここは説明すると長いので気になる方は「グローバルIPアドレス」と「プライベートIPアドレス」で検索してみてください。

ちょっと難しいと感じる方もいるかも知れませんが大丈夫です。ここまでがみんなが見れる場所のお話でした。

新たな課題

さて、HTMLとCSSでおしゃれなサイトを作って、サーバーに公開しました。
これで人々が石垣島コーヒースタンドにアクセスできるようになりました！
めでたしめでたし...？

おっと、新しいコーヒースタンドがオープンしたみたいですね☕
サイトを更新しないと...。

HTMLを書き換えて、新しい店舗を追加して、もう一回公開っと。
おっと、また新しいコーヒースタンドがオープンしたとの連絡が！

HTMLを何度も書き換えるのって面倒だと思いませんか？
追加して書き換えるのはお店の名前と画像だけで同じデザインなのに！

そこで使うのがデータベースというものです。データベースとは石垣島コーヒースタンドでいうお店のデータなどをサーバーの中に記録しておくものです。普段皆さんが使っているものでいうと、エクセルにデータを書き込んでいくのに近いです。お店が増えたらそのデータベースにお店の情報を追加するだけでHTMLを書き換えなくても新しいお店のデータを表示することができます。もちろん石垣島コーヒースタンドでもデータベースを活用しています。

データを扱うのに以下のようなSQLという言語を使います。ちょっと英語っぽいですよね。


select name, image from shops;


お店のデータをとってくるときはこのようなSQLでお店の名前、画像を取得することができるというわけです。その結果をあとはHTMLで表示するだけなのです。

しかもデータベースを使う利点はデータをリアルタイムに更新できるという部分です。
一文字書き換えて、HTMLを書き換えて公開するまで10分かかるとするとデータベースは1秒も経たずに更新できます。

どうやって作るのを決めている？

２人で運営をしている石垣島コーヒースタンドですが、アイディア出しは運営のSlack(チャットツール)で行っていて、「こういうのあったら良さそう」とか「これほしいな」とか基本自分たちが使うもの、ユーザーが使ったらいい体験になりそうなものを主に考えます。

そのアイディアの中でいい感じなものがあれば”えいや”で作ります。機能を作るのに時間がかかりそうですが、手を動かして機能を作るスピードは石垣島で１番、２番を争うぐらい早いと自負しているので基本１週間もあればたいていの機能が作れちゃいます。もちろんしっかりと設計をして、テストを書くこと、クリーンなコードを心がけています。

作る流れは

①機能の仕様を決める(デザインも)
②データベースの設計を行う
③実装・テスト
④リリース

Sakuはデザインが得意なので、困ったらデザインを作ってもらったりします。機能のベースを僕がざざっと作っておくとデザインを当てるだけになるのでそこも爆速開発のポイントです。

スタンプの機能はまさにそんな感じで作りました。たぶん最初にぼくが作ったスタンプはめちゃくちゃダサかったと思います(笑)

より皆さんがリアルに使いたくなるサービスを近日リリース予定です。ぜひお楽しみに！

最後に

ざっくりと説明しましたが、少しでも皆さんの知識になれば幸いです。(どこで使うんだというのがありますが笑)
もし知り合いにウェブを作りたい！という方がいたらこの記事シェアしてあげてください🙏そしてDMでも質問などいつでもOKです！
コーヒーを飲みきってしまうぐらい長い文章でしたが読んでいただきありがとうございました。私達にとって開発はホントに楽しいものです。またいい体験を提供できるようにこれからも精進していきたいと思います。ぜひ余力のある方は余談も見ていってくださいね。

【余談】サーバーの昔と今

今もあるところはありますが、会社や組織のビルの一角にサーバー室というのがあり、そこからサイトを公開したりしていました。もちろん大量のサーバーを購入するわけなので、初期費用もかなり掛かるわけです。

となると石垣島コーヒースタンドも自宅やオフィスに費用を払って設置したサーバーがあるのか？という疑問になると思いますが、石垣島にはサーバーはありませんし多額の初期費用を払っているわけではありません。

それはクラウドサービスと呼ばれるものを使っているからなのです。
つまりサーバーをインターネット経由で借りて、払うお金は使った分だけ、ということです。大きなところでいくとAmazonやGoogle、Microsoftが貸し出しています。日本ではさくらインターネットなどがあり、北海道や東京にそういった貸し出す用のサーバーが置かれています。

【余談】開発の環境

私達、石垣島コーヒースタンドはRuby on Railsというフレームワークを使って開発しています。
テスティングフレームワークはRspecで、Github Actionsでテストを回しテストが通ってから(本来はStagingなどで確認したあとに)デプロイという流れです。もし石垣島からエンジニアを目指したいという方がいれば開発を交えて教えることは可能です。DMなどからぜひどうぞ！
エンジニアになるため参考書なども紹介できるかもしれません。