つくりてのざれごと

3ヶ月前には付けてたのだけども邪魔になって削除してた addThis ボタンを再び付けてみた。 邪魔だなと思ったのは、アドレス末尾に変な文字列が追加されてしまうのがイヤだったから。で、今回その文字列が追加されないようにする方法がわかったから再追加した。この変な文字列を追加しない方法は至極簡単なことで、オプションのチェックを外せば良いだけだった、チャンチャン。 addThisボタンが余り目立つのは拙サイトの性格上イヤなので、ボタン画像は「＋」で自作してサイドの下に薄く配置して良く分からない感じにしてみた。

本日、拙サイトロゴを「eszett」から「ß」に変更してみた。 現在の拙サイト。新しいロゴに変更してみた 従来の「eszett」ロゴはサイドのナビ上に仕込んでページダウンすると現れるようにした。 「eszett」ロゴはサイドのナビ上に それから序でに、試しで手書きの「eszett」も作ってみた。 手書きの「eszett」 ただ、この手書きの「eszett」は拙サイトの雰囲気に合ってないような気がして悩み中。もう少し字の雰囲気を変えた方が良いのだろうな…。

StumbleUpon上でstereomoodを見つけた場面 今回はSNSと音楽の話をば。 2、3日前に見ていたサイトに見知らぬアイコンボタンがあったので調べてみたら、楽しそうなSNSであるとわかり早速やり始めてみた。そうしたら昨日早速面白そうな音楽検索サイトを見つけてこれまた登録・音楽探し。3連休は専らネット内にいたことになるのか（苦笑 StumbleUpon 2、3日前に見つけた見知らぬアイコンの正体はこれ。ブクマサービスの一種とのことだが、面白いのはページ左上にある「Stumble」というボタンをただ押すだけで次々と自分に興味のある（とおぼしき）ページなどが現れること。設定らしいことは自分の興味のあるキーワードを予め登録しておくだけ。あとはひたすら「Stumble」ボタンを押していくだけ。見つかるときはすぐ見つかるし、見つからないときは全然見つからない、既存のブクマサービスや検索とはひと味違う、偶発的・感覚的なブクマサービス。 stereomood 昨日StumbleUponで「Stumble」ボタンを押した一発目に遭遇した音楽検索・視聴サービス。ホンマに見つかるときはビックリするくらい早い段階で見つかるもんです。で、このサービスも既存の音楽検索・視聴サービスとは趣が異なり、各楽曲に付けられたタグで検索するというもの。このタグは曲のジャンルや、曲の持つ雰囲気や曲から惹起する感情などの単語などが付けられていて、今まで自分の知らなかったアーティストでも自分に合った音楽が見つかりやすい。 そんなこんなで昨日は検索した500曲強を流し聴きして選抜した好みの30曲を以下に。 今回の検索テーマは「funk & rhythm」。funk中心。基本自分の好みはドラム・ベース・ギターのrhythmが際立ち、テンポも早めで上げ調子のもの、なのでそんな感じの選曲になっている。 【注意】リンク先に進むとすぐに音楽が始まるので、音量などに注意。 12 APOSTLES - Flevans 3.4% NIPPLES - Dokkerman and the Turkeying Fellaz A DANCE FOR WORLD PEACE - Michael Soward BABY PLEASE DON'T GO - Them BACALAO

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

結局未採用だけど、折角調べて試してみたので記録しておく。 参照サイトは jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン） | webOpixel 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) + '.'

拙サイトの新デザインでナビをサイドに配置したので、jQueryで、ナビをスクロールさせず固定してしまおうと思い立つ。参考にさせてもらったのは次のエントリ。 スクロールについてくる要素とその可動範囲の指定。あれ？この場合ついていかない要素ってことになるのかな？ | Memorandum Book - written by Ravenala 深謝。参考エントリ内の説明通りに設定すれば万事動きます。 で、拙サイトは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" }

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

拙サイトのナビを上下に展開・格納するようにしたいと思い色々物色。すると、『 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"); } ); }); これを元に、 クリック時の動作用に変更。 自分が後で理解しやすいようにする。 上下展開・格納動作にアニメーションをつけたい。 クリックする箇所が、展開・格納で文字色が変わるように。 上述動作が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メソッドを使用