リンクを取得するブックマークレットを簡単に作成・カスタマイズできるウェブサービス「ShareHtmlメーカー」

ブログを書くうえでよく使うHTMLのひとつがリンクを作成するaタグ。どんな方法で作成していますか?
拡張機能やアプリなど方法はいくつかありますが僕がおススメするのはブックマークレットを使うことです。ブックマークレットはどの端末でもブラウザさえあれば同じようにリンクを取得できるメリットがあります。

sponsored link

ブックマークレットのカスタマイズにはShareHtmlメーカーが便利

ブックマークレットはjavascriptというプログラム言語で書かれているので、初心者には敷居が高いです。でも時間をかけて勉強しなくてもブックマークレットを簡単に作成できるウェブサービスがあります。それが「ShareHtmlメーカー」です。

提供してくれているのはヒロさん(@hiro45jp)です。この他にも便利なブックマークレットメーカーを作られているのでぜひチェックしてみてください。

ブックマークレットの使い方は簡単。ブックマークバーから起動、[OK]もしくは[enter]を押すだけです。
Sharehtml mov
パソコンでもスマホでも使い方はほとんど同じです。出力方法はプレビューにしましたがその他にも色々な形式があります。

ブックマークレットの登録方法

ShareHtmlメーカーには書式テンプレートが用意されていたり、HTMLタグをどのように囲むのかなどを設定することができます。

  • Bookmarklet名
  • 選択テキストの最大文字数
  • 選択テキストを囲むHTMLタグ
  • コメントを囲むHTMLタグ
  • 出力方法
  • 書式テンプレート

Bookmarklet名は単純にブックマークレットの名前ですね。その他はもう少し詳しく説明していくます。

選択テキストは引用のように使える機能

選択テキスト
リンクを取得するサイトでテキストをドラッグなどで選択しておくとリンクにもそのテキストを取得することができます。引用をする感覚で使用できますね。[選択テキストを囲むHTMLタグを入力して下さい(任意)]にあるHTMLタグで囲まれます。

コメントで補足事項を追加する

コメントを入力する
ブックマークレットを起動した時にポップアップで[Input Memo.]と表示されます。ここに任意のコメントを入力することができます。
[コメントを囲むHTMLタグを入力して下さい(任意)]にあるHTMLタグで囲まれます。
コメントを入力する

選択テキスト・コメント共にHTMLはpタグに変更しておいた方がいいですね。
また空白のまま設定、もしくは選択・入力せずにリンクを取得するとHTMLは生成されません。

出力方法はパソコンとスマホで変える

出力方法に関してはパソコンで使用する場合は「プレビュー表示」と「ポップアップのみ」のどちらかになります
出力方法
プレビューでは取得したリンクを表示させたままにして、ポップアップではenterを押すとポップアップ自体が消えます。僕はポップアップを使っています。

連携というのはリンクを取得したら自動でiPhone・iPadアプリを起動してくれる機能です(つまりiPhoneやiPad専用です)。iPhoneやiPadでブログを書くならそちらのブックマークレットも用意しておくとアプリを切り換える必要がなくなるので、より効率的にブログを書くことができます。

ShareHtmlメーカーでは3種類しか選択肢がありませんが、りょーへいさん(@saita_ryouhei)が機能を拡張させたShareHtmlを公開してくれていますのでそちらもチェックしてみてください。

サムネイルありとなしの書式テンプレート

書式テンプレートにはサムネイルあり4種類とサムネイルなしの1種類が用意されています。
書式テンプレート
予約語一覧はカスタマイズするときに使える書式です。後述します。

「Bookmarkletを生成する」をクリックするとブックマークレットのリンクが表示されます。
パソコンを使って登録する場合は「デモおよびPC登録用」をブックマークに登録します。iPhoneなどを使って登録する場合は「iPhone登録用」をタップしてjavascript~で始まるようにします。
ブックマークレットを登録する

テキストだけのシンプルなリンクを作成する

書式テンプレートのまま使ってもいいのですが、自分好みにカスタマイズをしてみましょう。

上記のテンプレートは僕が使っているものです。書式テンプレートの[サムネイル無し]でブックマークレットを生成した場合と比較してみます。

See the Pen ngGEr by ManabuYasuda (@gaku) on CodePen.

上がカスタマイズしたもので下がデフォルトです。見た目にはボタンが付いているくらいしか違いはありませんね。

書式テンプレートの[サムネイル無し]ではこのようなHTMLが生成されます。(改行してます)

この中で不要なものをいくつか取り除いています。

スタイルはhtmlに直書きするのではなく、cssで指定することが推奨されています。管理しやすくするためにも直書きは極力なくしましょう。
また、brタグは改行に使うものなので連続で使うのは正しくありません。

はてなブックマークのボタンを削除したのは、指標としてはいいのですが、あえて表示させることもないと考えているからです。
また、はてブ数が0だとリンク切れ扱いになってしまい、SEO的にマイナスになってしまいます。

任意の画像をサムネイルに指定する

通常ShareHtmlではサムネイル付きのリンクはそのサイトのトップページをキャプチャした画像が使われます。外部サイトの場合はそれでもいいんですが、自分の記事を貼りたい場合は画像を変更してみると目立たせることができます。
例えばこのように

See the Pen jzqbr by ManabuYasuda (@gaku) on CodePen.

以下のようなテンプレートで登録します。CSSはお好みで。

画像のURLを取得、メモに貼り付けてからコードを生成すると、サムネイル画像付きのリンクを取得することができます。
サムネイル付きの取得方法

URLから画像を取得するので直リンク扱いになります。他のサイトの画像ではこの方法は使えません。

blockquoteタグで囲んで引用もできる

選択テキストの機能を使えば引用タグとしても使用することができます。(選択テキストなどはpタグで囲んでおきます)

See the Pen gbzIC by ManabuYasuda (@gaku) on CodePen.

引用を取得する

ShareHtmlの仕様で[ ...]が付いてしまうんですが、それでもいちから書くよりは簡単に書くことができます。


というわけで簡単にブックマークレットを作成できるサービスShareHtmlを紹介しました。
divで囲んだり、classを付けたり、カスタマイズしやすくしておくと色々と楽しめます。ぜひいじいじしてみてください!