JavaScript 「Opera Mini」を判別してCSS切り替え

つい最近、iPhoneのAppStoreに、「Opera Mini」が登場しました。

開こうとするサイトを、一旦Operaのサーバを経由し、圧縮したデータを取得することで、
Safariよりも高速なブラウジングが出来るようです。

そもそも「Opera Mini」というのは、携帯端末でのOperaを指すようで、
今回リリースされたのは、そのiPhone版ということのようですね。

ただ、Safariではブラウザ判別の基準として、
ユーザエージェント内の「iPhone」という文字列をチェックしていましたが、
「Opera Mini」のそれには「iPhone」が含まれず、PC表示となるサイトがあるようです。
うちのほるめすメモ帳 - 暫定も例外でなく、
Safariと同様に見せるためには、「Opera Mini」の判別をする必要があります。


「Opera Mini」のユーザエージェントの内容。
その通り「Opera Mini」という文字列が含まれるので、それを利用します。

<script type="text/javascript">
 //モバイル端末の判定
 var agent = navigator.userAgent;
 document.write( "ユーザエージェント：" + agent + "<br>" );

 if( agent.search(/Opera Mini/) != -1 ){
   // iPhone
 }else{
  // PC
 }
</script>
この判定では、結局他の「Opera Mini」もiPhone側に属してしまうので、生ぬるい感じです。
僕は別に他のそれらがiPhoneとしてヒットしようが良いのですが、
もしそこまでこだわって制御するのであれば、結局IPチェックするしか無いのかなと思います。

うーん、まだSafariからOperaに乗り換える理由が生まれないかなぁ。
軽くなっている気はするけれど、ブックマーク移行できないし、
デフォルトでiPhone仕様のサイトをそのまま表示出来たら嬉しいね。

簡易リストタグ生成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は「お気に入りに追加」出来ないのか。

Chromeのクリップボードにコピーしたいなぁ

合宿で積極的にノートパソコンを使っていてわかるのですが、
やっぱりSleipnirってタブブラウザの中では、圧倒的に動作が重いんですよね。
IEベースなのも然り、標準機能やマウスジェスチャも然り。

なので、今はChromeをデフォブラウザにしてます。
流石に2ケタのページをタブで開くと重いですが、それでもSleipnirより断然速い。
マウスジェスチャもかざぐるマウスを利用すれば対応できるし、
Sleipnirからお気に入りを引越してくるのは面倒でしたけど。

で。
現在困ってるのが、投稿を書く時に使ってたブックマークレットが使えないこと。
この簡易リンクタグ生成ブックマークレットが使えないだけで、
他のページのリンクをさっくり作れないので、相当面倒です。
どうも、Firefox含めChromeでは、クリップボードを操るためのJSが無いようなんですね。

Flashのウラを掻いてクリップボードへコピーする「zeroclipboard」ってのもあるみたいですが、
本の虫: javascriptからClipboardを制御したい
こちらでも言われているように、ユーザの「ボタンを押す行動」が必要みたいですし。

どうにか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以外でも使用出来ます。
ブラウザに標準であるので使わないと思いますが。

iTunesをVBScriptから触るためのメモ

iPhoneが愛用機になってから、音楽を聴くのはiTunesになりました。
その影響で再生する時にはいつもByursideというガジェットで操作しています。
iTunesの様に大きくなく、ガジェットバーに配置することでいつでも触れる上、
再生だけでなくループ設定やジャケット表示も出来るので、
全く不満は無いです、凄い便利。

で。
ふと考えてみると、ガジェットは基本XML+HTML+JSのはずなので、
結果iTunesはJSで触れるはずですよね。

ということで調べてみると、やはりJSで触れることが分かりました。
情報は少ないものの、十二分にデータ取得や再生処理が行えるようです。
以下が参考になりそうなサイト様です(Java含む)。
iTunes COM for Windows SDK - おまえとモンテスキュー
iTunes for Windows まとめ - 便利なスクリプト
第1回　iTunesで再生中の楽曲タイトルをSkypeに表示させてみよう - JavaプログラマのためのSkype入門：ITpro
JSで触れると書きましたが、「Wscript」オブジェクトからなので、
実質VBScriptで使用することが出来ます。

ただ単に再生/一時停止するだけなら、以下のソースの様になります。
Dim iTunes

Set iTunes = WScript.CreateObject("iTunes.Application")
iTunes.PlayPause()
こんなに簡単に出来るんですね。

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は基本タグなので、タグの邪魔にさえならなければ大丈夫ですよね。

iPhone BloggerAPI+iUIでBlogger投稿一覧表示

ひとまず表示は出来たのでメモ。

ほるめすメモ帳inBlogger - 投稿一覧
今回はiPhone、PCSafari、Firefoxで表示しました。
IE等はただリストで表示されるだけです。


