<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="../../../../../css/rss/feedRss2.xsl" media="screen" type="text/xsl"?>

<rss version="2.0"> 
  <channel> 
    <title>本を買わずに解決するWeb制作の小技</title>  
    <link>http://ameblo.jp/linking/</link>  
    <description>ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHP CSS Webデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！</description>  
    <language>ja</language>  
    <atom:link xmlns:atom="http://www.w3.org/2005/Atom" rel="self" href="http://feedblog.ameba.jp/rss/ameblo/linking/rss20.xml" type="application/rss+xml"/>  
    <item> 
      <title>見逃したやつあるかも！Web屋にオススメな1月の人気記事まとめ</title>  
      <description><![CDATA[<p>
 私がツイッターやブログなどでWeb関連の最新情報を収集していて、<a href="https://www.facebook.com/WebCreators">これは良いと思った記事をFacebookに載せています。</a>その中でも反応が良かった記事をピックアップしました。<br /><br /><br /><h3>見逃したやつあるかも！Web屋にオススメな1月の人気記事のまとめ</h3><br /><font size="5">1.</font><a href="http://webya.opdsgn.com/introduceweb/detonatingvelocitydesigning/" target="_blank">目指せ爆速WEB屋！過去2年間かけて知ったリソースを駆使して作るサイトの制作手順！</a><br /><br /><font size="5">2.</font><a href="http://coliss.com/articles/build-websites/operation/work/visual-aggregator-for-designers-visual-heap.html" target="_blank">ウェブデザインのアイデアに悩んだ時に訪れたいサイトをまとめて一覧できる -Visual Heap</a><br /><br /><font size="5">3.</font><a href="http://maka-veli.com/Japan-Global-Web.html" target="_blank">大きな違いが一つ、日本と海外のWEBについて。</a><br /><br /><font size="5">4.</font><a href="http://gaiax-socialmedialab.jp/facebook/057" target="_blank">延べ1,198事例！Facebookウェルカムページの「デザイン」に悩んだら見るべき7サイト＋6記事</a><br /><br /><font size="5">5.</font><a href="http://photoshopvip.net/archives/32528" target="_blank">新しく公開されたPhotoshop無料ブラシ素材50個まとめ 2012年度</a><br /><br /><font size="5">6.</font><a href="http://photoshopvip.net/archives/32852" target="_blank">カラフルでオシャレ、デザイン性の高いWebサイトデザイン24個まとめ</a><br /><br /><font size="5">7.</font><a href="http://photoshopvip.net/archives/32428" target="_blank">質感の高いWebサイトを作成するUIデザイン用PSDファイル「Balio Web UI Kit」</a><br /><br /><font size="5">8.</font><a href="http://www.html5-memo.com/jquery-mobile/jquerymobile02/" target="_blank">jQuery MobileでGoogle Mapsの表示からお問い合わせフォームの作成まで「jQuery Mobile」でスマホサイトを作ってみよう【実践編】</a><br /><br /><font size="5">9.</font><a href="http://photoshopvip.net/archives/32977" target="_blank">商用可、キラキラ系ライティングたっぷりなテクスチャ素材94枚セット</a><br /><br /><font size="5">10.</font><a href="http://www.webcreatorbox.com/tech/facebook-page-jan-2012/" target="_blank">Facebookページの作り方 2012年1月版</a><br /><br /><br /><br />
 
</p>]]></description>  
      <link>http://ameblo.jp/linking/entry-11159891935.html</link>  
      <pubDate>Thu, 09 Feb 2012 17:07:42 +0900</pubDate> 
    </item>  
    <item> 
      <title>iPhoneアプリを外部連携させてURLで起動させる方法</title>  
      <description><![CDATA[<p>
 <img src="http://stat.ameba.jp/user_images/20120118/12/linking/13/b7/j/o0481031911741395728.jpg"  alt="iPhoneアプリを外部連携させる方法" border="0" /><br /><br />iPhoneアプリの案件で外部連携のことを調べていたらURLスキームを使うと直接アプリを起動できるやり方があったのでメモしておきます。<br /><br /><h3>iPhoneアプリを外部連携させる方法</h3><a href="http://blog.webcreativepark.net/2011/03/09-041450.html">iPhone/AndroidでURLスキームを利用したアプリ起動</a><BLOCKQUOTE>iPhoneのSafariやAndroidのブラウザなどからURLスキームを利用することで直接アプリを起動することができるようになります。<br /><br />アプリにはそれぞれURLスキームが割り当てられています。例えばTwitterならば「twitter://」これをhref属性に指定することでTwitterアプリを直接起動することができます。</BLOCKQUOTE>これを使って、<a href="http://365gram.net/kinou.php">1/365gramからInstagramを起動</a>できるようにしました。<br />今回実際にURLスキームを使って連携したInstagramの起動URLは「instagram://app」です。<br />ブラウザから簡単にアプリを起動することができるのでブラウザ＋アプリ連携するときには便利ですね。<br /><br /><br /><br />自分で作ったiPhoneアプリに別のアプリから起動できるようにするやり方はこちら<h3>iPhoneアプリにURLスキームを設定する方法</h3><a href="http://d.hatena.ne.jp/glass-_-onion/20100218/1266487481">iPhoneとAndroidのアプリケーション間連携方法を比較してみる</a><br /><a href="http://safx-dev.blogspot.com/2010/10/iosurl.html">iOSで独自カスタムURLスキームを設定する方法について</a><br /><br /><br /><br /><br />
 
</p>]]></description>  
      <link>http://ameblo.jp/linking/entry-11139043514.html</link>  
      <pubDate>Wed, 18 Jan 2012 12:07:44 +0900</pubDate> 
    </item>  
    <item> 
      <title>1/365gramをiPhoneアプリ風に1クリックで起動！配置場所はInstagramの隣で。</title>  
      <description><![CDATA[<p>
 <img src="http://stat.ameba.jp/user_images/20120112/21/linking/4e/b8/p/o0640096011731272194.png"  width="400" alt="1/365gramをiPhoneアプリ風に1クリックで起動！配置場所はInstagramの隣で。" border="0" /><br /><br />先日リリースした<a href="http://365gram.net/" target="_blank">思い出の1日を保存。Instagramをカレンダー形式で表示！できる「1/365gram」</a>ですが、大変多くの方に利用していただきびっくりしています。<br />本当にありがとうございます。<br /><br /><h3>ご紹介ありがとうございます</h3><a href="http://www.ultra-l.net/note/2012/01/1365gram.php" target="_blank">Webディレクター・ハラヒロシさん</a><br /><a href="http://20kaido.com/archives/5673222.html" target="_blank">二十歳街道まっしぐらのカメきちさん</a><br /><a href="http://techwave.jp/archives/51724091.html" target="_blank">TechWaveさん</a><br />他にも多くの方にツイート、いいね！、コメントをいただきました。<br />本当にありがとうございます！<br />今回作った1/365gramの作成からリリースまでについては、後日ブログに書かせていただきたいと思います。<br /><br /><h3>1/365gramをiPhoneアプリ風に1クリックで起動</h3>インスタグラムで写真撮って1/365gramで１日を振り返ろうと思って、ブラウザを立ち上げて検索orブックマークからサイトを開いてって面倒ですよね。<br />そこで、1/365gramをiPhoneアプリみたいにiPhoneのホーム画面に保存していつでも1クリックで起動できるようにしたいと思いアイコンを作りました！<br />これで、簡単にいつでも起動することができます。<br /><br /><h3>ホーム画面に保存する手順</h3><h2>1/365gramをブラウザで開きます</h2><br /><img src="http://stat.ameba.jp/user_images/20120112/22/linking/4c/0b/j/o0640096011731476090.jpg"  width="300"　alt="1/365gramをブラウザで開きます" border="0" /><br /><br />ブラウザで開くと下にある真ん中のアイコンをクリックしてください。<br /><br /><br /><h2>iPhoneのホーム画面に追加する</h2><br /><img src="http://stat.ameba.jp/user_images/20120112/22/linking/59/13/j/o0640096011731484840.jpg"  width="300" alt="iPhoneのホーム画面に追加する" border="0" /><br /><br />真ん中のアイコンをクリックすると画像のような選択画面になりますので、ホーム画面に追加を選択します。<br /><br /><br /><h2>サービス名「1/365gram」を入力</h2><br /><img src="http://stat.ameba.jp/user_images/20120112/22/linking/94/24/p/o0640096011731491618.png"  width="300" alt="サイト名「1/365gram」を入力" border="0" /><br /><br />最初はページのタイトルタグに書かれている内容が入っています。<br />これだと長すぎるのでサービス名「1/365gram」に変更します。<br /><br /><br /><h2>配置場所はInstagramの隣にすると幸せになれますよ</h2><br /><img src="http://stat.ameba.jp/user_images/20120112/21/linking/4e/b8/p/o0640096011731272194.png"  width="300" alt="1/365gramをiPhoneアプリ風に1クリックで起動！配置場所はInstagramの隣で。" border="0" /><br /><br />完了するとiPhoneのホーム画面にアイコンが保存されます。<br />配置場所はどこでもいいんですが、Instagramの隣がおすすめです！<br />アイコンをInstagramの隣に配置することで分かりやすく、Instagramから1/365gramの起動がスムーズになります。<br /><br /><br /><h2>iPhoneで開いても綺麗にカレンダーが見れます</h2><br /><img src="http://stat.ameba.jp/user_images/20120112/22/linking/9b/59/p/o0640096011731456909.png"  alt="iPhoneで開いても綺麗にカレンダーが見れます"  width="300" border="0" /><br /><br />一度保存してししまえば次からはiPhoneアプリのようにアイコンを押して起動することができます。<br /><br /><br />より簡単に楽しみたい方は、Instagramの隣に1/365gramを配置してみてください。<br /><a href="http://365gram.net/" target="_blank">1/365gram</a><br /><br /><br /><br /><br />
 
</p>]]></description>  
      <link>http://ameblo.jp/linking/entry-11134132872.html</link>  
      <pubDate>Thu, 12 Jan 2012 21:07:47 +0900</pubDate> 
    </item>  
    <item> 
      <title>見逃した方必見！Web屋にオススメな12月の人気記事のまとめ</title>  
      <description><![CDATA[<p>
 <div align="center"><img src="http://stat.ameba.jp/user_images/20111003/13/linking/e1/12/j/o0450031711523470773.jpg" width="450" alt="見逃した方必見！Web屋にオススメな12月の人気記事のまとめ" border="0" /></div><br /><br />あけましておめでとうございます！<br />今年もよろしくお願いします。<br /><br />私がツイッターやブログなどでWeb関連の最新情報を収集していて、<a href="https://www.facebook.com/WebCreators">これは良いと思った記事をFacebookに載せています。</a>その中でも反応が良かった記事をピックアップしました。<br /><br /><br /><h3>Web屋にオススメな12月の人気記事のまとめ</h3><br /><font size="5">1.</font><a href="http://www.adakoda.com/adakoda/2011/12/android-androidhtml5css3.html" target="_blank">Android標準ブラウザ HTML5&CSS3対応状況まとめ</a><br /><br /><font size="5">2.</font><a href="http://webdesignrecipes.com/wordpress-corporate-website/" target="_blank">WordPressでブログじゃないWebサイトを作るときのいろいろ（サンプル付き）</a><br /><br /><font size="5">3.</font><a href="http://coliss.com/articles/build-websites/operation/design/popular-web-design-trends-in-2011-by-designshack.html" target="_blank">2011年のウェブデザインのトレンドを振り返る</a><br /><br /><font size="5">4.</font><a href="http://kachibito.net/web-design/craftmap.html" target="_blank">地図にマッピングし、指定した位置にコンテンツを表示出来る軽量jQueryプラグイン・CRAFTMAP</a><br /><br /><font size="5">5.</font><a href="http://webdesignmatome.com/web-tips/html5matome" target="_blank">いままでまとめたHTML5の勉強をしたさいに作成したまとめ　～HTML5の新要素の説明からマークアップの基本まで～</a><br /><br /><font size="5">6.</font><a href="http://www.webopixel.net/javascript/507.html" target="_blank">WEBデザイナーを目指す人へお勧めしたい記事・サイトまとめ</a><br /><br /><font size="5">7.</font><a href="http://webya.opdsgn.com/webtech/youcanfindwhatyouwantcheatsheet/" target="_blank">jQueryのanimateで自由にアニメーションできるようになろう</a><br /><br /><font size="5">8.</font><a href="http://design-spice.com/2011/12/06/print-10check/" target="_blank">web制作者が印刷物を制作するときにチェックしたい10項目</a><br /><br /><font size="5">9.</font><a href="http://www.html5-memo.com/video/basic01/" target="_blank">絶対に覚えておきたいHTML5の『video要素』超基本を知る!!</a><br /><br /><font size="5">10.</font><a href="http://webya.opdsgn.com/webservice/mendokusai2011/" target="_blank">WEB屋の“メンドクサイ”は多事多難！今年遭遇したメンドクサイの数々、そして対処法色々！</a><br /><br />
 
</p>]]></description>  
      <link>http://ameblo.jp/linking/entry-11125395936.html</link>  
      <pubDate>Tue, 03 Jan 2012 12:36:24 +0900</pubDate> 
    </item>  
    <item>
      <title><![CDATA[PR: あなたにピッタリな５つのアプリを見つけちゃおう！]]></title>
      <link>http://rss.rssad.jp/rss/ad/j6SUohvbirgO/yH8v04141_hZ?type=2&amp;ent=697135866a37f77cc780ac2a50aafec7</link>
      <description><![CDATA[<table cellspacing="0" cellpadding="0"><tbody><tr><td align="left" valign="center"><a href="http://rss.rssad.jp/rss/ad/j6SUohvbirgO/yH8v04141_hZ?type=2" target="_blank"><img alt="" style="border: 0;" border="0" src="http://rss.rssad.jp/rss/img/j6SUohvbirgO/yH8v04141_hZ?type=3&ent=697135866a37f77cc780ac2a50aafec7"/></a></td></tr><tr><td align="left" valign="top" > これがワタシの、お気に入りアプリ。This is My5. </td></tr></tbody></table><div style="font-size:10px;"><span style="padding-top:5px;"><br style="display:none"/><a href="http://www.rssad.jp/trendmatch/trendmatch.html">Ads by Trend Match</a></span><br/></div>]]></description>
      <pubDate>Tue, 03 Jan 2012 12:36:24 +0900</pubDate>
    </item>
    <item> 
      <title>Web制作の小技の2011年人気記事トップ５</title>  
      <description><![CDATA[<p>
 <img src="http://stat.ameba.jp/user_images/20111231/12/linking/44/a7/j/o0481024011705715647.jpg"  alt="" border="0" /><br /><br />2011年も今日で終わりますね。<br />今年も早かったです。今年は、ブログのアクセスアップの対策や<a href="http://3sai.info/blog/?p=466" target="_blank">iPhoneアプリの開発「胎動１０カウント」</a>や<a href="http://design.web-hon.com/" target="_blank">スマートフォンのデザイン集</a>や今年最後にリリースした<a href="http://3sai.info/" target="_blank">Instagramをカレンダー形式でログを残せる「1/365gram」</a>など新しいことにチャレンジできたのでよかったです。<br /><br />今年も今日で終わりということで、2011年のブログ記事の人気ランキングなどまとめました。<br />今年見逃した記事や参考になる記事があったら嬉しいです。<br /><br /><h3>Web制作の小技の2011年人気記事トップ１０</h3><br /><font size="5">1.</font><a href="http://ameblo.jp/linking/entry-10766619832.html" target="_blank">WebのスキルでiPad/iPhoneアプリ風のWebアプリ作成のまとめ</a><br /><br /><font size="5">2.</font><a href="http://ameblo.jp/linking/entry-10842315905.html" target="_blank">iPhoneサイトで画像ギャラリーを簡単にフリック操作対応させる</a><br /><br /><font size="5">3.</font><a href="http://ameblo.jp/linking/entry-11020427542.html" target="_blank">200サイトのiPhoneデザインを見て感じたスマートフォンの最適化</a><br /><br /><font size="5">4.</font><a href="http://ameblo.jp/linking/entry-11081992980.html" target="_blank">SNS企画の参考に！FacebookチェックインとPHPでユニクロキャンペーン風に連動させる</a><br /><br /><font size="5">5.</font><a href="http://ameblo.jp/linking/entry-10781826978.html" target="_blank">コンビニから学ぶアクセス解析の基本用語１３個</a><br /><br /><br />こうして振り返ってみると今年は全然ブログを更新できていませんね。<br />来年は更新頻度と記事の質をあげていきます。<br /><br />今年もたいへんお世話になりました。<br />来年もよろしくお願いします。<br />良いお年を！<br /><br /><br /><br />
 
</p>]]></description>  
      <link>http://ameblo.jp/linking/entry-11122275168.html</link>  
      <pubDate>Sat, 31 Dec 2011 12:00:57 +0900</pubDate> 
    </item>  
    <item> 
      <title>Instagramの写真をカレンダー形式で表示！2011年に撮った写真を振り返ろう</title>  
      <description><![CDATA[<p>
 <a href="http://3sai.info/"><img src="http://stat.ameba.jp/user_images/20111228/00/linking/e9/57/p/o0800041311698783255.png" width="450" alt="インスタグラムの写真をカレンダー形式で表示！2011年に撮った写真を振り返ろう" border="0" /></a><br /><a href="http://3sai.info/">Instagramの写真をカレンダー形式で表示！2011年に撮った写真を振り返ろう</a><br /><br /><h3>Instagram APIを使ってサービス作りました</h3>私は写真共有アプリの中で<a href="http://instagr.am/">Instagram</a>を使っているけど、過去に撮った写真を見るときに分かりにくいなと思って、カレンダー形式で1日ごとにまとめて見れる1/365gramを作りました。少しでも毎日写真を撮るモチベーションがあがってくれると嬉しいです。<br />バグや要望がありましたらご連絡ください。<br /><br /><h3>1/365gramとは</h3><img src="http://stat.ameba.jp/user_images/20111228/00/linking/46/14/p/o0800049011698783256.png" width="450" alt="1/365gramとは" border="0" /><br />Instagramで残した思い出の写真をカレンダー形式で表示して思い出を振り返ることができるサービスです。もちろん利用は無料です！！<br />何気なく撮った写真もまとめて見るとステキな1枚になります。<br />子供、旅行、誕生日、結婚式、同窓会、イベント・・・。インスタグラムでたくさん撮った写真をカレンダーで表示！1日ごとに写真をまとめて見れるので、その日の思い出のシーンがよみがえります。 <br /><br />2011年も残りわずかです。2011年はどんな1年だったのか写真で振り返ってみると面白いかもしれません。<br />&gt; <a href="http://3sai.info/">1/365gram</a><br /><br /><br /><br /><br />
 
</p>]]></description>  
      <link>http://ameblo.jp/linking/entry-11119149026.html</link>  
      <pubDate>Wed, 28 Dec 2011 10:00:00 +0900</pubDate> 
    </item>  
    <item>
      <title><![CDATA[PR: 育児ママ必見！★知っておきたい家庭で出来る感染対策★]]></title>
      <link>http://rss.rssad.jp/rss/ad/j6SUohvbirgO/tKjUG_waEqOQ?type=2&amp;ent=9ca26211de0c9341f0aa9021a107a967</link>
      <description><![CDATA[<table cellspacing="0" cellpadding="0"><tbody><tr><td align="left" valign="center"><a href="http://rss.rssad.jp/rss/ad/j6SUohvbirgO/tKjUG_waEqOQ?type=2" target="_blank"><img alt="" style="border: 0;" border="0" src="http://rss.rssad.jp/rss/img/j6SUohvbirgO/tKjUG_waEqOQ?type=3&ent=9ca26211de0c9341f0aa9021a107a967"/></a></td></tr><tr><td align="left" valign="top" > 認定看護師による感染対策セミナーのレポートをミルトンママクラブで公開中！ </td></tr></tbody></table><div style="font-size:10px;"><span style="padding-top:5px;"><br style="display:none"/><a href="http://www.rssad.jp/trendmatch/trendmatch.html">Ads by Trend Match</a></span><br/></div>]]></description>
      <pubDate>Wed, 28 Dec 2011 10:00:00 +0900</pubDate>
    </item>
    <item> 
      <title>見逃した方必見！Web屋にオススメな11月の人気記事のまとめ</title>  
      <description><![CDATA[<p>
 <div align="center"><img src="http://stat.ameba.jp/user_images/20111003/13/linking/e1/12/j/o0450031711523470773.jpg" width="450" alt="見逃した方必見！Web屋にオススメな11月の人気記事のまとめ" border="0" /></div><br /><br />私がツイッターやブログなどでWeb関連の最新情報を収集していて、<a href="https://www.facebook.com/WebCreators">これは良いと思った記事を<br />Facebookに載せています。</a>その中でも反応が良かった記事をピックアップしました。<br /><br />2011年11月は、Webデザイン系のネタが人気でした！<br /><h3>Web屋にオススメな11月の人気記事のまとめ</h3><br /><font size="5">1.</font><a href="http://coliss.com/articles/build-websites/operation/design/showcase-ui-design-by-dribble.html" target="_blank">ウェブデザインのセンスを磨こう、素敵なUIデザインのまとめ</a><br /><br /><font size="5">2.</font><a href="http://yohei.posterous.com/web-26991" target="_blank">ミニマルWebデザインの何が良いのか</a><br /><br /><font size="5">3.</font><a href="http://ameblo.jp/linking/entry-11081992980.html" target="_blank">SNS企画の参考に！FacebookチェックインとPHPでユニクロキャンペーン風に連動させる</a><br /><br /><font size="5">4.</font><a href="http://maka-veli.com/real-idea-design.html" target="_blank">Webデザインの原理原則はリアリティと、それに反した想像を超えるアイデアだと思う。</a><br /><br /><font size="5">5.</font><a href="http://webya.opdsgn.com/introduceweb/greattutorials201/" target="_blank">ここまで教えてくれていいの？！WEB屋のテンションと底力を上げる厳選チュートリアル色々！</a><br /><br /><font size="5">6.</font><a href="http://wp.yat-net.com/?p=2214" target="_blank">WEBデザイナーを目指す人へお勧めしたい記事・サイトまとめ</a><br /><br /><font size="5">7.</font><a href="http://webya.opdsgn.com/webtech/youcanfindwhatyouwantcheatsheet/" target="_blank">あなたの作業を音速にするかもしれないWEB屋の作業スピードを上げるチートシート大量紹介</a><br /><br /><font size="5">8.</font><a href="http://vanidesign.blog.fc2.com/blog-entry-54.html" target="_blank">[配布]photoshopでドットのラインを描く方法＆破線（点線）ブラシ</a><br /><br /><font size="5">9.</font><a href="http://vanidesign.blog.fc2.com/blog-entry-55.html" target="_blank">フリーで使える！企業サイトでよく見かける、新しいウィンドウを示す「新窓」アイコン</a><br /><br /><font size="5">10.</font><a href="http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/smartphone_web_part4.html" target="_blank">スマートフォン時代のWebサイト制作 第4回　画像の扱いと最適化</a>
 
</p>]]></description>  
      <link>http://ameblo.jp/linking/entry-11096319499.html</link>  
      <pubDate>Sat, 03 Dec 2011 11:50:12 +0900</pubDate> 
    </item>  
    <item>
      <title><![CDATA[PR: レノボ DO.プロジェクト]]></title>
      <link>http://rss.rssad.jp/rss/ad/j6SUohvbirgO/aFjvSLqIxdDY?type=2&amp;ent=34dc55e513ac769b3cd680a5c88ea16d</link>
      <description><![CDATA[<table cellspacing="0" cellpadding="0"><tbody><tr><td align="left" valign="center"><a href="http://rss.rssad.jp/rss/ad/j6SUohvbirgO/aFjvSLqIxdDY?type=2" target="_blank"><img alt="" style="border: 0;" border="0" src="http://rss.rssad.jp/rss/img/j6SUohvbirgO/aFjvSLqIxdDY?type=3&ent=34dc55e513ac769b3cd680a5c88ea16d"/></a></td></tr><tr><td align="left" valign="top" > 中田英寿と一緒に大きな夢に挑んでみないか？ </td></tr></tbody></table><div style="font-size:10px;"><span style="padding-top:5px;"><br style="display:none"/><a href="http://www.rssad.jp/trendmatch/trendmatch.html">Ads by Trend Match</a></span><br/></div>]]></description>
      <pubDate>Sat, 03 Dec 2011 11:50:12 +0900</pubDate>
    </item>
    <item> 
      <title>SNS企画の参考に！FacebookチェックインとPHPでユニクロキャンペーン風に連動させる</title>  
      <description><![CDATA[<p>
 <a href="http://www.uniqlo.com/checkin/"><img src="http://stat.ameba.jp/user_images/20111118/20/linking/10/63/j/o0480040011619142600.jpg"  alt="UNIQLO CHECK-IN CHANCE" border="0" /></a><br /><br />これからソーシャルメディアと連携した仕事が増えてくると思う・・・。<br />イヤ、きっとくると思うので勉強のためにデータを取得してみた。<br /><br />今回は最近始まったユニクロのキャンペーン「<a href="http://www.uniqlo.com/checkin/">UNIQLO CHECK-IN CHANCE</a> 」がfacebookのチェックイン機能と連動していた仕組みが気になったので、連携部分の実現方法を調べてみた。<br />Facebook APIを初めて触ってみたが、PHPと連携させてなんとなくそれっぽいものが作成できたので、方法を紹介。<br /><br />Twitter APIやInstagram APIに比べてFacebook APIは凄い簡単だったのアイデア次第で楽しいことができそうです。<br />チェックイン機能と連動した企画は、地域の観光や実店舗への誘導などに活用できそうです。<br /><br /><br /><h3>ユニクロのキャンペーン「UNIQLO CHECK-IN CHANCE」の手順</h3><b>※これは完全再現ではありません。また、Facebookと連動する仕組みが知りたかったので、それ以外は出てきません。</b><br /><br /><ul><li>1.Facebookに認証する</li><br /><li>2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する</li><br /><li>3.チェックインをさせる</li><br /><li>4.クーポンの抽選が開始される</li><br /><li>5.Facebookに投稿させる</li></ul><br /><h3>実際の「UNIQLO CHECK-IN CHANCE 」</h3><br /><b>1.Facebookに認証する</b><br /><br /><img src="http://stat.ameba.jp/user_images/20111120/00/linking/7a/d4/p/t02000300_0200030011621704894.png"  alt="1.Facebookに認証する" border="0" /><br /><br /><br /><b>2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する</b><br /><br /><img src="http://stat.ameba.jp/user_images/20111120/00/linking/13/75/p/t02200330_0640096011621715285.png"  alt="2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する" border="0" /><br /><br /><br /><b>3.チェックインをする</b><br /><br /><img src="http://stat.ameba.jp/user_images/20111120/14/linking/a0/35/p/t02200061_0403011111622587790.png"  alt="3.チェックインをする" border="0" /><br /><br /><br /><b>4.クーポンの抽選が開始される</b><br /><br /><img src="http://stat.ameba.jp/user_images/20111120/00/linking/c5/ff/p/t02200330_0640096011621715284.png"  alt="4.クーポンの抽選が開始される" border="0" /><br /><br /><br /><b>5.Facebookに投稿させる</b><br /><br /><img src="http://stat.ameba.jp/user_images/20111120/00/linking/86/f7/p/t02200069_0412013011621728968.png"  alt="5.Facebookに投稿させる" border="0" /><br /><br /><br /><br /><h3>再現した「UNIQLO CHECK-IN CHANCE 」</h3><br /><b>1.Facebookに認証する</b><br /><br /><img src="http://stat.ameba.jp/user_images/20111120/00/linking/69/9c/p/t02200330_0640096011621701374.png"  alt="1.Facebookに認証する" border="0" /><br /><br /><br /><b>2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する</b><br /><br /><img src="http://stat.ameba.jp/user_images/20111120/23/linking/68/6a/p/t02200330_0640096011624003985.png"  alt="2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する" border="0" /><br /><br /><br /><br /><b>3.チェックインをする</b><br /><br /><img src="http://stat.ameba.jp/user_images/20111120/00/linking/0c/27/p/t02200077_0429015011621695997.png"  alt="5.Facebookに投稿させる" border="0" /><br /><br /><br /><b>4.クーポンの抽選が開始される</b><br /><br /><img src="http://stat.ameba.jp/user_images/20111120/00/linking/f1/7e/p/t02200330_0640096011621702126.png"  alt="4.クーポンの抽選が開始される" border="0" /><br /><br /><br /><b>5.Facebookに投稿させる</b><br /><br /><img src="http://stat.ameba.jp/user_images/20111121/00/linking/62/57/p/t02200077_0432015111624042029.png"  alt="5.Facebookに投稿させる" border="0" /><br /><br /><br /><br /><h3>Facebook APIを使うための準備</h3>Facebook ApIを使うには、アプリ登録を行ってアプリIDとアプリの秘訣を取得しないといけません。<br />そのため、最初に<a href="https://developers.facebook.com/apps">facebook DEVELOPERS</a>でアプリの登録を行います。<br />登録が完了するとApp IDとApp Secret:が表示されるのでこれをコピーしてきます。<br /><br />次に、PHP SDKを<a href="http://developers.facebook.com/docs/sdks/">SDKs & Tools</a>からダウンロードしてきます。<br />フォルダには色々ファイルが入っていますが、使うのはsrcディレクトリ内の<br />base_facebook.php<br />facebook.php<br />fb_ca_chain_bundle.crt<br />の３ファイルで、facebook.phpをインクルードすれば準備は完了です。<br /><br /><br /><h3>1.Facebookに認証する</h3>最初にPHP SDKのfacebook.phpをインクルードします。<br />そして、アプリのApp IDとApp Secretをつかってfacebookオブジェクトを作ります。<br /><BLOCKQUOTE><pre>require_once 'src/facebook.php';<br /><br />$appId = 'hogehoge';<br />$secret = 'hogehoge';<br /><br />$facebook = new Facebook(array(<br />    'appId' => $appId,<br />    'secret' => $secret<br />));</pre></BLOCKQUOTE><br /><br />次に、FacebookにログインするためのURLを取得します。<br />このときにウォールへの投稿やチェックインのデータの取得のために<a href="https://developers.facebook.com/docs/reference/api/permissions/">パーミッションを指定</a>します。<br /><BLOCKQUOTE><pre>$par = array('scope' => 'publish_stream,read_friendlists,<br />publish_checkins,user_checkins');<br />$fb_login_url = $facebook->getLoginUrl($par);</pre></BLOCKQUOTE><br />getLoginUrlでログイン用のURLが取得できるのでそれを表示させます。<br />このURLをクリックすると以下のようにログイン認証に進みます。<br /><br /><img src="http://stat.ameba.jp/user_images/20111119/12/linking/fa/bc/j/o0655023911620291650.jpg"  alt="Facebookに認証する" border="0" width="450" /><br /><br />さきほど指定したパーミッションが表示されます。<br /><img src="http://stat.ameba.jp/user_images/20111119/12/linking/d7/56/j/o0656039211620291651.jpg"  alt="Facebookに認証する" border="0" width="450" /><br /><br />これで、ウォールへの投稿、チェックインを検索したり、読み込んだり、投稿することが可能になったので、あとは店舗でチェックインをしたらクーポンを発行してウォールに投稿すれば完了です。<br /><br /><br /><h3>2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する</h3>チェックインに関する情報は<a href="https://developers.facebook.com/docs/reference/api/checkin/">Checkin</a>に紹介されています。<br /><br />今回は今いる場所から近隣の店舗を探します。店舗内でチェックインしてもらわないといけないため検索範囲の距離を10mにします。<br />GET https://graph.facebook.com/search?q=店舗名&type=place&amp;center=緯度,軽度&distance=10<br /><br /><b>近隣の店舗を検索</b><br /><BLOCKQUOTE>$locSearch = $facebook->api('/search?q=ユニクロ&amp;type=place&amp;center=36.75,138.35&distance=100');</pre></BLOCKQUOTE><br /><img src="http://stat.ameba.jp/user_images/20111120/23/linking/68/6a/p/t02200330_0640096011624003985.png"  alt="2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する" border="0" /><br /><br /><br />店舗を検索するには、今いる場所の緯度経度の情報が必要なので<a href="http://ascii.jp/elem/000/000/433/433470/">JavaScriptでGPSから緯度、経度を取得</a>します。<br />非同期で店舗検索をして店舗名と店舗IDを収得して表示させます。<br />店舗IDは、チェックインを投稿させるときに必要なのでhiddenの値に入れてチェックインボタンを押したときにPOSTで送ります。<br /><br /><BLOCKQUOTE><pre>$(function() {<br />	navigator.geolocation.watchPosition(update);<br />});<br /><br />function update(position) {<br />	var lat = position.coords.latitude;<br />	var lon = position.coords.longitude;<br />	var acc = position.coords.accuracy;<br />	<br />	 $.ajax({<br />		type: "POST",<br />		url: "hoge.php",<br />		dataType: "json", <br />		data: "lat=" + lat + "&lon=" + lon,<br />		success: function(res) {<br />			$("#shop").html(res.name);<br />			$("#shopId").val(res.id);<br />		}<br />	});<br />}</pre></BLOCKQUOTE><br /><br /><br /><b>他のチェックインの情報の取得方法はこちら</b><BLOCKQUOTE>チェックイン情報を取得<br />GET https://graph.facebook.com/[checkin_id]<br />ユーザーがチェックインした場所<br />GET https://graph.facebook.com/[user id]/checkins<br />個々の場所<br />GET https://graph.facebook.com/[page id]/checkins</BLOCKQUOTE><br /><br /><br /><h3>3.チェックインをする</h3><br />チェックインをした店舗IDをPOSTで受け取って店舗情報を取得します。<br />店の情報は、<br /><br />GET https://graph.facebook.com/[checkin_id]<br /><br />で取得できます。<br /><BLOCKQUOTE><pre>$locPage = $facebook->api('/' . $id);<br />$sh_locData = $locPage;<br />$sh_name = $sh_locData['name'];<br />$sh_id = $sh_locData['id'];<br />$sh_lat = $sh_locData['location']['latitude'];<br />$sh_lon = $sh_locData['location']['longitude'];</pre></BLOCKQUOTE><br /><br />次に取得した店舗名、店舗ID、緯度、経度を使ってチェックインをします。このときに写真、URL、説明などを入れてあげれば一緒に投稿できます。<br /><BLOCKQUOTE><pre>$facebook->api('/me/checkins', 'POST', <br />	array('message' => 'メッセージ',<br />		'link' => 'URL',<br />		'name' => '店舗名',<br />		'description' => '説明',<br />		'place' => '店舗ID',<br />		'picture' => '写真',<br />		'coordinates' => '{"latitude":"' . $sh_lat . '",<br /> "longitude": "' . $sh_lon . '"}'<br />	));</pre></BLOCKQUOTE><br /><img src="http://stat.ameba.jp/user_images/20111120/00/linking/0c/27/p/o0429015011621695997.png"  alt="3.チェックインをする" border="0" /><br /><br /><br />このときに、ユーザー情報も取得して、それをデータベースに保存したらアイコンと名前とチェックインした店舗名、クーポンをPCサイトで表示させます。<br />これを使ってPCのキャンペーンサイトではにぎやかに演出しています。<br />ユーザーのプロファイル情報の取得はこちら<br /><BLOCKQUOTE><pre>$fb_user_profile = $facebook->api('/me');</pre></BLOCKQUOTE><br /><br /><br /><h3>4.クーポンの抽選が開始される</h3><br />チェックインが完了するとクーポンの抽選が始まります。<br />このときにクーポンの抽選とクーポンIDを発行してデータベースに格納します。<br />抽選確率は1,000円と2,000円のクーポンが15人に1人当たるようです。<br /><br /><img src="http://stat.ameba.jp/user_images/20111120/00/linking/f1/7e/p/t02200330_0640096011621702126.png"  alt="4.クーポンの抽選が開始される" border="0" /><br /><br /><br /><h3>5.Facebookに投稿させる</h3>クーポンの発行が完了したら、みんなに教えるためにフェイスブックの自分のウォールへの投稿します。<br /><BLOCKQUOTE><pre>$facebook->api('/me/feed', 'POST', <br />		array('message' => '【実験】さあ、みんなもチェックインしよう！',<br />			'link' => 'URL',<br />			'picture' => '写真',<br />			'description' => 'このサイトから...'<br />		));</pre></BLOCKQUOTE><br /><img src="http://stat.ameba.jp/user_images/20111121/00/linking/62/57/p/o0432015111624042029.png"  alt="5.Facebookに投稿させる" border="0" /><br /><br /><br />なんとなく「UNIQLO CHECK-IN CHANCE」っぽいものができました。<br />チェックインデータをDBに保存したり、クーポンの管理やセキュリティ、同じ店舗での複数回チェックインを制御すれば使えそうな気がします。<br /><br /><br /><h3>運営サイト　よかったら参考にしてください</h3><a href="http://www.facebook.com/WebCreators">FacebookでWeb屋におすすめな情報を配信しています</a><br /><a href="http://design.web-hon.com/">優れたiPhoneサイトデザイン集 - iPhoneデザインボックス</a><br /><br />
 
</p>]]></description>  
      <link>http://ameblo.jp/linking/entry-11081992980.html</link>  
      <pubDate>Fri, 18 Nov 2011 13:06:13 +0900</pubDate> 
    </item>  
    <item> 
      <title>Facebookで反応が良かった10月のWeb屋におすすめな記事</title>  
      <description><![CDATA[<p>
 <div align="center"><img src="http://stat.ameba.jp/user_images/20111003/13/linking/e1/12/j/o0450031711523470773.jpg" width="450" alt="Facebookで反応が良かった10月のWeb屋におすすめな記事" border="0" /></div><br /><br />私がツイッターやブログなどでWeb関連の最新情報を収集していて、<a href="https://www.facebook.com/WebCreators">これは良いと思った記事を<br />Facebookに載せています。</a>その中でも反応が良かった記事をピックアップしました。<br /><br /><br /><font size="5">1.</font><a href="http://coliss.com/articles/build-websites/operation/work/framework-chocolatechip-ui-for-ios5.html" target="_blank">スマフォ用サイトでよく使うエレメントが豊富に揃ってるフレームワーク -ChocolateChip-UI</a><br /><br /><font size="5">2.</font><a href="http://croppy.org/" target="_blank">ソーシャルスクラップブックサービス</a><br /><br /><font size="5">3.</font><a href="http://www.danshihack.com/2011/10/26/junp/photoservices_2011.html" target="_blank">Web屋さんやブロガーさん御用達な画像素材サービスまとめ（2011年秋版）</a><br /><br /><font size="5">4.</font><a href="http://phpspot.org/blog/archives/2011/10/applecomjquery.html" target="_blank">Apple.comの新スライダーエフェクトを実装するjQueryプラグイン</a><br /><br /><font size="5">5.</font><a href="http://photoshopvip.net/archives/30689" target="_blank">ダウンロードしておきたい高品質な無料アイコン素材50個まとめ 2011年10月度</a><br /><br /><font size="5">6.</font><a href="http://photoshopvip.net/archives/30763" target="_blank">無料ダウンロードしておきたいフレッシュなフリーフォント30個まとめ 2011年9,10月度</a><br /><br /><font size="5">7.</font><a href="http://coliss.com/articles/build-websites/operation/javascript/js-jsmorph.html" target="_blank">多彩なアニメーションが実装できる2.3KBの超軽量スクリプト -jsMorph</a><br /><br /><font size="5">8.</font><a href="http://coliss.com/articles/build-websites/operation/design/minimalist-website-designs-trends-by-designfestival.html" target="_blank">ミニマリズムなウェブデザインから学ぶ、5つの機能的な特徴</a><br /><br /><font size="5">9.</font><a href="http://coliss.com/articles/build-websites/operation/css/creative-css3-animation-menus-by-codrops.html" target="_blank">確実に進化している！CSS3アニメーションで実装する10種類のナビゲーション</a><br /><br /><font size="5">10.</font><a href="http://phpspot.org/blog/archives/2011/10/pcjqueryasketic.html" target="_blank">PCでもスマホでもスワイプで画像を送れるギャラリー実装jQueryプラグイン「Asketic Swipe Gallery」</a><br /><br /><br />
 
</p>]]></description>  
      <link>http://ameblo.jp/linking/entry-11071102401.html</link>  
      <pubDate>Mon, 07 Nov 2011 09:30:00 +0900</pubDate> 
    </item>  
    <item> 
      <title>これからiPhoneサイトを作成するときに役立つ記事のまとめ</title>  
      <description><![CDATA[<p>
 最近、スマートフォンのサイトを作るときのコーディングの仕方やHTML5、CSS3、フリック対応するためのライブラリなどの参考になる情報が増えてきました。<br />その中でも基礎的な情報をまとめましたのでスマフォサイトを作るときに参考にしてみてください。<br />&#187; <strong><font size="2"><a href="http://design.web-hon.com/?page_id=486">初心者でも分かるiPhoneサイト制作で参考になるサイトのまとめ</a></font></strong><br /><br /><br />
 
</p>]]></description>  
      <link>http://ameblo.jp/linking/entry-11053499860.html</link>  
      <pubDate>Thu, 20 Oct 2011 10:21:23 +0900</pubDate> 
    </item> 
  </channel> 
</rss>

