はじめに
🐺「ようこそ、安西こころさん！お待ちしてました〜1」、nikkieです。
映画『かがみの孤城』、皆さんはもう見ましたか？2
私は1週間経たない間に複数回鑑賞し、原作も読み進めるという刺さりようです😭😭😭
そんな私が『かがみの孤城』にインスパイアされて作ったものを共有します。
目次
縦書きの鏡文字を作りましょう！
クリップボードにコピー3（または画像をダウンロード）してTwitterでつぶやけます！
大晦日ハッカソンという風習を思い出し、「1日使って作ってみたい」と時間の制約と闘いながら開発しました！
かがみの孤城そろそろまた観に行きたい（こころちゃん始めみんなに会いたい）けど、ガッツリ開発できるのも残り数日。
— nikkie にっきー (@ftnext) 2023年1月2日
今日は、劇場をちょっとこらえて、ハッカソンだ💪
昨日やってみた鏡文字をもう少し触ってみよう
技術スタック
- HTML 1枚で実現しています
- GitHub Pagesでホスト
- Canvas APIにJavaScriptで文字を描画しています
- 縦書き鏡文字にするロジックは別途記事にします
- Bootstrap 5でスタイルを当てました
ソースコードはこちら：
スペシャルサンクス：YAPCの川柳ジェネレーター❤️
2022年3月のYAPC::Japan::Online 2022、川柳ジェネレーターがnikkieの心をつかみました。
今回1日で実装するにあたり、こちらを大いに参考にしました4。
JavaScriptは全然スラスラ書けない（どんなことができるかもあんまり掴めていない）のですが、「川柳ジェネレーターの鏡文字バージョンを作りたい」という動機で、MdNのドキュメントにあたりながらソースコードを写経していきました。
cloneしたいものがある場合、公開されているソースコードは開発生産性を大きく上げますね！
終わりに
かがみの孤城にインスパイアされ、「お気に入りのジェネレーターを参考にしたら鏡文字版ができるかも」と、1日ハッカソンして作ったものを共有しました。
よければ遊んでみてください！😉
あと、（面白い作品目白押しだと思いますが）『かがみの孤城』も観てください！🙏
今回やってみて思ったのは、「JavaScriptが書けたらホスティングサービス（例：GitHub Pages）の力を借りてアプリを簡単にWebに公開できる！」ということ。
Pythonだとアプリケーションの公開ってサーバの用意がいるんですが、JavaScriptの場合（フロントエンドだけで実装する場合）はだいぶ簡単ですね。
これには舌を巻きました、すごい！
β版は最初に作りたいと思った機能全部入りなのですが、使ってみると「もっとこうしたい」とアイデアが湧いてくる5ので、時間を見つけて機能追加していこうと思います。
フォークやプルリクエストは大歓迎です。
コードでも『かがみの孤城』を盛り上げましょう！
#かがみの孤城 にインスパイアされ、縦書きで鏡文字が作れるサイト(β版)を1日ハッカソンして用意しました。
— nikkie にっきー (@ftnext) 2023年1月2日
最初に思った「こういうふうにしたい」を実現したのですが、まだまだ作り込めそう
作ろう縦書き鏡文字！ https://t.co/p50f6vMNms
映画でも原作でも作品に触れる入り口になったらいいな〜🐺🏰 pic.twitter.com/Yjn1W16Dkm
- 予告の0:07あたりから聞けます。予告編は見ずに鑑賞に行っても全然楽しめました〜 ↩
- ぜひ観てくださいね🥺 ↩
- ブラウザに制限があるようです。PCブラウザのChromeでは動きましたが、Firefoxでは動きませんでした↩
- https://github.com/jpa-perl/yapcjapan-site/tree/master/2022online/senryu↩
- flipped-letters-generator's feature · GitHub↩
