【メンバー募集】エンジニアって何してる？KADAI INFO開発の裏側を公開

こんにちは。KADAI INFOでエンジニアを務めている、きよです。主にWeb開発、iOSアプリの開発、アクセスデータの収集、チームの技術的なサポートを行なっています。KADAI INFOは学生だけで構成された組織ですから、これらのシステムの全てを、メンバーが開発から保守、管理まで手掛けています。今回は普段の記事とは少し変わり、KADAI INFOのエンジニアが行なっている取り組みについてご紹介します。

KADAI INFOって？

---

KADAI INFOとは「鹿児島大学をもっと面白くする」をテーマに、鹿児島大学生に情報をお届けするWebメディアです。Webメディアと言っても発信媒体はWebだけではなく、フリーペーパー、インスタグラム、X、YouTubeなどなど、メンバーそれぞれが興味のある媒体で情報発信および、その情報発信するコンテンツ制作を行なっています。また、営業やデザインも全て団体内のメンバーが行ないます。

メンバーは2024年4月現在20名~30名(うちエンジニア2名)で活動しています。
KADAIINFOに関する詳しいことはこちら↓
https://kadaiinfo.com/about-us

この記事では、Web開発アプリ開発、及びそのデザインに絞ってご紹介します。他にもいろんな活動を行なっているので、ぜひそちらもチェックしてみてください！

Web開発

---

今閲覧いただいているこのWebサイトは、日々エンジニアによって開発、アップデートが続けられています。KADAI INFOでは、昨年(2023年)6月までWordPressを用いたWebサイトを運用してきましたが、サイトリニューアルに伴いSTUDIOでの開発に切り替わりました。STUDIOは、デザインに優れたノーコードWebサイト制作システムです。システム移行決定時点で、エンジニアが1名だったということもあり、フロントエンドデザインをデザイナーが担当できる仕組み作りに取り組んでいます。デザイナーが作ったFigmaのデザインカンプが、次の日の朝にはSTUDIOに実装されWeb上に公開される、というようなスピード感のある開発が、実際にKADAI INFOでは行なわれています。

基本的にノーコードでの開発ですが、Javascriptを入れ込むことで動きのあるWebサイトを制作可能です。エンドポイントを入力することでAPI連携を簡単に行なうことができるため、PythonやPHP、GO言語などで制作したバックエンドを利用することも可能です。

現在はSTUDIOに慣れたデザイナーがいないため、エンジニアがSTUDIOの開発を行なっています。ゆくゆくはWebフロントエンドはUIデザイナーが担当し、バックエンドやサイトの大枠、細かな設定などをエンジニアが担当するといったような、デザインとテックを切り離した体制を整えることができれば理想的だなと思っています。

また、タブレット版のレスポンシブ対応の実装、細かなUIの改善、担当が不在でも保守運用しやすい仕組み作りに、これから取り組む予定です。

>Webサイトのデザインカンプ

アプリ開発

---

Webで公開した記事を、アプリ版でも閲覧できる環境を提供しています。使用言語はDart言語で、Flutterというフレームワークを利用してます。バックエンドはアクセスデータの収集とPush通知が容易という理由で、Firebaseを利用しています。Supabaseの利用も検討しています。

アプリ開発は2024年4月現在、iOS版がリリース中、Android版がリリース準備中となっています。2名のエンジニアで、iOS版とAndroid版のリリース作業を分担しており、僕はiOS版を担当してます。

アプリ版は長年、メンテナンスするエンジニアが不在ということもあり利用が停止していました。2023年10月ごろから開発を再開し、2024年3月に再リリースという形でリニューアルさせることができました。

Webは年齢問わず様々な方から閲覧されています。対してアプリは、学生のニーズに特化した機能をどんどん追加していくことができればと思います。manabaのスクレイピングや、NFCを用いた学生証の残高確認機能、RAGなど、手をつけてみたい技術がたくさんあります。メンバーが個人的にPHPで制作した時間割口コミサイトを、Flutterにリプレイスすることなんかも考えています。

>アプリ開発の様子。PC上のシミュレータで制作します。

アクセスデータの管理

---

