ひいらぎの日記

デザインはまた時間のあるときにやります!

HTML + JavaScript でちょっとだけ楽する

部活で、会議の議事録を書くという(多分誰も読んでいない)役割があって、そこに出席者の名前を列挙しなければいけなく…下に簡単に書いてみますと、

  1. 紙媒体で誰が出席してるかチェック

  2. その紙を見ながらパソコンでひたすら名前(名字)を打ち込んでいく

  3. 議題について書き込んでいく

2がとてもめんどくさいなと思っていました。

Macユーザーになる前は、WindowsのOffice(Word)上でフォームアプリケーション(でいいのかな? 手前にウィンドウ表示させてそこで作業するやつ)を作ってチェックボックスにチェックが入っている人の名字をボタン1つで本文に自動入力という感じのマクロを作っていたんだけど、Macに乗り換えてから、それができなくて、毎回人名を手で入力していました。

ちょっとでも楽したいので、ブラウザ上にチェックボックスを配置して、ボタンを押すと、出席者の名字を「、」で区切ったものをアラートしてクリップボードに入れてくれたら助かるかなと思ったので実装してみることにしました。(いちばんやりやすそうだったからブラウザ上にしたけど、他にも方法ないかな?)

できたもの

f:id:ymho_99:20170505205715p:plain

こんな感じ

Who is attend ?

です。ひいらぎファミリーが選択されています。 これをATTEND!すると、

f:id:ymho_99:20170505202847p:plain  こう返してくれる(全員名字がひいらぎだった…) まあ人数は別にいらないけど、なんとなくつけました。

クリップボードへの格納はできなかった(なんかブラウザの仕様でできるできないがあるらしくてめんどくさくなったのと、safariはalertの文章をクリップボードにコピーできる(人工的に)ので今回はやめました)。

所要時間は1時間くらいでした。 名簿は変更が容易にできることを前提として、名簿専用のjsを別に作りました。

index.html

main.js

member.js

style.css

の4ファイルでできてます。mainは主にATTEND!の挙動について、memberは名前一覧、それをindex.htmlのfor文でチェックボックスをくるくる表示してる感じです。 CSSについては、

qiita.com

このページを参考にさせていただきました〜m(__)m

f:id:ymho_99:20170505204117p:plain  [“所属”,”名前”]みたいな感じです。

難しかったこと

選択画面ではフルネームを表示させて、alertするときには苗字だけに文字列をカットするのに、substringで開始位置を0に指定して、indexOfで半角スペースを見つけそれを終了位置にするところで少し手こずった。 それくらい…です。

githubに置いてるのでソースを見たい方はそちらからどうぞ

github.com

学んだこと
membersList[i][1].substring(0,membersList[i][1].indexOf(" "))

とすれば、開始位置は先頭、indexOfの引数の文字の直前が終了位置となって配列の要素それぞれに対し任意の文字を取り出せる。それも含んで、

<form class="FORMBOX" name="XXX">
            <script type="text/javascript">
                for (i = 0; i < membersList.length; i++) {
                    document.write("<input type=\"checkbox\" value=\"" + membersList[i][1].substring(0,membersList[i][1].indexOf(" ")) + "\" id=\"" + i + "\">");
                    document.write("<label for=\"" + i + "\" class=\"checkbox\">" + membersList[i][0] + ": " +membersList[i][1] + "</label>");
                }
            </script>
</form>

htmlにこう書くとmember.jsに登録されている名前の数だけcheckboxを生成できそう。

書き方に関しても、もっといい方法ないかすごく気になるけど、とりあえず、本を欲しいなあ!

www.amazon.co.jp