Are you "AI"?

https://github.com/ulxsth/58-margaret

CSS

JavaScript

Node.js

HTML

"AI" か "I" かをチェックする認証サービス(ゲーム)だよ

yotu

YUTA

BURIBURI GOKIGOKI

gbcrdujrah

推しアイデア

アイスブレイクで 「あい」がモチーフのランダムなテーマで ​あいうえお作文してもらって AIに採点させる アプリ

作った背景

「あい」がいっぱいついている。すごい

推し技術

ベースはシンプルな静的Webアプリケーションで作成しつつ、必要な機能を API から提供していること

プロジェクト詳細

技術構成

  • Express + ejs
  • kuromojin(形態素解析)
  • さくらのクラウド(AppRun)

概要

あいうえお作文を、AIに採点してもらうゲームです。 「アイ」スブレイクに使えそうなアプリを目指してみました。←うまい

工夫したところなど

形態素解析の活用

たとえばユーザーの入力が「吾輩は猫である」として、「ワ」から始まっていることを検査するには、jsの機能では不十分でした。

"吾輩は猫である".startsWith("ワ") // false

これを正しく検査するために、Java の形態素解析エンジン Kuromoji を JS 用にラップした kuromoji.js のラッパーライブラリである kuromojin を使用しました。 以前までは形態素解析用にサーバーが必要でしたが、このライブラリでは 不要になっています。うれしい。

このライブラリを「文字列→読み」の変換として利用したり、

/** * 与えられた文字列を、カタカナのみの読みに変換する関数。 * @param {string} text 変換対象の文字列 * @returns 読み(カタカナ)に変換された文字列 */ export async function convertToYomi(text) { return tokenize(text).then((tokens) => { return tokens .map((token) => { return token.reading || token.surface_form; }) .join(""); }); }

指定した文字列から始まっているかをチェックする関数として実装することで、要件を解決しています。

/** * 文字列が、指定されたひらがなから始まっているかを確かめる関数。 * @param {string} text 検査したい文字列 * @param {string} excepted 頭にくることが期待されている文字(例:あ、い) * @return {boolean} 指定した文字で始まっているかどうか */ export async function startsWithHiragana(text, excepted) { if (!text || text === "" || !excepted || excepted === "") { throw new Error("引数が不正です"); } const yomi = await convertToYomi(text); const exceptedKana = hiraToKana(excepted); return yomi.startsWith(exceptedKana); }

さくらインターネットにデプロイした

(最近話題の)さくらのクラウドを利用してみたかったので、使いました。もともと AWS Beanstalk (EC2 + Code Pipeline)を使用してホスティングしていましたが、これを移行した形になります。

さくらのクラウドでは、「AppRun」というコンテナをホスティングするサービスをベータ版として提供しています。デプロイしたいサーバをdockerイメージとしてビルドし、クラウド上のコンテナレジストリに登録することで AppRun 上から使用することができます。(参照

お題となる単語データの扱い

以前は jisho.org の API に問い合わせてランダムな「あい」から始まる単語を取得していました。が、

  • 拡張性が低い(受け取るフィルタリング条件が少ない)
  • 問い合わせ速度が遅い という都合、自作することになりました。

Wiktionary が前頁のデータを xml.bz2 形式で公開していることに気が付いたので、これを ダウンロードしてJSONに変換、これを参照することでお題を選んでいます。

開発難易度の分離

参加者の技術レベルが

  • 完全な初心者:2人
  • 経験者:2人

なので、比較的難しい技術は使わず、HTML+CSS+JS の範囲で開発できる環境を整えるようにしました。 そのうえで技術的限界を引き上げるべく、Express でホスティングした API サーバから各機能を提供することで高度な機能を実現しています。

その他

みんなでアイコンを書きました。

よつ

まいか

天パ

ゆうた

yotu

@yotu