jQuery index(): 特定の要素が何番目にあるか(インデックス番号)を取得する

どもども、すずしんです。

jQueryについての備忘録を書いてみます。
今回は、index()の使い方についてです。

index()とは？

index()は、jQueryオブジェクト内で、引数で指定された要素のインデックス番号を返す関数です。
ちなみに、インデックス番号は0から始まる連番となっています。
もし渡された要素がjQueryオブジェクト内に無い場合、戻り値は-1となります。
引数には、検索したい要素を指定します。

基本的な使い方

例えば、以下のようなHTMLがあるとします。
これはフルーツの一覧を表しています。

<ul class="fruits">
<li>りんご</li>
<li>ぶどう</li>
<li>もも</li>
<li>バナナ</li>
<li>メロン</li>
</ul>
<p class="index">選択されたのは<span>-</span>番目です。</p>

この一覧の中から、クリックされたフルーツ(li)のインデックス番号を取得するには以下のようなコードを書きます。
こうすると、変数indexにクリックされた要素のインデックス番号が代入されます。

$('ul.fruits li').click(function(){
  var index = $('ul.fruits li').index(this);
});

これをもとにして、選択された要素が何番目にあるかを表示させてみます。
この例のHTMLでは、p.indexのspan要素にインデックス番号を表示させるとしていますので…。
その場合のコードは以下のような感じです。

$('ul.fruits li').click(function(){
  var index = $('ul.fruits li').index(this);
  $('p.index span').text(index + 1);
});

サンプル

上記のコードを試しに導入してみました。
実際にフルーツを選んでクリックしてみてください。
選んだフルーツのインデックス番号が正しく表示されると思います。
りんごなら1番目、メロンなら5番目となりますよね。

• りんご
• ぶどう
• もも
• バナナ
• メロン

選択されたのは-番目です。

ひとこと

今回の記事では、jQueryのindex()の使い方についてまとめてみました。
実際に試してみると分かりますが、特にこれといって難しい点はありませんよね。
特定の要素のインデックス番号が簡単に取得できると思います。

jQueryを使っている時に、ある特定の要素のインデックス番号を取得したい時があると思います。
その際には、今回取り上げたindex()を使ってくださいね。

最後まで読んでいただきありがとうございました。
それではまたお会いしましょう。
あなたの心友でありたい、すずしんより。

ページリンク作成ブックマークレットPageLinkを作成してみた！

こんにちは、すずしんです。

私が過去に作成したブックマークレットで、地味に便利だと思うものを紹介するこのコーナー(?)。
今回は「PageLink」というブックマークレットについて紹介したいと思います。
便利だなと思ってもらえたら嬉しいですね。

PageLinkとは？

「PageLink」というのは、私が過去に作成したブックマークレットです。
このブックマークレットを使うと、今見ているページのリンクをあっという間に作成してくれます。

通常、リングタグを作成するには…。
まず、URLをコピーしてaタグのhref属性に貼り付けます。
そして、記事のタイトルをコピーしてtitle属性とリンクテキストに貼り付ける、といった手順を取ります。

慣れてくると作業スピードは上がるかもしれませんが…。
それでも若干手間がかかりますよね。
コピーして貼り付けるという作業を繰り返す必要もありますし。
どうせならもっと楽にやりたいですよね？

そこで、PageLinkの出番です。
このPageLinkなら、なんとワンクリックのみでリンクタグを作成してくれます。
その後は、リンクタグを記事に貼り付けるだけとなりますので非常に簡単ですよ。
今まで手作業でやっていた場合には、そのあまりのお手軽さにびっくりするかもしれませんね。

PageLinkの登録方法

PageLinkの登録方法は簡単です。
お使いのウェブブラウザのブックマークバー上に、以下のリンクをドラッグアンドドロップしてください。
おすすめとしては「ブックマークレット」フォルダをブックマークバー上に作っておいて、そこに登録すると分かりやすいと思います。

PageLink

PageLinkの使い方

PageLinkの使い方も実に簡単です。

まず、リンクを作成したいページを開いておきます。
そして、さきほど登録したPageLinkをクリックします。
するとプロンプトが表示されます。

リンクタグが自動生成されていますのでそれをコピーします。

