12-09.net
>> TOPへ戻る

12-09.net :三十路の会社員が日々の仕事と家庭と趣味と子育てに追われまくるブログ



Archive for the ‘ナレッジ’ Category

Google AJAX Feed APIの実装メモ

no comment


久しぶりにエセWebデザイナーモード。


スパイス屋のサイトオフィシャルブログの最新記事を自動で表示させたくて、RSS Feedをautomaticに引っ張ってくるjqueryプラグインを探したりしてたのですが、Webに転がってるものの多くは、ドメインを超えて引っ張ってこれなかったり、フィードの種類やバージョンに制限があったりと意外に使いにくく、汎用性や手軽さ等々鑑みて、Google AJAX Feed APIを利用するのが良かろうという結論になり。


最終的には、Javascriptを自分で組み立てる必要に迫られてしまい、大して手軽ではなかったのですが、何とかやり終えたのでメモを残しておきます。


ちなみに、全然Javascriptの説明にはなっていません。(ぼくがど素人なため・・・)


—–
【MY要件】

・他ドメインのブログ最新記事を、サイト内の一部エリアに表示させたい。
・表示は自動更新。
・件数は新着順に5件。
・内容は「エントリタイトル+リンクURL(タイトルをリンクに)」
・見た目が自在にCSSで調整できるように。




【Google AJAX Feed API 実装メモ】

  1. こちらのページからGoogle APIのAPI keyを取得。

  2. こちらのサイトを参考に、外部JSファイルを作成。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    
    google.load("feeds", "1");
     
          function initialize() {
    		var feed = new google.feeds.Feed("フィードURL");
    		feed.setNumEntries(5);
    		feed.load(dispfeed);
     
    		function dispfeed(result){
    		if (!result.error) {
    		var container = document.getElementById("feed");
    		var htmlstr = "";
    		for (var i = 0; i < result.feed.entries.length; i++) {
    		var entry = result.feed.entries[i];
     
    		htmlstr += '<div class="任意のCSSクラス">'
    		htmlstr += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
    		htmlstr += "</div>"
    		}
     
    		container.innerHTML = htmlstr;
    		}else{
    		alert(result.error.code + ":" + result.error.message);
     
              }
            }
          }
    google.setOnLoadCallback(initialize);



  3. HTMLファイルのヘッダに、下記を記述してJS呼び出し。「API Keyを入力」の箇所には、1で取得したkeyをコピペ。
    ※この場合は「blogfeed.js」という外部JSファイル名。

    1
    2
    
    <script type="text/javascript" src="http://www.google.com/jsapi?key=API Keyを入力"></script>
    <script src="js/blogfeed.js" type="text/javascript"></script>




  4. フィードを表示させたいHTML内の場所に下記を記述。

    1
    
    <div id="feed"></div>



  5. CSSでフィード表示箇所の見た目を調整。

  6. 以上。


    以下、スクリプトの意味。


    下記が「前置き」みたいなもんです。
    ・「google.feeds.Feed」の後ろに、対象とするフィードのURLを指定。
    ・「feed.setNumEntries」で新着何件を引っ張ってくるか指定。
    ・「feed.load(dispfeed);」は実際の表示を指定。(このママでOK)

    1
    2
    3
    4
    5
    6
    
    google.load("feeds", "1");
     
          function initialize() {
    		var feed = new google.feeds.Feed("フィードURL");
    		feed.setNumEntries(5);
    		feed.load(dispfeed);



    この辺りは、表示の概要を記述している箇所だと思います。

    1
    2
    3
    4
    5
    6
    
    		function dispfeed(result){
    		if (!result.error) {
    		var container = document.getElementById("feed");
    		var htmlstr = "";
    		for (var i = 0; i < result.feed.entries.length; i++) {
    		var entry = result.feed.entries[i];



    ここで当該箇所の見た目をinnerHTMLで指定。
    見た目はCSSを適当に記述して指定。

    1
    2
    3
    4
    
    		htmlstr += '<div class="任意のCSSクラス">'
    		htmlstr += '<a href="' + entry.link + '" target="_blank">' + entry.title + '</a>';
    		htmlstr += "</div>"
    		}



    この辺りではinnerHTMLの定義付けとエラー処理を記述。

    1
    2
    3
    
    		container.innerHTML = htmlstr;
    		}else{
    		alert(result.error.code + ":" + result.error.message);



    ここは、閉じタグと、あとは「敬具」みたいなもんですな。

    1
    2
    3
    4
    
              }
            }
          }
    google.setOnLoadCallback(initialize);



    我ながらどんな説明だ、と思いつつ、これ以上分からないので仕方ないのです。


    で、なんでわざわざ書いているかと言うと、Google AJAX Feed APIのデフォルトコードや、様々な参考サイト見ても、自分のサイト要件にぴったり合致した記述が見つからなかったんですよね。
    なので、色々調べて試した結果としての「自分の要件にぴったり合致した記述」を、メモしておきたいなと思いました。
    というか、メモしとかないと次見た時に完全に忘れちゃう・・・


    以上、完全に自分用のエントリでした。


    そうそう、完成したパーツですが、下記赤枠内のような形で割と綺麗に収まりました。良かった。







    なんか間違ったことしてたら、コメント欄にてご指摘下さいませ。。。




このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Written by poissonvolant

8月 23rd, 2011 at 10:34 pm

>> コメントをどうぞ

Posted in ナレッジ

Tagged with , ,

Trackback URL:

WP Super Cacheをロリポップ環境で使う方法

no comment

本ブログはロリポップサーバー上でWordPressというCMSを使って運営しています。

Wordpressは非常に優れたブログCMSで、その多様な特徴の一つに「ページを動的生成する」というものがあります。
これにより、投稿時の静的html再構築時間がなく、管理運営上も非常に快適に使用できます。

が、アクセスの度にページが動的生成されるので、アクセス集中時など、どうしてもブログ自体重くなりがちです。

そんなWordpressの欠点(一概に欠点とは言えないけど便宜的に)を解消してくれるのがWP Super Cacheというプラグインです。

これは、Wordpressの各ページをサーバー上にキャッシュすることで、同一ページへの複数アクセス時に負荷を軽減してくれるスグレモノなのです。

実は本ブログでも、時折サイト表示の重さを体感する時が何度かありました。

本ブログは以前に一度、管理人の不注意によりクラッシュしたことがあり、復活させた時にクラッシュ前に入れていたプラグインはすべて再適用したつもりだったのですが、WP Super Cacheを入れ忘れていたことに気付きました。

そこで今回、慌てて再インストールしようとしたのですが、一瞬つまずいたのでメモを残しておきます。

—–

WP Super Cacheをロリポップ上のWordpressに適用した際、そのままだと下記メッセージが表示されて有効化することができません。

セーフモードが有効なため、このプラグインの動作に問題が発生するかもしれません。お使いのサーバーではファイルの読み書きの許可の前に PHP スクリプトのオーナーを確認するように設定されています。

あなたもしくは管理者が、このプラグインスクリプトのグループオーナーをウェブサーバーのユーザーと一致するように変更すれば動作するようになるかもしれません。/home/users/1/lolipop.jp-suginamiku/web/wp-content/cache/ ディレクトリのグループオーナーは変更する必要があります。詳細は safe mode manual page を参照してください。


対策ですが、ロリポップの管理ページにログインして、
「Webツール – PHP設定」
メニューを開きます。

使用しているドメインの一覧が出てきますので、対象ドメイン(あるいは「すべてのドメイン」)の「設定変更へ」をクリック。

変更可能項目の一覧画面へ遷移するので、そこで「safe_mode」をONからOFFに変更。
「php.iniを設定する」ボタンクリックで完了。

もう一度Wordpressの管理画面に戻って、WP Super Cacheプラグインを選択すると、先ほどのメッセージは消えているはず。
プラグイン設定画面の「キャッシング利用 (推奨)」にチェックを入れ、適用して終了。


