ぴくとぽっぷ：ページ上から直リンクしている画像を順次表示するブックマークレット

ブログページ上にサムネイルはあるけれど、拡大画像はクリックしないと見られない……数が多いと面倒だなぁ……と感じたこと、ありません？
実際そう感じた人がここに約一名(苦笑)。
休み中にどっかへおいしいものでも食べに行きたいなぁ……と思ってネット上をあちこち散策していたとき、『関谷江里の京都暮らし』というページを見つけ……食欲をそそられる、おいしそうな料理の画像が並んでるんですけれど、いちいちサムネイルを選択してクリックするのがなんとも面倒で。

なので、こんなブックマークレットを作成してみました。

ぴくとぽっぷ：ページ上から直リンクしている画像を順次表示するブックマークレット

ブックマークレットの登録方法等はこちら→【Web】ブックマークレットのブラウザ毎の登録方法

ページ上に画像への直リンク(<a href="(画像ファイル)">サムネイル or テキスト</a>)があるページでこのブックマークレットを実行すると、先頭の画像をページ左上に作ったウィンドウ(div要素)内で表示します。
ウィンドウが表示されている状態で、マウスのホイールを前後に動かすと、画像が切り替わります。

画像へのリンクかどうかは拡張子で判断しており、*.jpg、*.jpeg、*.pngに制限しています。また、ココログの場合は/images/又は/photos/下の画像であることもチェックします。

【2007/05/01追記】
*.gifも対象に含めたい場合は、こちら↓をお使いください。

ぴくとぽっぷ[+GIF]：GIFも対象にしたブックマークレット

また、リンク先が*.htmlのものも含めたい場合は、

ぴくとぽっぷ[+HTML]：HTMLも対象にしたブックマークレット

ぴくとぽっぷ[+GIF+HTML]：GIFとHTMLも対象にしたブックマークレット

をお試しください。

対象となるHTMLファイル(*.html、*.htm)は同一ドメインのものに限ります。
ブックマークレット起動時にリンク先HTMLを全て読み込むため、準備完了までに時間がかかります。
また、表示される画像は1つのみ(HTML内の最初のimg要素)となります。
→【2007/06/23追記】オプション操作(下記参照)によって最初のimg要素以外も表示できるようになりました。

■操作について
ウィンドウが出ているときには、以下の操作が有効です。

なお、ウィンドウが隠れた状態で、対象となる画像へのリンクをクリックすればウィンドウが再表示されます。
リンクを[Shift]キーを押しながらクリックすると、本来のリンク先が別窓で表示されます。

1. マウスホイールを前後に動かすことで画像が切り替わります。
2. ウィンドウを普通にクリックすると、ウィンドウは隠れて、表示されていた画像の元リンク付近へ移動します。
3. ウィンドウを[Ctrl]キーを押しながらクリックすると、ウィンドウは隠れて、ページ先頭へ移動します。
4. ウィンドウを[Alt]キーを押しながらクリックすると、ウィンドウが隠れるだけで移動(スクロール)はしません。
5. ウィンドウを[Shift]キーを押しながらクリックすると、その画像が別窓で表示されます。
   このとき、ウィンドウは隠れません。
   
6. 【2007/05/01追記】
   マウスカーソルを一度ウィンドウの外に出した後、[Ctrl]キーを押しながら再度ウィンドウ内に入れると、画像がオリジナルサイズで表示されるようになります。
   もう一度同じ操作を行うことで、縮小サイズに戻ります。
   
7. 【2007/06/23追記】
   [+GIF+HTML]のついたブックマークレットを使った場合、マウスカーソルを一度ウィンドウの外に出した後、[Shift]キーを押しながら再度ウィンドウ内に入れると、リンク先HTML内の最初の一画像以外も続けて表示できるようになります。
   もう一度同じ操作を行うことで、最初の一画像のみの表示に戻ります。
   

■制限について
以下のような制限があります。ご了承の上でご使用願います。

1. 当然ながら、スクリプト(JavaScript)が有効な環境でないと動作しません。
2. 確認したブラウザはSleipnir2.5.12(IEエンジン)、IE6 SP2、Firefox 2.0.0.3、Opera 9.10(全て WinXP SP2上)のみです。それ以外のブラウザでは動作確認していません(し、動作しない可能性が高いです)。
   また、上記ブラウザであっても動作保証は一切ありません。自己責任でお使いください。
