「WorldType」の記事 - Crieit

2019年の抱負：「釣りタイ駆動開発」

2019-01-04T07:59:07+09:00

はじめに

あけましておめでとうございます。@iotasです。
普段は個人開発で、WorldTypeという物語創作のためのWebサービスを運営しています。

今年のテーマ

今年は釣りタイ駆動開発にチャレンジします。

釣りタイ駆動開発とは

釣りタイ駆動開発をまだご存知でない方のために説明すると、釣りタイ駆動開発とは私がついさっき思いついた手法で、「未来に作られているであろう記事のタイトル（釣りタイトル）」を妄想して、それに現実を合わせていく開発スタイルです。

具体例を出した方がわかりやすいかもしれません。

例えば、私と皆さんがあるアイドルグループのメンバーをやってると仮定しましょう。数年後に大成功した自分達について書かれているであろう雑誌の記事のタイトルを妄想します。この際、実現性とか現実は無視します。

こんなタイトルが思い浮かびました。

「秋元康も絶讃！　○○のステージはなぜそこまで人を魅了するのか」

このタイトルが私達のゴールになります。
次にこのタイトルの記事の中身を考えていきます。

未来の私達のことが書かれた記事には一体何が書かれているのか。
なんでこんなタイトルが付けられているのか、ゆっくり考えていきましょう。

アウトラインを考える

わざわざ秋元康さんが絶讃するぐらいだから、他のグループと比べて何か特に秀でた点があるに違いありません。
- ステージの演出が他と比べてすごい？
- メンバーの素の表情が見られる？
- 会場の一体感がハンパない？

記事に登場する人物についても考えてみましょう。
まずプロデューサーが出てくるのは間違いないでしょう。彼or彼女が話していそうな内容も妄想します。

プロデューサー「いえ、実はそういう効果を狙ってたわけじゃないんです（笑）。　リーダーが『こんなことやったら楽しいんじゃないか』って言い出して。結果的になくてはならない文化になったのは偶然でした」

たぶん経済評論家だかアイドル評論家みたいな人が出てきます。

評論家「私も一度ライブに行ってみたんですが、実は現場ではいまいちピンとこなかったんです。『なんでこんなに熱狂してるんだろう』って。でも家に帰ってお風呂に入っていると『ああ、あれは楽しかったな』ってどんどんステージのことが脳裏に浮かび始めて。後でたまたま心理学者の人にその話をしてみたんですが、あのステージにはそういう仕掛けが随所に施されているらしくて……」

妄想しているうちに「今の私達」が辿っていくべき道筋のヒントが見えてきます。
- 何か特別な文化を創る
- 後で思い返せるような心理学的な効果を狙った演出をする

じゃあ特別な文化を作るには？　
→　他の人はどんなライブをしてるのか調べないといけない

心理学的な効果を狙うには？
→　心理学について学ばないといけない（あるいは専門家にお願いしないといけない）

こんな感じで「未来の記事」をどんどん具体化していくことによって、「今やるべきこと」が明らかになるわけです。

この手法の何がいいのか

みんながこれを「妄想だ」と認識した上でアイデアを考えられることです。
どうせ妄想なので好き勝手に言えます。

更に「書かれていそう感」にこだわることによって、現実から大きく乖離することもありません。

妄想を楽しみながら、目指すゴールに至るための道筋を表すことができます。

なお冒頭に書いたとおり、釣りタイ駆動開発はさっき思いついたのでエビ（証拠）はありません。

今年のWorldTypeの釣りタイ

「なぜWorldTypeを使っているユーザーはエタりが少ないのか」
で行きたいと思います。
（エタる：作品が未完のまま途中で止まってしまうこと。「エターナる」）

作品を幸せに完結できるように、作者さんをフォローしていく方法を考えて開発していきたいと思います。

2019年：「なぜWorldTypeを使っているユーザーにエタりが少ないのか」
2020年：「なぜWorldTypeは創作界の火薬庫と呼ばれるのか」
2021年：「WorldTypeが海外に進出したその理由」

昨年の御礼

2018年はWorldTypeを愛用してくださるユーザーの皆様を始め、多くの方々に大変お世話になりました。

とりわけ、このCrieitを運営されているdala様など開発コミュニティの皆様と多くのコミュニケーションを取らせていただき、勉強になるわ楽しいわ心の支えになるわで大変なことでした。

ありがとうございます。
本年もよろしくお願いいたします。

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

2018-12-10T00:23:32+09:00

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

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

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

はじめに

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

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

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

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

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

フロントエンド

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

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

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

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

チュートリアルが始まりますね。これは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作成中さんの記事です！

「WorldType」の記事 - Crieit

2019年の抱負：「釣りタイ駆動開発」

はじめに

今年のテーマ

釣りタイ駆動開発とは

アウトラインを考える

この手法の何がいいのか

今年のWorldTypeの釣りタイ

昨年の御礼

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

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

はじめに

フロントエンド

バックエンド

PaaS

メール配信

エラートラッキング

実際に見ていく

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

人物一覧

キャラクターの並べ変え

経歴

印刷用ページ

アイデアボード

小説の宣伝ページ

世界地図作成機能

終わりに