[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
Shunshun94/hiyontof を公開しました。全部 JavaScript で動いています。
TRPG 用ツールとして日本国内ではシェアが最も高いと思われるどどんとふ (http://www.dodontof.com/) は多機能なのですが、 Flash を使っているためスマートフォンではアクセスができませんでした。これを解決するために作ったアプリとなっています。
こういうチェックボックスを全部外したい。
例によって jQuery でやる。次の一行で終わり
// $('input.target') は対象となるチェックボックスを全選択するセレクターを使う
$('input.target').attr('checked', false)
checked 属性にどんな値を入れればよいのかよくわからなかったのでメモっておくのであった。
歯抜けの実装方法が分からないという人がちょっと多いので解説記事。
歯抜けとは、番号が振られた0個以上のリストがある際に、次に追加するアイテムにどんな番号を付けるべきか決定するルールである。例えば、1番から開始するリストがあったとする。
次のようなリストがある
この場合、次に追加するべきアイテムは Item-4 である。
次のようなリストがある
この場合、次に追加するべきアイテムは Item-2 である。
次のようなリストがある
この場合、次に追加するべきアイテムは Item-1 である。
次のようなリストがある
この場合、次に追加するべきアイテムは Item-1 である。
新しいフォルダ（n）の歯抜けを作る。
function generateNextTitle(list) {
// アイテム名が形式に合致するか確認する。
// 番号を取得するために (\d+) している。
// 前後に余計なものが付いていないことを確認するために先頭に ^ 末尾に $ を付加
var regexp = /^新しいフォルダ（(\d+)）$/;
// 既存の番号を格納するための空配列
var titleNumbers = [];
list.forEach(function(v, i) {
if(regexp.test(v)) {
titleNumbers.push(Number(regexp.exec(v)[1]));
}
});
titleNumbers = titleNumbers.sort();
// 小さい順に並べ、歯抜けがあったら抜けた数字を適用
for(var i = 0; i < titleNumbers.length; i++) {
if(i + 1 !== titleNumbers[i]) {
return "新しいフォルダ（" + (i+1) + "）";
}
}
// 歯抜けが無かったら最大の数字 +1 を適用
return "新しいフォルダ（" + (titleNumbers.length+1) + "）";
}
console.log(generateNextTitle(["新しいフォルダ（1）", "新しいフォルダ（2）", "新しいフォルダ（3）"]));
console.log(generateNextTitle(["新しいフォルダ（1）", "新しいフォルダ（4）", "新しいフォルダ（3）"]));
console.log(generateNextTitle(["_新しいフォルダ（1）_", "_新しいフォルダ（1）", "新しいフォルダ（2）", "新しいフォルダ（3）"]));
以下のようなコードを書いていた。
// [1]
$("#run").click(function(e) {
$html.trigger(new $.Event("sendMessage", {
msg: $msg.val(),
}));
});
// [2]
$("#not-run").click(function(e) {
$html.trigger(new $.Event("sendMessage", {
msg: $msg.val(),
type: 'not-run'
}));
});
// [3]
$html.on("sendMessage", function(e) {
console.log(e.msg);
});
[1] では問題なく sendMessage を [3] でキャッチできた。しかし、 [2] の場合にうまくいかない。
何故だろう、と確認してみたらイベントの種類は e.type に格納されているのであった。つまり、sendMessage イベントではなく not-run イベントとして発火されていたのだ。だからキャッチできない。
こちらのページの右上のもの
とりあえず、関係する JS を読み込む。jQuery の plugin として作っているので jQuery も必要。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://shunshun94.web.fc2.com/lib/breadcrumb-list.js"></script>
そのうえで、今どこを読んでいるのかの基準にしたい要素群 (多分 h2 要素や h3 要素になる) に対して bindBreadcrumbList() 関数を実行する。
$("h2").bindBreadcrumbList();
ページを閲覧している人が画面をスクロールしていき、この関数を実行された要素を過ぎた際、各要素が BreadcrumbListEvent を発火させるようになる。それを listen すればよい。
$("h2").on("BreadcrumbListEvent", function(e){
console.log($(e.target).text());
});
console.log になっている部分を画面上部に配置された今どこを見ているのかを示す案内の text を変えるとかそんなコードに書き換えれば使えるはず。