Syntax Highlighterとか使わずにCSSのみで見やすくする

こんな感じです。

pre {
  display:block;
  font:normal 12px/22px Monaco,Monospace !important;
  color:#CFDBEC;
  background-color:#2f2f2f;
  background-image:-webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:-moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:-ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:-o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  background-image:repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
  padding:0em 1em;
  overflow:auto;
}

中身のスタイルをそのままコピペでオッケーです。

カラー調節はお好みで。

ただ、コレ…

こんな感じで背景を先に作ってその上に文字を重ねているだけなので
・フォント
・フォントサイズ
を変えちゃうとズレちゃいますけどね。

Selectの値が変化したら、Ajaxで値をPOST。

要するにこんなSelectがあって並び替えをしたいわけですが、「セレクト→実行ボタン」とゆー、２段階のアクションではなくselectの値が変わったら、その値をAjaxでPHPにPOSTして、ソートしなおしたい…というわけです、はい。
▼▼



風俗系のポータルサイトの殆どは、細かな条件を指定して「検索」とやるのですが、あれって結構使いづらいなと個人的には思っているので、ドキポケネットではSelectでソート内容を決めるだけという方法を取りました。

大抵のサイトは、ラジオボタンやチェックボックスで項目を選択して検索するという方法だと思いますが、そもそもあれってそこまで細かく選択してもらう必要あるのかな…(ry

もっとシンプルに
「年齢順にソート」
「バスト（カップ）サイズでソート」
とかやったほうが、わかりやすいんではないかと。

で、「選択」→「検索ボタン押下」という２段階の操作すらいらねーっす、ということで、selectメニューから一つ選択したら新たにソートし直すやつ、やります。
結構前にやった「PHPとAjaxを使って「もっと読む」ボタンをjQuery-Mobileページに簡単に実装。」って記事の応用です。

HTML側

<form method="post" action="#" id="form">
<select name="category" id="catgeory" data-mini="true" class="cng">
<option value="1">人気ランキング順</option>
<option value="2">新着順</option>
<option value="3">バストカップの大きい順</option>
<option value="4">背の小さい順</option>
<option value="5">年齢の若い順</option>
</select>
</form>

<div class="ui-grid-b thumbs" id="items"></div>
<a href="#" onclick="categoryLoad();" data-role="button" id="loading">もっと見る</a>

<script>
var start = 0;
var num = Math.floor( Math.random() * 100 );
var cate = $("select.cng option:selected").val();

    function categoryLoad() {
        $("a#loading").html("<img src='/sp/images/loadingnow.gif'>");    
        $.post('items.php', { start : start, num : num,category : cate},
        function(res){
            $("a#loading").html("もっと見る");
            $("#items").append(res);
        });
        start += 15;
    }//categoryLoad

    $("select.cng").change(function () {	  
	      $("#items").children().remove();
              cate = $("select.cng option:selected").val();
	      start = 0;
              num = Math.floor( Math.random() * 100 );

	      categoryLoad();
	  
    }).change();

</script>

要するに「$("select.cng").change(function () {～})」でselectの変更があったときに「categoryLoad()」とゆーfunctionを呼び出しているだけです。
selectの選択されたoptionの「value」の値は
「$("select.cng option:selected").val();」
ってとこで取得してます。

ただそれだけです。
jQuery使うと簡単ですよね。

むしろ、ここを見たほうが分かりやすかったり。
▼▼
jQuery日本語リファレンス

ま、続きは個人ブログの方で。
http://webmage.pro/blog/archives/553

スマホ最適化によるAdwordsの広告ランク向上のメリット

コンテンツ最適化

コンテンツの最適化について。

上記エントリーにて、せっかくアドワーズ広告を回すならスマホ対応、あるいはスマホ対応できないのであれば広告掲載デバイスからモバイル計を外して、広告のリンク先コンテンツを最適化しなきゃダメだよね…という話をしました。

那覇市の牧志公設市場にあるお肉屋さん「和ミート」さんのアドワーズ広告はそれが出来ていないので、和ミートさんのコンサルティングをしている会社はダメダメだよね…という話になったわけです。

まあ、ぶっちゃけ僕が元々勤めていた会社なわけですがwww


なぜ、僕がこんなことを言うのかというと…。

友人と一緒に、公設市場絡みのコンサルに関わっているからです。
基本的にはボランティア状態だったのですが先月、そちらの団体が社団法人化しましていよいよお仕事になるのかな…という状況です。

対して成果も挙げられないようなコンサル会社に高いお金を払うくらいなら、市場とその中の店舗活性化のために立ち上げた社団法人で「安く」あるいは「無償で」面倒をみることが出来れば…と思っている次第です。

和ミートさんしかり、他の店舗さんしかり…胡散臭いコンサル会社にかかっている費用をなくして、個々の店舗ではなく市場全体を盛り上げていこうじゃないか…なんてプランをいろいろ仕込んでいる最中です。

そんな話はさておき、本題は僕のブログでどうぞ
http://webmage.pro/blog/archives/550

jQueryMobile使用時のAdwords『Call as Conversions』について

Call as Conversions

…いわゆる「電話コンバージョン」についてです。

スマートフォン向けのアドワーズ広告を掲載しているなら、サイトからユーザーが電話をしたのかどうかを測りたいですよね。

特に、情報サイトなんかでは「お店に電話」ボタンがあったりなんかして、このボタンからユーザーが電話をかけてるのかな…というのを測るために重要です。

この「ユーザーが電話をかけた」というコンバージョンなのですが、効果を測る上で絶対に外せない（特にポータルサイトでは）と思うんですが、有名どころのシテ●ヘブンさんも、沖縄のトレ●ディも、やってないですね。

Adwords…ということは抜きにしても「JavaScript(Ajax) + PHP」で実装出来たりするんですが、やってない。

実にもったいないなぁ…と思うわけです。

まあ、ドキポケネットでは、スマホページにしっかりコンバージョンタグを埋め込んで効果測定をしております。


今回はjQueryMobileのAjaxを使用してるので、やり方をメモ。

実際のコードは、こんな感じです。

        <script type="text/javascript">
        /* <![CDATA[ */
        goog_snippet_vars = function() {
          var w = window;
          w.google_conversion_id = 9*******3;
          w.google_conversion_label = "2*****************M";
          w.google_conversion_value = 0;
        }
        // DO NOT CHANGE THE CODE BELOW.
        goog_report_conversion = function(url) {
          goog_snippet_vars();
          window.google_conversion_format = "3";
          window.google_is_call = true;
          var opt = new Object();
          opt.onload_callback = function() {
            if (typeof(url) != 'undefined') {
              window.location = url;
            }
          }
          var conv_handler = window['google_trackConversion'];
            if (typeof(conv_handler) == 'function') {
              conv_handler(opt);
            }
          }
        /* ]]> */
        </script>
        <script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion_async.js"></script>

このコードを、Ajax遷移元のページに埋め込んで、遷移先のページの電話ボタンに以下のように設定します。

<a href="tel:000-0000-0000" data-role="button" onclick="goog_report_conversion('tel:000-0000-0000')">お店に電話する</a>

要するに、クリック（電話発信）があったら先程の遷移元のコンバージョンコードを呼び出すというわけです。

正確には電話番号をクリックしたユーザーを計測…で、発信を計測するわけではありませんが。



結果については、引っ越し先ブログにて。
http://webmage.pro/blog/archives/515

コンテンツの最適化について。

世の中には、SEOだマーケティングだといって、それでご飯を食べてらっしゃる方もたくさんいるのだと思います。

かくいう僕も、SEOだマーケティングだ、効果的なリスティングだ…といって、自分がWebmasterをしているサイトに広告を出稿してもらおうと躍起になるわけです。

まぁ、僕の場合は（Google検索に関しては）競合がまったくいないのでけっこう楽だったりするんですが、競合ひしめくレッドオーシャンでキーワードを入札している方々にしてみれば、それこそ死ぬような想いをしているんだろうな…と思います。

こないだ、酒豪伝説というサプリメントをキーワードに加えようとしたら、入札単価が220円とか出て、あほらしくなりました。

あくまで予想…ですけど、広告ランクが10まで上がっても、やっぱり30～50円くらいはかかるんじゃないかなとか思ってます。


それはさておき。

Adwords広告を回すのはいいんですけど、リンク先のコンテンツをきちんと最適化出来てますか？
特にPCサイトとスマホサイト、ちゃんと作ってキャンペーンやリンク先を分けてますか？

『プロ』の方なら当然やっているんでしょうけど、中には「コンサルティングやってます！」って会社でも、それが出来ていなかったりするので、みなさんも怪しげなコンサル会社、リスティング会社には気をつけましょう。


コンテンツの最適化、あるいはリンク先の最適化が出来ていないと、せっかくの広告費をドブに捨てているのと一緒ですから。


具体例をあげましょう。

例えば、僕が牧志公設市場の和ミートさんという有名なお肉屋さんのラフテーを通販で購入したいな…と考えます。
ちょっと出先で、待ち時間の間にスマホで購入しようと思い、「ラフテー」「和ミート」というキーワードで検索しました。

通常であれば、Googleさんが

あ、こいつは和ミートのラフテーを購入したいんだな。じゃあ、それにあった検索結果を返してやろうず。

ってことで、和ミートのサイトを検索結果の上位に持ってきます。
僕は、そこをクリックして、サイトに行き、購入する…という流れになるわけです。

じゃあ、実際にスマホで検索してみましょう。



おや？
検索結果の上部に広告が出てきましたね？

目的の和ちゃんラフテーが数量限定の格安で販売しているという内容の広告です。

ここで僕はピンときました。

ははぁ…これはいわゆる「ワケあり」の商品で、形が荷崩れちゃって商品価値がなくなっってしまったけど味は変わらない…とかいって販売しているやつだな？

これは通常の商品を購入するよりおトクかもしれない。
今回はこちらを購入しよう。


というわけで、検索結果ではなく広告の方をクリックします。
これで、和ミートさんはGoogleに広告費を払わなければならなくなりました。

金額はいくらか知りませんが、多分数十円…といったところでしょうか。

クリックした先はこちら。



みなさんもやってみればわかると思うのですが、そこはPC向けのサイトです。


さあ、僕はそのサイトで商品購入までいくでしょうか。



答えはノーです。
多分、僕だけでなくほとんどの人が「ノー」だと思います。
確かに、スマホはPCのサイトを閲覧することが出来るわけですが、ピンチイン・アウトを繰り返しながら商品購入する人は皆無でしょう。


結局、僕はそのサイトを離れて検索結果に戻り、スマホで和ちゃんラフテーを購入できるサイトを探すのでした…orz



最近、僕と同じような行動を取る（モバイル端末で購入する）人って増えてるんですよ、結構。
ガラケーやスマホで通販をする理由としては以下のようなものがあげられるんじゃないでしょうか。

・空いた時間を有効に使って買い物をしたい
・決済方法が豊富（というより、携帯料金と一緒に支払いが出来る）
・数量限定商品は早い者勝ちなので、どこにいても買い物がしたいから

最初の理由はそうでもないと思いますが、2番目の携帯電話料金と一緒に支払えるのは、魅力的です。
特に、ブラックな方々にとっては。

あとは、グルーポンに代表されるようなフラッシュマーケティングも、スマホ使ってでも購入したい…と思わせますよね。

以前に買いた記事にもあるように、スマホの検索ボリュームは既にPCのそれを上回っていたり、中にはダブルスコアでブッチギリ…なんてこともありますので。


まあ、和ミートさんのサイトは今後のスマホ対策に期待するとして…。

糾弾されるべきはコンサル会社ですな。
クライアントのお金をドブに捨てるようなマネをして、本当にそれでプロなんですか？…と問いたいですね。
ましてや、求職者支援訓練とかやってて、国から助成金貰って人にモノを教えてたりするようなら、とんでもないハナシです。
人にモノを教える以前に、自分が勉強しなさいっ！…という。

まあ、そんな会社ないと思いたいですけどww


みなさんも、リスティングをコンサル会社に委託しているような場合には、スマホで検索してリンク先が最適なコンテンツになっているかどうかを見てみましょう。
今回の様なケースであれば、即刻契約を解除した方がいいですね。
だって、プロとしての仕事が出来てないんだもん。



民法上はどうなんだろう…。
不完全履行による契約解除が有効なのかどうか…。

高いリスティング費用・コンサル費用だけ払って、売り上げがほとんど変わらない…なんて場合にはただの「損害」ですよね？

盲目的にコンサル会社にお金を払うのではなく、商売をするのであれば自ら学ぶという姿勢が必要なのかもしれません。

たまには、友人のお仕事でも紹介してみようかな…と。

世の中には、新しい技術や自分の知らない技術を取り入れるのが上手…というか貪欲な方がいます。

まずはこちらを見ていただいて…
▼▼
http://knightscompany.com/okinawa/

那覇市の隠れた観光名所、福州園をパノラマで紹介するサイトです。


うん、凄いね！


ちょっと前に、DOKIPOKE.NETでラブホテルの検索ができるページ作って、「krpano」使って中を見れるようにしようと考えてるんだけど、写真撮影がなかなか厳しくて…という相談をしたら、こんなサンプル作ってくれました。


完璧すぐる。。。


というわけで、krpanoの詳細（？）と友人の件については引越し先のブログにて。
http://webmage.pro/blog/
までどーぞ。

わかっているようで、わかってないことの方が多い件。

世の中、分かっているようでわかってない事の方が多い…というのが定説です。

誰よりも知っているハズの自分のことですら、分からないことだらけなわけで。

そういったことを頭に入れて発言しないと、自分より知識・経験がある人から見たら

「あーこいつ、分かってないな」

とか思われちゃうわけです。


…という訳で、僕がこのブログに書いている事でも他の人から見たら
「いや、それ違くね？」
なこともあると思うので、そのへんはどんどんツッコミを入れてもらえると嬉しいです(ﾟ∀ﾟ)


で、本日の考察はこちら
かっこいいWEBは物が売れるのか(永江一石サンのブログ)

かくいう僕も何も分かってないわけですが、広告業界にいた経験からちょっと考えてみたいと思いました。


…が、アメブロはいろいろめんどくさいのでブログを移動しました。
と言っても、自分でワードプレスのブログ始めただけですが。



詳細はこちらでどぞ。
▼▼▼▼▼▼
こっちに引っ越しました。

「ORDER BY」句で複数条件を指定する。

SQLを投げるとき「ORDER BY」句に複数の条件を指定したいときって結構あります。

そんな時は「,」で区切って条件を複数指定することが出来ます。

SELECT * FROM table ORDER BY name, id
          ▼
先に「name」でASCしてから、「id」でASC。


SELECT * FROM table ORDER BY name DESC, id
          ▼
先に「name」でDESCしてから、「id」でASC。

もちろん、RAND()関数との組み合わせも( ｀д´)b ｵｯｹｰ!

SELECT * FROM table ORDER BY flg DESC,RAND()
          ▼
ランダムに取得したデータをflgのDESC順にソート。

RAND()関数との組み合わせでよく使うのは「先に広告料金をいただいている店舗のデータを表示させたい」って時ですかね。

「flg=0」→「広告ではない」
「flg=1」→「広告扱い」

のときに、さっきの「ORDER BY」句を使うと

広告扱いのデータをランダムに表示したあとに、広告ではないデータをランダムに表示…という順で表示出来ます。

スマホサイトのマネタイズは、この方法が一番いいんじゃないかな～と思ってます。

ドキポケネットの場合、ファーストビューが12件なので、各カテゴリあたり「４店舗×3人=12人」という枠の売り方がいいのかも。

ファーストビューに表示されるのとそうでないのとでは、全然クリック数が違ってくるんですよね。