以上でごわす。




このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Written by poissonvolant

4月 14th, 2011 at 10:17 pm

>> コメントをどうぞ

Posted in ナレッジ

Tagged with ,

Trackback URL:

Facebook広告を試してみたよ(人柱的レポ)

no comment

個人でやってるスパイスショップの方で、Facebook広告を試してみました。
「興味あるけど効果あんの?」なんて思ってる人が多いと思いますので、人柱的にレポートを残しておきます。



  • STEP1:広告クリエイティブの作成

    広告の作成は非常に簡単。
    facebook左メニューの「広告とFacebookページ」→「広告キャンペーン」にて
    ページ右上の「広告を作成」ボタンをクリック。
    広告設定画面にて、リンク先・URL・タイトル・本文・画像を設定。

    すると、こんな感じで広告が作成できます。カンタン! イイネ!





    その後、ターゲット設定をします。
    設定できるのは、国・年齢・性別・趣味/関心(フリーワード指定)・婚姻有無・言語・学歴・勤務先あたり。

    今回は、
    * 日本に住んでいる
    * 18歳以上
    * スパイス&ハーブの専門店「スパイスラック」とつながりになっていない
    という設定でできるだけ広い訴求を狙ってみました。



  • STEP2:広告キャンペーン、価格設定、日程を設定

    次に広告の運用ルールを設定します。
    キャンペーン名(なんでもいい)・1日の予算・実施日程・入札価格の上限(CPMまたはCPCベース)を設定。
    ぼくは1日の上限金額1000円、入札価格上限はCPC85円で設定しました。
    決済はクレジットカード。

以上。
これだけです。
本当に簡単。AdwordsなどのPPC広告触ったことある人ならすぐ理解できると思いますし、触ったことなくても10分もあれば運用が始められます。


で、気になる結果ですが、





4-5日運用して、大体こんな感じ。


これだけだと「だからどーやねん」と言われそうですので、もうちょっと突っ込んで説明します。
まず今回、ぼくはFacebookページへの誘導をコンバージョン(成果)と設定して広告を運用しています。
Facebookページへの誘導結果として最も分かりやすいKPI(指標)は、「いいね!」の数です。

その意味では、3000円くらい投入した段階で、新規の「いいね!」は70程度増えました。
CPC(Cost Per Click)ならぬCPI(Cost Per いいね!)は42.8円。これを高いと見るか、安いと見るか。
また、実際のCPCは設定よりもかなり低くなるものの、予算消化のスピードはおそろしく早いです。
うっかり1日の上限金額を設定し忘れたりすると、確実に死亡します。

Facebookページから先のECサイトへの誘導及びコンバージョンは不明です。
(うっかりトラッキングURLにし忘れちゃった・・・)


しかし、あくまで感覚的には、ECサイトの場合は、外部サイトにおけるコンバージョンには繋がりにくい気がします。
おそらく今回についても、FB経由の売上は1-2件しかないと思います。
これってつまり「いいね!」する気軽さとECサイトのお金を落とす行動のインセンティブに差がありすぎる、ということだと思います。
逆に、無料キャンペーンやちょっとしたWebサービス等、利用に対する行動障壁が低いものに対しては、かなり相性が良さそう。


また、現状Facebookでリーチできるユーザーのほとんどが、「ITリテラシーがほどほどに高く」「日々かなりの量の情報を消費しながら過ごしている人達である」点については、留意しておくべき部分かもしれません。
これってつまり、「ちょっとやそっとではWebでお金を払ってくれない」人々です。
しかしながらこの人達は「Webで割とカジュアルにクレカ決済をすることに慣れている人」でもあるわけで、やはりどこまで広告対象を絞り込めるか、がこれ系のソーシャル広告のキモですね。(当たり前の話に帰結してしまいましたが・・・)



