こちらはCrieitの個人開発サービスに用いられている技術 Advent Calendar 2018の10日目の記事です。
昨日は8398a7さんの「SP☆12参考表(地力表)支援サイト を支える技術」でした。
@iotasです。物語を作る人向けの創作支援ツール「WorldType」というものを作っています。
今回はアドベントカレンダーということで、このサービスの「中の技術」の紹介となります。
これ、結構ごった煮なんですよね。
面白いと思うか、ごちゃごちゃと見るか……。多分面白いって思ってもらえるんじゃないかな。
それでは見てみましょう。
JavaScript部分はまだjQueryが多いですね。最近はVue.jsを使い始めています。
更に後述しますがTypeScriptで書いている部分もあります。
MaterializeというCSSフレームワークを使ってます。Vueの部分はElementというUIライブラリも使ってます。
PythonのDjangoフレームワークを使ってます。
API部分は、Django REST frameworkを使っています。
Herokuです。
Mailgunを使ってます。
Sentryです。
さあ、ここからはごった煮部分を一個一個追っていきましょう。
わかりやすくMaterialデザインっぽいですね。
CardやボタンはMaterializeのCSSをベースに作っています。
アイコンはGoogleのMaterial Design Iconですね。
右上に「チュートリアル」っていうのがありますね。
これを押します。
チュートリアルが始まりますね。これはIntro.jsを使っています。
はい、良い感じに並び変えられましたね。
これはMasonryというライブラリを使っています。
うまく余白を見つけて要素を並べてくれます。
このライブラリはすごいお気に入りで、昔からずっと使っています。
ちなみに左側にサイドメニューが出ていますが、ここはVue.js + Elementになっています。
わかりにくいですが、「キャラクター」をクリックするとAPIを呼んでロードします。動的にこういうのが簡単にやりたかったのでVueにしました。
jQueryでガンガン作ってサービスをリリースした後で「Vueいいじゃん!」って気づき、今は新しく作った部分から徐々に置き換えている感じです。
次にいきます。
キャラクターの「並び順を変更する」ではドラッグ・アンド・ドロップで直接キャラクターの並び順を変更できます。
これはSortableJSというライブラリを使っています。
Vueでも使えるので便利です。
次です。
人物を掘り下げていくと「経歴」というマークダウン形式の入力欄が登場します。
これはSimpleMDEです。
他にも幾つかマークダウンのライブラリはありますが、これは日本語も無難に使えて良い感じです。
次にいきます。
記録されているすべての情報を印刷するためのページがあります。
印刷用のレイアウトを作成する必要があったので、ここではpaper-cssを使っています。
クラスを当てるだけで良い感じに幅や高さを調整してくれるのでとても便利です。
次。
画像やふせんをペタペタ貼ったりする機能です。
よく見るとわかるのですが、ふせんの中にふせんをおいたりして親子関係にすることができます。
ここは、割と初期に作った機能で、jQueryとjQuery UIあたりでひたすら作りました。
画像のアップロードはDropzone.jsですね。
この辺の作り方についてはQiitaに記事を書いているので、興味があればこちらもご参照ください。
続きます。
この機能はあまりちゃんとした名前をつけていないのですが、入力したテキストを分析して頻出単語や単語同士の繋がりを見ることができるページです。
テキストはS3に上げて、AWS Lambdaで文章を解析しています。
文章解析ですがほとんど独自ロジックはなくライブラリに依存しています。もうほとんど覚えてないですがコードを見る限りはnltkを使っているようです。
このライブラリを使う際に日本語の形態素解析を行う必要がありますが、こちらはjanomeを使っています。
頻出回数とか、文章内での単語と単語の生起具合を解析している風に見えます。
グラフの描画はd3.jsです。
d3は上手く使うと少ない労力でインタラクティブなページが作れるので重宝しますね。
続きます。
WorldTypeからはまだリンクを貼っていないんですが、ここにあります。
オリジナルな世界地図を自動で作る機能です。
これは特殊なライブラリを使っているわけではなく、ひたすら計算しまくってCanvasにガシガシ描画しているだけです。
ざっくりとしたロジックですが、ボロノイ図とドロネー図を使って点から「面」を作成。後は標高を上げたり下げたりして水の流れを計算して、大地を浸食させたり結合したりするとこんな感じになります。
型がないとつらかったのでこの辺りはTypeScriptで書いてます。
ここまで駆け足でWorldTypeを支える技術を見てきました。
これだけの素晴らしい技術をオープンに提供してくださっている開発者の皆さんには本当に感謝の言葉しかありません。
私も記事執筆などを通して少しずつ技術界隈に還元していきたいと思っています。
明日はかしい@お笑いSNS作成中さんの記事です!
創作支援ツールとかを作ってます。(Python) https://www.world-type.com 歴史成分多め。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント