アファメーションで独立・起業・夢実現。「いきなり!社長宣言!!」-“夢は口に出すことで実現する!”というアファメーション: 2010年3月

2010年3月28日

Thickboxの画像リサイズ機能をオフにするカスタマイズ。

成功者になるための必読ブログとは?

画面サイズに対して自動的にリサイズしてくれる便利機能。

Thickboxの画像表示スクリプトには、画面サイズ(スクリーンサイズ)に対して自動的にリサイズする機能があります。

これはこれで便利なんだけど、ノートPCとか、画面サイズの小さいPCだと画像が小さくなりすぎて、画像内の文字が潰れてしまったり、場合によって見栄えが良くなかったりする場合も。

ということで、グーグル先生で検索してみると

  • fixture.jp/blog - thickbox.jsの画像リサイズ機能をオフにする

と、まさにドンピシャなサイトがあるじゃないですか!

ってことでアクセスしてみると...。

ページがない!

残念ながらすで該当ページ(サイト)が無くなっていて、詳細が見れなかった。(泣)

んで、ウェイバックで過去のページが残っていないか調べたら、かろうじてhtmlは残っていました。

んで、解説を読んでみるとThickboxのリサイズ機能部分のコードをコメントアウトすれば良いとのこと。

んで、ソースを見てみると、確かに

// Resizing large images - orginal by Christian Montoya edited by me.

//End Resizing

という記述が。

そのなかの

if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

が、リサイズを実行している該当部分なので、上記をコメントアウトすればリサイズ機能をOFFにすることができます。

ちょっとだけカスタマイズ

でも、なんかリサイズのON/OFFをするためにコメントアウトする・しないってのは、なんかスマートじゃないので、もうちょっと簡単にリサイズのON/OFFをできるようにカスタマイズしてみましょうと。

といっても、コードをちょっと追加するだけだけどね。

まずThickboxのJSの最初で変数を定義。

var resizable = false;

んで、さきほどのリサイズの該当コードをif文でくるむ。

if(resizable != false) {//追加

if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
}
} else if (imageHeight > y) {
imageWidth = imageWidth * (y / imageHeight);
imageHeight = y;
if (imageWidth > x) {
imageHeight = imageHeight * (x / imageWidth);
imageWidth = x;
}
}

}//追加

↑それだけです。w

つまり、resizableの値がtrue(false以外)であれば、リサイズを実行して、falseの場合はリサイズしない...という仕組みです。

JSの最初でtrueかfalseを設定すればいいだけなので、ちょっとは簡単になったんじゃないかなと。

 

投稿者 kuro : 21:29 | 固定リンク | ID:823

ページトップ△

thickboxをlightbox風にアニメーションさせるカスタマイズ。

成功者になるための必読ブログとは?

立て続けにThickboxネタ。

軽くて便利なjQuery&Thickboxの組み合わせ。

簡単に画像ギャラリーを作るときなんかはとてもいいんだけど、元祖lightboxに比べるとローディング後に「パッ」と表示されてしまい、ちょっと味気ない。

そこでlightbox風にアニメーションさせる方法があったので、カスタマイズ。

関数を分割する。

ベースはこちら⇒Thickboxをカスタマイズしてみる

表示関連のtb_show()関数を2つに分けて、

tb_open() { 黒背景&表示枠を表示 }

tb_show() { リサイズアニメーション&中身表示 }

という流れだそうです。

まぁ、上記サイトにサンプルもソースコードもあるので、基本そのままDLして実装すればいいんだけど、そのまま使ってみるとちょっと気になることが。

画像をクリックして閉じると、ページトップに飛んでしまう!?ので、さらにカスタマイズ。

普通に「closeボタン」(リンク)をクリックするとそのまま閉じるんだけど、画像をクリックして閉じる(Thickboxのデフォルトの機能)と、画像を閉じた瞬間、なぜかページトップに飛んでしまう。

「パッ」とページが切り替わってしまうので、ページ中盤に画像ギャラリーがあるような場合、ちょっと気持ちよくない。

んで、それを修正する場合、前述のカスタマイズされたthickbox.jsの145行目付近の

$("#TB_Image").fadeIn("fast");
$("#TB_closeWindowButton").click(tb_remove);

に、$("#TB_ImageOff").click(tb_remove);を追加する。

つまり

$("#TB_Image").fadeIn("fast");
$("#TB_closeWindowButton").click(tb_remove);
$("#TB_ImageOff").click(tb_remove);

って感じ。

そうすることで、画像をクリックしてもその場で画像を閉じることができるようになります。

 

投稿者 kuro : 18:11 | 固定リンク | ID:822

ページトップ△

最新版のjQueryとThickboxの組み合わせでrel属性のグルーピングができないエラーと回避方法。

成功者になるための必読ブログとは?

jQueryとThickbox。

普段から何かと便利なAjaxライブラリのjQuery。
プラグインも豊富で、サイトにちょこっと何か一味加えたり、便利な機能を追加したりする場合に重宝しています。

んで、古くからある有名なプラグインのひとつに「Thickbox」があります。

使い方は簡単!でも...

画像や外部のHTMLをページ遷移することなく表示させるギャラリー系のプラグインで、軽快な動きと簡単な設置方法のおかげで多くのサイトで利用されています。

基本的に画像ギャラリーであれば、コードを読み込んで、

<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="thickbox.js"></script>

画像に直リンクをして、そのaタグに「class="thickbox"」を記述するだけ。キャプションを付けたい場合はタイトル属性を記述。

<a href="hoge.jpg" class="thickbox" title="ほげ">ほげの画像</a>

もし、複数の画像を表示する場合、rel属性でグルーピングすると、prev,nextが表示されて、画像を切り替えることができるという機能もあります。

rel属性でグルーピングができない!

んが!

実はThickboxの開発はずいぶん前に終了(?)していてver.3.1でストップしています。

それに対して、大元のライブラリ「jQuery」はどんどん進化していて、現状の最新ver.は1.4.2です。(10/03/26現在)

で、ここで注意。

実は、ThickboxとjQueryのバージョンの組み合わせによっては、このrel属性によるグルーピングができない(エラー)という現象が起こってしまうのです。

※relをつけずに画像単体であれば問題なし。

いろんなサイトで利用しているThickboxだけに、そりゃ困る!という人も多いのでは?
(僕は困りました。w)

ということで、ググッと探してみると、こちらのサイトでThickboxの修正方法がありました。

修正方法は簡単。「thickbox.js」の79行目付近、

TB_TempArray = $("a[@rel="+imageGroup+"]").get();

TB_TempArray = $("a[rel="+imageGroup+"]").get();

と書き換えるだけ。(※ようは@を削除するだけ。)

上記修正を加えたthickbox.jsと最新版のjQuery(ver.1.4.2)との組み合わせで動かしてみたところ、ちゃんとrel属性でグルーピングすることができました!パチパチ!!

 

投稿者 kuro : 16:42 | 固定リンク | ID:821

ページトップ△

2010年3月21日

SMOを意識して、bit.lyを経由して、簡単にツイッターに短縮URLを投稿するJSを設置。

成功者になるための必読ブログとは?

SMOとは?

最近...というかだいぶ前からよく耳にするようになった「SMO」という言葉。

相撲(SUMO)の略語...じゃないですよ。

SEOだのSEMだのの文脈のなかで語られることが多い、

SMO(Social Media Optimization=ソーシャルメディア最適化)とは、ブログやソーシャル・ネットワーク・サービス、ソーシャルブックマーク、OK WaveやYahoo!知恵袋、教えて!GooなどのCGM系サイト(ソーシャルメディア)での認知度や評判を高め、サイトのサクセスやコンバージョンを向上させることを言います。