3. IE6 SP2では、実行直後に表示されるウィンドウ上では、なぜかマウスホイールが効きません(同じエンジンを使っているはずのSleipnirではOKなんですけれど……)。
   お手数ですが、一旦ウィンドウをクリックして隠し、再度画像リンクをクリックして下さい(これ以降は効きます)。
   なお、ブックマークレットのURLのvar cocoPictPop1st=trueのtrueをfalseに変えておけば、ウィンドウを隠す手順が省略できます。
4. ウィンドウの大きさは最大800×600です。これより縦又は横幅が大きな画像は縮小されます。
   【2007/05/01】元サイズで表示することも出来るようになりました(上記参照)。
5. 画像はJPEG・PNG形式(拡張子*.jpg、*.jpeg、*.png)で、ページ上から直リンクされたもの又はページ上でimg要素として直接表示されているもの(リンクはされていないもの)が対象です
   後者はリンクに変換されます。なお、この条件にあてはまっていても正常に表示されない場合もあります。
6. ウィンドウ内での前後画像への移動はマウスホイールでしか出来ません。
7. フレームを使ったページには対応していません。
   →【2007.06.02】フレーム分解用ブックマークレットを試作してみました。

ビデオ共有βを試してみる

4/17より開始された『＠niftyビデオ共有』を試してみようと、いくつか手持ちの動画をアップロードしてみました。

海中遊エイ カワウソその1 カワウソその2 ラッコその1 ラッコその2 淡水魚その1 淡水魚その2 リスザル ショウジョウトキ ぺんぎん。 回游

例によってこのサイトだと提供されたタグをそのまま貼り付けてもうまく表示できなかったのでいじってます。

ざっと使ってみて、気付いた点など。

1. 動画アップロード自体はお手軽に出来る。動画ファイルを指定して、タイトル・コメント・タグ(キーワード)を入れるだけ。
2. アップロードの途中でエラーメッセージが出て失敗する場合があった(12回中1回)。
3. アップロード完了後にFlashへの変換を行っているようで、一覧に反映されるまでタイムラグが有る。
4. Flash変換の質はあまりよくない気がする(映像粗い割に、重いので、再生でひっかかる)。
5. プロフィール画像が何故か形式が違うと言われてアップロード出来ない(JPEGだし・サイズも守っているはず)。
6. 動画は、＠niftyビデオ共有のページからココログへ記事の形で投稿することが可能。ただし、この機能を使うと1動画／1ファイルになるし、タイトルと本文しか書けないので(投稿後の編集はもちろん普通にできる)、記事投稿画面はココログの管理画面から別に開いて、動画のHTMLタグをコピペする方がよいかも。
7. 動画のHTMLタグはJavaScript使用が前提。

まだちょっと不満が多いかな……βが付いていることだし、今後の改善に期待。

ココログ携帯のアクセス解析

私はそもそもWebが見られるような携帯電話等所持していないのでよくわかりませんが、どうも、ココログが先日携帯に対応したのに伴って、携帯からのアクセスが、アクセス解析の結果に反映されなくなったらしいですね。

ただ(PCからですが)携帯用のページを見てみると、アクセス解析用のタグは埋めこまれているので、解析データそのものは取得しているのではないかと推測しています。
待っていれば、そのうち、携帯からのアクセス解析結果も見ることが出来るようになるのではないでしょうか(もちろん、保証の限りではありませんが)。

ちなみに、例えばこのブログの一つ前の記事(記事ID：18032746)の場合、アクセス解析用のタグは、
【PC用】

<img src="http://ax2.a.tea-nifty.com/ax.gif?furyu&amp;b183557&amp;18032746" width="1" height="1" alt="" />

【携帯用】

<img src="http://ax2.a.tea-nifty.com/ax.gif?furyu&amp;m183557&amp;18032746" width="1" height="1" alt="" />

ブログIDを指定する引数が“b183557”と“m183557”と、bかmかの違いがあるだけですね。

唐突

朝目が覚めたとき、なぜか頭に『高見沢みちる』という単語が浮かんで困惑する。

悩んでてもしかたないので検索をかけると……そっか、TV版『ねらわれた学園』だったか。

それにしても、確かこれで原田知世にはまったはずなのに、どんな話だったかまるっきり覚えていない(苦笑)。

原作も読んだはずなのだが。

