Wednesday, 26 September 2012

拙サイトにaddThisボタン再追加


3ヶ月前には付けてたのだけども邪魔になって削除してたaddThisボタンを再び付けてみた。
邪魔だなと思ったのは、アドレス末尾に変な文字列が追加されてしまうのがイヤだったから。で、今回その文字列が追加されないようにする方法がわかったから再追加した。この変な文字列を追加しない方法は至極簡単なことで、オプションのチェックを外せば良いだけだった、チャンチャン。

addThisボタンが余り目立つのは拙サイトの性格上イヤなので、ボタン画像は「+」で自作してサイドの下に薄く配置して良く分からない感じにしてみた。

Sunday, 23 September 2012

拙サイトロゴ変更、そして手書きロゴは…

本日、拙サイトロゴを「eszett」から「ß」に変更してみた。

現在の拙サイト。新しいロゴに変更してみた

従来の「eszett」ロゴはサイドのナビ上に仕込んでページダウンすると現れるようにした。

「eszett」ロゴはサイドのナビ上に

それから序でに、試しで手書きの「eszett」も作ってみた。

手書きの「eszett」

ただ、この手書きの「eszett」は拙サイトの雰囲気に合ってないような気がして悩み中。もう少し字の雰囲気を変えた方が良いのだろうな…。

Tuesday, 18 September 2012

興味あるサイトや音楽が偶発的・感覚的に見つかるサービス2つを始めてみた

StumbleUpon上でstereomoodを見つけた場面

今回はSNSと音楽の話をば。

2、3日前に見ていたサイトに見知らぬアイコンボタンがあったので調べてみたら、楽しそうなSNSであるとわかり早速やり始めてみた。そうしたら昨日早速面白そうな音楽検索サイトを見つけてこれまた登録・音楽探し。3連休は専らネット内にいたことになるのか(苦笑

StumbleUpon

2、3日前に見つけた見知らぬアイコンの正体はこれ。ブクマサービスの一種とのことだが、面白いのはページ左上にある「Stumble」というボタンをただ押すだけで次々と自分に興味のある(とおぼしき)ページなどが現れること。設定らしいことは自分の興味のあるキーワードを予め登録しておくだけ。あとはひたすら「Stumble」ボタンを押していくだけ。見つかるときはすぐ見つかるし、見つからないときは全然見つからない、既存のブクマサービスや検索とはひと味違う、偶発的・感覚的なブクマサービス。

stereomood

昨日StumbleUponで「Stumble」ボタンを押した一発目に遭遇した音楽検索・視聴サービス。ホンマに見つかるときはビックリするくらい早い段階で見つかるもんです。で、このサービスも既存の音楽検索・視聴サービスとは趣が異なり、各楽曲に付けられたタグで検索するというもの。このタグは曲のジャンルや、曲の持つ雰囲気や曲から惹起する感情などの単語などが付けられていて、今まで自分の知らなかったアーティストでも自分に合った音楽が見つかりやすい。

そんなこんなで昨日は検索した500曲強を流し聴きして選抜した好みの30曲を以下に。
今回の検索テーマは「funk & rhythm」。funk中心。基本自分の好みはドラム・ベース・ギターのrhythmが際立ち、テンポも早めで上げ調子のもの、なのでそんな感じの選曲になっている。
【注意】リンク先に進むとすぐに音楽が始まるので、音量などに注意。
  1. 12 APOSTLES - Flevans
  2. 3.4% NIPPLES - Dokkerman and the Turkeying Fellaz
  3. A DANCE FOR WORLD PEACE - Michael Soward
  4. BABY PLEASE DON'T GO - Them
  5. BACALAO CON PAN - Irakere
  6. BALLANDO IN BALERA - Calibro 35
  7. BATTLE PART.1 (FEAT. AFRIKA BAMBAATAA... - The Mighty Mocambos
  8. BOUCHET FUNK - Calibro 35
  9. COMENCEMOS - Phirpo y sus Caribes
  10. DEEP THREAT - The Hot Grits
  11. ELEPHANT MAN - Bo Diddley
  12. EUROCRIME! - Calibro 35
  13. GOOD FOOT DOWN (FEAT. CURTIS T.) - The Soul Snatchers
  14. HOW YOU LIKE ME NOW? - The Heavy
  15. I CAN'T STAND IT (FEAT. JIMI BELL MARTIN) - The Soul Snatchers
  16. I GOTTA FUNKY THING - Funk Ferret
  17. IT AIN'T NEVER GONNA WORK - Funkshone
  18. LAS CUATRAS CULTURAS - Rabbits and Carrots
  19. LET HOME CROSS YOUR MIND - Sir Guy and the Speller Brothers Band
  20. LET'S GET FUNKY - Hound Dog Taylor & The House Rockers
  21. ORANGE ALERT (DFA REMIX) - metro area
  22. ORGAN DONOR - DJ Shadow
  23. PAUL NEWMAN - Lefties Soul Connection
  24. RED LIGHTS - Holy Fuck
  25. SEXYMUTHAFLAPPER - jem stone
  26. SLEEP TALK - Ornette Coleman
  27. SLING SHOT PT. 2 - Lefties Soul Connection
  28. SOUL SURVIVOR, PT. 1 - Funkshone
  29. SPINAL SCRATCH - Thomas Bangalter
  30. YAKUBA - Whitefield Brothers

Sunday, 16 September 2012

BloggerとTumblrのテンプレート改造

本日は午後よりBlogger(このブログ、文字る活字の小箱)およびTumblr(文字の雑貨店)のテンプレートを、拙サイトとほぼ同仕様へ大幅に改造。Bloggerは拙サイトをふまえて独自のCSSを組み、Tumblrは拙サイトで使用のCSSを読込み、微調整は独自CSSを組んだ。jQueryは丸々拙サイトで使用のものを読込んだ。意外にすんなりと改造できた。明日は残りのTumblr(線の博物館)の改造。

Friday, 14 September 2012

FacebookページのフィードURLを取得しウォールを自サイトに表示

結局未採用だけど、折角調べて試してみたので記録しておく。
参照サイトは

FacebookページのフィードURL取得は(取得ツール付き)

以上、深謝。

自分のFacebookページのフィードURLを取得

上記参照サイトでは、自FacebookページのID確認方法について書かれているが、小粋空間さんのページに「自FacebookページのフィードURL取得ツール」があるので、自FacebookページのURLを入力すれば、フィードURLを表示してくれる。但しフォーマットはAtom1.0なので、RSS2.0フォーマットは以下のように変更する。
小粋空間さんの取得ツールで取得したフィードURL
https://www.facebook.com/feeds/page.php?format=atom10&id=[取得したID]

RSS2.0フォーマットに変更後
https://www.facebook.com/feeds/page.php?format=rss20&id=[取得したID]

jQueryを自サイトに貼込み

webOpixelさんからjQueryをを拝借し、自サイトに貼り込む。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var formatData = function(date) {
     var d = new Date(date);
     return (d.getFullYear() + '.' + ("0"+(d.getMonth()+1)).slice(-2)  + '.' + ("0"+d.getDate()).slice(-2));
};

$.getJSON(
     'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
     {
     q:'http://www.facebook.com/feeds/page.php?id=[取得したID]&format=rss20',
     v:'1.0',
     num:10
     },
     function (data) {
     console.log(data.responseData.feed);
     $.each(data.responseData.feed.entries, function(i, item){
    $('#facebook ul').append('<li><span>'+
    formatData(item.publishedDate)
    +'</span><br />' + item.content + '</li>');
     });
     }
);
});
</script>
月日が1桁の時にゼロを追加して2桁にしない場合、上記青部分を
return (d.getFullYear() + '.' + (d.getMonth() + 1) + '.' + d.getDate());
に差替え。赤部分、上は自FacebookページのフィードURL(RSS2.0フォーマットに変更したもの)に差替え、下の数字は表示させたい件数を指定。

フィードを表示させたい場所に例えば
<div id="facebook"><ul></ul></div>
などとして挿入。これと上記紫部分は、自サイトに合うように変更。

表示結果



画像を添付した投稿は書き込みとともに画像も表示される。

【2013.6.14追記】Facebookに画像のみ、またはテキストのみ投稿した場合
Facebookに画像のみ、またはテキストのみ投稿した場合も上記スクリプトで投稿日と画像が表示される。
テキストのみの投稿も画像のみの投稿も…

このように反映される。

表示のカスタマイズ
また緑部分を、「item.title」にすれば省略した形で表示。「item.link」にすれば記事へのリンクが貼れる。
そしてこれらを合わせのカスタマイズも可。
$('#facebook ul').append('<li><a href="' + item.link + '">' + item.title + '</a><span class="posted">[' + formatData(item.publishedDate) + ']</span></li>');
とすると、


