2011年12月31日土曜日

今年最も読まれた記事は、携帯電話の基地局地図「OpenSignalMaps」

今年最もアクセスの多かった記事は、携帯電話の基地局を地図上に表示してくれる「OpenSignalMaps」の紹介記事でした。やっぱり携帯電話関連のネタは強いですね。

このブログをフォローしてくれるコアな読者の皆様、今年一年間ありがとうございました。また来年も、マイペースで続けたいと思います。変わらぬご愛顧、どうぞよろしくお願いいたします。

それでは、良いお年を!

2011年12月30日金曜日

ブロガー(blogger)でショッピングサイトを運営するためのデザイン考

まずは第一印象ということで、ブロガー(blogger)でショッピングサイトを運営するためのデザインを調べてみました。下記の2つはいづれもサンプルテンプレートで、一目でショッピングサイトとわかる優れたデザインです。ここを目指していこうと思います。自由にできるサーバー環境であれば、それほど苦になるレイアウトではないと思われるのですが、これをブロガー上で実現するとなると、険しい道のりになりそうです。




2011年12月29日木曜日

ブロガー(blogger)で本格的なショッピングサイト運営への挑戦

ブロガー(blogger)で本格的なショッピングサイト運営へ挑戦すべく実証サイトを立ち上げてみました。いつまで続くのかわかりません。完全な思いつきです。もう一つ、空虚なブログを立ち上げてしまいました。Googleには、寛容な心で見守っていただきたいです。複数のブログを立ち上げてしまいましたが、大丈夫かな?

まだ中身は何もありません。亀の歩みでショッピングサイトらしくカスタマイズしていけたらと思います。

ブロガー・コマース

2011年12月28日水曜日

ブロガー(blogger)でショッピングカートのテスト

ブロガー(blogger)でショッピングカートのテストです。ちょっと不安定ですが、注文は受け取れます。中身は、先日からテストしている一連の記事をちょっとずつ変更してきたものです。後日、体裁を整えて詳しくまとめようと思います。

もも メロン いちご みかん りんご


ご注文内容


連絡事項


2011年12月27日火曜日

ブロガー(blogger)でクッキー(cookie)操作、その5

ブロガー(blogger)でクッキー(cookie)操作、その5です。 ページを分けて商品情報が保持できているかテストしてみます。

もも
メロン
いちご
みかん
りんご

一覧はこちら

問題なく動いてくれているかな。

2011年12月26日月曜日

ブロガー(blogger)でクッキー(cookie)操作 その4

ブロガー(blogger)でクッキー(cookie)操作、その4です。 先日のサンプルを変更し、選択した果物の数だけを右下の別ウィンドウに表示するようにしてみました。それっぽくなって来ました。嬉しい。

サイズ   S    M    L

数  




ソースはこちら。
var sSaizudake = 'saizudake';
var sKazumo = 'kazumofukumu';
var sPath = '/';
var sDomain = 'programmer-jobs.blogspot.com';
var date = new Date();
date.setTime(date.getTime() + ( 86400 * 7 ));

$(function() {
   $("#fruitcart .button").click(function() {
      var sItem = $(this).attr("title") ;
      var kazu = $("#kazu").val();
      var ookisa = $("input[name=ookisa]:checked").val();
      var sInfo1 = sItem + ";" + ookisa + ":" + kazu + "|" ;
      var sInfo2 = sItem + ";" + ookisa + ":" ;
      addshopcart(sInfo1,sInfo2) ;
      shopcart() ;
   });

   $("#emptycart").click(function() {
      delshopcart() ;
      shopcart() ;
   });

   shopcart() ;
});

