するぷろーら”だけ”を使って超手軽に関連リンクを作る方法&絶対オススメのブックマークレット！

Posted: 12/14, 2012 ˑ Filled under: アプリ, ガジェット

きっかけはdelaymaniaの大ちゃんのエントリ

同じくブロガーである大ちゃんがこんなのエントリを書いていたのです。

私も愛用しているするぷろーらと、定型文というアプリを使って関連リンクを作成する方法でした。

ただ、もう少し手間を減らせるんじゃないかと…？という予感がし、試行錯誤してみたところ、するぷろーらのみを使って関連リンクを作成する方法が見つかったのでシェアしたいと思います。
届けこの思い！

ポイントはカスタムタグの使い方にあり！

今回するぷろーらを使っている理由は、Custom Tag(カスタムタグ)という入力アシストが使えるからです。
カスタムタグとは言うなれば定型文でありながら、今見ているページの内容などその時々に会わせて変化する内容を入れられるというもの。
ブックマークレットに比べて手軽で直感的に使える所がいいですね。

まずは二つのカスタムタグを用意

今回の関連リンクを作るにあたっては二つのカスタムタグを使うので、まずこれを作成します。

画面下部のタグアイコンから新しいカスタムタグをタップします。

まずは関連リンクエリアの外側の箱になります。
関連リンクエリアを囲むdivやulを用意しておきます。

<div id="related">
<h2>関連記事</h2>
<ul>

</ul>
</div>

こんな感じですね。
ポイントは真ん中に挟んだ改行になります。
ソースはdelaymaniaのスタイルを作例にしていますので、各人のテーマに合わせて変更してください。

続いて一つずつのアイテムを生成するためのliタグを登録します。
基本的には標準で入っている「リンクタグ」の改造でOKです

<li><a hret="!url!" target="_blank">!title!</a></li>

こんな感じです。
「!url!」や「!title!」の部分が予約語と呼ばれるもので、見ているページの内容によって変化するのです。

タグができたら使っていきます！

使い方は簡単です。

まず枠としたタグを呼び出して、Memoに貼付けます。
ここでカーソルを先ほど作った改行部分にあわせます。

次にページを表示し、さきほど作ったli付きのリンクタグを生成します。
（画像ではリンクとなっていますが、カスタムタグの間違いですね」＞＜）

これも枠と同じくMemoを選びます。

するとちゃんと枠の中にタグが生成されます。

あとはコレを関連リンクの分だけ繰り返します。
いちいちアプリの切り替わりがなく、ブラウザとMemoがシームレスに行き来できるするぷろーらだからこそできる技ですよね。

ここまでできたらボタン一つでするぷろに送るもよし、コピペしていつものエディタに送るもよし、というわけです。

さらにもう一手間加えると使い勝手がTweet数やはてぶ数だって！

関連リンクといえばはてぶ数やTweet数をつけている方がいますが、これもするぷろーらだけで実現できてしまいます。
先ほどのリンクタグにちょっと手を加えて

<li><a hret="!url!" target="_blank">!title!</a><a href="http://tweetbuzz.jp/redirect?url=!url!"><img src="http://tools.tweetbuzz.jp/imgcount?url=!url!"/></a><a href="http://b.hatena.ne.jp/entry/!url!"><img src="http://b.hatena.ne.jp/entry/image/!url!" /></a></li>

こんな感じにしてあげます。

するとはてぶ数やTweet数が表示されます。
これも予約語が使えることの恩恵ですね。