総括としては、
  • Facebook広告は非常に手軽で使いやすいツールである。
  • カジュアルな反応を集めるには最適なツールである。
  • しかしながら、まだ「ソーシャル広告革命」と言うほどではなく、今後どこまで訴求対象を絞り込んで予算の効率化ができるか、がキモである。
という感じでしょうか。


以上、何かの参考になれば幸いです。




このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Written by poissonvolant

4月 12th, 2011 at 2:59 pm

>> コメントをどうぞ

Posted in ナレッジ

Tagged with ,

Trackback URL:

【素人向け】MacでPHPを動かす方法

no comment

個人的メモも含めて。
やんごとなき理由からMacローカル環境でPHPスクリプトを動かす必要がありまして、その方法について。
MacOSのバージョンは、OS X 10.6.4 Snow Leopardです。

【やること】

 ・ローカルPC上でApacheを起動
 ・Apacheの設定ファイル(httpd.conf)を変更できるように、権限を設定
 ・PHPを動かせるようにhttpd.confの内容を変更
 ・Apacheを再起動


【細かい流れ】

  1. Macのシステム環境設定から「インターネットとワイヤレス – 共有」をクリック。
  2. 左側のチェックリストのうち「Web共有」にチェック。この時点でApache(Apache2)が立ち上がる。
  3. 次に設定ファイルを書き換えるため、権限変更。Finderのメニューバーの「移動」→「フォルダへ移動」を選択。
  4. 「フォルダの場所を入力」ダイアログで「/etc」を指定。
  5. 「/etc」内「apache2」→「httpd.conf」を右クリック→「情報を見る」をクリック。
  6. 「httpd.confの情報」ダイアログの最下部右にある鍵マークをクリック。鍵が外れたアイコンに。
  7. 同ダイアログ内左下の「+」をクリックし、「”Finder”に変更を許可するには〜」ダイアログにてパスワードを入力。
  8. 「新規ユーザまたは新規グループを選択」にて自分のアカウントを選択。
  9. 「httpd.confの情報」ダイアログの「共有とアクセス権」に自分のアカウントが出現するので、自分のアカウント名のアクセス権を「読み/書き」に変更。
  10. 右下の鍵マークを再度クリックして鍵がかかった状態に。これで権限設定は完了。
  11. httpd.confを開き、「#LoadModule php5_module libexec/apache2/libphp5.so」の行を検索。行頭の#を取る。
  12. httpd.confに次の2行を追加。(必要ないかも・・・一応)

    1
    2
    
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php-source .phps


  13. httpd.confを保存。これでPHPが動くように。
  14. ここで、システム環境設定の「共有」にて、「Web共有」のチェックを一度外して、再度ON。これでApacheを再起動。
  15. ローカルでのWebサイト領域は、「ユーザー名 – サイト」ディレクトリ。ここにtest.phpを作成し、ブラウザにて実行してみてPHPバージョン画面が表示されればOK。
  16. test.phpの中身は、以下の通り。

    1
    2
    3
    
    <?php
    phpinfo();
    ?>


以上。
完全に備忘録です。。。




このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Written by poissonvolant

11月 27th, 2010 at 11:59 pm

>> コメントをどうぞ

Posted in ナレッジ

Tagged with ,

Trackback URL:

jQuery・スライドショー

no comment

色々悩んだスパイス屋さんのキービジュアルですが、最終的に下記のjQueryプラグインに落ち着きました。

jQuery Slideshow Explained


設置方法はたいして難しくないです。

カスタマイズも、htmlとcssを見れば大体分かります。
全体のサイズ変更、padding調整、タブメニューのサイズと画像の変更、くらい。

割とサクサク動くし、悪くないんじゃないでしょうか。

ソースダウンロードから実装完了までの作業時間は、2-30分程度。

キービジュアルに簡単に動きをつけたい人、お勧めですよん。



このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加

Written by poissonvolant

11月 16th, 2010 at 1:31 am

>> コメントをどうぞ

Posted in ナレッジ

Tagged with , ,

Trackback URL:

Page 1 of 512345