<a href="http://www.suzushin7.jp/entry/2017/05/15/m-gram" title="最近話題の性格診断エムグラム(m-gram)を試してみた！ - すずしんろぐ" target="_blank">最近話題の性格診断エムグラム(m-gram)を試してみた！ - すずしんろぐ</a>

後は、そのリンクタグを記事に貼り付けるだけです。
ねっ？簡単でしょ？

最近話題の性格診断エムグラム(m-gram)を試してみた！ - すずしんろぐ

PageLinkのソースコード

PageLinkのソースコードは以下のようになっています。
非常に単純な仕組みになっているというのが分かりますね。
URLとタイトルを取得してaタグを作成し、プロンプトに表示させているだけです。

javascript:(function(){
var url = location.href;
var title = document.title;
var a = '<a href="'+url+'" title="'+title+'" target="_blank">'+title+'</a>';
prompt('PageLink', a);
})();

ひとこと

今回の記事では、今見ているページのリンクを作成するブックマークレット「PageLink」を紹介しました。
ページのリンクを作成して、記事に貼りつけたいという場面は結構あると思います。
そんな時はぜひこのPageLinkをお試しください。
サクッと簡単にリンクが貼れるようになりますよ。

超簡単！jQueryでアニメーション付き開閉式ボックスを作成してみた

こんばんは、すずしんです。

前回の記事で、jQueryの簡単な読み込み方について書きましたので…。
何だかjQueryのプログラムを書いてみたい気分になりました。

そこで、私はちょっとしたjQueryのサンプルプログラムを作成してみました。
そのサンプルプログラムでは「アニメーション付き開閉式ボックス」を実装してみました。
さすがjQueryで、パパッと簡単に作ることができましたよ！

せっかくなので、今回作成したサンプルプログラムを記事に載せておこうと思います。
需要があるかどうかは分かりませんが…。
誰かの役に立てれば光栄です。

開閉式ボックスとは？

ここでいう所の開閉式ボックスというのは…。
展開用のリンクをクリックすると、スライドしながら現れるdiv要素の事を言います。

最初、div要素は非表示になっていますが…。
リンクをクリックすると、スライドしながらdiv要素が表示されます。
そして、もう一度リンクをクリックすると、今度はスライドしながら非表示になります。
要するに、アニメーション付きでトグルするdiv要素です。

最初は非表示にしておいて、リンクをクリックしたら表示されるような仕組みを実装したいなら…。
今回の方法は有効ですよ。

アニメーション付き開閉式ボックスのサンプルプログラム

早速、アニメーション付きで開閉するボックスを作成していきます。

まずは、実装に必要なものをまとめてみます。

• 開閉式アニメーションをさせるためのリンク(*1)
• 表示されるdiv要素(*2)

このリンク(*1)がクリックされると、div要素(*2)が開閉されれば良いのですね。
ここでは、このリンク(*1)のclass属性にtoggle-linkを、div要素(*2)のclass属性にはtoggle-boxを付加します。
そして、リンク(*1)がクリックされたときに実行されるJavaScriptの関数をtoggle()としています。
サンプルプログラムとしては、以下のようにしてみました。

<a class="toggle-link" href="javascript:toggle();">開閉</a>
<div class="toggle-box">
<p>ここにコンテンツが入ります。</p>
</div>

CSSについては、とりあえず簡単に以下のようにしてみました。
ポイントとしては、toggle-boxのdisplayをnoneに設定することくらいでしょうか。

<style type="text/css">
.toggle-box {
  border: 1px solid #aaaaaa;
  margin: 10px;
  padding: 10px;
  display: none;
}
</style>

そして、JavaScriptのコードですが…。
まずjQueryを読み込んで、toggle関数の定義をします。
toggle関数では、toggle-boxが付加されている要素(*2)に対して、slideToggle()を実行するだけです。
jQueryを使うと、たったこれだけのコードで良いというのがすごいですよね～。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function toggle() {
  $('.toggle-box').slideToggle('slow');
}
</script>

サンプルプログラムの実行例

上記で作成したサンプルプログラムをこの記事にも貼り付けてみました。
実際にちゃんと動作するかどうか確認してみてください。

「開閉」のリンクをクリックすると…。
ボーダーが付いていて、「ここにコンテンツが入ります。」という文字が書かれている要素が表示されると思います。
もう一度クリックすると、今度は非表示になります。
アニメーションもきちんと付いていますよね？