井戸端会議をオンラインで。

なんて、小難しく言わなくても、井戸端会議で自然発生的に、

『ねぇねぇ、そういえば奥さん知ってる?...いい化粧品があるのよ...』

とクチコミで広がっていく、あんな感覚に似てるんじゃないでしょうか?

んで、そのSMOを提唱したRohit Bhargavaさん(なんて読むんだ?)に言わせると、SMOの実現のためには5つのルールがあるらしい。

  • 「リンクしやすくする」
  • 「ブックマークやタグ付けをしやすくする」
  • 「リンクに対して褒章を与える(リンク元リストやトラックバックリスト)」
  • 「コンテンツをWebの外に持ち出しやすくする(音声やPDFなど)」
  • 「マッシュアップを奨励する」

というもので、ユーザーがその情報を手軽に使いまわせる仕組みが必要なわけです。

普通のブログや情報サイトもそうですが、商売をやっているサイトでは、ユーザーの『クチコミ』に勝る宣伝効果はありません。(いや、そんなことはないか。でもすごく重要なのは確か。)

気軽にツイッターに投稿できるように。

んじゃ、その仕組みとは...まぁいろいろありますが、前述のソーシャルブックマークや、最近は何かと話題のツイッターがいい例ですね。

ツイッターは、140文字という制限がありながら、ケータイやPCから、プライベートや仕事中を問わずユーザーはいろんなことをつぶやいています。

...ということで、先日制作した複数のショッピングサイトにも、ちょっとSMOを意識して、ブックマーク支援ボタンと、ツイッター投稿ボタンを設置しました。

とくにツイッター用のボタンは、ページのタイトルを返すのではなく、個々の商品についてツイート(つぶやき)できるように、商品リスト各々にぶら下がるようにしました。

実装にあたっては、

【bit.ly 対応版】見ているページをReTweetするブログ用ボタン [C!]

や、

Twitterへの投稿リンクの作り方 - 山崎はるかのメモ

GA に対応したblog投稿通知(bitlyでtwitterに流す) | Google Analytics アクセス解析

などで、いろんなスクリプトやプログラムを調べて実験したけど、今回は「Easy Retweet Button」を利用。
(※仕様上、ページが表示された時点で自動でbit.lyで短縮されたURLを返されるので、それがちょっといやなんだけど。)

実際に設置したサイトがこちら。

グループサイトなので、すべて同位置、同系色で設置しましたが、bit.lyのAPIKeyやIDを取得して、あとはちょこちょこっとCSSをいじると、簡単にボタン風(画像を使わずに)のツイッター投稿ボタン(?)が設置できます。

ユーザーが商品を検索し、その商品に興味をもったら、メモがてらツイッターで商品のことをつぶやく...その商品に同じ属性のユーザーが興味をもって...そんな風に情報は伝播していくんです。

まぁ、もちろんネットやソーシャルメディアはいい面ばかりではないけれど、せっかくのツールなので積極的に使ってみようということで。結果が楽しみです。

※10/03/26追記。
...と、設置してすごく便利だったんですが、ページの読み込みに時間がかかるという弊害が起こったので、暫定的に外しました。(汗)

 

投稿者 kuro : 01:55 | 固定リンク | ID:820

ページトップ△

2010年3月 7日

ブランドライターの通販。オイルライター・ガスライター専門販売「ライター・マーケット」

成功者になるための必読ブログとは?

喫煙者には肩身の狭い世の中。

タバコの値段(税金)は上がるし、喫煙場所はどんどん減っていくし...僕らのような時代遅れな人間(喫煙者)には、まさに肩身の狭い世の中ですが、みなさんいかがお過ごしですか?

...って、普通に健康的に過ごしてますよねw

喫煙者として、虐げられ、そして窓際に追いやられているとはいえ(被害妄想w)、僕は、基本的にマナーを守る人間です。
歩きタバコはしないし、喫煙所以外では吸わないし...って当たり前のことなので偉くもなんともないですが(汗)

確かに、タバコを吸わない人にとっては煙は心地いいものじゃないので、その辺はわきまえているつもりです。

タバコはここ数年はずっと赤マル(マルボロ)。
別にうまいと思っているわけでもないんですが...なんとなくね。(汗)

んじゃ、なんでタバコを吸うのかというと...落ち着くとか、気分転換とか言われてますが、ホントはたぶん理由なんてないんだと思う。(じゃやめろよって?)

手持ち無沙汰というか、オレは酒を飲まない(というか飲めない)ので、飲み会のときなんかは、タバコがないと間がもたないとか。

あと、タバコに火をつける仕草が好き...とか。(女の子談w)

...こほん。

と・に・か・く。

当分タバコはやめるつもりはありません。(キッパリ!)

んで、タバコを吸う人にとって必需品なのがライター。

僕は数年前に購入したZIPPOがお気に入りの品です。シルバー製で、小さな赤いルビーが埋め込まれているヤツで、安いZIPPOだと2,000円ぐらいなんですが、ちょっと奮発して40,000円のモノです。w

使い込むうちに手になじむというか、愛着が沸くというか、とにかくこれがいいんです。

そういうこだわりを持った人ってたぶん多いんじゃないでしょうか?

なので、そういうマイノリティな人のために、ブランドライター専門の通販サイトを制作しました。

いろんなブランドが勢ぞろい。

いざサイトを作るうえで調べてみると、いろんなブランドがあるんですね。ライターって。

僕が普段使っているZIPPOはもちろん、デュポンやダンヒルなどの高級ブランドから、ウェンガーやガリガリなどのアウトドア系、アタッシュケースで有名なゼロハリバートンやバッグで有名なハンティング・ワールドなどなど...いろんなブランドが勢ぞろいです。

また、ZIPPOも奥が深くて、いろんなブランドとのダブルネームやコラボレーションモデル(クロム・ハーツなんかが有名ですよね)がいっぱいあるんです。
アニメ好きならば、ガンダムモデルとか、エヴァンゲリオンモデル、歴女(歴史好きの女子)ならば、戦国武将モデルなんてものあります。

高級品になると、もはやライターというよりは芸術品のような細工を施した限定品や記念モデルなんかもあって、マニアックなコレクターの方も、十分に満足できるような品揃えになっています。

どうせ肩身がせまいマイノリティですから、せめて普段使うライターぐらい良いものを持ちたい...そんなあなたにおススメです。

ブランドライターの通販。オイルライター・ガスライターの専門販売ライター・マーケット[Lighter-Market]
http://www.lighter-market.com/

 

投稿者 kuro : 22:52 | 固定リンク | ID:819

ページトップ△

「エチカの鏡」のメラビアンの法則について。

成功者になるための必読ブログとは?

メラビアンの法則

さきほど観ていたフジテレビの「エチカの鏡」で、「メラビアンの法則」が出てきた。

"一般的に知られている「メラビアンの法則」"とは、大雑把に言うと、

「人は第一印象のうち、55%を見た目で判断する」

というもので、アルバート・メラビアンが1971年に提唱した法則で、コミュニケーションの基本&定説として、話し方講座やコミュニケーションセミナーで語られています。
具体的なパーセンテージは以下のとおり。

  • 言語情報:7%(言葉そのものの意味)
  • 聴覚情報:38%(声の質・早さ・口調)
  • 視覚情報:55%(表情・見た目・身振り)

んが。

ちょっと待て。このメラビアンの法則..."一般的に知られている"法則と実際の実験内容とは、かけ離れていた...ということをご存知でしたか?

解釈&使い方には気をつけよう。

実は、過去の記事でも何度か引用していて、恥ずかしながら、以前は僕もこの法則を鵜呑みにしていました。
(ちなみに、モテコンではこの間違い↑は修正済みです。w)

