shinmのブログ

ITエンジニアの日常。

はてな記法自動生成ブックマークレットもどきを作ってみた。（外部リンク作成）

エンジニア javascript

背景

僕が外部リンクをこのブログに貼る場合の方法として以下の方法を行っていた。

Firefoxの「ブックーマーク」→「このページをブックマーク」を選択（小さなWindowが表示される）
表示されたページの名前をコピーして、リンク名とする。
外部リンクのURLをコピーして、上記２のリンク名を選択→はてなダイアリーのリンクボタンで設定する

　　　　※よくよく調べてみると、上記２で行っている名前の取得は自動でしてくれるようだ(T_T)
　　　　リンクを簡単に記述する（http記法、mailto記法） - はてなダイアリーのヘルプ

「:title」と記述すると、そのページのタイトルを自動的に表示させることができます。このタイトルははてなダイアリーのサーバで自動的に取得され、定期的に更新されます。また、「:title=」の後に文字列を書くことで、表示されるタイトルを指定することができます。

上記の手順を自動化してみました。

考慮点

上記２で表示される名前はHTML上のTitleである。
上記３でリンクボタンを設定した後の表記は「[http://www.hatena.ne.jp/:title=はてなのトップページ]」形式である。

作成手順

以下のスクリプトを書いたリンクを作成する

var page = window.open('', '', 'width=400,height=200');
page.document.write('はてなダイアリー用リンク:');
var hatenaLink = '[' + parent.document.URL + ':title=' + parent.document.title + ']';
page.document.write('<textarea name=\'hatelink\' rows=\'4\' cols=\'40\' readonly onclick=\'this.focus(); this.select();\'>' + hatenaLink +'</textarea>' );
page.document.write('<BR>上記エリア内の文字をはてなダイアリーに貼り付けることでリンクを作成できます');

以下が作成したリンク

　　　申し訳ありませんが、はてなではリンク作成がうまくいかなかったので、別ブログに作成しました。
　　　はてなダイアリー用リンク作成ブックマークレット: shinの成長記録

　　　記載内容は以下です。

<a href="javascript:var page = window.open('', '', 'width=400,height=200');page.document.write('はてなダイアリー用リンク:');
var hatenaLink = '[' + parent.document.URL + ':title=' + parent.document.title + ']';
page.document.write('<textarea name=\'hatelink\' rows=\'4\' cols=\'40\' readonly onclick=\'this.focus(); this.select();\'>' + hatenaLink +'</textarea>' );
page.document.write('<BR>上記エリア内の文字をはてなダイアリーに貼り付けることでリンクを作成できます');">はてなダイアリー用リンク作成</a>

使用方法

上記リンク先の「はてなダイアリー用リンク作成」のリンクをブックマークする。
リンクを作成したいページを開いて上記ブックマークを選択すると、別Windowではてな記法で記載された該当ページのリンク（テキスト）が表示されるので、それをコピペする。

所感など

作成している途中でTitleを指定しなくても自動で取得してくれることが発覚したので、まったく無駄な機能だと思ったが一応記録しておこうと思う。
他に便利なブックマークレットを作りたいなと思う。