開閉

ここにコンテンツが入ります。

ひとこと

今回の記事では、jQueryの練習としてアニメーション付き開閉式ボックスを作成してみました。
ソースコードを見てみると、別に大した事はしていないというのが分かると思います。
ただ単純にslideToggle()を呼び出しているだけですからね。
jQueryがいかに強力なライブラリなのかという事が分かるのではないでしょうか。

jQueryを上手く使いこなせれば、Webページの作成もきっと捗るでしょうね。
私ももっと高度な事ができるように、jQueryの勉強をしていきたいと思います。

たった1行でOK！GoogleのCDNからjQueryを読み込む方法

こんにちは、すずしんです。

JavaScriptを使ってWebページを作成する際には…。
何かとjQueryを利用する機会が多いと思います。
jQueryは非常に便利なライブラリですからね。

jQueryの公式サイトからjquery.min.jsをダウンロードして、それをサーバーに配置して読み込むというのはよくあることですが…。
ちょっと手間がかかってしまいますよね。
もっとサクッとやってしまえる方法はないのでしょうか？

実は、その方法があるんです！
それは「GoogleのCDNからjQueryを読み込む」という方法です。
このやり方をすると、なんと1行でjQueryを読み込むことが可能になります！

ちなみに、GoogleのCDN(Content Delivery Network)にホストされているライブラリには…。
jQueryの他にもAngularJS・Dojo・Prototypeなどといった有名どころが揃っていますし、そのバージョンも細かく選ぶことが可能です。
jQueryに限らず、これらのライブラリを使いたい時には、このGoogleのCDNを利用すると簡単でお手軽です。

この記事では、そのGoogleのCDNからjQueryを読み込む方法について書いておこうと思います。
自分用の備忘録としても残しておきたいですからね。

GoogleのCDNからjQueryを読み込む方法

GoogleのCDNからjQueryを読み込む方法は非常に簡単です。
以下のようなコードを記述するだけです。
特に理由が無ければ、各バージョンの最新版を使うと良いと思います。

jQuery 3.x

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

jQuery 2.x

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

jQuery 1.x

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

現時点で、選択することができるバージョンは以下のとおりです。

3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0, 
2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0,
1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

GoogleのCDNで提供されているライブラリの情報は、以下のページに記載されています。
ブックマークしておくと、何かと便利かもしれませんね。

developers.google.com

ひとこと

GoogleのCDNを利用すると、なんと1行でjQueryが読み込めてしまうのですね！
これは非常に簡単です。
今後、jQueryを使う機会ができたら、ぜひ私もこの方法を利用したいと思います。

もしあなたもjQueryを簡単・お手軽に使いたいと思っているのなら…。
この方法をぜひお試しくださいね。

引用リンク作成ブックマークレット「QuoteLink」を作成してみた！

こんにちは、すずしんです。

過去に、私は色々なタイプのブックマークレットを作成してきました。
そして記事に書いて紹介してみたのですが…。
WordPress時代では、それほど反響はありませんでした。

そこで、はてなブログでも改めて記事として書いて掲載してみたいと思います。
ぜひとも少しでも多くの方に使ってもらいたいですからね。

今回紹介するのは、引用リンクを作成するブックマークレット「QuoteLink」です。
これを使えば、引用リンクを作成するのがだいぶ楽になると思いますよ！
ぜひお試しあれ！

QuoteLinkとは？

QuoteLinkというのは、私が作成した引用付きのリンクを簡単に作成するブックマークレットです。

他のブログやホームページなどから文章の一部を引用したい時が時々ありますよね？
そんな時には、基本的には引用したい文章とリンクをblockquoteタグで囲います。
例えば、こんな感じですね。

<blockquote><p>
いずれにしても、読者にとって興味がありそうな記事を書くことができれば、読了時間の表示はメリットになるのではないでしょうか。
また、ユーザビリティを向上させるためにも、読了時間の目安は表示させておいた方が良いのではないかと私は思います。<br>
by <a href="http://www.suzushin7.jp/entry/2017/05/04/completing-reading-time" title="コピペでOK！はてなブログで記事の読了時間の目安を表示させてみた！ - すずしんろぐ" target="_blank">コピペでOK！はてなブログで記事の読了時間の目安を表示させてみた！ - すずしんろぐ</a>
</p></blockquote>