iPhoneで表示した場合です。
上バータイトルがすり切れているのは、ただ単に長すぎるからです。

実際の処理としては、BloggerAPIとiUIを混ぜ合わせただけなのですが、
色々と困ったことがあったのでまとめます。
document.createElementから、
必要なタグを生成して差し込もうとしましたが、
<ul>を差し込む場合、selected="true"が追加されませんでした。
objul:ulタグとすると、objul.selected="true";では処理がされなかったワケです。
原因はおそらく、ulタグにselectedが標準でない(iUI用に勝手に作成した)ためです。
仕方がないので<ul selected="true"></ul>とだけ元から作成しておき、
document.getElementsByTagName("ul").item(0)で呼び出しました。

これはPCSafariで表示した図。
なぜか上バータイトルが表示されません。

これはFirefox。
下の方に表示されているのは「Firebug」と言われるデバッグツールですね。
今回JSで処理したので、実際に処理が通っているのか、
表示がきちんとされているのかをチェックするために使用しました。

投稿の一覧表示自体は出来ましたが、これを今度各投稿を表示しないといけないですね。
以前に試してみましたが、途中でエラーが発生してそのまま停止してました。
諸々起こりそうな問題としては、かなりロードに時間がかかるかもしれないこと。
当然今回と同じようにJSで投稿を「同htm内」にロードしないといけないので、
今回表示する際(iPhoneでは10秒ほど)以上に時間がかかります。
さらに僕はiPhone3Gなので、メモリを大量消費した際の他の動作も気になります。

と言うような感じで、実は思ったよりiPhoneへの負担の大きいページが完成しそうです。


以下が今回の<body>以下のソースです。
▼続きを読む/たたむ
<div class="toolbar">
  <h1 id="pageTitle"></h1>
  <a id="backButton" class="button" href="#"></a>
</div>

<ul selected="true"></ul>

<script type="text/javascript">
  var bloggerService = new google.gdata.blogger.BloggerService('GoogleInc-jsguide-1.0');
  var feedUri = 'http://holmes21.blogspot.com/atom.xml';

  var handleBlogPostFeed = function(postsFeedRoot) {
    var posts = postsFeedRoot.feed.getEntries();
  
    // タグ生成生成
    var objul = document.getElementsByTagName("ul").item(0);
    objul.id = "home";
    objul.title = postsFeedRoot.feed.getTitle().getText();

    // タグ内投稿一覧生成
    var html = '';
    for (var i = 0, post; post = posts[i]; i++) {
      var postTitle = post.getTitle().getText();
      var postURL = post.getHtmlLink().getHref();
      html += '<li><a href="' + postURL + '" target="_self">'
                + postTitle + '</a></li>';
    }
    objul.innerHTML = html;
  };

  var handleError = function(error) {
   // エラー処理
   var objul = document.getElementsByTagName("ul").item(0);
   objul.id = "home";
   objul.title = "表示エラー";
   objul.innerHTML = "表示エラーです";
  };

  // ここで実行
  bloggerService.getBlogPostFeed(feedUri, handleBlogPostFeed, handleError);
</script>

iPhone用にOS判別

iUIを使用してページを構成すると、iPhoneからの見栄えが良くても、その他PCからの見栄えは悪くなります。
と言うより、iPhone用のページなのですからそれはそうなのですが。

ですので、iPhoneとそうでないものの判別をします。
以下を参考にしました。
Android携帯でブラウザから緯度経度情報を取得
 - PHP,MySQL,Flexな日々＋イラストとか
そして実際のページ。
ほるメモいんぶろ - OS判別

なるほど、ブラウザの情報からOSの情報を引き出すんですね。

PCなどのiPhone以外からアクセスされると、「iPhoneではありません。」と表示され、

iPhoneの場合は、「iPhoneです。」と表示されます。

実際のコードは以下の通り。
<script type="text/javascript">
 //モバイル端末の判定
 var agent = navigator.userAgent;
 document.write( "ユーザエージェント：" + agent + "<br>" );
 if( agent.search(/iPhone/) != -1 ){
  document.write( "<span style='color:#0000ff;'>iPhoneです。</span>" );
 }else{
  document.write( "<span style='color:#ff0000;'>iPhoneではありません。</span>" );
 }
</script>

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);

IE右クリックメニュー JavaScript メモ

たまたま偶然触ったので、忘れないようにメモ。
そもそもそういう使い方のブログですので。

IE右クリックメニューのレジストリ
HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\MenuExt

親と子
右クリックメニューから表示したウィンドウから、親のウィンドウを参照可能。
「external.menuArguments」が、実質親の「window」となる。
「external.menuArguments.alert("hoge")」は、親側アラート。