かすかに記憶に残っているのは、原田さん演ずる和美(役名も忘れてた)が、机から落ちた鉛筆を空中で留めてそっと拾い上げるシーンと、奇抜な(笑)格好をした本田恭章(そういや、そもそも当時姉が彼にはまっていた影響で見はじめたんだ、このドラマ)が独特の調子で『高見沢みちる』と呼びかけるシーンだけ。

今見たら、原田さんよりも高見沢みちること伊藤かずえさんに傾きそうな予感。

なにか設定がおかしい？＜ココログのコメント＆トラックバック

ここ数ヶ月で、何回か発生しているのが、

1. 保留設定にしていないにも関らず、トラックバックが保留されてしまう。
2. コメント通知が届かない。

という現象。
2.の方、4/15についたコメントのうちの一件で発生したのですが、これが狙ったかのようにSPAMコメント。
おかげでしばらく気がつかず、非表示にするのが遅れてしまいました。

実はSPAMと判断したのでコメント通知は出なかったが、ミスでコメントとしては登録されてしまった、とか？

相変わらず、記事投稿から反映されるまでの時間は長いし、思わぬところで(ファイルマネージャでフォルダを辿っているときとか)突然ログイン画面に戻ったりとか、システムの安定感という意味でもいまいちですね。

【ココログ】サイドバー設置用ブログ検索フォーム(アット・サーチ、ココニール)

『ココログからのお知らせ』の検索ボックスですが、Googleで「ココログからのお知らせ 検索」といったキーワードで検索をかけてみると、

• 検索が出来るようになって便利になった。
• サイドバーの『ココログからのお知らせ』は表示しないようにしているので、使えなくて残念。

といった意見もちらほらと見受けられます。

へぇーと思ったので、それではと、単独で設置できるフォームのサンプルなど。
下記のコードを、サイドバーのメモリストなどに貼り付けます。

<script type="text/javascript">
var ccSiteStr = " site:" + document.getElementsByTagName('h1')[0].getElementsByTagName('a')[0].href;
function    ccSearchSubmit() {
    document.ccSearch.text.value = document.ccSearch.text.value.replace(ccSiteStr,"");
    if ( document.ccSearch.select.value == "site" ) document.ccSearch.text.value += ccSiteStr;
    return true;
}   //  end of cocoSubmit()
</script>
<form name="ccSearch" onsubmit="javascript:return ccSearchSubmit()" action="http://search.nifty.com/cgi-bin/search.cgi" method="get">
    <input type="hidden" name="cflg" value="検索">
    <input type="hidden" name="ss" value="cocowin">
    <select name="select">
        <option value="site" selected>このブログ内で検索</option>
        <option value="62">ブログ全体を検索</option>
        <option value="2">ウェブ全体から探す</option>
    </select><br />
    <input type="text" name="text" id="CCSEARCHBOX" style="width:100px; color:#808080" onblur="javascript:if(this.value.match(ccSiteStr))this.value=this.value.replace(ccSiteStr,'');if(this.value=='')this.value='キーワードを入力';this.style.color='#808080';" onfocus="javascript:if(this.value.match(ccSiteStr))this.value=this.value.replace(ccSiteStr,'');if(this.value=='キーワードを入力')this.value='';this.style.color='#000000';" maxlength="255" size="16" value="キーワードを入力"> 
    <input type="submit" name="submit" value="検索">
    <div style="font-size:12px">powered by <a href="http://www.nifty.com/search/" target="_blank">@search</a></div>
</form>

すると、下記のような感じの検索フォームが表示されるようになります。

このブログ内で検索 ブログ全体を検索 ウェブ全体から探す
 

powered by @search

ちなみにJavaScriptが有効になっていないと動作しません。

ついでに、拙作『ココニール』検索フォームも。

<script type="text/javascript">
function    ccnGetUrl() {
    document.cocoNiiruSearch.url.value = document.getElementsByTagName('h1')[0].getElementsByTagName('a')[0].href;
    return true;
}   //  end of cocoSubmit()
</script>
<form name="cocoNiiruSearch" onsubmit="javascript:return ccnGetUrl()" action="http://furyu-tei.sakura.ne.jp/cgi-bin/cocoNiiru.cgi">
    <input type="hidden" name="url" value="" />
    <input type="text" name="query" style="width:100px;color:#808080" onblur="javascript:if(this.value=='')this.value='キーワードを入力';this.style.color='#808080';" onfocus="javascript:if(this.value=='キーワードを入力')this.value='';this.style.color='#000000';" maxlength="255" size="16" value="キーワードを入力" /> 
    <input type="submit" name="submit" value="検索" />
    <div style="font-size:12px">powered by <a href="http://furyu-tei.sakura.ne.jp/cgi-bin/cocoNiiru.cgi" target="_blank">ココニール</a></div>