実際に、引用文を表示してみた例は以下の通りです。
正しく引用されているのが分かりますね。

いずれにしても、読者にとって興味がありそうな記事を書くことができれば、読了時間の表示はメリットになるのではないでしょうか。
また、ユーザビリティを向上させるためにも、読了時間の目安は表示させておいた方が良いのではないかと私は思います。

by コピペでOK！はてなブログで記事の読了時間の目安を表示させてみた！ - すずしんろぐ

この引用の過程を見ると分かると思いますが…。
引用リンクを貼るためには、blockquoteタグを書く、引用文をコピペする、引用元のページへのリンクを貼る、という作業が発生します。
これ、実際やってみると数ステップかかるため意外と面倒くさいです。

そこで、登場するのが今回のQuoteLinkです。
このブックマークレットを使うと、引用リンク作成の手間が一気に減り、なんとコピペ一発になります。
これに一度慣れてしまうと、もう手作業には戻れないと思いますよ。

QuoteLinkの登録

QuoteLinkの登録は簡単です。
お使いのWebブラウザのブックマークバーの好きなところに、以下のリンクをドラッグアンドドロップしてください。
おすすめとしては、ブックマークバーに「ブックマークレット」フォルダを作成してその中に入れると良いと思います。

QuoteLink

QuoteLinkの使い方

QuoteLinkの使い方も実に簡単です。

まず引用したい文章があるページを開いておきます。
そして、引用したい文章をドラッグして選択状態にしておきます。

その後、さきほど登録したQuoteLinkをクリックします。
すると、プロンプトが表示されますが、そのプロンプトのテキストエリアにコードが自動生成されていますのでコピーします。

最後に、記事の任意の位置にコピーしたコードを貼り付けてください。
これで引用リンクの作成作業は終了です。

いずれにしても、読者にとって興味がありそうな記事を書くことができれば、読了時間の表示はメリットになるのではないでしょうか。
また、ユーザビリティを向上させるためにも、読了時間の目安は表示させておいた方が良いのではないかと私は思います。
by コピペでOK！はてなブログで記事の読了時間の目安を表示させてみた！ - すずしんろぐ

QuoteLinkのソースコード

QuoteLinkのソースコードは以下の通りです。
それほど複雑な処理はしていないということが分かると思います。
選択テキストを取得して、aタグとblockquoteタグを作成、そしてプロンプトに表示、という手順を踏んでいます。

javascript:(function(){
var text = getSelection ? getSelection().toString() : document.selection.createRange().text;
var url = location.href;
var title = document.title;
var a = '<a href="'+url+'" title="'+title+'" target="_blank">'+title+'</a>';
var quote = '<blockquote><p>'+text+'<br />by '+a+'</p></blockquote>';
prompt('QuoteLink', quote);
})();

ひとこと

今回の記事では、簡単に引用リンクを作成することができるブックマークレット「QuoteLink」を紹介してみました。
いかがでしょうか？
従来の手作業と比べると、だいぶ手間が省けているというのが分かりますよね！

引用する機会というのは、あまり多くないかもしれませんが…。
QuoteLinkのようなブックマークレットを用意しておくと、後々便利だと思いますよ。
ぜひあなたもこのQuoteLinkをお使いくださいね。

コピペでOK！はてなブログで記事の読了時間の目安を表示させてみた！

こんばんは、すずしんです。

今回は、はてなブログの記事の表示面でのカスタマイズという事で…。
記事の読了時間の目安を本文前に表示させてみることにしました。

実装方法としては、記事の読了時間を計算するJavaScriptのコードを貼り付けるだけです。
コピペで簡単に導入できますので、ぜひあなたも試してみてはいかがでしょうか？

記事の読了時間を表示することのメリット

他のはてなブログの記事を見ていると…。
記事に読了時間の目安が表示されていることがありますよね。

これがあると、例えば…。
「この記事は3分で読めるのか、じゃあ試しに読んでみよう！」
となるかもしれませんよね。

逆に、読了時間が長い場合には、興味がありそうな記事の場合なら…。
「時間がかかりそうだから、後で読もう！」
となって、ブックマークしてくれるかもしれません。

