創作支援ツール「WorldType」に使われている技術

読了目安:10分

創作支援ツール「WorldType」に使われている技術

こちらはCrieitの個人開発サービスに用いられている技術 Advent Calendar 2018の10日目の記事です。

昨日は8398a7さんの「SP☆12参考表(地力表)支援サイト を支える技術」でした。

はじめに

@iotasです。物語を作る人向けの創作支援ツール「WorldType」というものを作っています。
eyecatch.jpg

今回はアドベントカレンダーということで、このサービスの「中の技術」の紹介となります。

これ、結構ごった煮なんですよね。

面白いと思うか、ごちゃごちゃと見るか……。多分面白いって思ってもらえるんじゃないかな。

それでは見てみましょう。

フロントエンド

JavaScript部分はまだjQueryが多いですね。最近はVue.jsを使い始めています。

更に後述しますがTypeScriptで書いている部分もあります。

MaterializeというCSSフレームワークを使ってます。Vueの部分はElementというUIライブラリも使ってます。

バックエンド

PythonのDjangoフレームワークを使ってます。

API部分は、Django REST frameworkを使っています。

PaaS

Herokuです。

メール配信

Mailgunを使ってます。

エラートラッキング

Sentryです。

実際に見ていく

さあ、ここからはごった煮部分を一個一個追っていきましょう。

ログインした後のダッシュボード

dashboard.jpg

わかりやすくMaterialデザインっぽいですね。

CardやボタンはMaterializeのCSSをベースに作っています。
アイコンはGoogleのMaterial Design Iconですね。

右上に「チュートリアル」っていうのがありますね。
これを押します。

tutorial.gif

チュートリアルが始まりますね。これはIntro.jsを使っています。

人物一覧

characters.jpg
人物一覧に入ると人物のカードがバーッと表示されます。

……
characters2.gif.gif
この状態でブラウザーを狭めてみましょう。

はい、良い感じに並び変えられましたね。

これはMasonryというライブラリを使っています。

うまく余白を見つけて要素を並べてくれます。
このライブラリはすごいお気に入りで、昔からずっと使っています。

ちなみに左側にサイドメニューが出ていますが、ここはVue.js + Elementになっています。

sidemenu.jpg
わかりにくいですが、「キャラクター」をクリックするとAPIを呼んでロードします。動的にこういうのが簡単にやりたかったのでVueにしました。

jQueryでガンガン作ってサービスをリリースした後で「Vueいいじゃん!」って気づき、今は新しく作った部分から徐々に置き換えている感じです。

次にいきます。

キャラクターの並べ変え

キャラクターの「並び順を変更する」ではドラッグ・アンド・ドロップで直接キャラクターの並び順を変更できます。
sortable.gif

これはSortableJSというライブラリを使っています。

Vueでも使えるので便利です。
次です。

経歴

人物を掘り下げていくと「経歴」というマークダウン形式の入力欄が登場します。
markdown.jpg
これはSimpleMDEです。

他にも幾つかマークダウンのライブラリはありますが、これは日本語も無難に使えて良い感じです。

次にいきます。

印刷用ページ

記録されているすべての情報を印刷するためのページがあります。
print.jpg
印刷用のレイアウトを作成する必要があったので、ここではpaper-cssを使っています。

クラスを当てるだけで良い感じに幅や高さを調整してくれるのでとても便利です。

次。

アイデアボード

画像やふせんをペタペタ貼ったりする機能です。

ideaboard.jpg
よく見るとわかるのですが、ふせんの中にふせんをおいたりして親子関係にすることができます。

ここは、割と初期に作った機能で、jQueryとjQuery UIあたりでひたすら作りました。

画像のアップロードはDropzone.jsですね。

この辺の作り方についてはQiitaに記事を書いているので、興味があればこちらもご参照ください。

続きます。

小説の宣伝ページ

この機能はあまりちゃんとした名前をつけていないのですが、入力したテキストを分析して頻出単語や単語同士の繋がりを見ることができるページです。

textanalyzer.jpg

テキストはS3に上げて、AWS Lambdaで文章を解析しています。

文章解析ですがほとんど独自ロジックはなくライブラリに依存しています。もうほとんど覚えてないですがコードを見る限りはnltkを使っているようです。

このライブラリを使う際に日本語の形態素解析を行う必要がありますが、こちらはjanomeを使っています。

頻出回数とか、文章内での単語と単語の生起具合を解析している風に見えます。

グラフの描画はd3.jsです。
d3は上手く使うと少ない労力でインタラクティブなページが作れるので重宝しますね。

続きます。

世界地図作成機能

WorldTypeからはまだリンクを貼っていないんですが、ここにあります。
terrain.jpg
オリジナルな世界地図を自動で作る機能です。

これは特殊なライブラリを使っているわけではなく、ひたすら計算しまくってCanvasにガシガシ描画しているだけです。

ざっくりとしたロジックですが、ボロノイ図ドロネー図を使って点から「面」を作成。後は標高を上げたり下げたりして水の流れを計算して、大地を浸食させたり結合したりするとこんな感じになります。

型がないとつらかったのでこの辺りはTypeScriptで書いてます。

終わりに

ここまで駆け足でWorldTypeを支える技術を見てきました。

これだけの素晴らしい技術をオープンに提供してくださっている開発者の皆さんには本当に感謝の言葉しかありません。

私も記事執筆などを通して少しずつ技術界隈に還元していきたいと思っています。

明日はかしい@お笑いSNS作成中さんの記事です!


iotas𓆡創作支援アプリ運営中𓅬

創作支援ツールとかを作ってます。(Python) https://www.world-type.com 歴史成分多め。

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント