前置き
クソアプリ2 Advent Calendar 2019の((-~[]+[]+-~[]>>-~[])+(-~[]<<-~[]))日目やらしてもらいます
記号プログラミングが好きなりゅうって言います！
素直な気持ちを伝えるのは恥ずかしい…
それならちょっとだけ読みにくい形にしちゃえ！！
というわけで任意の文章をJSな記号に変える素敵なクソアプリを作りました
よかったら遊んでみてね => https://s17001.github.io/okimotiToKigou/dist/
アプリケーション概要
任意の文字を入力すると、jsな記号プログラミングに変換するWEBアプリケーションです
元の文章に戻すには
・ ブラウザのコンソールに直で貼ったり
・ evalしたりする(evalするときは変数使わないモードにしてね！)
などすれば元の文章を取り出せます
このアプリでメッセージを作って、気になるあの子に記号でメッセージを送ってみよう！！
生成される文字数が多いのでだいたいツイートできませんが仕様です
技術的なお話
使ったもの
- Vue.js
リポジトリ: https://github.com/s17001/okimotiToKigou
記号のお話
基本としてJavaScriptにおける暗黙的な型変換をいっぱい利用しております
数字まわり
~[] // -1 からの配列をビット反転して数字にする
-~[] // 1 頭に - をつけて負の符号を打ち消す
-~[] + -~[] // 2 これらの足し算
文字まわり
![]+[] // "false" falseをString型へ変換させる
(![]+[])[-~[]] // "a" falseの1番目をとってくる
例えば僕の名前である ryu を作るなら以下の通りです
(!![]+[])[-~[]]+(-~[]/[]+[])[((-~[]+[]+-~[]>>-~[])+(-~[]<<-~[]))]+([][""]+[])[-[]] // ryu
記号から作り出せる文字、数字は全部で以下の通りです
true, false, undefined, infinity, NaN, Object,
1, 2, 3, 4, 5, 6, 7, 8, 9, 0
上記の文字から取り出せない文字はUnicodeからの呼び出しを用いることにより記号で表現できるようになります
絵文字とUnicodeのお話
emojiを記号で表現する際に、サロゲートペアな絵文字たちがバラバラになってしまう問題がありました
'🤔'.charCodeAt().toString(16) // "d83e"
"\ud83e" // "�"
対象の文字のlength分対応する記号のコードを生成して対応しました
// charCode単位でイテレートする
for (let i = 0, l = '🤔'.length; i < l; ++i) {
const parsedArr = [...(input.charCodeAt(i).toString(16) + [])]
const flamedArr = parsedArr.map(いい感じに記号にする関数)
/* 以下いい感じの処理たち
*/
}
ツイートするために
ツイートさせる画面のクエリパラメータに+を含めないために温かみのある素直なコードを書きました
<div>
<a class="tweet" :href="'https://twitter.com/intent/tweet?text='+twitter+'&hashtags=kuso_app_2019'" target="_blank">ついーとするためのボタン</a>
</div>
computed:{
twitter(){
return encodeURI(this.tweetText).split('+').join("%2B")
}
}
とても参考になる記事 + @
javascript
php
僭越ながら僕のスライド
https://speakerdeck.com/s17001/ji-hao-puroguramingufalseji-da-cheng
まとめ
このアプリを作るまでに変数がいまどの型になってるかがある程度わかるようになりました！！！
みんなも記号プログラミングをして人間コンパイラになりましょう！さあ！！！！！！！！！
思いついたアプリケーションを思いのままに作っていくのは最高に楽しい、さらにいい感じに記事にまとめる機会があるので、クソアプリなアドベントカレンダーはとてもいい文化だなぁと思いました。
ここまで読んでくれてありがとうございました！！！
残りの2019年もよき日を過ごしましょう。それでは、良いお年を。