いずれにしても、読者にとって興味がありそうな記事を書くことができれば、読了時間の表示はメリットになるのではないでしょうか。
また、ユーザビリティを向上させるためにも、読了時間の目安は表示させておいた方が良いのではないかと私は思います。

記事の読了時間の目安の表示方法

記事の読了時間の目安を表示するには、まず読了時間を計算するJavaScriptのコードを書く必要があります。
それが以下のようなコードですね。

<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 800;
var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>';
$('.entry-content').prepend(message);
}, false);
</script>

このコードにあるwpmは、1分間に読むことができる文字数を表しています。
ここでは、とりあえず暫定的に800文字としています。
もし変更したい時には、数字を好きなように書き換えてください。

上記のコードをコピーしたら、ダッシュボードから「デザイン」→「カスタマイズ」を選択します。
「記事」メニューを展開して、下の方へスクロールしていき「記事上下のカスタマイズ」を表示させます。
「記事上」のテキストエリアに、さきほどコピーしたJavaScriptのコードを貼り付けてください。
貼り付けが終わったら保存します。

以上で、作業は終了です。
これで、自動的に全ての記事で読了時間が表示されるようになります。
簡単でしたよね？

試しに、私のブログでの表示例を示しておきます。
こんな風に表示されるのだなとイメージされると良いと思います。

ひとこと

記事の読了時間を表示しておくと、読者にとってその記事を読むのにどれくらい時間がかかるかの目安になります。
これは、ユーザビリティの向上につながるのでは無いかと私は考えています。

機能の実装は、コピペするだけと非常に簡単となっていますので…。
ぜひあなたのブログにも、試しに記事の読了時間を表示させてみませんか？

簡単カスタマイズ！はてなブログでトップページを記事一覧にする方法

こんにちは、すずしんです。

はてなブログのトップページは、標準では最新記事の全文が掲載されていますよね。
別にこれでも良いと言えば良いのですが、1つの記事が長くなってくると次の記事を読むまでにスクロールをかなりする必要があります。
読者がトップページから訪問してきて、「この人はどんな記事を書いているのだろう？」となった時には、このままでは分かりづらいですよね？

というわけで、私はブログの設定をちょっとカスタマイズしまして…。
ブログのトップページに訪問してきた方は、記事一覧ページに飛ばすようにしてみました。
やり方が分かってしまえばかなり簡単でしたよ。

トップページを記事一覧にする方法

記事一覧ページは、はてなブログの場合には「/archive」のページを開くと見られるようです。
という事は、このページにトップページから来た人を誘導すれば良いというわけですよね！

JavaScriptで別のページに移動させるには、「location.href」のプロパティを変更させれば良いです。
トップページからのアクセスかどうかはif文を使ってチェックします。
つまり、まずif文でトップページからのアクセスかどうかを確認して、そうであった場合にlocation.hrefを「/archive」に設定します。

これを踏まえて、早速コードを書いてみました。
それが以下のような感じです。

<script type="text/javascript">
if(location.href == 'http://www.suzushin7.jp/') {
  location.href = 'http://www.suzushin7.jp/archive';
}
</script>
<noscript>
<p><a href="http://www.suzushin7.jp/archive">すずしんろぐ</a></p>
</noscript>

JavaScriptが有効であれば、トップページから来た訪問者は記事一覧ページに移動します。
もしJavaScriptが無効化されている場合には、記事一覧ページへのリンクを貼るだけとしています。

ちなみに、上記のコードは私のブログの場合のソースコードとなっています。
あなたが利用する場合には、「http://www.suzushin7.jp/」の部分をあなたのブログのURLに変更してください。
また、「すずしんろぐ」の部分をあなたのブログ名に変更してください。

上記のコードの設定場所は、ダッシュボードから「設定」→「詳細設定」のページです。
下の方へスクロールしていくと、「検索エンジン最適化」の項目があると思います。
その「headに要素を追加」のテキストボックスにコードを貼り付けてください。
以下のようになっていれば大丈夫です。

ところで、トップページを記事一覧にしたいと考えている人は他にもいるだろうなと思って検索をかけてみたところ…。
やはり、思ったようにヒットしましたね！
しかもその方法も全く同じでした。
まぁこの方法が最もお手軽にできるでしょうからね。
もし私の解説で分からなければ、以下の記事を参考にしてみてください。

