簡易リストタグ生成JavaScript

最近はTwitterに付きっきりで、ブログをあんまり書いていないのですが、
一つの投稿に対して複数の参考サイトがある場合、リンクタグでまとめて置いたりします。

今までは、そんな時に一からタグを書いていました。
おかげで、リストタグを覚えてしまったし、打つのも早いわけです。
が、それも手早く作れたらいいよなぁと思ったので作りました。


以下を右クリック→「お気に入りに追加」してください。
◆簡易リストタグ生成JS


基本は、【再更新】簡易リンクタグ生成JavaScriptと同じ考え方ですが、
生成する際にパラメータを渡すことで、要素の個数と形式をある程度指定できます。

対応するリストタグは以下のようなものです。
<ol><li></li></ol>
<ul><li></li><li></li></ul>
これをパラメータにより生成する場合は、
「1,ol」
「2,ul」
と入力します。

現在、一般的に使用されているブラウザで使用出来ると思いますが、
一部ブラウザはセキュリティの観点から警告が出るかもしれません。
また、なぜかSleipnirでは使用出来ない状況です。
パーツごとでは動作するし、IEでも利用できるので余計に意味不明です。

Sleipirで使えなかったら意味ないなぁ。

以下ソースです。
▼続きを読む/たたむ
javascript:

 // プロンプトから引数取得
 var pl='◆簡易リストタグ生成：引数に応じてリストタグ(<ol> or <ul>)を生成します。\n  ex.[1,ol]：<ol><li></li></ol>  未入力(デフォルト)：[1,ul]';
 var rd=prompt(pl,'');

 // 未入力の場合はデフォルト代入
 if(rd=='')rd='1,ul';

 // splitで分割
 var sprd=rd.split(',');

 // リストタグ生成
 var wd='<'+sprd[1]+'>';
 for(var i=1;i<=sprd[0];i++){
  wd+='<li></li>';
 }
 wd+='</'+sprd[1]+'>\n';

 // ブラウザ別にコピーor表示
 if (window.navigator.userAgent.toLowerCase().indexOf('msie') > -1) {
  window.clipboardData.setData('Text',wd);
  window.status='◆リストタグをクリップボードへコピーしました。';
 } else {
  prompt('◆簡易リストタグ生成：以下をコピーして使用します。',wd);
 }
 void(0);

【再更新】簡易リンクタグ生成JavaScript

「Chromeのクリップボードにコピーしたいなぁ」で困っていたものの、
IE以外のブラウザでは、直接クリップボードへコピーする方法が見付かりませんでした。

なので、直接クリップボードへコピーしないようにしました。
結局、IE以外ブラウザでは、プロンプトでタグを表示するようにしています。


タグ内に2バイト文字が含まれると、入力ボックスに正しく表示されませんが、
コピーさえ出来ればいいので、まぁいいでしょう。

以下を右クリック→「お気に入りに追加」してください。
◆ブラウザ別簡易リンクタグ生成JS

ソースは以下の通りです。
javascript:
    var dt=document.title;
    dt=dt.replace(/[<]/g, "&lt;");
    dt=dt.replace(/[>]/g, "&gt;");
    dt='<a href="' + document.URL + '" target="_blank">' + dt + '</a>';
    if (window.navigator.userAgent.toLowerCase().indexOf("msie") > -1) {
        window.clipboardData.setData('Text',dt);
        window.status='◆リンクタグをクリップボードへコピーしました。';
    } else {
        prompt('◆簡易リンクタグ生成：以下をコピーして使用します。',dt);
    }
    void(0);
おおよそのソースは【更新】簡易リンクタグ生成JavaScriptと同じです。
あー、Chromeは「お気に入りに追加」出来ないのか。

iPhone ページ内検索ブックマークレット

思いついて調べるとiPhoneでもブックマークレットっていけるんですね。
よく考えてみれば、JavaScriptを実行するだけだからいけるのか。

ということで、
iPhoneのSafariで表示しているページ内を検索するブックマークレットを作成しました。
iPhoneのSafariには検索がないので、調べ物する時には困るんですよね。

