海に行くこと、海を眺めることは好きだけど、ベタつくのも焦げるのも嫌いだから泳ぐなら川がいい。
そう思う糸凪邑でございます。
今回は創作的営みの際に使うツールを作ってみましたのでそれの宣伝をば。
作ったのはこちら。
「Nole Maker」
http://hollowcradle.cf/nole_maker
昔、Androidで作ったUnboundっていうアプリがあるのですが、それのWeb版みたいなものです。
作り直すにあたって、機能をいじったり、要素をかなり増やしたりしました。
絵を描く、文字を綴る、ゲームを作るその他諸々に欠かせない"世界観"。
それを構成する要素をランダムに排出するツールです。
世界観作成補助器とかカッコつけて言ってみたらそれっぽいけど、要するに
ご覧いただけ場わかる通り、機能は色んなカテゴリからキーワードとなる単語をランダムに吐き出すというもの。
テーマは
これだけじゃ何言ってるかわかりませんので少々解説を。
まず前提として、僕ら人間の思考には"枠"があります。
例えば、自分がりんご、パセリ、拳銃、車、バットっていう知識を持っている場合、生み出されるもの、生み出すことができるものはこの5つを組み合わせたものになります。
この組み合わせから生まれるのは無限ではありませんよね？
つまり、アイデアが無いときはひねり出せばいくらでも出るというのは勘違いで、ひねり出せるのは、全ての組み合わせまでです。
これが思考の限界、思考の枠。
僕らの思考は知りうるものからしか生み出されないということ。
思考は自由だというのは確かだと思うけれど、その自由さには限界があって、自分の知識や経験で作られた枠組みの中でのみ自由であることができるわけです。
ということは、僕らがまるっきり新しいものを生み出そうと思った時、自分の外から要素を追加するしかありません。
でも、これがなかなか難しくて。
例えば、自分の外にあるものを得ようとしてGoogle先生のところに向かったとします。
ブラウザでGoogleを開き、検索フォームにキーワードを打ち込む。
そこで何を打ちこむのか。
何を調べればいいのか、何を知りたいのか・・・。
はて、自分の知らないものを調べるのに、自分の中にあるキーワードを調べているような・・・
そうです。
絞りだすキーワードすら自分の中から生み出されるので、外にたどり着くことができません。
じゃあ、どうするのか。
これは偶然の確率を高めることで解決します。
例えば、本屋や図書館でふらふらしたり、街中を散策したり。
ネットだと、Wikipediaで記事中に出てくるリンクを飛び続けたり、SNSで様々なニュースサイトをフォローしまくったり。
そういう方法で自分の外にあるものと出会う確率を高めることができます。
その結果、自分の枠を拡張することができる。
こういうことです。
なので、創作で出せるアイデアの元となる要素を自分の内外問わずランダムに生成すれば、自分の思考の枠を超えたものを生み出せるんじゃないか？
UnboundもNole Makerもそういう考えで作ってみました。
Nole Makerの使い方はこちらを参照。
— 糸凪邑＠空藍の揺り籠 (@hollow_cradle) 2018年6月22日
特に迷うことは無いと思います。
創作でアイデア出しに困っているお方はぜひぜひ使ってみてくださいませ。
小説やゲーム、絵など、物語や世界観が必要なものを作る際にはお役に立てるかと。
あ、機能は色々いじっていこうと思うんで、何かご要望や感想等ございましたら僕のTwitterか、コメントまでお寄せくださいませ。
ではまた。
良い創作ライフを。
参考資料
以下、「Nole Maker」を作る際にお世話になったサイト集。非常に助かりました。
この場をお借りしてお礼申し上げます。
ありがとうございました。
・Wikipedia
https://ja.wikipedia.org/wiki/
・JavaScript 要素を表示/非表示にするサンプル(displayとvisibility) |
https://itsakura.com/javascript-display
・displayとvisibilityの違い
https://qiita.com/ma_me/items/a5249693c0b21836126b
・ページ内のスムーススクロールをCSSのみで実装する方法 | KuzLog
https://kuzlog.com/2018/01/09/2049/
・【CSS】要素を上下や左右に中央寄せする簡単な方法 | KuzLog
https://kuzlog.com/2017/01/11/228/#i
・SNSボタンの実装方法メモ - Qiita
https://qiita.com/katsunory/items/4d90e24e389a587d3690
・JavaScriptにおける数値⇔文字列の型変換あれこれ - console.lealog();
https://lealog.hateblo.jp/entry/2013/02/28/005010
・【JavaScript入門】連想配列の取得・追加・ソートまとめ！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト
https://www.sejuku.net/blog/27965
・HTML,CSS,JAVASCRIPTのパス指定
https://web-designer.cman.jp/other/path/
・正規表現 - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions
・JavaScript の テンプレートリテラル を極める！
https://qiita.com/kura07/items/c9fa858870ad56dfec12
・【解説付き】chromeでXMLHttpRequestをローカルのファイルで行う方法
https://qiita.com/growsic/items/a919a7e2a665557d9cf4
・JavaScriptでCSVファイルを読み込む XMLHttpRequestの利用 - JoyPlotドキュメント
https://joyplot.com/documents/2017/03/01/xmlhttprequest-javascript-csv/
・javascript - How to read a local text file? - Stack Overflow
https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file
・JavaScriptプログラミング講座【ドキュメントオブジェクトモデル(DOM)について】
https://hakuhin.jp/js/dom.html
・JavaScriptプログラミング講座【XMLHttpRequest について】
https://hakuhin.jp/js/xmlhttprequest.html
・Ajaxを勉強しよう
http://www.openspc2.org/JavaScript/Ajax/Ajax_study/
・AJAX - ウェブデベロッパーガイド | MDN
https://developer.mozilla.org/ja/docs/Web/Guide/AJAX
・CSSアニメーション 入門
https://qiita.com/soarflat/items/4a302e0cafa21477707f
・CSS アニメーションの利用 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations
・CSSアニメーションは確実に進化している！キーフレームを使ったCSSアニメーションの実装ポイントまとめ | コリス
https://coliss.com/articles/build-websites/operation/css/how-to-use-css-animations-by-ibrahim.html
・使える！CSSアニメーション 20選 | SONICMOOV LAB
https://lab.sonicmoov.com/markup/css/css-animation-20/
・<select> - HTML | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/select
・JavaScript セレクトボックスの値を取得/設定するサンプル |
https://itsakura.com/js-selectbox
・XMLHttpRequest - Web API インターフェイス | MDN
http://www.openspc2.org/JavaScript/Ajax/Ajax_study/
・JavaScriptでHTTPを利用してWebのファイルを取得する - XMLHttpRequestの利用 (JavaScript プログラミング)
https://www.ipentec.com/document/javascript-xmlhttprequest-simple-using
・JavaScriptプログラミング講座【XMLHttpRequest について】
https://hakuhin.jp/js/xmlhttprequest.html
・Flexboxを利用してよくあるレイアウトを実装したサンプル集 | NxWorld
https://www.nxworld.net/tips/flexbox-examples.html
・Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
https://googlefonts.github.io/japanese/
・source-han-serif/README-JP.md at master · adobe-fonts/source-han-serif · GitHub
https://github.com/adobe-fonts/source-han-serif/blob/master/README-JP.md
・CSS3のWebフォントを使ってみよう | Think IT（シンクイット）
https://thinkit.co.jp/story/2011/08/18/2233
・2018年用、日本語のフリーフォント314種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
https://coliss.com/articles/freebies/japanese-free-fonts-for-2018.html
・SNSボタンの実装方法メモ
https://qiita.com/katsunory/items/4d90e24e389a587d3690
・JavaScriptでシェアボタンを生成する | cly7796.net
http://cly7796.net/wp/javascript/generate-share-button-in-javascript/
・CSS を JavaScript で操作する
http://var.blog.jp/archives/68896593.html
・【JS ・ CSS】class切り替え
https://qiita.com/fantm21/items/98dbb8f4388a036ae983
・JavaScriptでスタイルの動的変更方法
https://qiita.com/takahiro_itazuri/items/559427278f315ed119fe
余談
今回の思考に関する云々はあくまで個人的な感覚を意見の根っこに置いてますので、専門知識や何かしらの研究結果をご存じの方は教えてくださいませ。また、さっきGoogle検索のところで「調べても外には繋がらない」という感じのことを書きましたが、厳密にいえばできなくはないです。
自分の知りうるもので調べた結果、そこで偶然新しいものに出会うこともありますから。
でも、この場合は知っているものの関連項目であることが多いでしょう。
おそらく全く知らないものに出会う確率は低いと思います。
もし自分の知識と関連させて知のネットワークを広げたいのであれば、そうする方が効率はいいですし、むしろそうすべきです。
そうじゃなくて、自分と地続きですらない要素が欲しい場合はこういった方法が向いていると思います。
直接異世界の何かが転がり込んでくるわけですからね。
なので、その際はぜひぜひお試し下さいませ。
コメント
コメントを投稿