</form>

こちらは、下記のような感じの検索フォームになります。

 

powered by ココニール

こちらをJavaScript無効の環境でも動かしたい場合は、

    <input type="hidden" name="url" value="" />

のvalue=""を、value="http://(自分のココログサイトトップ)/(ブログ名)/ "に変更します。

後は、やっぱりはずせない真打『ココログ最強検索』。
最近、ブログパーツ(ココログのWidgets)対応になったため、誰でもお手軽に設置できます。おすすめです。

【ココログ】カテゴリー毎の最新記事をサイドバーでツリー表示

【ココログ】カテゴリ別最新記事一覧の参照方法
を応用して、サイドバーのカテゴリー欄に、カテゴリー毎の最新記事がツリー表示されるようなスクリプトを作成してみました。

【ココログ】カテゴリー欄に最近の記事をツリー表示するスクリプトと同じようなものですが、今回のものは、

• トップページ以外の記事も対象となる。
• 日付をベースにした"new"表示が可能。

という違いがあります。

設置方法ですが、

1. 個別ページにカテゴリ内の最近の記事が表示されていない場合、FAQ：固定リンクに同一カテゴリーの記事が表示されないんだけど？をよく読んで、表示される設定に変更する。
2. 管理画面の『記事の作成 > 新規投稿』画面にて、以下のブックマークレットを実行する。
   
   カテゴリリスト作成
   ブックマークレットの登録方法等はこちら→【Web】ブックマークレットのブラウザ毎の登録方法
3. サイドバーのカテゴリーよりも後方のHTMLが設置できる箇所(メモタイプのマイリスト等)に、
   <script type="text/javascript" src="https://furyu.tea-nifty.com/script/cocoCatTreeR.js"></script>
   <script type="text/javascript">
   <!--
   cocoCatTree.reverse = false ; // 並び順を逆にしたいときは true
   cocoCatTree.showNum = 2 ; // 同一カテゴリー内の表示数(最大5)
   cocoCatTree.newDay = 3 ; // class="new"が付く日数(0は無効)
   cocoCatTree.showDate = false ; // 日付表示を行う場合は true
   cocoCatTree.init() ;
   //-->
   </script>
   
   を貼り付ける。

ツリー表示をするには、カスタムCSSに、

