ネイティブな「JSはいいぞ」
はじめに
この記事は Tokyo City University Advent Calendar 2020 adventar.org の5日目の記事です
昨日の記事は@mewl_mshさんの「私の推しなのでみんなも推してください。」でした
いいですね、推し・・・
僕もthinkpad X260をフォロワーから譲っていただき愛用しております、なんだかんだmacbookかthinkpadが外に持っていくには便利なんですよね・・・
そして空前の都市大フロッピーブーム、なんなんですかねこれ。残念ながら私は多分現代に生きているので現在自宅にフロッピーはありません。winMEのパソコンならあるんですけどね
PCDPの見た目僕も好きです。かっこいいのがなんだかんだ惹かれるという。普段から変なものを持ってる彼ですがこれは普通にかっこよいなぁとは思ってました。
感想が長くなっちゃいましたが非常におもしろい記事でした、ありがとうございました。
今日の話題
皆さん、JSって知ってますか？知ってますよね？
皆さんご存知、JavaScriptですよ！*1
最近はjQueryとかNodejsとか便利なrランタイム・ライブラリがたくさんでてきて、さらにはJSなのにコンパイルとかそういう言葉が出てくるようになりましたね。
私の周りも最近のweb系の話題というと大方NodeかVueかTSか、そんな感じなんです。
そんな中、ネイティブJS ( VanillaJS )を使ってWebツールを作ってみましたのでその記録です。
目次
経緯
コ〇ナさんが流行ってからというもの、まぁ良くも悪くもいつもと違うことが色々ありまして。
その中で「出会い」もがありました、その名をオンラインDJイベントです
Twitterのフォロワー各位がコロナになる前からもちょこちょこアニクラいったりDJしてたりでたのしそうだな～～って思ってはいたんですが
#MU2020 でつよいアニソンなどなどを知ってしまい、いつのまにかDJをはじめていました
キタキタキタ pic.twitter.com/izz3Xxd22E
— ケー (@ke_odakyu9000) 2020年6月27日
そうこうありまして、
おもに塩パセリさんの #タマクラ ( #ヒナクラ )でオンライン3回、リアル1回DJさせてもらいました。
まだまだ持ってる手札な曲も、うまいつなぎも少ないので勉強中ですがちょこちょこ推し曲をいろんな人に聞いてもらうためにやっています
それはそれとして
私の出ている #タマクラ やそれ以外のオンラインで配信される画面は以下のような感じのものが多いのですが
(画像はタマクラ2より)
画面上部で曲名が出ていると思いますが、
曲名をツイートする→外部ツールでツイートを取得→OBSに表示ということをしています。
このツイートなのですが、この当時は別の方が作ったVBAツールか手動で用意してツイートするか、という状態でした。
このタマクラ2が終わった後、ある方からwebツールで作ればスマホでも送信できるしなんかいいんじゃね？という話になり、
作りました
本題:そもそもなんでnativeJS?
総合大学を語る理系大学たるもの、技術的な話はないといけないのでここからは技術的な話です。
なんでそもそもnativeJSの話をするのかというと*2、最近だとjQueryとかnodeとか便利なライブラリが大量にでて大変楽に高機能webアプリケーションが作れるようになりました。
しかしバージョン互換やら、逆にライブラリに頼りすぎてかゆいところに手が届かない、とか起きがちなので基本のJSを知っておくのは、いざというとき自分で何か作るのに非常に役立つ力ではあると思っています。
ちゃんとプログラミングするのもちょっと久しぶりだったり、せっかくそれなりなものを作ると思っていたので自分の手でできるところはなるだけ自分で書こう、という方針で作っていきました。
前置きが長くなりましたが
まずは、上記で作ったサイトはこちらなのでまずはちらっとどんなサイトか見てみてほしいです。
ちょこちょこっと打って投稿ボタンを押してもらうとなんとなく動作がわかると思います。
ここの中は
HTML5+Bootstrap4+nativeJSで作られています
作機能・仕組み
ざっくりとですがこのサイトの機能・仕組みについて説明していきます。
各入力フォームについては見ての通りなので基本的に「ボタン」の機能+αについて書いています。
①「投稿」ボタン
投稿ボタンを押されると、
document.getElementById("id").value;
(よくある)
で各フォームのデータを取得して、それを整形してTwitterの投稿(共有)用URLクエリパラメータに投げてURLを開く、ということをしています。
仕様としては
ベースURLが
https://twitter.com/intent/tweet?
で各パラメータが
url=シェアするURL, text=ツイート本文, hashtags=ハッシュタグ, related=ツイートした後フォローさせたいアカウント
となっているのでこれらに必要なデータを付加していく感じで投稿します。
ここで困り事がいくつかあって、
例えば、urlを未指定のままにすると投稿元のページのURLが勝手に付加される(クソ迷惑)という仕様になっているのでここをスペース文字で置換してあげたり、
文章中にハッシュタグが入っているとそこで文章が切れる(ハッシュタグは分離しないといけない)仕様になっていました。
後者に関しては最初、正規表現で スペース+#+文字列+スペースを切り出してハッシュタグ用の変数を作ってパラメータのhashtagsに登録するという処理をしていたのですが、
投稿しようとする文字列を一旦すべて encodeURIComponent(text)で変換したうえで投げればハッシュタグが挟まっていようとどんな普段みない特殊記号が来ても処理ができるようになりました。
この辺は各ライブラリとかに依存してそっちを調べるよりはやい！*3っていうことですねという
②「追加」「削除」ボタン
押すと行数が増えたり減ったりするやつです。関数はいたってシンプルで、
function addrow(n){}
でnだけ渡してtable要素のrowを増やすだけという超単純仕様です。まだ作ってないのですがちゃんとinput作れば任意の行数も追加できます。やりたい人はコンソールからnを指定して追加するのもどうぞ？
③「URL共有」ボタン
ここがネイティブJSだからこそ何も考えずに実装できた部分になります。 便利な関数がありまして
let query = location.search;
これを書くだけでたとえば
http://suomomo.com/nowplay/index.html?list=****
のlist=****の部分が簡単に取り出せるので後は****だけ切り出してしまえば簡単なURLクエリが実装できます。
今回はこの部分に
登録ハッシュタグ+入力されたセットリストデータ=>JSON化=>lz-string.jsでデータを圧縮=>base64化
として、データをURLに登録し共有できるようにしました。
展開は全く逆のことをしているだけなので省略します。
これができるようになり、PCでDJソフトからコピペでセトリを作成→スマホで流れるのと同時に投稿or現地で同時に投稿ができるようになりました！自分で作って思った以上に便利でした。
④「csvエクスポート」ボタン
おまけ機能ですが、作ったセトリをcsvエクスポートもできるようにしています。この辺は本当によくいろんなライブラリとかで入れてやってみましょうとか起きるわけですが、直のjsで書くのも勉強になるのと思った以上に簡単にできたっていうのもありつけてみました。
ざっくり仕組みとしては、
①データを配列に格納する
②データをカンマと改行コードのついた文字列に変換する
③以下の5行に対して作ったデータとファイル名などをセットする
let link = document.createElement("a");
link.download = "filename.csv";
link.href = URL.createObjectURL(new Blob([data],{type: "text/csv"}));
link.dataset.downloadurl = ["text/csv", link.download, link.href];
link.click();
この③は何をやっているかというと、
aタグを生成して、ファイル名設定して、ObjectURLを生成して、aタグにobjectURLを設定するというだけです。DOM操作はめちゃくちゃしていますが。
ここではcsvをtypeで指定していますが、ここで明示的に記述できるtypeなら大体なんでも設定できます。*4
こんな感じで意外とシンプルにできちゃうので思った以上にライブラリに頼らずともネイティブでなんでもできちゃう、ということでした。
まとめ
自分の手で書くのはjsでどんなエラーやtypoが起きうるのかやDOMとはどういうものなのか理解するのに非常にいいものだなと色んな問題にあたるたびに思っていました。
今公開している機能以外にまだ作りたいと思っていてもできていない機能がそれなりにあるので(例えば:csvインポート)これからまた頑張っていきたいなと思っています
ここまでひたすらnativeJSの話をしていましたが別にnodeがわるいとかそういうわけではないく、nativeJSは自分で「ブラウザ・HTMLの仕様を理解をするので非常に良い」という意味で書いているのでその点ご理解いただければと思います。
まぁやらないのはもったいないということもあるのでnodeとかvue.jsとかいろいろなランタイム・ライブラリを学ぶ機会も今後作っていければいいなぁと(作るものが思いつけば)思っています。ネタください。
以上、なんか作ったものの技術公開ブログでした。ありがとうございました。
私は2週間後の今日、またこのアドベントカレンダーに投稿する予定になっているので
・職場の何か(出せる範囲で)
・16日にある学内イベントでやったこと
のどっちかを書く気がします。違うかもしれませんが。また見に来てくれると嬉しいです。
最後に
この記事は Tokyo City University Advent Calendar 2019 adventar.org の5日目の記事でした
明日の記事は廣木亮哉さんの「コロナのおかげで大学院入試受かった話」です。
知っている先輩なのですがここで初めて先輩が院に受かったことを知りました、先輩おめでとうございます！
おまけ
アイドルマスターが15周年なのですが、せっかくなので僕の推しというか、僕の担当しているアイドル紹介を置いておきます。
学年的にはJS・JCですが「大人」を目指しているかわいい子たちです。可愛いですね。なでなでしましょう。
2:橘ありす(12歳)(シンデレラガールズ)
3:周防桃子(11歳)(ミリオンライブ)
4:箱崎星梨花(13歳)(ミリオンライブ)
最後に、アイドルマスターシンデレラガールズU149は可愛いアイドルたちがいっぱいなのはもちろん、泣けて、感動できる良い作品なので応援しています。みんな是非読んでください。
(写真は出ているアイドルのごく一部です、かわいいですね)