参考にしたサイト(重要順)
R-Click! Union 拡張メニュースクリプトの作り方
IEの右クリックメニューをカスタマイズする - phpspot
【IEの特殊仕様+JavaScript】リンクや画像を右クリックしてURLをコピーする機能をメニューに追加 - SQLの窓と銀プログラマ

最近レジストリを眺めてるとワクワクするのですが、なぜでしょうか。

IE6以前でのエラー発生 無事解決です

なぜか、と聞かれると正直わかりません。
ただ、何事も無かったかのように正常に使えているので解決メモ。


まず、前回での「Syntax error」が気になったので「showhide.js」を見てみました。
エラーでは8行目と出ていたので参照するとコメント行です。
function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。
        if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する
                //指定されたIDのstyle.displayがnoneなら
                if( document.getElementById(targetID).style.display == "none") {
                    //blockに変更する
                    document.getElementById(targetID).style.display = "block";
                } else { //noneでなければ、つまりblockなら
                    //noneにする
                    document.getElementById(targetID).style.display = "none";
                }
        }
}
JavaScriptではコメントのみの行がダメなのか？と思ったのですが、それならむしろ3行目の時点でエラーが発生しているはずです。
そもそもインラインフレームで呼び出しているものが使用出来ているので、コメントには問題が内容に思えるのですが・・・。
とりあえず怪しげなので、コメント行を全て削除してみました。

するといけたんですね、これが。
うーん、わからない。
もしコメント行手前に全角スペースが入っていたとしたら、インラインフレーム側でもエラーが発生するわけですもんね。


まぁとりあえず、きちんと動作しているようなので良しとします。
このまま使えないのは、学校でも見られないのと同等ですから。

IE6以前でのエラー発生

※追記:無事解決しました。
　　　→IE6以前でのエラー発生 無事解決です

先日の「続きを読む」風JavaScriptからIE6以前でのエラー発生について未だに解決出来ていませんが、今確認できていることをメモとして。


1, showhide.jsをロードしなければエラーが発生しない。
2, JS自体は使用出来る(インラインフレーム内では使用出来ている点より明らか)。
3, なぜか毎回ページロード時「Syntax error」が発生する。

 →JS呼び出しの記述がおかしい？
 →BloggerではこのJSが、何らかの理由で使用出来ない？

4, 他のJSは使用出来ている(SyntaxHighlighterが使用出来ているので)。
5, Seesaaのファイル置き場が悪いわけではない(3,と同じ+別サーバで試しても無理)。
 →外部サーバに.jsファイルを置いているのは問題ではない。


んー、正直何が何だかわからないです。
一番強い要因としてはやはり「Blogger」だからだとは思うのですが。
あと、一番のヒントは「Syntax error」でしょうね。
僕は「メモ帳」と言う意味で、あまり問題は無いのですが、他人が見る可能性とプログラマであることを含めて考えるとやはり解決しておくべきですし、こういう「エラー対処」も一つの勉強になり得ますので、いずれは解決しようと思います。
でも、あんまり時間をガチガチに使ってもなぁ、と思うので途中で放り投げるかも・・・。

今のところIE7以上では使用出来るので、この問題を解決するまではIE7での閲覧を推奨します。

ちなみに、IEのテストで使用しているのは「IETester」というソフトです。
My DebugBar | IETester / HomePage
ソフトの解説はまた後日。

「続きを読む」タグ生成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

追記:どうもIE6ではJSエラーが発生するようです。
　　 現在問題調査中。
さらに追記:無事解決しました。
　　　→IE6以前でのエラー発生 無事解決です

他のブログサイトではよくある「続きを読む」機能。
あまりにも長い記事にはこの機能を用い、ページを無駄に使わない効果がありますが、実はこのBloggerには「続きを読む」機能がありません。
なので、あくまでも「続きを読む」風なJavaScriptを作成しました。

今回の処理は、簡単に言えば「消している」だけなので、画面ロード時に全て取得しています。
他のブログのような「続きを読む」機能とは(おそらく)処理が違うことを先に断っておきます。

完成品としては、以下のようになります。


今回参考にさせていただいたサイトはこちらです。
JAVAscriptコレクション・文章を折りたたんだり表示したり

SyntaxHighlighter リンク変更の時と同じように、ほるめすメモ帳inSeesaaにhtmとjsを置いて使用しています。

以下が作成したソースです。
▼続きを読む/たたむ

まずは「showhide.js」から。
と言っても、上記参考サイトのソースをそのまま使わせてもらっているので、ソースのみ。解説も割愛します。
function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。
        if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する
                //指定されたIDのstyle.displayがnoneなら
                if( document.getElementById(targetID).style.display == "none") {
                    //blockに変更する
                    document.getElementById(targetID).style.display = "block";
                } else { //noneでなければ、つまりblockなら
                    //noneにする
                    document.getElementById(targetID).style.display = "none";
                }
        }
}

