SPICY SPACE BLOG

愛犬家WEBエンジニアの日常。

ニュースタイトルから575を抽出して、川柳を作れるアプリを作った話

クソアプリ Advent Calendar 2019 2日目の記事です。

https://qiita.com/advent-calendar/2019/kuso-app

Advent Calendar参加欲が急にわいたので、急遽エントリー。

アプリ概要

ニュース川柳（βです）

newsenryu.spicy-space.xyz

 

  • ニュース記事から川柳を作るサービス。
  • ニュースサイトのRSSを形態素解析し、5文字・7文字の単語を抽出しています。
  • ユーザーは抽出された単語を選んで、川柳として投稿できます。
  • 投稿された川柳からは、元のニュース記事に飛べるので、眺めていると、直近で話題になっているニュースが分かる予定。

 

背景 

  • コラージュ川柳（新聞の見出しの切り抜きで作る川柳）から着想。

dailyportalz.jp

  •  機械学習の勉強をしてみたかったが、教師データが無い→言語解析系の教師データを集めるためのWebサービス作ればいいんじゃ？→川柳いいかも
  • 本業でWebのお仕事できていないので、新しめのフレームワークを触って、時代に置いて行かれないようにしたい


使用した技術

SPAではじめて作りました。

バックエンド

形態素解析

  • kuromoji.js

github.com

 php-mecabのインストールに挫折した（笑）ので、簡単に使えそうだったこちらを使用させて頂いた。

 

フロントエンド

  • Ionic（v3） + Angular

 

ionicframework.com

IonicはアプリライクなUIコンポーネントが多数用意されている、Angularベースのフレームワークです。

普通に作ればPWAにデフォルトで対応しているのもメリット。

ちんたら作っている間にv4がリリースされてしまいましたが、v4ではReactやVueにも対応した様子。

SPAを初めて作る僕にとって、どう作るべきなのか迷うことが多々あったが、下記

公式のチュートリアルアプリがかなり参考になった。

https://github.com/ionic-team/ionic-starter-super

 

 インフラ

  • Laradock

laradock.io

 

DockerでLaravelを使うためのツール群。全部入り。

docker-composeをベースに、アプリケーションサーバ、WEBサーバ、DBサーバと、それぞれ別コンテナとして作ってくれる。

もしサービスがスケールしたらコンテナをまるっとAWS上にデプロイ…等つぶしがきくかな、と思って選定。

 

工夫した点

575を抽出するロジック

単純に5文字・7文字を抽出するだけでは単語の羅列になってしまい川柳にならないので、「年内」＋「の」のように前後で合計5文字・7文字となるものを1ワードとして抽出した。

超ざっくりロジックだが、ある程度うまく拾えている。

あと「山口達也」など、意識せず話題のニュースからワードが抽出されてて面白かった。

 

反省点

構想から形にするまで、めちゃめちゃ時間がかかった

  • アイデア自体は4年前くらいのもの
  • 開発着手したが、残業続きでモチベーションが完全になくなったり、気が向いたら再開したり、を繰り返し、気付けば未完成のままここまで来ちゃった。
  • 新しいこと(Laravel、Ionic、SPA、Docker)を盛り込みすぎた。躓いてはモチベーションが下がった。

SPAなので本来トークンで認証すべきだが、横着してセッションでやってしまった

  • SPAならステートレスなAPIで実現すべきだが、めんどこれ以上新しいことやらない方が良いという判断のもと、従来のページ遷移前提の認証の仕組みで実装した。
  • 次何か作るときは、トークンで作りたい。

下記、参考にさせて頂きました。

qiita.com

 

まとめ・感想

個人開発について

  • 個人開発はモチベーション維持が大変
  • 新しいことは、盛り込みすぎない方が良い
  • 誰かと一緒に作ったら良いかも

Ionic（Angular）について

  • エラーメッセージ、どこが悪いのか直感的に分かりにくい
  • でもTypeScriptでカッチリ型指定して書けるのは好み
  • 良くも悪くも全部入りなので、ファイル構成・デプロイの仕組み、周辺ライブラリの選定に迷うことはないのは良い

 川柳、投稿してみてもらえると、嬉しいです！