「item.title」は投稿時に書き込んだ部分のみが表示され添付画像は表示されない。それにFacebookへのリンク「item.link」が貼られる。3行目が日付だけなのは、書き込みをせずに画像だけ貼ったフィード。

以上、こんな感じで自サイトに自Facebookのウォールを貼り込むことができる。

【2013.6.17追記】投稿のタイトルのみと画像のみ投稿のフィードを同時に表示
if文を使って条件分岐する。

<script type="text/javascript">
$(function() {
     var formatData = function(date) {
          var d = new Date(date);
          return (d.getFullYear() + '.' + ("0"+(d.getMonth()+1)).slice(-2)  + '.' + ("0"+d.getDate()).slice(-2));
     };

     $.getJSON(
          'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
          {
               q:'http://www.facebook.com/feeds/page.php?id=[取得したID]&format=rss20',
               v:'1.0',
               num:5
          },
          function (data) {
               console.log(data.responseData.feed);
               $.each(data.responseData.feed.entries, function(i, item){
                    if(item.title == 0){
                         $('#facebook ul').append('<li><span>'+formatData(item.publishedDate)+'</span><br />' + item.content + '</li>');
                    }else{
                         $('#facebook ul').append('<li><a href="' + item.link + '">' + item.title + '</a><span class="posted">[' + formatData(item.publishedDate) + ']</span></li>');
                    }
               });
          }
     );
});
</script>
これで、テキストの投稿はタイトルのみ表示され、画像のみの投稿も画像が表示される。(表示例画像は次の項目の最後を参照)

【2013.6.17追記】複数のFBページの投稿を同時に表示
本当はもっとエレガントにできると思うのだが、現状のワタクシの知識ではチョット無理なので、強引に以下のようにしてみた。

<script type="text/javascript">
$(function() {
     var formatData = function(date) {
          var d = new Date(date);
          return (d.getFullYear() + '.' + ("0"+(d.getMonth()+1)).slice(-2)  + '.' + ("0"+d.getDate()).slice(-2));
     };

     $.getJSON(
          'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
          {
               q:'http://www.facebook.com/feeds/page.php?id=[取得したID]&format=rss20',
               v:'1.0',
               num:5
          },
          function (data) {
               console.log(data.responseData.feed);
               $.each(data.responseData.feed.entries, function(i, item){
                    if(item.title == 0){
                         $('#facebook ul').append('<li><span>'+formatData(item.publishedDate)+'</span><br />' + item.content + '</li>');
                    }else{
                         $('#facebook ul').append('<li><a href="' + item.link + '">' + item.title + '</a><span class="posted">[' + formatData(item.publishedDate) + ']</span></li>');
                    }
               });
          }
     );
     $.getJSON(
          'http://ajax.googleapis.com/ajax/services/feed/load?callback=?',
          {
               q:'http://www.facebook.com/feeds/page.php?id=[別のFacebookのID]&format=rss20',
               v:'1.0',
               num:5
          },
          function (data) {
               console.log(data.responseData.feed);
               $.each(data.responseData.feed.entries, function(i, item){
                    if(item.title == 0){
                         $('#facebook ul').append('<li><span>'+formatData(item.publishedDate)+'</span><br />' + item.content + '</li>');
                    }else{
                         $('#facebook ul').append('<li><a href="' + item.link + '">' + item.title + '</a><span class="posted">[' + formatData(item.publishedDate) + ']</span></li>');
                    }
               });
          }
     );
});
</script>

要は別のFacebookページ用にもう1つ$.getJSON以下を追加した。これで一応複数のFacebookページの投稿が表示される。
リストの上5つと下5つは別Facebookページの投稿。画像のみの投稿もちゃんと表示できた。

Thursday, 13 September 2012

サイドナビをjQueryでスクロールさせず固定に

拙サイトの新デザインでナビをサイドに配置したので、jQueryで、ナビをスクロールさせず固定してしまおうと思い立つ。参考にさせてもらったのは次のエントリ。


深謝。参考エントリ内の説明通りに設定すれば万事動きます。