続いて、「showhide.htm」のソース。
こちらもほぼソースを書き換えていないので解説不要ですね。
<html>
<head>
 <title>「続きを読む」風JavaScript</title>
 <meta http-equiv="Content-Type" content="text/html;CHARSET=SHIFT_JIS">
 <script language="JavaScript" src="showhide.js"></script>
</head>
<body>
 <pre>
 <a href="#" onclick="showHide('SH-001');return false;">&#9660;続きを読む/たたむ</a>
 <div id="SH-001" style="display: none">
 このように続きが表示されます。
 閉じる場合は再度クリックします。</div>
 </pre>
</body>
</html>

SyntaxHighlighter リンク変更

ふとブログを見返してみると、どう見てもSyntaxHighlighterが効いていないのに気付きました。
びっくりして原因を探ってみると、どうやらホスティング先のサーバが使えないようです。
一時的なものなのか、はたまたもう復活しないのかわからないのですが、そのまま放っておくのも嫌なので、ホスティングをやめてこちらでアップロードしたものを参照するようにしました。

と言っても、Bloggerは画像以外のファイルはアップロード出来ません。
なので、さっき作ったばっかりのSeesaaの領域を借りることにします。
使用していたSyntaxHighlighterのバージョンは「2.0.296」なので、以下から拝借しました。
SyntaxHighlighter for Movable Type

今はまだ必要な分しか入れていないので、必要になり次第随時入れていくようにします。

※追記
変更に伴い、以下のページを書き換えました。
ほるめすメモ帳inBlogger: SyntaxHighlighter 設定資料

※さらに追記
ホスティング先のサーバが復活したようです。

簡易リンクタグ生成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では右クリックから「お気に入りに追加」で登録できます。

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

SyntaxHighlighter 設定資料

実際テンプレート内に書き加えたソースは以下の通りです。

<head>

  <!-- ここから書き換え -->
  <script src='http://holmes21.up.seesaa.net/js/showhide.js' type='text/javascript'/>
  <link href='http://holmes21.up.seesaa.net/css/prestyle.css' rel='stylesheet' type='text/css'/>

  <link href='http://holmes21.up.seesaa.net/sh/shCore.css' rel='stylesheet' type='text/css'/>
  <link href='http://holmes21.up.seesaa.net/sh/shThemeDefault.css' rel='stylesheet' type='text/css'/>
  <script src='http://holmes21.up.seesaa.net/sh/shCore.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shLegacy.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushVb.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushCss.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushPhp.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushXml.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushPlain.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushJScript.js' type='text/javascript'/>
  <script src='http://holmes21.up.seesaa.net/sh/shBrushSql.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = &#39;http://holmes21.up.seesaa.net/sh/clipboard.swf&#39;;
SyntaxHighlighter.config.strings.copyToClipboardConfirmation = &#39;\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3000\u3000\u3000&#39;;
SyntaxHighlighter.defaults[&#39;auto-links&#39;] = false;
</script>

<style type='text/css'>
.syntaxhighlighter div,
.syntaxhighlighter span,
.syntaxhighlighter code {
 font-size:12px!important;
 font-family: &quot;ＭＳ Ｐゴシック&quot;!important;
}
.syntaxhighlighter {
 padding:5px!important;
 background-color:#FFFFFF!important; 
 border-style:solid!important;
 border-color:#808080!important;
 border-width:1px!important;
}
</style>
  <!-- ここまで書き換え -->

････</head>

SyntaxHighlighterを表示するために貼り付けるコードを作成するには、以下から変換ページを参照します。
SyntaxHighlighter2.0用 貼り付けコード作成 - SQLの窓と銀プログラマ

SyntaxHighlighter テストその2

今回は「改行の変換」を「いいえ」でやってみたいと思います。
記事内を＜pre＞タグで包むと自動整形してくれるようです。

結果的にこういったモノが出れば成功なんですが・・・。
090506_sh_test

この記事を書く際にはこちらを参照しています。
SyntaxHighlighter2.0用 貼り付けコード作成 - SQLの窓と銀プログラマ

以下SyntaxHighlighter挿入。

javascript:window.clipboardData.setData('Text',document.title+'\n'+document.URL);
void(0);

とりあえずテンプレート内に必要なモノ全て入れて試してみました。
やっと動作してくれるようになりましたね！
これだけの作業なのに神経使います・・・
ゆっくり考えれば出来ることなのに焦っちゃうっていう。
もっと論理的に考えられるようにしないといけません、精進します。

中に出てくる緑の矢印は改行を表しているんですね、初めて知りました。
というか、このテンプレート本文の幅狭いなー。
今度はこれを解消してみることにします、それか別テンプレートに変更ですね。