ul ul.tree {
  list-style: none;
  margin: 0px;
  padding: 0px;
}
ul ul.tree li {
  margin: 0px;
  padding: 0px 0px 0px 16px;
  font-size: 100%;
  background-image: url(https://furyu.tea-nifty.com/script/29.gif);
  background-repeat: no-repeat;
}
ul ul.tree li.end {
  background-image: url(https://furyu.tea-nifty.com/script/30.gif);
}

のような記述を行います。

takkyunさんのサイト『ふろむにぅじぃ』にアップされている『コメントリストツリー化 for ココログ & ブログ人』と共通で使えます。
既に設置されている方はCSSの方は必要有りません。

"NEW"マーク(画像)を付けたい場合には、次のようにします。

KOROPPYの本棚さんの、最近のコメント&トラックバックにアイコンを追加を参考にさせていただきました。

#archive-category .tree .new { /* カテゴリー中最新記事 */
  list-style: none inside url(表示したい画像のURL);
}

このサイトでは、
アイコン｜0円のWEB素材屋さん/ホームページ作成 素材/無料イラスト/アイコン
で配布されていたものを使用させていただいております。

【注意】
拙作【ココログ】アーカイブページに目次とページングを付加するJavaScriptと併用する場合で、そちらの設定が

cocoPView.modifySidebar = true; // サイドバーのバックナンバー／カテゴリーを置換する
cocoPView.usePullDownMenu = false ; // バックナンバー／カテゴリーをプルダウンメニューにする

となっているときは、上記の

cocoCatTree.init() ;

を削除(または頭に//をつけてコメントアウト)し、代わりに、目次の方の設置用HTMLで、

cocoPView.init_onload() ;

もしくは

cocoPView.getArchivesRequest() ;
cocoPView.makePages() ;

となっている箇所の前に

cocoPView.onCompleteSidebar = function(){cocoCatTree.init();} ;

という一行を追加(挿入)して下さい。

---

【ココログ】カテゴリ別最新記事一覧の参照方法

【ココログ】これはいいかも……＜記事の下部に同じカテゴリーの記事タイトルで紹介した機能を有効にしたとき、個別記事に表示されるカテゴリー毎の最新記事リストですが、これは、

http://[サイトトップ]/[ブログ名]/include/cat[カテゴリID].inc

というファイルの内容を読み込んでいるようです。
例えば、このブログの『ウェブログ・ココログ関連』というカテゴリーの場合、
https://furyu.tea-nifty.com/annex/include/cat5251770.inc
になります。

ですので、ブログ内の適当なところ(記事中等)に、

<!--#include virtual="/[ブログ名]/include/cat[カテゴリID].inc"-->

のようなものを貼り付けておくと、SSIにより"cat[カテゴリID].inc"の内容が展開されて、最新記事を表示することが出来ます。
【例】<!--#include virtual="/annex/include/cat5251770.inc"-->

「ウェブログ・ココログ関連」カテゴリの記事

• ココログをTwitterカードに対応させてみる(2016.11.23)
• 【覚書】風柳亭（ココログプロ）をレスポンシブWebデザイン化（Bootstrap3使用)(2015.10.09)
• ココログ用全文検索 - ココログ最強検索を jQuery を使って作り直してみた（既知の不具合の幾つかに対応）(2015.09.01)
• 【お知らせ】このブログ提供のスクリプトの大半はココログオリジナルテーマに未対応です(2010.06.20)
• ココログカレンダーPlus(2008.01.21)

カテゴリIDとカテゴリ名の対応は、例えば管理画面の『 記事の作成 > 新規投稿 』画面を開いて、ページのソースコードを表示し（IE6の場合は右クリック→ソースの表示(V)）、「select class="category"」で検索、その下の方にある

<option value="[カテゴリID]">[カテゴリ名]</option>

を調べればわかります。

【ココログ】これはいいかも……＜記事の下部に同じカテゴリーの記事タイトル

これはなかなかいい機能かも知れません。
記事下部に同じカテゴリの記事タイトルが表示可能に

4/10より、固定リンクページの記事の下部に、同じカテゴリーの記事タイトルが最新５件分表示されるようになりました。

すぐに反映されなかったりといくつか注意点があるみたいですが。注意点等はこちら↓。
FAQ：固定リンクに同一カテゴリーの記事が表示されないんだけど？

プロコースの場合、MTタグの貼り付けが必要。

【ココログ】『ココログからのお知らせ』の検索ボックスを隠すスクリプト

3/26より、サイドバーの「ココログからのお知らせ」に検索ボックスが追加されていますが、

• すでに自前で検索フォームを設置しており、重複する。
• ヒット率が悪い。
• 検索結果ページの広告が煩わしい。

といった理由で無用の長物だと感じている方もおられるかと思います。

というか、私自身がそう感じたので(苦笑)、これを隠すスクリプトを作成してみました(笑)。
設置方法は、サイドバーのメモリスト等、HTMLを記述可能なところに、

<script type="text/javascript" src="https://furyu.tea-nifty.com/script/cocoModSearch.js"></script>

のようなものを貼り付けます。

上記だけだと芸がないので、おまけとして拙作『ココニール』用検索窓に置換するオプションもつけてみました。
この場合は、以下のようなものを貼り付けます。

<script type="text/javascript">
var cocoModSearch='cocoNiiru';
</script>
<script type="text/javascript" src="https://furyu.tea-nifty.com/script/cocoModSearch.js"></script>

なお、ココログフリーの場合には、利用規約の、

（17）blog上にニフティ所定のテキスト広告が表示された場合、当該広告を改変又は削除する行為。

にご注意の上、設置する場合には自己責任にてお願いします。

私的には、検索ボックスはテキスト広告には該当しないものという認識ですが、自信はありません。

突っ込み忘れ

そういえば、いつから新聞部にご在籍に？＞蔦子さん、笙子ちゃん。

P.29・183……いや、確かに、新聞部の腕章をしている蔦子さんという描写もかつて存在しましたが。