つくってみよう - FireFox拡張機能でブックマークを一覧表示する 記事一覧
つくってみよう - FireFox拡張機能でブックマークを一覧表示する（１）公式サンプルを体験する
つくってみよう - FireFox拡張機能でブックマークを一覧表示する（２）動作を確認する
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（３）ソースコードを読む - 構成について]
(https://qiita.com/madaaamj/items/bef7102722da2f249515)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（４）ソースコードを読む - 画面について]
(https://qiita.com/madaaamj/items/27dd820d10fd20c51dee)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（５）ソースコードを読む - 処理の概要について]
(https://qiita.com/madaaamj/items/af88405b30820b19a114)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（６）ソースコードを読む - JSON情報の取得について]
(https://qiita.com/madaaamj/items/d9e7b1c296221218d46a)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（７）ソースコードを読む - 表示について①]
(https://qiita.com/madaaamj/items/68888b5d0fdb8f2af84f)
[つくってみよう - FireFox拡張機能でブックマークを一覧表示する（８）ソースコードを読む - 表示について②]
(https://qiita.com/madaaamj/items/a7e3f764f8177139bf7d)
ソースコードを読む
「FireFox拡張機能でブックマークを一覧表示する」機能をつくっていきましょう。
今回はブックマーク拡張機能「ExBmSearch」の処理を見ていきます。
処理について
「ExBmSearch」の処理の中心になるbmlist.jsについて解説します。
| フォルダー | フォルダー | ファイル | 説明 |
|---|---|---|---|
| ex_bm_search | content_scripts | bmlist.html | HTML |
| bmlist.js | スクリプト |
bmlist_js
bmlist.jsはbmlist.htmlから読み込まれます。
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
...
<script type="text/javascript" src="bmlist.js"></script>
...
</body>
</html>
bmlist.jsには６つの関数があります。
bmlist.jsが読み込まれるとグローバル変数、<header>タグ、<section>タグの変数を定義します。
let g_bookmark_num = 0;
let g_highlight_top = 0;
let g_highlight_word = "";
let g_arrAutocomplete = [];
const header = document.querySelector('header');
const section = document.querySelector('section');
ファイルが選択された時に起動する関数を指定する
ブックマークファイル選択の[参照…]がクリックされて値の変更が確定した時にreadFile関数が呼び出されます。
// ファイルが選択された時に起動する関数を指定する
document.getElementById("selectFile").addEventListener("change", readFile, false);
ブックマークファイルを読み込み一覧表を生成する（readFile）
readFile関数ではブックマークファイル（.json）を読み込み内容を連想配列風の配列に保存します。
[参照…]ボタンで選択されたファイル名が"this.files[0]"に入っています。FileReaderオブジェクトを使用して指定されたブックマークファイルを読み込みます。
FileReaderオブジェクトの.readAsTextで指定されたファイルを読み込みます。読み込みが開始されるとloadstartイベントが発生します。読み込みを完了するとloadendイベントが発生します。読み取りが正常に完了するとloadイベントが発生します。
後で表示するブックマーク数を表す変数"g_bookmark_num"を0で初期化します。g_で始まる変数はグローバル変数として定義しています。このファイルの中からはどこでも参照できます。
function readFile() {
const file = this.files[0]; // 選択されたファイル
const reader = new FileReader();
const json = reader.readAsText(file);
g_bookmark_num = 0
スピナー
ブックマークファイルサイズが大きい場合処理に時間がかかります。その場合スピナーを表示して読み込み中であることをユーザーに知らせます。処理が終了するとスピナーを削除します。
スピナー表示
ファイル読み込み開始時の処理を.onloadstartで記述しています。ここでスピナーを表示するHTMLを追加しています。スピナーはBootstrapのSpinnersを利用しています。
function readFile() {
...
// ファイル読み込み開始時：スピナー（ロードが遅い場合表示）を追加する
reader.onloadstart = function() {
let card = document.getElementsByClassName("card-header");
$(card).append('<div class="spinner d-flex align-items-center"><strong>Loading...</strong><div class="spinner-border ml-auto" role="status" aria-hidden="true"></div></div>');
}
スピナー削除
ファイル読み込み完了時の処理を.onloadendで記述しています。ここでスピナーを削除しています。
function readFile() {
...
// ファイル読み込み終了時：スピナーを削除する
reader.onloadend = function() {
let spinner = document.getElementsByClassName("spinner");
$(spinner).remove();
}
データ保持＆画面表示
ブックマークファイルの読み取り正常完了時の処理を.onloadで記述しています。makeTagdicでは読み込んだファイルからJSONの情報を配列に入れていき、showHeaderとshowSectionではその情報を基に画面表示を行います。
// ファイル読み込み時：ブックマークファイル（.json）を読み込む
reader.onload = function(e) {
let lines = e.target.result;
const jsonObj = JSON.parse(lines);
// JSONから辞書（連想配列）を作る
let dicTags = [];
try {
makeTagdic(jsonObj, dicTags);
}
catch (e) {
alert("Error : " + e.message);
return false;
}
// 再描画のためのクリア
header.innerHTML = "";
section.innerHTML = "";
// HTML書き出し
showHeader(jsonObj, dicTags);
showSection(dicTags);
// イベント処理
// タグ検索ボックス・ワードハイライト・フローティングボタン機能
$( function() {
・・・
} );
}
次回はブックマークファイルの読み取り正常完了時の処理について詳しく解説します。
[ソースコードを読むへもどる]