iitaikotoha.hatenablog.com

ひとこと

今回の記事では、はてなブログのトップページを記事一覧にする方法について紹介しました。
ブログのカスタマイズというのは、色々やってみると結構楽しいですよね！

今回紹介した方法を使えば簡単に導入できますので…。
ぜひあなたもトップページを記事一覧に変えてみませんか？

追記

この方法を実装すると、記事一覧にはなるのですが…。
最大で50記事が表示されてしまいます。
これはいくら何でも多すぎですよね。
もっと表示数を少なくできないでしょうか？

そこで、どうにかならないかと検索してみたところ、以下の記事を見つけました。
こちらの方法を使えば、一度に表示する記事数を制御できるようです。
ぜひ参考にしてみてくださいね。

blog.wackwack.net

Googleでサイト内検索をするブックマークレットを作成してみた！

こんにちは、すずしんです。

今日は、JavaScriptのプログラミングをしてみまして…。 Googleでサイト内検索をするブックマークレットを作成してみました。 せっかく作成しましたので、この記事で公開したいと思います。 良かったらぜひ使ってみてくださいね！

サイト内検索ブックマークレットとは？

サイト内検索ブックマークレットは、その名の通り、ウェブサイト内の情報のみに検索範囲を絞ってGoogle検索するブックマークレットです。 検索能力が非常に強力なGoogleの機能を使って作成しています。

サイトによっては、サイト内検索用のテキストボックスがあったりしますが…。 たまに無い場合もありますからね。 そんな時には、このブックマークレットが威力を発揮すると思います。

サイト内検索ブックマークレットの登録

サイト内検索ブックマークレットの登録は簡単です。 以下のリンクを、お使いのウェブブラウザのブックマークバー上の任意の位置にドラッグアンドドロップしてください。 ブックマークレット用のフォルダを作成して、そこに配置すると良いと思います。

サイト内検索

サイト内検索ブックマークレットの使い方

サイト内検索ブックマークレットの使い方は簡単です。 まず、サイト内検索をしたいウェブサイトを表示しておきます。 その後、このブックマークレットをクリックします。 すると、プロンプトが表示されますので、検索したいキーワードを入力してください。 EnterまたはOKボタンをクリックすると、指定したキーワードでGoogleサイト内検索した結果が表示されます。

サイト内検索ブックマークレットのソースコード

サイト内検索ブックマークレットのソースコードは以下のとおりです。

まず、プロンプトを表示して、検索キーワードを入力してもらいます。 そして、現在表示しているサイトのホストを取得します。 検索キーワードが設定されていれば、Googleにクエリを投げて検索をします。 siteオプションを付けて検索しているのがポイントですね。

javascript:(function(){
var q = prompt('Input keyword...', '');
var s = encodeURIComponent(location.host);
if(q != null) {
  window.open('https://www.google.co.jp/search?q=' + encodeURIComponent(q) + '+site:' + s);
}
})();

ひとこと

今回の記事では、Googleでサイト内検索をするブックマークレットについて書いてみました。 あるウェブサイトで気になるワードがあった時に、同じサイト内で検索したい場面があるかと思います。 そんな時にはぜひこのブックマークレットを使ってみてください。 意外と地味に便利だと思いますよ！

関連記事

・ブックマークレット アーカイブ

選択文字列でGoogle検索するブックマークレットを作成してみた

こんにちは、すずしんです。

今日はちょっとJavaScriptの勉強をしようと思い、簡単なブックマークレットを作成してみました。 今回私が作成したのは、「選択文字列でGoogle検索するブックマークレット」です。 まぁ大したことはしないのですが、せっかくなので公開してみようと思います。 もしかすると、地味に便利かもしれませんよ？

選択文字列で検索するブックマークレット

普通、何か検索するときにはGoogleやYahooなどに移動して、その後検索したいキーワードを入力しますよね？ まぁこれでも別に何の問題もありませんが…。 強いて言えば、検索サイトに移動してからキーワードを入力するという手間がかかっています。

調べたいキーワードというのは、最初から決まっている場合には直接検索サイトへ行って調べれば良いのですが…。 何かウェブページを見ていて、あるキーワードがふと気になって調べたいとなると、上記の手間がかかってしまいます。 これを何とかしたいですね。