function shopcart()
{
   if ( !jQuery.isArray($.cookie(sSaizudake)) ) 
   {
      if ( jQuery.trim($.cookie(sSaizudake)) != "" && $.cookie(sSaizudake) != undefined && $.cookie(sSaizudake) != null )
      {
         arrSaizu = $.cookie(sSaizudake).split(',');
         arrKazu = $.cookie(sKazumo).split(',');
      }
   }
   if ( jQuery.trim($.cookie(sKazumo)) != "" && jQuery.trim($.cookie(sKazumo)) != undefined && jQuery.trim($.cookie(sKazumo)) != null )
   {
      var sHTML = $.cookie(sKazumo) ;
      $.each( arrKazu, function(i, val) {
         sHTML = sHTML.replace(",", ""); 
         sHTML = sHTML.replace(";", "の"); 
         sHTML = sHTML.replace(":", "サイズを"); 
         sHTML = sHTML.replace("|", "個
"); }); $("#itemsincart").html(sHTML) ; var sKazudake = ""; sKazudake = ( arrKazu.length - 1 ) + "個の商品を選択 <a href='#'>お会計</a><br />"; $("#insidecart").html(sKazudake) ; } else { $("#itemsincart").html("") ; $("#insidecart").html("") ; } } function addshopcart(sInfo, sName) { var arrSaizu = []; var arrKazu = []; if ( !jQuery.isArray($.cookie(sSaizudake)) ) { if ( $.cookie(sSaizudake) != undefined && $.cookie(sSaizudake) != null ) { arrSaizu = $.cookie(sSaizudake).split(','); arrKazu = $.cookie(sKazumo).split(','); } } if ( jQuery.inArray(sName, arrSaizu) >= 0 ) { var removepos; $.each( arrSaizu, function(i, val) { if( val == sName ) { removepos = i; } }); arrSaizu.splice(removepos,1); arrKazu.splice(removepos,1); } else { arrSaizu.push(sName); arrKazu.push(sInfo); } $.cookie(sSaizudake, arrSaizu, { path: sPath, domain: sDomain, expires: date }); $.cookie(sKazumo, arrKazu, { path: sPath, domain: sDomain, expires: date }); } function delshopcart() { var arrSaizu = []; var arrKazu = []; $.cookie(sSaizudake, arrSaizu, { path: sPath, domain: sDomain, expires: date }); $.cookie(sKazumo, arrKazu, { path: sPath, domain: sDomain, expires: date }); }

2011年12月25日日曜日

指紋認証ならぬ、尻紋認証?

指紋認証ならぬ、尻紋認証?(Anti-Theft Car Seat Identifies Driver With 360 Sensors)  自動車盗難対策として、あらかじめ登録された尻のかたち(尻紋?)をもつドライバーしか運転できないようにする技術が開発されているとのこと。運転座席に取り付けられた360のセンサーが、ドライバーの体重と座った時のおしりのかたちの3次元分布を記憶することにより、人物を特定するそうです。何と認識率98%。十分実用に耐えられるのではないでしょうか。

2011年12月24日土曜日

ブロガー(blogger)のヘッダー部分をカスタマイズ

ブロガー(blogger)のヘッダー部分をカスタマイズしてみました。ページ要素の「locked」属性を変更すればいいようです。ブロガーのヘルプに次のような説明があります。
locked - (オプション)'yes' か 'no' のいずれかを指定します。デフォルトは 'no' です。ロックされたウィジェットを [ページ要素] タブから移動、削除することはできません。
「yes」「no」で説明されていますが、実際は、「true」「false」で設定を変更することになります。管理画面「テンプレート」→「HTML編集」の画面を開き、ロックされている部分を解除します。その後は、ヘッダーに限らず、ページ要素の移動や削除が自由に行えるようになります。

<b:widget id='〇〇' locked='true' >
↓↓↓
<b:widget id='〇〇' locked='false' >


ヘッダー部分のムダなスペースが省けて、すっきりしました。

参考サイト、初めてのBlogger

2011年12月23日金曜日

ブロガー(blogger)でクッキー(cookie)操作 その3

ブロガー(blogger)でクッキー(cookie)操作、その3です。 先日のサンプルを変更し、選択した果物を右下の別ウィンドウに表示するようにしてみました。う~ん、問題多し。とりあえず、力尽きて今日はここまで。

サイズ   S    M    L

数  




ソースはこちらです。
var sSaizudake = 'saizudake';
var sKazumo = 'kazumofukumu';
var sPath = '/';
var sDomain = 'programmer-jobs.blogspot.com';
var date = new Date();
date.setTime(date.getTime() + ( 86400 * 7 ));

$(function() {
   $("#fruitcart .button").click(function() {
      var sItem = $(this).attr("title") ;
      var kazu = $("#kazu").val();
      var ookisa = $("input[name=ookisa]:checked").val();
      var sInfo1 = sItem + ";" + ookisa + ":" + kazu + "|" ;
      var sInfo2 = sItem + ";" + ookisa + ":" ;
      addshopcart(sInfo1,sInfo2) ;
      shopcart() ;
   });

   $("#emptycart").click(function() {
      delshopcart() ;
      shopcart() ;
   });

   shopcart() ;
});

function shopcart()
{
   if ( jQuery.trim($.cookie(sSaizudake)) != "" && !jQuery.isArray($.cookie(sSaizudake)) ) 
   {
      if ( $.cookie(sSaizudake) != null )
      {
         arrSaizu = $.cookie(sSaizudake).split(',');
         arrKazu = $.cookie(sKazumo).split(',');
      }
   }
   if ( jQuery.trim($.cookie(sKazumo)) != "" )
   {
      sHTML = $.cookie(sKazumo) ;
      $.each( arrKazu, function(i, val) {
         sHTML = sHTML.replace(",", ""); 
         sHTML = sHTML.replace(";", "の"); 
         sHTML = sHTML.replace(":", "サイズを"); 
         sHTML = sHTML.replace("|", "個
"); }); $("#insidecart").html(sHTML) ; } else { $("#insidecart").html("") ; } } function addshopcart(sInfo, sName) { var arrSaizu = []; var arrKazu = []; if ( !jQuery.isArray($.cookie(sSaizudake)) ) { if ( $.cookie(sSaizudake) != null ) { arrSaizu = $.cookie(sSaizudake).split(','); arrKazu = $.cookie(sKazumo).split(','); } } if ( jQuery.inArray(sName, arrSaizu) >= 0 ) { var removepos; $.each( arrSaizu, function(i, val) { if( val == sName ) { removepos = i; } }); arrSaizu.splice(removepos,1); arrKazu.splice(removepos,1); } else { arrSaizu.push(sName); arrKazu.push(sInfo); } $.cookie(sSaizudake, arrSaizu, { path: sPath, domain: sDomain, expires: date }); $.cookie(sKazumo, arrKazu, { path: sPath, domain: sDomain, expires: date }); } function delshopcart() { var arrSaizu = []; var arrKazu = []; $.cookie(sSaizudake, arrSaizu, { path: sPath, domain: sDomain, expires: date }); $.cookie(sKazumo, arrKazu, { path: sPath, domain: sDomain, expires: date }); }

2011年12月22日木曜日

Operaが「ユーザーJavaScript」のコンテストを開催中

Operaが「ユーザーJavaScript」のコンテストを開催中です。不覚にも、ユーザーJavaScriptについて、初めて知りました。サーバー側で用意するものではなく、ユーザー側で準備して、ブラウザを便利に利用しようというものらしいです。要するに、ブラウザで動作する簡易的なクライアントソフトのコンテスト(?)という認識で良いのではないでしょうか。Operaモバイルは、奥が深い。

2011年12月21日水曜日

Google Earth上にGoogle Analyticsのデータを載せてマッシュアップしている「ShufflePoint」がスゴイ。

Google Earth上にGoogle Analyticsのデータを載せてマッシュアップしている「ShufflePoint」がスゴイ。言葉で説明してもわかりにくいので、とにかく、YouTubeのビデオを見てもらうのが早いです。時系列にアクセスの様子をGoogle Earth上に描き出しています。キャンペーンの様子をサンプルデータとしてとりあげていますが、情報の拡散や反響の様子が手に取るようにわかります。未来のGoogle Analyticsプロトタイプといったところでしょうか?!



2011年12月20日火曜日

jQueryプラグインの「Keep-in-View」をブロガー(blogger)に設置

MOONGIFTで紹介されていた、jQueryプラグインの「Keep-in-View」をブロガー(blogger)に設置してみました。いい具合で見えるところに張り付いてくれています。組み込みも簡単。

ソースはこちら。
$(function() {
   $("#(ウィジェットID)").each(function(){
      $(this).keepInView();
   });
});
ウィジェットID」については、こちらを参考に設定してみてください。

keepinview.js 自体の設置は次のとおり。 管理画面の「テンプレート」メニューから、「HTMLの編集」画面で、設定を変更します。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
----- ここに埋め込む -----
</head>

<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>

</head> タグ(閉じる)の直前に jQuery を埋め込みます。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
  <script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
  <script language='javascript' src='http://(あなたのサーバー)/keepinview.js' type='text/javascript'></script>
</head>

わかりにくいですが、ここで言う「(あなたのサーバ-)」は、ブロガーのURLではなく、ご自身で管理する他のサーバーが必要です。自前のサーバーを用意できない方は、Keep-in-Viewのソースを丸ごと貼り付けて設置することも可能です。サンプルはこち

ブロガー(blogger)にJavaScriptを設置するには


↓ スクロールしても、見える位置に表示されています。

2011年12月19日月曜日

ブロガー(blogger)でクッキー(cookie)操作 その2

ブロガー(blogger)でクッキー(cookie)操作、その2です。先日のサンプルに、サイズと数の選択肢を追加してみました。なんという自己満足。でも、やると決めたから、最後まで頑張ります。

サイズ   S    M    L

数  






ソースはこちら。
$(function(){
    var sCookie = 'fruitcookie';
    var sInfo = 'fruitinfo';
    var sPath = '/';
    var sDomain = 'programmer-jobs.blogspot.com';
    var date = new Date();
    date.setTime(date.getTime() + ( 86400 * 7 ));
    var arr = [];
    var aif = [];
    $(".button").click(function() {
        var kazu = $("#kazu").val();
        var ookisa = $("input[name=ookisa]:checked").val();
        var pos = $(this).attr("title") ;
        var info = $(this).attr("title") + ";" + ookisa + ":" + kazu + "|" ;
        if ( jQuery.inArray(pos, arr) >= 0 ) 
        {
            var removepos;
            $.each( arr, function(i, val) {
               if( val == pos ) {
                  removepos = i;
               }
            });
            arr.splice(removepos,1);
            aif.splice(removepos,1);
        } else {
            arr.push(pos);
            aif.push(info);
        }
        $.cookie(sCookie, arr, { path: sPath, domain: sDomain, expires: date });
        $.cookie(sInfo, aif, { path: sPath, domain: sDomain, expires: date });
        sHTML = $.cookie(sInfo) ; 
        $.each( arr, function(i, val) {
            sHTML = sHTML.replace(",", ""); 
            sHTML = sHTML.replace(";", "の"); 
            sHTML = sHTML.replace(":", "サイズを"); 
            sHTML = sHTML.replace("|", "個
"); }); $("#cookiepresent").html(sHTML) ; }); $("#nofruit").click(function() { arr = [""]; aif = [""]; $.cookie(sCookie, arr, { path: sPath, domain: sDomain, expires: -1 }); $.cookie(sInfo, aif, { path: sPath, domain: sDomain, expires: -1 }); $("#cookiepresent").html($.cookie(sInfo)) ; }); });

2011年12月18日日曜日

ブロガー(blogger)のウィジェット(Widget)には、必ず「id」が付いている!

ブロガー(blogger)のウィジェット(Widget)には、必ず「id」が付いている! これさえ理解できれば、bloggerのカスタマイズは、半分、出来上がったようなものです。ちなみに、私も最近知りました(笑)。ウィジェットは、ページ要素となる一つ一つのウィンドウのことです。

bloggerの管理画面、テンプレートのHTML編集画面を覗いてみると、下記のような指定があります。


画面を一番下までスクロールしてみてください。

<b:section-contents id='sidebar-right-1'>
<b:widget id='Text1' locked='false' title='このブログについて' type='Text'/>
<b:widget id='AdSense2' locked='false' title='' type='AdSense'/>
<b:widget id='HTML7' locked='false' title='ブログの検索' type='HTML'/>
<b:widget id='Label1' locked='false' title='ラベル' type='Label'/>
<b:widget id='Feed1' locked='false' title='プログラマーズ' type='Feed'/>
<b:widget id='BlogArchive1' locked='false' title='ブログ アーカイブ' type='BlogArchive'/>
</b:section-contents>
<b:section-contents id='footer-1'/>
</html>
それぞれ、ページ要素の単位となっているウィジェットには、「id」が付いています。上記の例で言うと、Text1、AdSense2、HTML7、Label1、Feed1、BlogArchive1などが、それにあたります。例えば、特定のウィジェットだけデザインを変えたい場合、次のようなCSSを追加すればいいわけです。

#Text1 {
    color: white;
    background-color: black;
}
#AdSense2 {
    color: white;
    background-color: blue;
}
#HTML7 {
    color: white;
    background-color: green;
}
#Label1 {
    color: white;
    background-color: red;
}
#Feed1 {
    color: white;
    background-color: purple;
}
#BlogArchive1 {
    color: white;
    background-color: brown;
}
これで、bloggerのカスタマイズは思いのままです!

2011年12月17日土曜日

ブロガー(blogger)にjQueryカルーセルの「CarouFredSel」を設定

ブロガー(blogger)にjQueryカルーセルの「CarouFredSel」を設定してみました。組み込みはオプションを付けなくても、全て自動でこなしてくれて楽です。画像でなくても、リスト要素に収まれば、なんでもメリーゴーランド状態となります。今回はシンプルに文字で試してみました。スピードを調節できると、もっと良いかな? あと、横幅は全て均一のものでないと、デザインが崩れてしまうような気がします。

さて、IEで確認すると、また動作していない(涙)。何が悪いんだろう? IEを利用されている方、ごめんなさい。本家ではIEでも問題なく動作していますので、完全に設定している自分に原因があります。

例1 オプション無し

例2 動作指定のオプションあり

例3 ユーザー入力のオプションあり

Javascript部分のソースはこちら。
<script type="text/javascript" language="javascript">
<!--
$(function() {
   $('#foo0').carouFredSel();
   $('#foo1').carouFredSel({
      padding: '[10, 20, 30, 40]',
      direction: 'right',
      width: '400',
      auto: 'delay',
   });
   $('#foo2').carouFredSel({
      prev: '#prev2',
      next: '#next2',
      pagination: "#pager2",
      auto: false
   });
   $(window).resize();
});
//-->
</script>
HTML部分
<div class="list_carousel">
<ul id="foo0">
   <li>りんご</li>
   <li>みかん</li>
   <li>いちご</li>
   <li>メロン</li>
   <li>もも</li>
   <li>くり</li>
   <li>なし</li>
   <li>かき</li>
   <li>マンゴー</li>
   <li>ぶどう</li>
</ul>
<div class="clearfix"></div>
</div>

2011年12月16日金曜日

ブロガー(blogger)にjquery.cookie.jsを追加

ブロガー(blogger)にjquery.cookie.jsを追加してみました。果物の名前をクリックすると、クッキーに書きこまれます。同じ名前を再びクリックすると削除されます。






ソースはこちら。
$(function(){
    var sCookie = 'fruitcookie';
    var sPath = '/';
    var sDomain = 'programmer-jobs.blogspot.com';
    var date = new Date();
    date.setTime(date.getTime() + ( 86400 * 7 ));
    var arr = [];

    $(".button").click(function() {
        var pos = $(this).attr("title");
        if ( jQuery.inArray(pos, arr) >= 0 ) 
        {
            var removepos;
            $.each( arr, function(i, val) {
               if( val == pos ) {
                  removepos = i;
               }
            });
            arr.splice(removepos,1);
        } else {
            arr.push(pos);
        }
        $.cookie(sCookie, arr, { path: sPath, domain: sDomain, expires: date });
    });
    $("#nofruit").click(function() {
        arr = [""];
        $.cookie(sCookie, arr, { path: sPath, domain: sDomain, expires: -1 });
    });
});

jquery.cookie.js 自体の設置は次のとおり。 管理画面の「テンプレート」メニューから、「HTMLの編集」画面で、設定を変更します。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
----- ここに埋め込む -----
</head>

<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>

</head> タグ(閉じる)の直前に jQuery を埋め込みます。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
  <script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
  <script language='javascript' src='http://(あなたのサーバー)/jquery.cookie.js' type='text/javascript'></script>
</head>

2011年12月15日木曜日

2011年、最も信頼のおけるブログサービスは?

「2011年、最も信頼のおけるブログサービスは?(The most reliable (and unreliable) blogging services of 2011)」という記事を見つけました。Bloggerの安定ぶりが目立ちます。1月1日から11月末までで、ダウンタイムが、わずかに数分です。盤石の安定感を誇っています。続いて、WordPressとTypepadの健闘が光ります。恥ずかしながら、Posterousは、はじめて知りました(笑)。メールでブログを更新できるサービスだそうです。後で試してみようと思います。

こうした記事を読むと、改めて、Bloggerの素晴らしさを実感します。これからも、感謝しながら利用させてもらいます。

2011年12月14日水曜日

リンクに自動的に「target="_blank"」を追加してくれるjQuery

リンクに自動的に「target="_blank"」を追加してくれるjQueryなんてのがあるんですね。簡潔で美しいソースです。賢いところは、「http」の付いた外部リンクにのみ設定されるところです。素晴らしい。早速、このブログにも組み込みました。

$(function() {
   $('a[href^=http]').click( function() {
      window.open(this.href);
      return false;
   });
});

2011年12月13日火曜日

ブロガー(blogger)にモーダルダイアログの「leanModal」を設置してみました。

ブロガー(blogger)にモーダルダイアログの「leanModal」を設置してみました。軽いし、動きがシンプル、かつ、エレガント。良いかなと思ったら、IEでうまく動作しませんね。何故だろう? 本家では動いているんですが。できたら、後ほど調整します。IEを利用されている方、ごめんなさい。


クリック

STEP 1 「jquery.leanModal.min.js」の読み込み
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
STEP 2 CSSの追加
#lean_overlay {
   position: fixed;
   z-index:100;
   top: 0px;
   left: 0px;
   height:100%;
   width:100%;
   background: #000;
   display: none;
}
#modal_message {
   width: 600px;
   padding: 30px; 
   display:none;
   background: #FFF;
   border-radius: 5px; 
   -moz-border-radius: 5px; 
   -webkit-border-radius: 5px;
   box-shadow: 0px 0px 4px rgba(0,0,0,0.7); 
   -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.7); 
   -moz-box-shadow: 0 0px 4px rgba(0,0,0,0.7);
}
STEP 3 起動のためのJavaScriptの設置
$(function(){
    $('a[rel*=leanModal]').leanModal();
});
STEP 4 HTMLからリンク
<a href="#modal_message" id="go" rel="leanModal">クリック</a>

<div id="modal_message">
<p>メッセージ</p>
</div>
と言った具合です。

2011年12月12日月曜日

ブロガー(blogger)にJSONPを利用したご意見・ご感想フォームを設置

ブロガー(blogger)にJSONPを利用したご意見・ご感想フォームを設置してみました。

かなり、まわりくどいことをしています。ブロガー以外に、自前のサーバーが必要です(笑)。 ブロガーで入力データを受け取り、自前のサーバーに渡し、そこで処理して再びブロガーにデータを返してきています。自前のサーバーとしては、先日紹介させていただいた無料サーバーの「2freehosting.com」を利用しています。

ブロガーで実現しなければならない意味があるのかという根本的な疑問は捨て去り、意味のないこだわりで前進あるのみです。面白くも何ともありませんが、お名前と感想を入力して、送信をクリックしてみてください。内容は真摯に受け止めさせていただきます。

ご意見・ご感想

お名前


感想


ブロガー(blogger)側のソースはこちら。
$(function(){
    $('#opinion01').click(function() {
         var sURL = 'http://(自前サーバー)/opinion.php?callback=?';
         var aParam = $("#opinion").serialize();
         $.getJSON(sURL,
         {params : aParam});
    });
});

var jsonback = function(data){
     $(data.opinion).each(function(){
         $("#opinionshow").html("以下の内容で送信されました。<br /><br />");
         $("#opinionshow").append("お名前 : " + this.onamae + "<br />");
         $("#opinionshow").append("ご感想 : " + this.gokanso + "<br />");
     })
}
サーバー側から返している、コールバックはこちら。
jsonback({"opinion": [
{
   onamae: "(入力されたお名前)",
   gokanso: "(入力された感想文)",
}
]})
自己満足の極みですね(笑)。実際に利用してみるとこんな感じになります。

お問い合わせ

2011年12月11日日曜日

ブロガー(blogger)にjQuery notificationを設置

ブロガー(blogger)にjQuery notificationを設置してみました。

我ながら馬鹿だなと思うのですが、この時期にブロガーのカスタマイズに取り憑かれつつあります。先日、ちょっとデザインを変更しただけなのですが、喚起されてしまいました。

まずは見かけからということで、以前から興味のあったプラグインを追加です。IEで試すと、重くてカクカクしますね。とりあえず、実験ということでお付き合いいただければと思います。
 
クリック1
クリック2
クリック3


ソースはこちら。
$(function(){
    $("#notice01").click(function() {
        showNotification({
            message: "日本語表示できるかな。",
            autoClose: true,
            type: "success",
            duration: 3
        });
    });
    $("#notice02").click(function() {
        showNotification({
            message: "クリックありがとうございます。",
            autoClose: true,
            type: "error",
            duration: 2
        });
    });
    $("#notice03").click(function() {
        showNotification({
            message: "亀の歩みで、ブロガーをカスタマイズして参ります。",
            autoClose: true,
            type: "warning",
            duration: 1
        });
    });
});

2011年12月10日土曜日

jQueryのプラグインサイトがメンテナンス中

jQueryのプラグインサイトがメンテナンス中になっています。何が起こったのでしょう。よくわかりませんが、「spam-free」「spam-ridden plugin site」などの言葉が出てきていますので、スパムに侵されてしまったのでしょうか。

In the process of deleting on the spam, all the plugins were deleted and we didn’t have a recent backup.
スパム除去処理の過程で、すべてのプラグインを削除したが、バックアップがない?

容易ならざる事態に見えます。ショック。とにかく、早期の再開を期待したいと思います。



2011年12月9日金曜日

Ubuntuにデスクトップ録画ソフトのイスタンブール(istanbul)をインストール

Ubuntuにデスクトップ録画ソフトのイスタンブール(istanbul)をインストールしてみました。

apt-get install istanbul

使い方は、非常に簡単です。ソフトを起動して、画面右上に表示される赤い録画ボタンをクリックすれば、録画がスタートします。同じボタンを再度クリックすれば停止となり、動画は、ogg形式で保存されます。出来上がった動画をYouTubeにアップロードしてみたのですが、エラーが出て、うまくアップできませんでした。ファイル形式がサポートされていないのでしょう。次回、その辺の解決策を探っていきたいと思います。

2011年12月8日木曜日

DeliciousやDiggのようなソーシャルサイトのデータが、Google Analyticsに反映されるようになる?

DeliciousやDiggのようなソーシャルサイトのデータが、Google Analyticsに反映されるようになるかもしれません。Google Analyticsの公式ブログで、「social data hub」と呼ばれるデータ統合への試みが紹介されています。いわゆる「シェア(共有)」データの流れがマーケティング指標として利用できるようになると述べられています。サイト管理者にとっては、ビジネス戦略に欠かせない貴重な利用者の行動データが入手できるようになるわけです。Googleの戦略は、本当に抜かりないですね。

2011年12月7日水曜日

ブロガー(blogger)のデザインを変えたら、アクセスが10分の1、直帰率100%に!!

ブロガー(blogger)のデザインを変えたら、アクセスが10分の1、直帰率100%に!!

涙なしには語れないのであります。良かれと思って変えたわけですが、自己満足で終わってしまいました。見事な惨状です。結局、何もわかっていなかったようです。ここ数日、痛いほど思い知らされました。しかし、元に戻そうとは思いません。前進あるのみです。また一からやり直します。今は、逆に、清々しい気分に満ちています。

さて、客観的に分析してみると、シンプルに変えた結果、こうなるということは、もともと誰も読んではいなかったということでしょうか(笑)。もちろん、「独り言」として書き記していますので、それはそれで構わないのですが、Google Analyticsやブロガー提供のアクセス統計を毎日楽しみに確認していたのも、また事実です。

泣いてばかりもいられません。少しずつ改善していこうと思います。

第一弾は、関連記事の表示です。手始めに「brps(Blogger Related Posts Service)」を入れてみました。


  </b:template-skin>
----- ここに埋め込む -----
</head>

<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>

</head> タグ(閉じる)の直前に gas.js を埋め込みます。
  </b:template-skin>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
  <script src="http://brps.appspot.com/gas.js"></script>
</head>

その後、レイアウトから、ガジェットの「HTML/JavaScript」を追加し、下記の2行を埋め込めばOKです。


<h2>関連記事</h2>
<div id="gas-results"></div>
関連している記事が表示されているようには思えませんが、とりあえず良しとしましょう。

2011年12月6日火曜日

Ubuntuに「Epiphany」をインストールして使ってみました。

Ubuntuに「Epiphany」をインストールして使ってみました。 Chromeをメインのブラウザーとして使っているのですが、サブで利用しているFirefoxにストレスを感じるようになったので、第3のブラウザを探しました。非力なノートブックで利用するには、Chromeしか選択肢がないのだろうなと思っていましたが、考えが変わりました。Epiphanyもなかなか軽快な動作で、使えます。日本語のメニュー表示も問題なさそうですし、思いがけない嬉しい発見となりました。

コマンドラインから、簡単にインストールすることが可能です。
sudo apt-get install epiphany-browser

2011年12月5日月曜日

ブロガー(blogger)にjQueryを組み込んでみました。

ブロガー(blogger)にjQueryを組み込んでみました。管理画面の「テンプレート」メニューから、「HTMLの編集」画面で、設定を変更します。


「HTMLの編集」をクリック

「続行」をクリック

     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
----- ここに埋め込む -----
</head>

<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>

</head> タグ(閉じる)の直前に jQuery を埋め込みます。
     #layout .region-inner {
       min-width: 0;
       width: auto;
     }
     ]]>
  </b:template-skin>
  <script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
  <script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js' type='text/javascript'></script>
</head>

<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>
今回は、jqueryjquery-ui を組み込みました。
実際に動かしてみると、こんな感じです。

うまく動いてくれるかな。
うまく動いてくれるかな。
うまく動いてくれるかな。
うまく動いてくれるかな。
うまく動いてくれるかな。

クリック

あらら、動きが鈍い~。こんなもんでしょうか(笑)。
参考までに、実際に動かしている部分のソースはこちら。

$(function(){
   $('#testlink01').click(function() {
      $('#test01').toggle(1000);
   });
});

2011年12月4日日曜日

ブロガーのデザインを変更しました。

ブロガーのデザインを変更しました。今まで色々なブログパーツで散らかり放題でしたので、シンプルにまとめました。

ブロガーが提供してくれている既存のテンプレートをあれこれ変更してみたのですが、どれもしっくりきません。時間を潰すことしばし。一念発起し、用意されているテンプレートに頼るのをやめ、カスタマイズすることにしました。他にやらなければいけないことが多々あるにも関わらず、この持て余しぶりに我ながら嫌になるわけですが、しかし、一度始めるとやめられなくなり、見事にハマりました。

管理画面「テンプレート」→「HTML編集」の画面を開くと、

直接 HTML を編集すると、一部の機能の動作に影響することがあるので、上級ユーザーにのみおすすめします。テンプレートの HTML を編集すると、その他の Blogger の機能に予期しない影響が生じることがあります。まずテンプレート デザイナーを使用することをおすすめします([アドバンス] セクションで CSS を追加できます)。
とメッセージが表示されます。今までは警告に従い「テンプレート デザイナーを開く」へと進んでいたのですが、勇気を持って「続行」ボタンをクリックしました。

複雑なタグに目眩がしますが、しかし我慢してよく見てみると、普通のHTMLページと同じような構成になっていることがわかります。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<head>
    <title><data:blog.pageTitle/></title>
    <meta expr:content='data:blog.metaDescription' name='description'/>
    ここにCSSの定義など
</head>

<body expr:class='"loading" + data:blog.mobileClass'>

ここがコンテンツ部分

</body>
</html>
CSS部分などを若干書き換え、結果はこんな感じになりました。全てを削ぎ落したに過ぎませんので、カスタマイズと言うのは、おこがましいかもしれません。それでも今まで重かったページが、見違えるように軽くなりました。しばらくカスタマイズにハマりそうで怖いです(笑)。とにかく、更なるブログ充実に努めていきたいと思ったのでありました。

2011年12月3日土曜日

ウェブサイトに電話認証機能を搭載するAPIサービス「boundio」

ウェブサイトに電話認証機能を搭載するAPIサービス「boundio」が登場です。コアとなる「架電用API」は、PHP等のプログラムからJSON形式のデータを投げることにより、指定した電話番号に架電を行うことができるとのこと。ユーザー認証に革命が起きそうな予感がしますね。素晴らしい時代です。

詳しいサンプルはこちら。


2011年12月2日金曜日

クラックできたらスパイとして採用?

クラックできたらスパイとして採用」、英外務省組織が採用活動の一環として、ネット上に暗号解読クイズページ「_Can you crack it?」を立ち上げたとのこと。暗号を解くと、採用ページにジャンプする仕組みになっているようです。この手の問題を解くタイプの採用ページは増えているように思いますが、遊びごろこがあって、多くの関心を呼びますし、今後増えていくのかもしれません。

_Can you crack it?

2011年12月1日木曜日

伸び縮みする伸縮自在のUSBケーブル「スパンデックス」

伸び縮みする伸縮自在のUSBケーブル「スパンデックス」に関するニュースをみつけました。旭化成せんいが開発した伸縮素材の「スパンデックス」を応用したもので、1.5倍伸び縮みするそうです。将来の人間型ロボットに利用することを目標としているようですが、様々な応用が考えられるように思います。それにしても様々な世界があるものです。



2011年11月30日水曜日

Firefox 11、ブラウザからバイブレーター機能を利用可能に

Firefox 11、ブラウザからバイブレーター機能を利用可能に」、Android版のFirefox 11からモバイル端末に特化したAPIが提供されます。 新しいAPIでは、ブラウザからAndroidのバイブレーター機能、カメラ、バッテリーチェックなどが利用できるようになるとのこと。これは面白いですね。開発者魂が、くすぐられるというものではないでしょうか(笑)。

2011年11月29日火曜日

ガラスのように透明な「Multi-Touch」のキーボードとマウスには、未来を感じる

ガラスのように透明な「Multi-Touch」のキーボードとマウスには、未来を感じます。既存の技術を用いつつ、強化ガラスと金属の組み合わせで、これだけの質感を演出しています。全てはデザインのなせる技と言えるでしょう。ちなみに入力ソフトは、オープンソースで開発されているとのこと。どこまでも現代風です。こんなキーボードの似あう人間になりたいですね(笑)。



2011年11月28日月曜日

Linuxディストリビューションのシェア調査によると、Ubuntuのシェア減少が止まらず、Mintが急浮上

Linuxディストリビューションのシェア調査によると、Ubuntuのシェア減少が止まらず、Mintが急浮上していることが明らかになっています。 この記事を読んで、私もLinux Mintをインストールしてみたわけですが、Ubuntuのシェア急降下が気になります。やっぱり、Unityが嫌われているのでしょう。KUbuntuなどを加えたUbuntuファミリー全体で見ると、依然、高いシェアを維持しているようですが、果たして、打開策を見出すことができるのでしょうか。巻き返しに期待したいものです。


2011年11月27日日曜日

加湿器がタッチスクリーンモニターに「Displair」?

加湿器がタッチスクリーンモニターに「Displair」? Displairは、冷やされた空気を細長い噴射口から吐き出すことで、白い霧のキャンバス幕を作り出し、映像を投影するモニターです。凄いところは、タッチスクリーンの機能ももたせているところ。これから寒くなる季節、特に屋外などでは活躍してくれそうなアイテムです。ロマンチックな気分に浸れるモニターと言えるかもしれません。



2011年11月26日土曜日

Linux Mint 11をインストールしてみました。

Linux Mint 11をインストールしてみました。Linux Mintは、Ubuntuベースのディストリビューションで、従来のGNOME 2ライクなディスクトップ環境が提供されてるのが特徴です。Unityには馴染めない、GNOME 3は重い、と感じている方には、最適のディストリビューションと言えるかもしれません。さて、インストール後の第一印象は「軽い」です。 ユーザーインターフェイスは、どことなくMACを思わせる印象で、操作性も昔懐かしいUbuntuといった感じです。これで必要十分ではないでしょうか。しばらく試して、良かったら、Ubuntuから乗り換えるかも?










2011年11月25日金曜日

jQueryのスライドショープラグイン「slideshowify」が最高にクール。

jQueryのスライドショープラグイン「slideshowify」が最高にクールなのです。百聞は一見にしかず、デモサイトをご覧ください。実にエレガントです。大きい写真でも、ストレスを感じないプレゼンテーションに仕上がっています。組み込みも簡単。HTML上に画像を並べて、「$("img").slideshowify();」とコードを埋め込むだけです。素晴らしい。

 $("img").slideshowify();
デモはこちら。

2011年11月24日木曜日

海外の無料サーバー「2FREEHOSTING」は、使える!

海外の無料サーバー「2FREEHOSTING」が、使えます。と言っても、まだ数時間試した程度ですが。PHP5、MySQL、10GBのスペースで、広告なしといった仕様で、ある程度自由に使えます。回線スピードに若干のもたつきを感じますが、コントロールパネル(英語)も用意されていますし、無料のサーバーとしてはレベルが高いのではないでしょうか。しばらく試させてもらおうと思います。感謝。

2011年11月23日水曜日

PHPを使うサーバー管理者ならセキュリティーチェックに「PhpSecInfo」

PHPを使うサーバー管理者ならセキュリティーチェックに「PhpSecInfo」。ダウンロードした「phpsecinfo」フォルダをそのままサーバーにアップして、該当URLにアクセスすると、セキュリティーの穴埋め項目を「phpinfo()」のような形式で表示してくれます。日々、まだまだ勉強不足だなと思わされるわけですが、本日もこの phpsecinfo に気付かされることが多々ありました。精進あるのみです。

2011年11月22日火曜日

ダイヤル式のカメラレンズ切り替えケース「Photojojo's Lens Dial case」

ダイヤル式のカメラレンズ切り替えケース「Photojojo's Lens Dial case」が、スゴイです。顕微鏡のようにレンズの倍率をダイヤルを回して変えることが可能です。写真にこだわる方には、便利なアイテムと言えると思います。持ち運びを考えると、改善の余地はあるのかもしれませんが。しかし、人前で利用する際は、アピール大でしょう(笑)。



2011年11月21日月曜日

米アマゾン、来年スマホ発売?

米アマゾン、来年スマホ発売か」というニュースを目にしました。キンドルで味をしめたかな(笑)? それにしても、スマホ戦国時代ですね。販売予想価格も200米ドル(約15,000円)とありますので、面白い存在になるのではないでしょうか。iPhoneやAndroidと、どのような差別化をはかってくるのか、興味の尽きないところです。是非、日本にも進出して欲しいですね。


2011年11月20日日曜日

Chromeエクステンションの「QR Maps」が便利

Chromeエクステンションの「QR Maps」が便利です。Google Map の画面にQR Mapsのボタンが表示され、ワンクリックでQRコードを作成してくれます。毎回、携帯にメールでGoogle MapのURLを送っていましたが、これでQRコードから直接読み込めるようになりました。素晴らしい。



2011年11月19日土曜日

Fedora16のインストールで、エラー「you have not created a bootloader stage1 target device.」

Fedora16のインストールで、エラー「Automatic Partitioning Errors you have not created a bootloader stage1 target device.」と表示されて、先に進めません。何度試しても、同じ所で止まってしまいます。私だけに起こっていることなのでしょうか? 利用したのは、DVD版の Fedora-16-i386-DVD.iso でした。どうにもならないので、Fedora-16-i386-netinst.iso をダウンロードしてきて、ネットワークインストールで対処しました。こちらはキャラクターベースのインストールのため(?)か、すんなり、いつも通りインストールすることが出来ました。何だったんでしょう。

2011年11月18日金曜日

ニコンのデジカメ「COOLPIX S1200pj」は、プロジェクター付き。

ニコンのデジカメ「COOLPIX S1200pj」は、プロジェクター付き。デジカメの正面に、超小型プロジェクターが内蔵され、60型相当の大画面で投映することができます。デジカメも付加価値の時代ですね。そろそろ新しいデジカメが欲しい気分なのですが、これは良いです。プライベートなシーンはもちろんですが、仕事の会議や打ち合わせなどでも活躍してくれることでしょう。