2019/09/24

スマホのブラウザに最適なミニマルなブックマークリストサイトを作った

今回は、スマホ版ブラウザのホームページに使えそうな、シンプルなブックマークリストサイトを作ってみました。

ログイン不要で、自由に設定したブックマークリストを表示できます。
見た目はダークでミニマル。落ち着いたデザインを目指しました。

リンク： https://izm51.github.io/home/

Preview

仕様
使い方
経緯
プログラム
アイコンの取得
クエリの取得
リンクの作成(DOM操作)
リストの更新
その他参考
まとめ

仕様

サイト上でブックマークの追加・削除ができる。
ブックマークリストを更新するとURLのクエリが変更される。
リストが完成したら、そのURLをホームに設定する。
ログインやCookie情報が不要で誰でも利用できる！

使い方

最下部のOptionからブックマークを追加
- タイトル未入力の場合はURLがタイトルになる
各リンク右端のバツボタンでリストから消去
編集完了後のURLをブラウザのホームに設定

経緯

僕はAndroidでChromeを使っています。

Android版Chromeでは、新しいタブを開くとChromeが自動で判断した「よく使うサイト」と「おすすめの記事」が表示されます。
しかしこの「新しいタブ」ページはカスタマイズができず、「よく使うサイト」も自由に設定することができませんでした。

僕はシンプルにブックマークさえ表示できればよかったので、それができるサイトを探しましたが見つかりませんでした。(どこかには絶対あると思うが)

というわけで探すより作ってしまった方が早いと思ったので、今回はシンプルなブックマークリストサイトを作ってみました。

しかし結果として、新しいタブに表示することはできませんでした。
このサイトをChromeのホームページに設定することで新しいタブを開いた際に表示されるページを変更できると思っていました。
しかし、ホームページを変更しても新しいタブページは変更されませんでした(泣)
ホームページのデフォルトはchrome://newtab/でしたが、ホームページ＝新しいタブで表示されるページというわけではありませんでした。

せっかく作成したので、Chromeのホームボタンから飛べるブックマークリストとして使うことにしました。
Chromeのブックマークは表示するまでに2回タップ操作(メニューボタン→ブックマーク)が必要だったので、それが1回に短縮できて少し便利になりました。

プログラム

リポジトリ： https://github.com/izm51/home

シンプルにHTMLと素のJavascriptのみ。
(スタイルはSCSSで書いてます。)

以下作成時のメモを記録します。

アイコンの取得

faviconを取得するGoogleのAPIを使用しました。

<img src="http://www.google.com/s2/favicons?domain=[URL]">

http://www.google.com/s2/favicons?domain=[URL] の [URL] にアイコンを取得したいサイトのURLを指定するだけで画像を取得できます。

しかし、サイズが16x16で非常に小さいのが難点です。
touch iconなどを取得できる方法はあるんでしょうか。探し中です

クエリの取得

今回のサイトでは、ブックマークのリストをクエリにしてURL内に保管しています。
クエリは ?[サイト名]=[URL]&[サイト名]=[URL]... という形にしています。

素のJavascriptでのクエリの取得は初だったので、以下を参考にしました。
参考： JavaScriptでURLクエリを取得する - Qiita

参考記事内では

var queryArr = queryStr.split('=');
queries[queryArr[0]] = queryArr[1];

という形でkeyとvalueを分けていましたが、今回のvalueとなるURLには = が含まれる場合もあるので以下のように変更しました。(14,15行目)

//クエリの取得
function getUrlQueries() {
  var queryStr = window.location.search.slice(1);  // 文頭?を除外
      queries = {};

  // クエリがない場合は空のオブジェクトを返す
  if (!queryStr) {
    return queries;
  }

  // クエリ文字列を & で分割して処理
  queryStr.split('&').forEach(function(queryStr) {
    // = で分割してkey,valueをオブジェクトに格納
    var eqIndex = queryStr.indexOf('=')
    queries[queryStr.slice(0, eqIndex)] = queryStr.slice(eqIndex+1)
  });

  return queries;
}