現物は以下から。
iPhone用ブックマークレット ほるめすメモ帳

ソースよりも、利用方法から。

上のページにアクセスし、「ページ内検索ブックマークレット」下のソースをコピーします。

コピーしただけではブックマークに追加されないので、
適当にページをブックマークに追加したのち、コピーしたソースに書き換えます。

ページ内検索したいページに移動し、さっき作ったブックマークを選択すると、
入力ダイアログが表示されるので、検索したい文字列を入力してOK。

検索し存在すると、その文字列が黄色で強調され、件数とともに終了します。

見やすいソースはこちら。
javascript:
var t=window.prompt('検索する文字列を入力して下さい。','');
if(t!=null&&t!=''){
 var re=new RegExp(t,'ig');
 var b=document.body.innerHTML;
 b=b.replace(re,'<span id=\'sebml\' name=\'sebml\' style=\'color:#000;background-color:#FF0;\'>'+t+'</span>');
 document.body.innerHTML=b;
 var sebml=document.getElementsByName('sebml');
 if(sebml.length==0){
  alert('一致する文字列はありません。');
 }
 else{
  alert(sebml.length+'件検索しました。');
 }
}
void(0);
あ、ちなみにiPhone以外でも使用出来ます。
ブラウザに標準であるので使わないと思いますが。

Javascript ページ内<input>のName一覧表示ブックマークレット

今日、お友達のJavascript弄りに参加している時に、
偶然の産物的に出来たのでメモ。
いやまぁ、基本的なところは友達が作りました。感謝です。

Javascriptからオブジェクトを弄る際に、
その時に必要となるID or Nameが一目でどこにいるか分かれば便利なので、
ブックマークレットとして登録しておきます。

右クリックから「お気に入りに追加」してください。
◆ページ内<input>Name一覧表示
javascript:

// ページ内<input>情報取得
var ele = document.body.getElementsByTagName('input');
var res = '',
// <input>の個数からナンバリング桁数取得
len = ele.length.toString().length;

for (var i = 0; i < ele.length; i++) {

  var pz = '',
  // 現在の連番桁数
  ilen = i.toString().length;

  if (len > ilen) {

    // 不足分0詰め処理
    for (var j = ilen; j < len; j++) {
      pz = pz + '0';
    }

  }

  // まとめて格納
  res = res + pz + i + ':' + ele[i].name + '\n';

}
alert(res);
void(0);

【更新】簡易リンクタグ生成JavaScript

※追記：再更新しました。
【再更新】簡易リンクタグ生成JavaScript

「簡易リンクタグ生成JavaScript」の更新版です。
IE,Sleipnirで動作確認済です。

前回の投稿では本当に簡易的に作っていたので、
一部のページでは取り返しのつかないほど困ってしまいます。

例えば。
ページタイトルが「<a>の使用方法」や「<div>の効力」の場合、
<a href="http://test.jp/a.htm"><a>の使用方法</a>、
<a href="http://test.jp/div.htm"><div>の効力</a>
このようなソースになってしまいます。
これでは、リンクでない以前に「タグが閉じられていない」事によるページエラーが発生します。

そのために、以下の様に書き加えました。
javascript:
var dt=document.title;
dt=dt.replace(/</g, "&lt;");
dt=dt.replace(/>/g, "&gt;");
window.clipboardData.setData('Text', '<a href="' + document.URL + '" target="_blank">' + dt + '</a>');
window.status='◆リンクタグをクリップボードへコピーしました。';
void(0);
以下を右クリック→「お気に入りに追加」してください。
◆リンクタグ生成JS

内部で「<>」を処理するために、「replace()」を使用しています。
以下のサイトを参考にしました。
Javascript: Replace の怪
正規表現（RegExp）
「replace()」は、単に文字を置換するだけでなく、
判断基準に正規表現を盛り込むことが出来ます。
正規表現の領域(対象)を「/.../」内に指定するので、
「dt.replace(/</g, "&lt;")」は、
「dt」内にある「<」を全て(g)「&lt;」へ置換する処理
になります。
これだけ憶えておけば、JSでの置換処理の道はグッと近くなりますね。