で、拙サイトはHOMEボタンをeszettロゴのみに設定しているので、スクロールするとHOMEボタンだけ無くなることになる。そこで、スクロールダウンしてヘッダのeszettロゴが見えなくなった時点で新たにeszettロゴを出現、またスクロールアップしてヘッダのeszettロゴが見える直前に新たなeszettロゴを隠すというギミックを追加。
$(function(){
 var memuPosi = $("固定するナビのクラス名またはID名").offset();
 var menuTopMargin = 24;
 var targetScrollValue = memuPosi.top - menuTopMargin;
 $("eszettロゴのID名").hide(); //新たに出現させるロゴの初期状態(隠した状態)
 $(window).scroll(function() {
  var wScrollvalue = $(window).scrollTop();
  if(wScrollvalue > targetScrollValue){
   $("固定するナビのクラス名またはID名").css({
    position: "fixed",
    top: menuTopMargin
   });
   $("eszettロゴのID名").fadeIn(800); //フェードイン800ミリ秒でロゴを出現
   }
  else{
   $("固定するナビのクラス名またはID名").css({
    position: "absolute",
    top: "0"
   });
   $("eszettロゴのID名").stop().hide(); //ロゴを隠す
   }
 });
});
赤い部分を所定の位置に追加。どのような状態かは拙サイトをご覧あれ。

因みに、参考エントリでは上記青の部分がないので追加すること。

Tumblr APIとrandomdisplayの併用

以前のエントリで、Tumblr APIで「線の博物館」と「文字の雑貨店」の画像を読み込み表示出来るようにした。ただ、Macでは無問題なのにWinではページ自体の表示がおかしくなる現象があって試行錯誤の結果、randomdisplayとかち合っていることが判明。どうしてもrandomdisplayは使用したい。再び試行錯誤後、Tumblr APIの書き方をJavascriptそのものではなくてjQueryにしたらどうかと思いつく。実は以前のエントリでjQueryでの書き方も参考サイトとしてあげていたのでそちらを参照した。


結果、無事成功!
これで、Tumblr APIとrandomdisplayの併用が可能に。

Tuesday, 11 September 2012

上下に展開・格納するナビ

拙サイトのナビを上下に展開・格納するようにしたいと思い色々物色。すると、『Web制作の現場で使う jQueryデザイン入門』p.244〜p.245の「サンプル1」に応用できそうなjQueryを見つけ拝借。
$(function(){
 $("展開・格納する要素名orクラス名orID名").hide();
 $("クリックする要素名orクラス名orID名").hover(function(){
  $("展開・格納する要素名orクラス名orID名:not(:animated)",this).slideDown("slow");
 },
 function(){
  $("展開・格納する要素名orクラス名orID名",this).slideUp("slow");
 });
});
これを元に、
  1. クリック時の動作用に変更。
  2. 自分が後で理解しやすいようにする。
  3. 上下展開・格納動作にアニメーションをつけたい。
  4. クリックする箇所が、展開・格納で文字色が変わるように。
  5. 上述動作が2箇所で交互に動作するように。
となるように改造していく。

1.クリック時の動作用に変更〜2.自分が後で理解しやすいようにする

  • 「hover」を「click」に変更。
  • clickするごとに展開・格納させるので、slideDown()、slideUp()はslideToggle()にまとめて条件式の1つを削除。
  • 「this」の意味が良く分かってないので現段階で取っちゃう(後で、冗長的になるけど、これがなくても良い書き方にする)。

3.上下展開・格納動作にアニメーションをつけたい

今まさに必要なコラムを発見。
@ITの記事『jQueryのアコーディオン効果の使い方・作り方(2/3)』より、
コラム 「jQueryのslideDown/slideUp/fadeIn/fadeOutメソッドの正体」

slideDown/slideUpメソッドはheightプロパティを、fadeIn/fadeOutメソッドはopacityプロパティを、書き換えることにより実装します。jQueryは、これらのプロパティを書き換えるのに、animateメソッドを使用しています。つまり、slideDown/slideUp/fadeIn/fadeOutの正体は、animateだったのです。

animate({height: 'show'});    // slideDown
animate({height: 'hide'});     // slideUp
animate({height: 'toggle'});   // slideToggle
animate({opacity: 'show'});   // fadeIn
animate({opacity: 'hide'});    // fadeOut
animate({opacity: 'toggle'});  // fadeToggle(未サポート)
これで、slideToggle()をanimate()に差替え出来て、animate()のeasingが使えるように。

以上、1〜3までを踏まえた結果。
$(function(){
 $("展開・格納する要素名orクラス名orID名").hide();
 $("クリックする要素名orクラス名orID名").click(function(){
  $("展開・格納する要素名orクラス名orID名:not(:animated)").animate({height: 'toggle'}, 動作時間,'easing名');
 });
});