というわけで…。 私は、ユーザーが調べたいキーワードを範囲選択してポチッとクリックするだけでGoogle検索してくれるというブックマークレットを自作してみました。 これなら、普通に検索するよりも楽にできると思います。 このブックマークレットを私は「Google検索」と名付けてみました。 まぁそのままですけどね。

「Google検索」ブックマークレットの登録

「Google検索」ブックマークレットの登録は簡単です。 下のリンクをドラッグして、お使いのウェブブラウザのブックマークバーの任意の位置にドロップしてください。 それだけで使用する準備は完了です。 ブックマークレット用のフォルダを作って、そこに配置すると分かりやすくて良いのではないでしょうか。

Google検索

「Google検索」ブックマークレットの使い方

この「Google検索」ブックマークレットの使い方も簡単です。 まず、ウェブページ上にある、検索したいキーワードをマウスドラッグして選択状態にしておきます。 その後、ブックマークとして登録した「Google検索」ブックマークレットをクリックするだけです。 すると、Googleが開き、対象のキーワードで検索した結果を表示してくれます。

「Google検索」ブックマークレットのソースコード

この「Google検索」ブックマークレットのソースコードは以下のような感じです。 やっていることは、選択文字列を取得して、その後Googleのクエリに値を設定し、Googleを開く。 ただそれだけです。 非常にシンプルですね！

javascript:(function(){
var q = window.getSelection ? window.getSelection().toString() : document.selection.createRange().text;
var g = 'https://www.google.co.jp/search?q=' + q;
window.open(g);
})();

ひとこと

今回の記事では、選択文字列でGoogle検索する自作ブックマークレットについて紹介しました。 やっていることは非常に単純なのですが、地味に便利かもしれませんね。 もしよろしければ、ぜひ一度使ってみてください。

サムネイル付きリンク作成ブックマークレット「ShareLink」を作ってみた

こんにちは、すずしんです。

以前の記事「ページのリンクを作成するブックマークレット「PageLink」を作ってみた」で、私はページのリンクを作成するブックマークレット「PageLink」を作成しました。 ですが、もう少し手のこんだものを作ってみたいと考えまして…。 今回はサムネイル付きのリンクを作成するブックマークレットとして「ShareLink」を作ってみましたので今回紹介したいと思います。

ShareLinkとは？

「ShareLink」は、リンクを貼りたいページのサムネイル画像が付いたリンクタグを自動生成するブックマークレットです。 また、おまけでリンク先のはてなブックマーク数も表示します。

リンク先のサムネイルがあることで、リンク先のページの雰囲気がある程度分かりやすくなりますね。 また、画像があることで単にリンクを貼るよりもブログ記事の見栄えが良くなります。 ShareLinkは、まさにブロガーにおすすめのブックマークレットとなっています。

ShareLinkについて

ShareLinkの登録

ShareLinkを登録する方法としては、まず以下のコードをコピーします。 コード上でダブルクリックするとコード全体が選択状態になりますよ。 そして、お使いのブラウザのブックマークバー上で右クリック→「ページを追加」からブックマークの編集画面を表示させます。 ブックマークの名前に「ShareLink」、URLにコピーしたコードを貼り付けて保存して下さい。 ブックマークレットの保存場所は、ブックマークバー上か、ブックマークレットというフォルダを作ってその中に入れておくと分かりやすくて使いやすいと思います。

[js] javascript:(function(){var w = 120, h = 90, u = location.href, t = document.title;var a = '<a href="'+u+'" title="'+t+'" target="_blank">', ca = '</a>';var img = '<img src="http://capture.heartrails.com/' +w+'x'+h+'/shadow?'+u+'" width="'+w+'" height="'+h+'" style="float: left;">';var hatena = '<a href="http://b.hatena.ne.jp/entry/' +u+'"><img src="http://b.hatena.ne.jp/entry/image/' +u+'" alt="はてなブックマーク - '+t+'" title="はてなブックマーク - '+t+'"></a>';var tag = '<div class="sharelink" style="padding: 6px; border: 1px solid #aaaaaa;">' + a + img + ca + a + t + ca + hatena + '<br style="clear: both;" /></div>';prompt('ShareLink', tag);})(); [/js]