<>以外には<a>の邪魔になるモノはもう無いはずです。
たぶん。
HTMLは基本タグなので、タグの邪魔にさえならなければ大丈夫ですよね。

CSS スタイルボックス作成

※追記：さらに見やすく内部変更しました。(091008)
「スタイルボックス」という名の、ただの枠付の箱です。
どちらのサイトからインスパイアしたのかはさておき、「この文章は強調したい」という為に作成しました。

このようなモノになります。
両端にマージンを、ライン内にはパディングをそれぞれ5px与えています。
さらに、パッと見で分かりやすいように、行間を200%にしています。
「impact」というclass値で与えています。
ソースは以下の通り。
/* スタイルボックス作成 */
.impact{
 border-color:#BBB #BBB #BBB #c94093;
 border-style:solid;
 border-width:1px 1px 1px 3px;
 padding:5px;
 margin:0px 5px;
 line-height: 200%;
 background-color:#DDD;
}

ブログのソースを開いて見てみれば分かりますが、「http://holmes21.up.seesaa.net/css/inblo.css」が参照先ですので、外部からすぐ参照出来ます。

さらに、すぐに作成出来るようにブックマークレット化しました。
完全に自分用ですが。
javascript:window.clipboardData.setData('Text','<pre class="impact"></pre>');window.status='◆スタイルボックスをクリップボードへコピーしました。';void(0);

「続きを読む」タグ生成JavaScript

一つ前の投稿で使えるようにした「続きを読む」を、すぐにブログで使用出来るように簡易リンクタグ生成JavaScriptと同じようにJSを作成しました。
完全に自分用なので、他の人が見ても全く意味が無いかもしれません。

※以前同様、今回もIEでしか使用出来ません(Sleipnirも使用可能)。
以下がソースとなります(実際には1行で処理を行います)。
javascript:
var date=new Date();
window.clipboardData.setData('Text','<a href="#" onclick="showHide(\'sh'+date.getTime()+'\');return false;">&#9660;続きを読む/たたむ</a>\n<div id="sh'+date.getTime()+'" style="display: none"></div>\n');
window.status='◆「続きを読む」をクリップボードへコピーしました。';
void(0);


軽く解説。
「続きを読む」範囲に付けるIDは、ブログページ内で被ってしまうとそこまで処理が通ってしまって困るので、絶対に被らないようにしました。
2行目で「Date」オブジェクトを作り、3行目「date.getTime()」で、被らない数字を生成します。
詳しいことは以下のリファレンスで。
getTime/JavaScriptリファレンス
あとはそのままソースを書き上げるだけです。

簡易リンクタグ生成JavaScript

※このJavaScriptはIEでしか使用出来ません(Sleipnirも使用可能)。

ブログ記事作成する時の機能として「リンクタグを挿入」があります。
ダイアログにアドレスを入れるだけでリンクタグを入れてくれるので便利は便利なのですが、通常でターゲットを指定してくれないので自分で「target="_blank"」と入れるのが面倒です。
なので、JavaScriptで「target="_blank"」を含めたリンクタグを生成するコードを作りました。

実際には、アドレスバーにJavaScriptを打ち込み実行するカタチになります。
以下がそのコードです。
javascript:
window.clipboardData.setData('Text','<a href="'+document.URL+'" target="_blank">'+document.title+'</a>');
window.status='◆リンクタグをクリップボードへコピーしました。';
void(0);

このコードは4行で書かれていますが、アドレスバーに入れて実行するので、改行を除いて1行にする必要があります。
それ以前に、リンクタグを取得するたびにアドレスバーにコードを入れるのは面倒なので、ブラウザの「お気に入り」に登録します。
簡易リンクタグ生成JS
IEでは右クリックから「お気に入りに追加」で登録できます。

なお、ページ名に「'」や「"」などが入ると実行出来ない場合があります。あくまでも「簡易」ですので、ご了承下さい。