KADAI INFOには毎月4万PV以上のアクセスがあります。ユーザーがアクセスしたログは匿名化され、GoogleAnalyticsで解析することができるように保存される仕組みを作りました。またGoogleSearchConsoleを利用することで、ユーザーがどんな検索ワードを入力してwebサイトに流入しているか解析することもできます(ユーザーのプライバシーは保護されます)。このアクセスデータはメンバーがいつでも閲覧することができ、どんな記事がいつ見られていて、どんな要因でPV数が増えているのかを確認することができます。こういったデータドリブンな環境を整えることもKADAI INFOのエンジニアの業務の一つです。

>昨年末に行なったWebアクセスデータ分析の資料

自然言語処理

---

昨今話題のChatGPTのようなLLM(大規模言語モデル)は、Transformerという技術をもとに作られています。そういった自然言語処理の技術を試すのに良い環境がKADAI INFOには揃っています。前述の過去9年分のアクセスデータと、Web記事のテキストデータが利用可能です。

例えば、文章同士の類似性を定量的に評価することで、関連記事の結びつけを行なう手法があります。記事のリコメンドなどに使われます。

以下の二つの記事の冒頭の文章の類似性を調べてみましょう。
>【旅行のお供に】大学生が薦めるフィルムカメラアプリ4選
>【鹿児島のパン好き集合！】姶良市でパン屋巡りドライブはいかが？おすすめベーカリー3選

文章の類似性を調べる手法はいくつかありますが、その中でも最も簡単なコサイン類似度をご紹介します。

高校生の時に習った、ベクトルの内積の公式からコサイン類似度を導出してみましょう。任意のテキストaとテキストbの類似度を考えます。二つの文章をベクトルa、ベクトルbで表し、それらの内積をとることで算出します。

2つのベクトルのなす角のコサインは、それらが同じ方向を向くほうが1に近い値を返します。したがって、文章をベクトルで表すことで、テキストaとテキストbの類似度が高いほど1を返し、逆に類似度が低いほど-1を返すアルゴリズム(仕組み)を作ることができます。

これをPythonで書いたプログラムが以下になります。テキストを前処理する関数、コサイン類似度を計算する関数を作成し、任意の2つのテキストデータの類似度を算出することができます。

import re
import numpy as np
from sklearn.feature_extraction.text import TfidfVectorizer
from scipy.sparse import csr_matrix

# テキストの前処理
def preprocess(text):
    text = re.sub(r'[^a-zA-Z0-9\s]', '', text.lower())
    return text

# コサイン類似度計算
def cosine_similarity(text1, text2):
    vectorizer = TfidfVectorizer()
    vectors = vectorizer.fit_transform([text1, text2])
    vectors = csr_matrix(vectors)  # スパース行列に変換
    dot_product = vectors[0].dot(vectors[1].T)[0, 0]
    vector_norms = [np.linalg.norm(vector.toarray()) for vector in vectors]
    return dot_product / (vector_norms[0] * vector_norms[1])

# テキストデータを入力
text1 = "【旅行のお供に】大学生が薦めるフィルムカメラアプリ4選のテキストデータ"
text2 = "【鹿児島のパン好き集合！】姶良市でパン屋巡りドライブはいかが？おすすめベーカリー3選のテキストデータ"

# 前処理
text1 = preprocess(text1)
text2 = preprocess(text2)

# 類似度計算
similarity = cosine_similarity(text1, text2)
print(f"Similarity: {round(similarity,5)}")

こんな感じでテキストAとテキストBの類似度を定量的に評価することができます。

このようにKADAI INFOは、個人個人が好きな分野(僕の場合は機械学習や自然言語処理)の技術を試すことができる環境です。試した技術がコンテンツになるかどうかはわかりません。しかし、何の役にたつかわからない技術の総体が、結果的にKADAI INFOのシステムを支える柱になると考えています。

最後に

---

ここまで長文を読んでいただきありがとうございました。ここまで読み続けているあなたには僕たちの開発に対する熱量のようなものが少しは伝わったのではと思います。また、可愛いWebサイトの裏側では、全然可愛くない技術が走っていることがお分かりいただけたのではないでしょうか(笑)。

メディアという業種は、性質上データが溜まりやすい場所です。蓄積されたデータを上手に利活用できるかどうかは、エンジニアの力量にかかっていると考えています。また、データを元に、ユーザー(学生)が何を欲していてどんなコンテンツが受け入れられるのかを考えることができます。そういったところにKADAI INFOでエンジニアをやる醍醐味のようなものがあると思います。

まだまだWebサイトやアプリには改善の余地があります。あなたも一緒にKADAI INFOというコンテンツをより良いものにしてみませんか？