リンクの作成(DOM操作)

クエリから取得したブックマークのリストをもとにリンクを作成します。

今回はひたすらに要素を追加していくだけです。
一気に複数の要素を追加する際は、一度 DocumentFragment に集めた後で追加することでパフォーマンスが向上するようです。

参考：もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識 - WPJ

<body>
  <div id="wrap"></div>
</body>

const pages = getUrlQueries()

const wrap = document.getElementById('wrap')
const fragment = document.createDocumentFragment()

for (const k in pages) {
  const page = pages[k]

  const box = document.createElement('div')
  box.setAttribute('class', 'link-box')

  const a = document.createElement('a')
  a.setAttribute('class', 'link-button')
  a.setAttribute('href', page)

  const img = document.createElement('img')
  img.setAttribute('src', 'http://www.google.com/s2/favicons?domain='+page)
  const p = document.createElement('p')
  p.textContent = decodeURI(k)

  const btn = document.createElement('button')
  btn.setAttribute('class', 'remove-button')
  btn.setAttribute('onclick', 'removeQuery("'+decodeURI(k)+'")')
  btn.textContent = 'X'

  a.appendChild(img)
  a.appendChild(p)

  box.appendChild(a)
  box.appendChild(btn)
  fragment.appendChild(box)
}

wrap.appendChild(fragment)

リストの更新

ブックマーク追加の場合は、入力欄の内容をクエリに追加し、URLへ移動します。
逆に削除の場合は、バツを押されたキーをクエリから消去し、URLへ移動します。

ブックマークの追加

<input type="text" name="title" id="title">
<input type="text" name="url" id="url">

function addQuery() {
  const queries = getUrlQueries()

  const url = document.getElementById('url').value
  let title = document.getElementById('title').value
  if (title == "") {
    title = url
    title = title.replace(/=/g, "")
  }

  if (title!=""&url!="") {
    queries[title] = url
    updateParams(queries)
  }
}

ブックマークの削除

<div class="link-box">
  <a class="link-button" href="https://izm51.com/">
    <img src="http://www.google.com/s2/favicons?domain=https://izm51.com/">
    <p>イズミログ</p>
  </a>
  <button class="remove-button" onclick="removeQuery(&quot;イズミログ&quot;)">X</button>
</div>

function removeQuery(q) {
  if (window.confirm(q+' のリンクをリストから消去しますか?')) {
    const queries = getUrlQueries()

    delete queries[encodeURI(q)]

    updateParams(queries)
  }
}

ページの更新(URLの更新)
参考： Javascriptでパラメータを取得したり設定したりする | webの覚え書き

function updateParams(queries) {
  let setParam = '?'
  for (k in queries) {
    setParam = setParam + k + '=' + queries[k] + '&'
  }
  setParam = setParam.slice(0, -1)

  location.search = setParam
}

その他参考

VSCodeでSCSSを使用する準備、リセット用CSS
【爆速】HTML + Sass(SCSS)で簡単にレスポンシブ対応のLPを作ろう！ - Qiita
下部のオプションの表示切り替え
checkboxを使ってCSSだけでハンバーガーメニュー | q-Az
Android版Chromeのタブ（アドレスバー）の色を変更する方法 | KuzLog

まとめ

今回は、シンプルなブックマークリストサイトを作ってみました！

リンク： https://izm51.github.io/home/
リポジトリ： https://github.com/izm51/home

機能としては単純ですが、自分好みの最小構成で作れたので良かったです。

新しいタブに表示できなかったのは残念ですが、ブックマークが少し便利になりました。
もしよければ誰でもご自由にご利用ください！

ではまた。

コメント欄ご意見、ご感想お気軽に！間違いなどあれば、ご指摘お願いいたします！