けれども、この実験は「好意・反感などの態度や感情のコミュニケーション」において「メッセージの送り手がどちらとも取れるメッセージを送った」場合、「メッセージの受け手が声の調子や身体言語といったものを重視する」という事を言っているに過ぎないんです。

つまり、視覚情報、聴覚情報、言語情報などが矛盾した場合、どの情報を優先するか...ということを検証したに過ぎないわけで、「コミュニケーション全般」に当てはまるような、絶対的な法則ではないんです。

この「メラビアンの法則」、確かに数字が具体的だったり、名前が個性的だったりして、まさにセミナー向けな感じですが、引用の仕方は注意すべきです。(ついでに、「メラビアンの法則」を「コミュニケーションの絶対法則」と言ってるようなセミナーはニセモノってことw)

ただし、僕も全否定しているわけじゃなくて、コミュニケーションにおいて「見た目」が重要なのは、メラビアンを持ち出すまでもなく周知の事実。身だしなみや笑顔、立ち振る舞いなどには気をつけるべきです。

さらに、実験にもあるように、「好意の態度や感情」に関するコミュニケーション...つまり、恋愛においては、本当の「メラビアンの法則」(視覚・聴覚・言語情報の矛盾において、視覚情報が優先される)は有用なわけで。

相手が一生懸命自分に向かって話をしているとき、「にっこり笑って、相手の話していることに耳を傾けて相槌を打つ」...当たり前のことですが、相手に好意を持ってもらうには鉄板ですよw

 

投稿者 kuro : 21:49 | 固定リンク | ID:818

ページトップ△

2010年3月 4日

僕は「七福神」だそうです。ツイッターでアカウント名占い(診断)

成功者になるための必読ブログとは?

あなたを○○に例えると?

昨日ローンチした、

つながりで、なんか面白いことができないかなーと思い悩んだ末、

最近ツイッターで流行ってるアカウント名占い(?)で、

を作りました。

地味に盛り上がってるみたいです。w

ツイッターのアカウント名を入力すると、

「あなたは○○に例えると『ほにゃらら』です。」

と勝手に(?)診断してくれるアレですw

んで、「仏像ったー」は、アカウント名を入れると若者の間で密かにブーム(ほんとか!?)の、仏像や密教法具などに例えてくれという優れもの(?)でっす!

っつことで、ツイッターアカウントを持っていて、暇な人はぜひやってみてくらはい。
あ。ちなみにハッシュは #butsuzo で。(マニアさんたちの間でちょこっとだけ盛り上がってるみたいです。w)

※ちなみにオレは「七福神」でした。
(丸いからか!そうなのかっ!!!)

...が、がんばってダイエットします。...orz
七福神飾ったら、ご利益で痩せないかなぁ...。

ツイッターアカウント占い(診断)「仏像ったー」

 

投稿者 kuro : 01:22 | 固定リンク | ID:817

ページトップ△

2010年3月 3日

ニッチ&マニアック!仏像の通販。仏具・仏画専門販売のショッピングモール「仏像.org」

成功者になるための必読ブログとは?

あなたを守るものはだれ?

「ねぇねぇ、あーたの守護梵字なに?」

「えー、ねずみ年だから...千手観音のキリーク」

「まじで!?あーしもキリークだよ!いのしし年だから阿弥陀如来だけど」

こんな会話...渋谷のマックとかでギャルたちが話しているのをよく耳にしますよね。

...。

...しないか。

っつか「キリーク」って何だよ!?って感じですが。

でも、もしかしたら近い将来ほんとにこんな会話を普通に耳にする...なんてことが起こるかもしれません。

ファッション?アート?マニアックな趣味??

よくダウンタウンのまっちゃんとか、漢字やお経が書かれたようなTシャツなんかを着たりしていて、若者(とか言っちゃうとおっさんくさいですが。汗)の間でも、仏画や仏具、仏像などの仏教グッズが流行ってるそうです。
(なんかこの辺は、外国人が浅草でお土産を買う感じに通じるものがありますが...w)