4.クリックする箇所が、展開・格納で文字色が変わるように

新たにtoggleClass("色指定用CSSクラス名")を使って、新たに色指定用CSSクラスが要素に無ければ追加し、あれば削除することで文字色を変更する。
$(function(){
 $("展開・格納する要素名orクラス名orID名").hide();
 $("クリックする要素名orクラス名orID名").click(function(){
  $("クリックする要素名orクラス名orID名").toggleClass("色指定用CSSクラス名");
  $("展開・格納する要素名orクラス名orID名:not(:animated)").animate({height: 'toggle'}, 動作時間,'easing名');
 });
});


5.上述動作が2箇所で交互に動作するように

さてここでヒジョ〜に悩む。元来プログラミングが不得手なのでどうしたら良いのか四苦八苦した結果、なんとか完成。
「展開・格納する要素名orクラス名orID名」や「クリックする要素名orクラス名orID名」では判りにくいので以下のようにした。
  • 「展開・格納する要素名orクラス名orID名」は2つなので、各々ID名「#subnavi01」「#subnavi02」とする。
  • 「クリックする要素名orクラス名orID名」も2つなので、各々ID名「#click01」「#click02」とする。
$(function(){
 $("#subnavi01, #subnavi02").hide();
 $("#click01").click(function(){
  $("#click01").toggleClass("色指定用CSSクラス名");
  $("#subnavi01:not(:animated)").animate({height: 'toggle'}, 動作時間,'easing名');
  $("#subnavi02").animate({height: 'hide'}, 動作時間,'easing名');
  $("#click02").removeClass("色指定用CSSクラス名");
 });
 $("#click02").click(function(){
  $("#click02").toggleClass("色指定用CSSクラス名");
  $("#subnavi02:not(:animated)").animate({height: 'toggle'}, 動作時間,'easing名');
  $("#subnavi01").animate({height: 'hide'}, 動作時間,'easing名');
  $("#click01").removeClass("色指定用CSSクラス名");
 });
});
要は上記青い部分。
「#click01」をクリックした時、「#subnavi01」は展開・格納し「#subnavi02」は必ず閉じている状態且つ元の文字色にしたいので。元の文字色にするのはremoveClass("色指定用CSSクラス名")で色指定用CSSクラスを削除することで対応。「#click02」をクリックした時は上記赤い部分で同じように作動する。


で、結局4はやめてしまった(つまりはtoggleClass()とremoveClass()の行は削除)。hover時の色変え設定と当たってしまって上手く動作せず、hover時の色変えを優先したので。それから、easingは一寸ギミックちっくなモノを選んでみた。

どのように動作するかは、拙サイトをご覧あれ。

Thursday, 6 September 2012

Tumblr APIで読込んだ画像をモノクロにしたいのだけど…

検索してみたら以下を発見。
  1. 画像をモノクロ変化するjquery.monochromer.jsをアップデート | 秋葉秀樹個人ブログ
  2. [JS]カラー画像を白黒に自動変更して表示する画像ギャラリー -Black and White | コリス
  3. 画像にロールオーバー効果を付けるjQueryプラグイン-Hoverizr | memocarilog
  4. 画像を自動でモノクロに!「$.GreyScale jQuery Plugin」|skuare.net
を試してみたが、
  • 1は、APIで読込んだ画像には適用されないようだ。残念。
  • 2、3、4はレイアウトが完全崩壊。orz... これらもAPIで読込んだ画像には適用されない。

2012-9-24追記:
コメンター(CMMNTR)にて、Gianluca Guarini - black and white image jQuery plug-inが紹介されていたので試してみたが、残念ながらこちらもAPIで読込んだ画像には適用されない。今までで一番セッティングしやすいものなだけに。。。

Tuesday, 4 September 2012

HOMEページ改装

先日WEBSITE改装3回目の時に、HOMEページに新たにgridsterというjQueryを導入してみたけども、ワタクシの意図するところに落とし込めなかったためこれをやめて、新たにmurak.netさんのjQueryランダム表示プラグインと、jQueryプラグインの書き方より、ボックスをランダムに表示できるjQueryプラグインを拝借。深謝。

導入方法は至極簡潔で上記ページの解説で事足りるので省略。

これでHOMEページの9つのボックスは、リロードする度に配置が替わるようになって、満遍なく各ボックスが上部に掲載されるようになった。