補足ですが、コード内のwとhの値を変えればサムネイルのサイズが変わります。 デフォルトでは幅120px、高さ90pxのサムネイルを作成するようにしています。 これらのサイズはお好きなように変更しても構いません。

ShareLinkの使い方

ShareLinkの使い方としては、まずリンクを貼りたいページを表示しておきます。 その後、ShareLinkをクリックするとプロンプトにタグが表示されます。 例えば、このブログのトップページにリンクを貼ろうとすると以下のようなタグが自動生成されます。

[html] <div class="sharelink" style="padding: 6px; border: 1px solid #aaaaaa;"><a href="http://suzushin7.com/blog/" title="すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記" target="blank"><img src="http://capture.heartrails.com/120x90/shadow?http://suzushin7.com/blog/" width="120" height="90" style="float: left;"></a><a href="http://suzushin7.com/blog/" title="すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記" target="blank">すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記</a><a href="http://b.hatena.ne.jp/entry/http://suzushin7.com/blog/"> src="http://b.hatena.ne.jp/entry/image/http://suzushin7.com/blog/" alt="はてなブックマーク - すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記" title="はてなブックマーク - すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記"></a><br style="clear: both;" /></div> [/html]

後はこのタグをコピーして、ブログ記事に貼り付けるだけです。 ねっ、簡単でしょ？ ちなみに、上記コードを表示させるとこんな感じになります。 意外とスッキリしていて良い感じだと思いませんか？

すずしん - 人生大逆転を目指す、鈴木俊吾の成長日記

ShareLinkのソースコード

ShareLinkのソースコードは以下のようになっています。 基本的な考え方はPageLinkと同様で、タグの文字列を生成してプロンプトに表示させるという方法で実現しています。 今回はサムネイルの取得、リンクタグの作成、はてなブックマーク数の表示もさせていますので少々コードが長くなっていますが、じっくりコードを読めば大したことはしていないというのがお分かりになると思います。 これくらいのコード量になってくると、何となくプログラミングしたという感じになってきますね。

今回サムネイルを取得するにあたって、「HeartRails Capture」のAPIを使用しています。 また、はてなブックマーク数の取得には、はてなブックマーク数を画像で取得するAPIを使用しています。 それぞれのページヘのリンクを貼っておきますので、詳しくはリンク先を参照下さい。

[js] javascript:(function(){ var w = 120, h = 90, u = location.href, t = document.title; var a = '<a href="'+u+'" title="'+t+'" target="_blank">', ca = '</a>'; var img = '<img src="http://capture.heartrails.com/' +w+'x'+h+'/shadow?'+u+'" width="'+w+'" height="'+h+'" style="float: left;">'; var hatena = '<a href="http://b.hatena.ne.jp/entry/' +u+'"><img src="http://b.hatena.ne.jp/entry/image/' +u+'" alt="はてなブックマーク - '+t+'" title="はてなブックマーク - '+t+'"></a>'; var tag = '<div class="sharelink" style="padding: 6px; border: 1px solid #aaaaaa;">' + a + img + ca + a + t + ca + hatena + '<br style="clear: both;" /></div>'; prompt('ShareLink', tag); })(); [/js]

HeartRails Capture | サムネイル画像／PDF ファイル作成サービス

自分のブログに「○○users」を表示する - はてなブックマークヘルプ

まとめ

今回は、サムネイル画像がついたリンクを作成するブックマークレットである「ShareLink」を作ってみました。 このShareLinkを使うことで、スッキリしていて見栄えの良いリンクを貼れるようになります。 比較的リンクを貼ることの多いブロガーにとっては、非常にオススメできるブックマークレットだと思います。

サムネイル画像付きのリンクを貼るのに、毎回あれだけの量のタグを入力するのは大変ですよね…。 このShareLinkを使ってサクッとリンクタグを生成してしまいましょう！ ShareLinkは、ブロガーの良い相棒になってくれると思います。 私も今後ブログ記事にリンクを貼るときにはShareLinkを使おうと考えています。

もしこのブックマークレットが気に入っていただけたら、ぜひブログ記事やSNSなどでシェアしていただけると非常に喜びます。 その際は、ぜひShareLinkを使ってこのページヘリンクを貼ってくださるとありがたいです。 1人でも多くの方にこのShareLinkを知ってもらい、また使っていただきたいですね。