若者に限らず、そもそも、昔から仏像・仏閣マニアってのは結構いるもので、漫画家(?)のみうらじゅんやタモリなんかはその筋(どの筋?)では有名だそうです。

ずいぶんとマニアックな気もしますが、仏像や仏具・仏画などは宗教的な象徴・信仰の対象であるとともに、それと同じぐらい「彫刻・絵画アート」としての価値も高いんですよね。

...ってことで、よりニッチに!そしてよりマニアックに!!

仏像の通販。仏具・仏画の専門販売「仏像.org」

をローンチしましたっ!!(パチパチっ!!!)

いろいろと見てみると、仏像ってなんとなく「すっごい高い!」ってイメージがあったけど、サイズとか素材によって値段がまちまちで、15,000~20,000円といった、意外とお手ごろなものも結構あるみたい。w

もちろん、名のある作家さんが作ったものや、総金箔貼りの本気モード(?)なものなんかは何十万~何百万...なんてのもあるみたいだけど、「マニアックな趣味」と考えれば、手の届かないものじゃないんだなーって思いました。

ちなみにオレ自身は無宗教...というか、クリスマスは思いっきり楽しみだし、新年はお寺や神社でお参りするし、父方は浄土真宗だし、母方は神道なので...いろんな神様仏様に守られてるんだぞと、都合のいい解釈をしておりますw

クエリを組み合わせて商品を絞り込み!

んで、制作のお話。

仕組みは...もうお分かりだと思いますが。
宝石(ルース 裸石)の通販サイト「ジュエル・マーケット」や、万年筆の通販サイト「ペンズ・マーケット」と同じで、PHP&APIでごにょごにょです。

ただ、APIで提供されるカテゴリIDで絞り込むと製品が限定されてしまうので、既存のIDでは絞り込まずに、基本クエリと除外クエリを組み合わせて検索結果を出すようにしています。
なので、たまにへんな商品(仏像と関連のない商品)が出るのはご愛嬌ってことでw

仏像や仏具・仏画は今が熱い!?

仏像や仏具・仏画を「アート」とか「流行」と言ってしまうと、なんか薄っぺらい感じがしちゃうかもしれないけど、そういうものに興味を持つ"入り口"としては、趣味としての「仏像コレクター」なんてのも、案外おもしろいのかも...なんて思ったりw
(そもそも一休さんなんかも、仏教を布教するためにいろんな奇行をした、当時最高の"パフォーマー"なわけだし。)

あ。

ちなみに、「キリーク」とは守護梵字と呼ばれるもので、それぞれの生まれ年(干支)によって、決まっている守護尊を表したもの。一つの梵字で複数の仏を表すものもあって、干支が違うのに、守護梵字が同じ...ってことがあるらしい。
(※梵字とは、インドに伝わる古典言語サンスクリット語を表記するための文字。)

各守護梵字は以下のとおり。

  • キリーク:子年(千住観世音菩薩)戌・亥年(阿弥陀如来)
  • タラーク:丑・虎年(虚空蔵菩薩)
  • マ ン:卯年(文殊菩薩)
  • ア ン:辰・巳年(普賢菩薩)
  • サ ク:午年(勢至菩薩)
  • バ ン:未・申年(大日如来)
  • カーン:酉年(不動明王)

なんだか「ジョジョの奇妙な冒険」のスタンドみたいな感じすな。
(そもそも「スタンド」という概念自体、守護神や守護尊からきてるだろうし。)

自分の守護尊が、どんな仏さん(仏像)なのかは、サイトで調べてみてねw

仏像の通販。仏具・仏画の専門販売「仏像.org」
http://www.butsuzou.org/

 

投稿者 kuro : 15:41 | 固定リンク | ID:816

ページトップ△