はじめに
先日作った以下のサービスを引き続き改修していきます。
ちなみに前回はPugの自動コンパイルを試しながら改修しました。
✅現状気になっている点
・スマホからの操作性
✅変更した点
①selectタグでは選択ボタンを使わない
②応援ボタンに対応するインプットの表示を消す
⇒チェックボックスに変更しました
③作成ボタンを1度押した後、変更に表示を変える
④CSS関連(高さを少し広くする。確認画面は140字想定して大体すべて表示されるように調整。ツイッターの文字サイズが意外に小さい件)
✅追加実装
スマホからの操作性
selectタグ使った場合、スマホだと選択した後完了ボタンを押す仕様になっていました。
なので選択ボタンを消して、定型文同様changeイベントを利用で改修。
続いて、よくよく考えてみたら応援ボタンに対応するインプットの値表示しなくていいなと思ったので消しました。
編集してtypeをhiddenにしました。 参考
// input#cheerText(type="text" value=cheerText readonly) input#cheerText(type="hidden" value=cheerText)
そして次に作成ボタンを1度押したら変更に表示が切り替わるようにします。
以下をindex.jsに追記。
let btn = document.getElementById('btn');
btn.textContent = "変更"
🙄ここまで色々弄ってきたので割とスムーズにいけました◎
ここで思い付きの追加実装。
応援をチェックボックスに変更して、追加・削除できるようにする。
文字とチェックボックスの高さ調整は以下追加で。
vertical-align: middle;
🙄ググらず30分くらい無駄に格闘しました。。。笑
そしてさっそくさっきのhiddenタイプのinputタグを削除。笑
// input#cheerText(type="hidden" value=cheerText) span input#cheerBtn.checkbox(type="checkbox" value=cheerText) label.label-small 応援
index.jsの編集
参考：<input type=”checkbox”> …… チェックボックスを作成する
チェックボックスのチェックはcheck属性で確認できるらしい。
document.getElementById('cheerBtn').addEventListener('click', function() {
let input = document.getElementById('input');
let cheerBtn = document.getElementById('cheerBtn');
if (cheerBtn.checked === true){
input.value = input.value + "\n" + cheerBtn.value;
} else {
input.value = input.value.replace("\nPostedBy:https://chobimusic.com/tweet", '');
}
}, false);
こんな感じで実装。
replaceメソッド活用。\nを頭に付けて消すことでチェックを繰り返しても改行されないようにしました。
追加実装
参考：書籍JS本格入門P364
表示ページのアドレスを取得するにはlocationオブジェクトを使用する。
特にクエリ情報を取得したい場合はsearchプロパティを付ければOK。
🙄今更だけどGoogle Consoleでオブジェクトの検証できるのめちゃ便利じゃん。。。！！
ってことでindex.jsをこうする。
document.addEventListener('DOMContentLoaded', function() {
let input = document.getElementById("input")
input.textContent = location.search;
試してみると文字化けする！！
以下で?は取り除かれる。
location.search.substring(1) //1文字目を取り除く
調べたところ以下でデコードすればOK。 参考
document.addEventListener('DOMContentLoaded', function() {
let input = document.getElementById("input");
let URI =location.search.substring(1);
URI = decodeURI(URI);
input.textContent = URI;
無事取得できた◎
ここでリファクタリング！！
document.addEventListener('DOMContentLoaded', function() {
let input = document.getElementById("input");
let URI =location.search.substring(1);
URI = decodeURI(URI);
input.textContent = URI;
document.getElementById('selectTemplate').addEventListener('change', function() {
// let input = document.getElementById('input'); // ここを省略しても動作する！！
let selected = document.getElementById('selectTemplate').value;
console.log(URI);
if(URI !== ""){
input.value = URI +"\n#"+ selected;
} else {
input.value = selected;
}
}, false);
上記の感じで、変数のスコープを意識したらスクリプトを短くできることに気付きました◎
あとこのタイミングでシンプルなbtnやbuttunというid名は使わず、createBtnやtweetBtnとパッと見で役割をある程度理解できる形に命名しなおしました。
🙄関数の外で定義しておけば見通し良くなりそう。
これ見てアロー関数で書いてないなと思ったので書き直し。
var ms1 = "hello world", ms2 = "ok, google.", ms3 = "g'day mate.";
🙄上記の書き方は初めて知りました！！Pugと同じ感じですね！！
①セレクトタグのchengeイベントに関してはselectに依存するので変数は関数内に置かないとだめっぽいです。
②変数は上から代入されていくので確認用テキストの変数も諸々の関数の後に定義しました。
追記：以下、inputタグのname属性に関して。
<body>
<form action="#" id="form">
<input type="text" name="word">
<input type="submit" value="検索">
</form>
<p id="output"></p>
<script>
'use strict';
document.getElementById('form').onsubmit = function(event) {
event.preventDefault();
const search = document.getElementById('form').word.value;
document.getElementById('output').textContent = `「${search}」の検索中...`;
};
</script>
</body>
formに.onsubmitプロパティを付けるとイベント発生時に処理を実行してくれる。
inputのname属性(ここでは”word”)は、入力されたデータが送信されるときに、そのデータにつく名前となる(JSでいう変数名)。
⇒document.getElementById(‘form’).word.value;といった要領で、プロパティでname属性を指定して取得することができる。
event.preventDefault();を付けるとページを再読み込みしなくなる。これを付けないとURLに以下のように表示されてリロードされる。
file:///C:/index.html?word=ああああ#
🙄挙動を確認するにはちょうど良いですね！！URLの仕組みの理解が一層深まった気がします。
おわりに
Pugで作った際に、コメントアウトがhtmlファイルに表示されないのがプチいいですね！
URLの取得ほうもわかったのでタイマー機能LPをつくって連携させてみたいです。
備忘録
参考：labelタグとは
「LABEL」とは、フォームの中でフォームの項目名と構成部品（チェックボックス、ラジオボタンなど）を関連付けるためのタグ。
<label>タグのfor属性の値と、フォーム部品のid属性の値を同じにすることで両者の関連付けできる。
コメントを残す