<p>現在２つ程気になっているweb制作をサポートしてくれるようなwebサービスがあります。</p>
<p>まだ試せてないのですが、いずれ試してみたいと思うものなのでとりあえず忘れないように書いておきます。</p>
<p>&nbsp;</p>
<h2><a href="https://c9.io/" target="_blank">Cloud9 &#8211; Your development environment, in the cloud</a></h2>
<p>ひとつはCloud9というサービス(ツール)です。</p>
<p><a href="https://c9.io/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5805" src="/uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-1024x609.jpg" alt="Cloud9 - Your development environment, in the cloud" width="640" height="381" srcset="/uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-1024x609.jpg 1024w, /uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-300x178.jpg 300w, /uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud-228x135.jpg 228w, /uploads-archive/2014/09/Cloud9-Your-development-environment-in-the-cloud.jpg 1192w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>これはブラウザ上で使用できるツールで以下のような特徴があります。</p>
<p>&nbsp;</p>
<ul>
<li>そもそも高機能テキストエディタである</li>
<li>ブラウザチェックができる（IEにも対応！）</li>
<li>リアルタイムエラーチェック機能(HTMLやjavascript等)</li>
<li>バージョン管理</li>
<li>画像加工(リサイズ、トリミング、回転)</li>
</ul>
<p>&nbsp;</p>
<p>いろんな機能が混ざっていてすごいです。。。</p>
<p>&nbsp;</p>
<p>詳しく知りたい方は以下もご覧下さい！</p>
<p><a href="http://plus.appgiga.jp/masatolan/2014/08/19/53354/" target="_blank">無料で300以上のクロスブラウザチェックを搭載した「Cloud9」エディタの神進化が話題に！ | APPGIGA!!（アプギガ）</a><br />
&nbsp;</p>
<h2><a href="http://universions.com/" target="_blank">Webクリエイターのためのファイル管理コラボレーションツール｜universions</a></h2>
<p>そして2つめは、いわゆるgitのようなツールの「universions」です。</p>
<p>&nbsp;</p>
<p><a href="http://universions.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-5806" src="/uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-1024x609.jpg" alt="Webクリエイターのためのファイル管理コラボレーションツール｜universions" width="640" height="381" srcset="/uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-1024x609.jpg 1024w, /uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-300x178.jpg 300w, /uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160-228x135.jpg 228w, /uploads-archive/2014/09/6a7e5161f99e6818e443589452ce5160.jpg 1192w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>
<p>こちらの特徴は、</p>
<p>&nbsp;</p>
<ul>
<li>ファイル管理(バージョン管理)</li>
<li>チャット</li>
<li>タスク管理</li>
<li>プレビュー機能(AIやPSDも見れる！)</li>
<li>Wiki</li>
</ul>
<p>&nbsp;</p>
<p>バージョン管理とプレビューでAIとPSDが見れるのはいいですね！</p>
<p>&nbsp;</p>
<p>以上、今後試してみたいサービスでした。</p>


気になるweb制作サポートサービス

<p>HTML5のCanvasではCanvas以外のHTML要素とCSSだけではできないような、</p>
<p>複雑な効果を使ったアニメーションのビジュアルなども、Canvasに対応したブラウザであれば表示することができるというメリットがありますが、</p>
<p>それを実現するためには、高度なJavaScriptや画像処理の知識が必要であったりして、</p>
<p>実際に制作するには若干ハードルが高かったり、</p>
<p>制作のために多くのコードを書かなければならなかったりといった問題があります。</p>
<p>&nbsp;</p>
<p>CanvasなどのHTML5の技術をより扱いやすくするためのJavaScriptのライブラリの一つに、</p>
<p>Adobeの制作したCreateJSがありますが、</p>
<p>FlashのCS6ではFlash上で制作したアニメーションなどを、</p>
<p>CreateJSを使ったHTML5の形式で書き出す拡張機能があります。</p>
<p>さらにFlash CCでは、拡張機能ではなく、HTML5での書き出しを前提とした制作も可能になっているようです。</p>
<p>&nbsp;</p>
<p>この機能を使えば、Flashを通してより簡単にCanvasアニメーション等を制作することができます。</p>
<p>今回はこのFlash CS6で、実際にCanvasアニメーションを作ってみました。</p>
<p>&nbsp;</p>
<p>↓作ってみたもの</p>
<p><a class="demo" href="/demo/ninomiya/51/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<h3>1.Flash CS6に「Toolkit for CreateJS」が入っているか確認する。</h4>
<p>Flash CS6を最新の状態にアップデートしていれば、今回のHTML5の書き出しに必要な</p>
<p>「Toolkit for CreateJS」という拡張機能が入っているはずなのですが、</p>
<p>入っていない場合は↓<a href="http://www.adobe.com/jp/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html" target="_blank">こちら</a>よりダウンロードして拡張機能をインストールする必要があります。</p>
<p><a class="link" href="http://www.adobe.com/jp/devnet/createjs/articles/using-flash-pro-toolkit-createjs.html" target="_blank">Flash Professional Toolkit for CreateJSの使用</a></p>
<p><a href="/uploads-archive/2014/09/ss01.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5775" src="/uploads-archive/2014/09/ss01-300x190.jpg" alt="ss01" width="300" height="190" srcset="/uploads-archive/2014/09/ss01-300x190.jpg 300w, /uploads-archive/2014/09/ss01-1024x651.jpg 1024w, /uploads-archive/2014/09/ss01-228x145.jpg 228w, /uploads-archive/2014/09/ss01.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>「ウィンドウ」&gt;「Toolkit for CreateJS」</p>
<p>&nbsp;</p>
<h3>2.Flashアニメーションの制作</h4>
<p>Flash CS6でモーショントゥイーンやActionScript3などを駆使してFlashアニメーションを制作します。</p>
<p>今回DEMOで作ってみたのは、Canvasでないと再現が困難になる、パスのマスクを使ったアニメーションです。</p>
<p><a href="/uploads-archive/2014/09/ss02.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5776" src="/uploads-archive/2014/09/ss02-300x190.jpg" alt="ss02" width="300" height="190" srcset="/uploads-archive/2014/09/ss02-300x190.jpg 300w, /uploads-archive/2014/09/ss02-1024x651.jpg 1024w, /uploads-archive/2014/09/ss02-228x145.jpg 228w, /uploads-archive/2014/09/ss02.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<h3>3.「Toolkit for CreateJS」でHTML5を書き出し</h4>
<p>「ウィンドウ」&gt;「Toolkit for CreateJS」でToolkit for CreateJSを開き、</p>
<p>パブリッシュをクリックして書き出します。</p>
<p>これで書き出しは完了です。</p>
<p><a href="/uploads-archive/2014/09/ss03.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5778" src="/uploads-archive/2014/09/ss03-300x190.jpg" alt="ss03" width="300" height="190" srcset="/uploads-archive/2014/09/ss03-300x190.jpg 300w, /uploads-archive/2014/09/ss03-1024x651.jpg 1024w, /uploads-archive/2014/09/ss03-228x145.jpg 228w, /uploads-archive/2014/09/ss03.jpg 1380w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Toolkit for CreateJS似寄る書き出しでは「ぼかし」などのフィルターに対応していなかったり、</p>
<p>半透明のマスクはActionScript3を理解していなければ制作ができなかったりするなど、新たな壁も見つかりましたが、</p>
<p>Canvas制作への道が少し開けたような気がします。</p>
<p>&nbsp;</p>


Flash CS6でHTML5のCanvasを書き出す方法

<p>ネットで何かを買う時、店舗側がせっかく「翌日にお届け」としていても、帰宅する時間が遅いという理由で結局週末に配達指定をするなんて人は少なくないはず。そんな人には嬉しいサービスが楽天で始まりました。</p>
<p>その名も「<a href="http://event.rakuten.co.jp/r-box/">楽天ＢＯＸ</a>」、楽天市場で購入した商品を通勤や通学の途中で受け取れるというもの。駅などに設置されたコインロッカーの様なＢＯＸに商品が届き、購入時に送られるパスワードでロッカー開けて商品を受け取る事ができます。（参考：<a href="http://event.rakuten.co.jp/r-box/">http://event.rakuten.co.jp/r-box/</a>）</p>
<p>８月２８日からサービスがスタートし、現時点では西鉄天神大牟田線の西鉄福岡(天神)駅、薬院駅、大阪市営地下鉄なんば駅（予定？）で利用できるようです。</p>
<p>駅なので、もちろん２４時間利用できるわけではないですが福岡では５：３０～２３：３０<span style="color: #000000;">、大阪では５：１５～２４：１５と深夜まで大丈夫。</span></p>
<p><a href="/uploads-archive/2014/09/con03_map.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-5752" src="/uploads-archive/2014/09/con03_map.jpg" alt="con03_map" width="707" height="305" srcset="/uploads-archive/2014/09/con03_map.jpg 950w, /uploads-archive/2014/09/con03_map-300x129.jpg 300w, /uploads-archive/2014/09/con03_map-228x98.jpg 228w" sizes="(max-width: 707px) 100vw, 707px" /></a></p>
<p>&nbsp;</p>
<p>利用の手順としては、楽天市場で商品を購入し配送方法を選ぶ際に「楽天ＢＯＸ」を選択。この時に受取で利用する楽天ＢＯＸも指定します。</p>
<p>その後メールでロッカーを開けるパスワードが送られてきて、好きな時間に楽天ＢＯＸに取りに行くという流れです。保管期間は３日間で、やはりサイズ制限があります。（大きい物は家まで配達してもらうと思いますが・・・）</p>
<p>本や小物を購入する時にはかなり使えそうな気がします。</p>
<p>現時点では代引きが使えず、冷蔵・冷凍の商品も利用不可との事です。とはいえ本格的に普及した場合は、代引き支払用の精算機がくっついたり、冷蔵庫っぽいのも出てくるはずです。</p>
<p>現時点では楽天のみのサービスですし、都内に存在しないので、類似したサービスが出てきそうな気がします。駅のすぐそばで荷物受取代行なんてビジネスもありかも、タバコ屋程度の敷地があればできそう。</p>


これなら受け取れる！深夜に帰宅する人に便利な楽天ＢＯＸ

<p><strong>TED (Technology, Entertainment, Design)</strong></p>
<p><a href="http://www.ted.com/">TED</a> is a global set of conferences owned by a private non-profit Foundation under the slogan: &#8220;Ideas Worth Spreading&#8221;. The main conference it is hold annually in Vancouver, Canada, although TED events are also held throughout North America, Europe and Asia, offering live streaming talks. Currently there&#8217;s more than 1500 TED Talks, all are subtitled in English, and many in other languages.</p>
<p>Speakers at TED events have a maximum of 18 minutes to share their messages, which are delivered in highly polished speeches.</p>
<p>TED&#8217;s mission is to spread great ideas worldwide, giving an insight into a great variety of topics like: technology, entertainment, design, business, science, global issues, etc.</p>
<p><a href="/uploads-archive/2014/09/la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002.jpeg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5688" src="/uploads-archive/2014/09/la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002-300x210.jpeg" alt="la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002" width="300" height="210" srcset="/uploads-archive/2014/09/la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002-300x210.jpeg 300w, /uploads-archive/2014/09/la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002-228x159.jpeg 228w, /uploads-archive/2014/09/la-fi-tn-ted-2013-sergey-brin-talks-google-gla-002.jpeg 600w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><em><span style="color: #888888;">Chris Anderson (Curator of TED conference), (left), and Google&#8217;s Sergey Brin discuss Google Glass at TED 2013.</span></em></p>
<p>&nbsp;</p>
<p>It is one of my favourite sources for inspiration and practical advice. I think TED talks have certainly set a benchmark in recent years and I wanted to share it with the team, as I feel is not that popular in the office.</p>
<p>I like the fact that the speakers bring to learning a lifetime of previously acquired information and experience, exposing with effective video instruction without dumbing down. It is also a good opportunity to have a glimpse of other disciplines you might not be familiar with.</p>
<p><a href="/uploads-archive/2014/09/bill-gates-at-ted-talks-education.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5666" src="/uploads-archive/2014/09/bill-gates-at-ted-talks-education-300x197.jpg" alt="bill-gates-at-ted-talks-education" width="300" height="197" srcset="/uploads-archive/2014/09/bill-gates-at-ted-talks-education-300x197.jpg 300w, /uploads-archive/2014/09/bill-gates-at-ted-talks-education-228x150.jpg 228w, /uploads-archive/2014/09/bill-gates-at-ted-talks-education.jpg 586w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><em><em><span style="color: #888888;">Bill Gates &#8220;Teachers needs real feedback&#8221; at TED 2013</span></em></em></p>
<p><strong>TEDx</strong></p>
<p>In the spirit of “Ideas worth spreading”, alongside <a href="http://www.ted.com/tedx">TEDx</a> is a program designed to give communities, organisations and individuals the opportunity to create their own TED-like events at the local level.</p>
<p>&nbsp;</p>
<p><strong>TEDxTokyo</strong></p>
<p><a href="http://www.tedxtokyo.com/en#about">TEDxTokyo</a> was the first TEDx conference to be held following the US launch event in 2009. TedxTokyo, located in Hikarie building, Shibuya from 2012, has become a powerful platform for bringing together global innovators and creative talent from Japan and around the world.</p>
<p>Nowadays there&#8217;s actually many Tedx hold all over Japan,  if you want to keep updated with TED events hold in Japan here is the <a href="https://www.ted.com/tedx/events?filter=0&amp;autocomplete_filter=japan&amp;when=&amp;month=&amp;year=&amp;go=Go">link.</a> Next one is <a href="https://www.ted.com/tedx/events/12836">TEDxKyoto</a> <span style="color: #3f3f3f;">28th of September, f</span>or next TEDxTokyo we will have to wait until <span style="color: #3f3f3f;">October 8th. </span></p>
<p><a href="/uploads-archive/2014/09/0710_pict001.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-5667" src="/uploads-archive/2014/09/0710_pict001-300x152.jpg" alt="0710_pict001" width="300" height="152" srcset="/uploads-archive/2014/09/0710_pict001-300x152.jpg 300w, /uploads-archive/2014/09/0710_pict001-228x116.jpg 228w, /uploads-archive/2014/09/0710_pict001.jpg 704w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><em><em><span style="color: #888888;">TEDxTokyo 2013</span></em></em></p>
<p><strong>Talks</strong></p>
<p>As there&#8217;s tones of Talks, there is available playlists curated by TED  like: &#8220;<a class="ga-link" style="color: #111111;" href="http://www.ted.com/playlists/the_20_most_popular_talks_of_a" data-ga-action="click" data-ga-category="homepage.playlist" data-ga-label="http://www.ted.com/playlists/the_20_most_popular_talks_of_a">20 most popular TED Talks of all time</a>&#8221; , &#8220;<a class="ga-link" style="color: #111111;" href="http://www.ted.com/playlists/kickstart_your_creativity" data-ga-action="click" data-ga-category="homepage.playlist" data-ga-label="http://www.ted.com/playlists/kickstart_your_creativity">Kickstart your creativity</a>&#8220;, &#8220;<a class="ga-link" style="color: #111111;" href="http://www.ted.com/playlists/talks_to_give_you_wanderlust" data-ga-action="click" data-ga-category="homepage.playlist" data-ga-label="http://www.ted.com/playlists/talks_to_give_you_wanderlust">Talks to give you wanderlust</a>&#8220;, etc.</p>
<p>Here are some beautiful and clever talks I&#8217;ve chosen (with Japanese subtitles):</p>
<p><em>“Creativity expert Sir Ken Robinson challenges the way we&#8217;re educating our children.”</em></p>
<p><iframe loading="lazy" width="640" height="360" src="https://embed-ssl.ted.com/talks/lang/ja/ken_robinson_says_schools_kill_creativity.html" frameborder="0" scrolling="no" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><em>From TEDxIndia. “&#8230;Pranav Mistry invented a wearable device that enables new interactions between the real world and the world of data”.</em></p>
<p><iframe loading="lazy" width="640" height="360" src="https://embed-ssl.ted.com/talks/lang/ja/pranav_mistry_the_thrilling_potential_of_sixthsense_technology.html" frameborder="0" scrolling="no" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><em>“Psychologist Kelly McGonigal urges us to see stress as a positive.”</em></p>
<p><iframe loading="lazy" width="640" height="360" src="https://embed-ssl.ted.com/talks/lang/ja/kelly_mcgonigal_how_to_make_stress_your_friend.html" frameborder="0" scrolling="no" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p><em>From TEDWomen “Sheryl Sandberg, COO at the helm of Facebook looks at why a smaller percentage of women than men reach the top of their professions.”</em></p>
<p><iframe loading="lazy" width="640" height="360" src="https://embed-ssl.ted.com/talks/lang/ja/sheryl_sandberg_why_we_have_too_few_women_leaders.html" frameborder="0" scrolling="no" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe></p>
<p>&nbsp;</p>
<p>What are your favourite TED Talks?</p>
<p>&nbsp;</p>


TED: Ideas worth spreading

<p>自社のＥＣサイトを構築して販売を行う場合、どんなサイトを参考にすればいいのでしょうか？</p>
<p>運営する側の意見も大事ですが、やはりお客さんが満足する良いサイト・サービスを作るというのが本質だと思います。</p>
<p>2014年8月20日に<span style="color: #3d3d3d;"><a href="http://www.service-js.jp/modules/contents/?ACTION=content&amp;content_id=515">サービス産業生産性協議会</a>が発表した調査の中に通信販売を行う企業に対する顧客満足のランキングが出ています。</span></p>
<p>サイトのみへの評価ではなく企業全体としての評価ですが、参考になると思います。</p>
<blockquote><p>統計的な収集方法による総計１２万人以上の利用者からの回答をもとに調査する日本最大級の顧客満足度調査</p></blockquote>
<p>ということなので信憑性は高いと思います。</p>
<p>結果としては<strong>「Amazon」「オルビス」「ヨドバシ」が同点で第１位</strong>になっています。</p>
<p><a href="http://activity.jpc-net.jp/detail/srv/activity001419/attached.pdf">http://activity.jpc-net.jp/detail/srv/activity001419/attached.pdf</a></p>
<p><span style="color: #3d3d3d;">「出典：２０１４年度ＪＣＳＩ(日本版顧客満足度指数) 第２回調査結果 </span></p>
<p>結果としては「Amazon」「オルビス」「ヨドバシ」が同点で第１位になっています。</p>
<p>意外だったのは楽天、yahooショッピングが上位にランクインしていないことです。amazonを除いたサイトに比べれば、楽天・yahooショッピングは商品数も多いので評価も高そうですが、ロイヤリティの分野で楽天が１３位という結果です。</p>
<p>&nbsp;</p>
<p>「Amazon」はちょっと規模感が違うような気がするで、「オルビス」「ヨドバシ」はどういう所がウケているのか分析する価値がありそうです。</p>
<p>個人的に良いなと思った点を上げてみます。</p>
<p>&nbsp;</p>
<p>yodobahi.com　<a href="http://www.yodobashi.com/index.html">http://www.yodobashi.com/index.html</a></p>
<p>商品検索結果のページに知りたい情報がキチンと表示されています。商品の到着日やポイント還元率など、既に買うものが決まっている場合なら買い物がしやすい印象はやはりします。ページの遷移が少なくて済みそうです。</p>
<p>&nbsp;</p>
<p>オルビス　<a href="http://www.orbis.co.jp/">http://www.orbis.co.jp/</a></p>
<p>サイトでの初回購入で値引きがあったり全商品が送料無料という点も評価されているようですが、個人的には「クチコミ」が豊富で参考にしやすいという印象を受けました。やはり化粧品などは効果に個人差があるのでクチコミは非常に大事だと思います。</p>
<p>合わせてシミ、テカりといった目的別で商品を探したり、年代別で商品を探せたりする部分も使いやすそうな印象です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


ＥＣサイト構築で参考にしたいサイトは？顧客満足度が高い企業のサイト

HTML5のCanvasでレスポンシブなリンク – 多角形編

<p>webフォントを使用するケースが増えております。</p>
<p>webフォントを使用する場合、googleフォントを使うか、<br />
webフォントを提供しているサービスを利用するかですが、サービスを利用するとお値段がかかってしまいます。</p>
<p>そしてもうひとつ、自分でフォントファイルをUPして使用する方法があるかと思います。<br />
ただ、普通のフォントファイルだと、容量が重くサイトの表示スピードに影響がでてしまうこともあると思います。</p>
<p>そこで、商用利用可能なフリーフォント(Webフォントとして利用可能なフォント)を、必要な文字だけを抜粋して、woffというフォントファイルに変換し、サイトで使用する方法をご説明します。</p>
<p>流れとしては以下になります。</p>
<ol>
<li><a href="#link1">フリーフォントを用意する</a></li>
<li><a href="#link2">フリーフォントをサブセットフォントメーカーで必要な文字だけ抜粋する</a></li>
<li><a href="#link3">2で作成されたフォントファイルをwoffに変換する</a></li>
<li><a href="#link4">cssで指定し、フォントを適用させる</a></li>
</ol>
<p>その前にまず、「woff」とはなにかを説明します。<br />
<strong>「woff」 (Web Open Font Format)</strong>とはWebページ埋め込み用フォーマットで、Webフォントとして使われるために作られたフォントファイル形式でほとんどのブラウザで使用できるようです。<br />
古いブラウザに対応しなくてはいけないという場合をのぞき、woff一本で大丈夫そうです。<br />
<a href="http://opentype.jp/woffbrowser.htm" target="_blank">対応Webブラウザ</a></p>
<h3 id="link1">フリーフォントを用意する</h2>
<p>今回は<strong>ロゴたいぷゴシック</strong>というフォントを使用させて頂きました。</p>
<p><a href="http://www.fontna.com/blog/1226/" target="_blank">フリーフォント　ロゴたいぷゴシックのダウンロード</a></p>
<p>いい感じのフォントです。<br />
ちなみに、ttfファイルで4MB程あります。</p>
<h3 id="link2">フリーフォントをサブセットフォントメーカーで必要な文字だけ抜粋する</h2>
<p>以下のサイトでソフトをダウンロードし、変換します。</p>
<p><a href="http://opentype.jp/subsetfontmk.htm" target="_blank">サブセットフォントメーカー</a></p>
<p><img decoding="async" loading="lazy" width="268" height="331" src="/uploads-archive/2014/08/freefont1.gif" alt="freefont1" class="alignnone size-full wp-image-5622" /></p>
<h3 id="link3">2で作成されたフォントファイルをwoffに変換する</h2>
<p>以下のサイトでソフトをダウンロードし、変換します。<br />
2と元の会社さんは同じで、両方ダウンロードしておけば、2から自動的に3へ移行してくれます。</p>
<p><a href="http://opentype.jp/woffconv.htm" target="_blank">WOFFコンバータ</a></p>
<p><img decoding="async" loading="lazy" width="335" height="260" src="/uploads-archive/2014/08/freefont2.gif" alt="freefont2" class="alignnone size-full wp-image-5623" /></p>
<p>今回は文字を「株式会社スターフィールドです。」だけにしましたので、<br />
woffファイルは、<strong>3KB</strong>になりました！軽いですね！</p>
<h3 id="link4">cssで指定し、フォントを適用させる</h2>
<p>3で出力されたファイルを使い、webフォントの設定をします。</p>
<p></p>

		<div id="crayon-649540157b30e915489319" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
@font-face{
  font-family: 'myFont';
  src: url('../myfont.woff') format('woff');
}
.font{
  font-family: 'myFont';
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157b30e915489319-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b30e915489319-2">2</div><div class="crayon-num" data-line="crayon-649540157b30e915489319-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b30e915489319-4">4</div><div class="crayon-num" data-line="crayon-649540157b30e915489319-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157b30e915489319-6">6</div><div class="crayon-num" data-line="crayon-649540157b30e915489319-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157b30e915489319-1"><span class="crayon-n">@font-face</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b30e915489319-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'myFont'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157b30e915489319-3"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">src</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">url</span><span class="crayon-sy">(</span><span class="crayon-s">'../myfont.woff'</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-i ">format</span><span class="crayon-sy">(</span><span class="crayon-s">'woff'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b30e915489319-4"><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540157b30e915489319-5"><span class="crayon-k ">.font</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157b30e915489319-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'myFont'</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157b30e915489319-7"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>@font-faceで読み込むフォントを指定します。<br />
@font-face内でfont-familyで好きな命名をしますと、<br />
あとは通常のfont-familyで指定すれば好きな箇所にフォントを適用出来ます！</p>
<p>実際に試してみましたので、デモ画面をご覧下さい。</p>
<p><a href="/demo/abe/45/" class="demo" target="_blank">DEMO</a></p>
<p>必要な文字数だけ設定すればファイルがだいぶ軽くなると思いますので、<br />
決まっている場合はいいですね！</p>

フリーフォントをwebフォントとしてサイトで使用してみる

<p>There are a ton of free Chrome extensions to help make your life easier.</p>
<p>In my eagerness to find good resources and tools for web design I have collected some of them. I hope you find these tools useful and help you get better results on your designs.</p>
<p>&nbsp;</p>
<p><a title="What a font" href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm" target="_blank"><strong>What a font</strong></a></p>
<p>Users: 259.649 ; Rate: 4.4</p>
<p><a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm"><img decoding="async" loading="lazy" class="alignnone  wp-image-5561" src="/uploads-archive/2014/08/images.jpeg" alt="images" width="398" height="248" srcset="/uploads-archive/2014/08/images.jpeg 284w, /uploads-archive/2014/08/images-228x142.jpeg 228w" sizes="(max-width: 398px) 100vw, 398px" /></a></p>
<p>It is an easy way to identify fonts on websites.</p>
<p>With this extension, you could inspect web fonts by just hovering on them. This tool identifies the font faster than “Stylifyme”, which I previously posted. “What a font” is that simple and elegant.</p>
<p>&nbsp;</p>
<p><a title="Page Ruler" href="https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn" target="_blank"><strong>Page Ruler</strong></a></p>
<p>Users: 149.326 ; Rate: 4.02</p>
<p><a href="https://chrome.google.com/webstore/detail/page-ruler/jlpkojjdgbllmedoapgfodplfhcbnbpn"><img decoding="async" loading="lazy" class="alignnone  wp-image-5562" src="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-300x155.png" alt="Screen Shot 2014-08-19 at 14.05.39" width="404" height="209" srcset="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-300x155.png 300w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-1024x532.png 1024w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-14.05.39-228x118.png 228w" sizes="(max-width: 404px) 100vw, 404px" /></a></p>
<p>This tool allows you to draw a ruler to get pixel dimensions and positioning, and measure elements on any web page. It quickly displays the width, height and position.</p>
<p>The Keyboard shortcut is: Alt + P (For enable/disable page ruler).</p>
<p>&nbsp;</p>
<p><a title="Awesome Screenshot" href="https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce" target="_blank">Awesome Screenshot</a></p>
<p>Users: 1.280.032 ; Rate: 4.73</p>
<p><iframe loading="lazy" width="500" height="375" src="http://www.youtube.com/embed/MUVfhSg7-yE?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Not only allows you to capture the whole page or any portion of it, it also lets you annotate screenshot, blur sensitive info and upload and share content with just one-click.</p>
<p>I would advice to wait until the whole page is uploaded, otherwise is not going to capture properly the site.</p>
<p>* I mentioned in previous post “Screen Capture (by Google)” but it seems it is not working anymore with the latest versions of Chrome.</p>
<p>&nbsp;</p>
<p><a title="Image Downloader" href="https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj" target="_blank"><strong>Image Downloader</strong></a></p>
<p>Users: 168.690 ; Rate: 3.98</p>
<p><a href="https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj"><img decoding="async" loading="lazy" class="alignnone  wp-image-5571" src="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-300x151.png" alt="Screen Shot 2014-08-19 at 17.06.16" width="414" height="208" srcset="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-300x151.png 300w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-1024x517.png 1024w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.06.16-228x115.png 228w" sizes="(max-width: 414px) 100vw, 414px" /></a></p>
<p>Browse and download images on a web page.</p>
<p>If you need to bulk download images from a web page, with this extension you can see all the images that the page contains. When you press the “Download” button, all selected images are saved to the default download directory of Chrome. If you don’t have one, you will have to manually choose the save location for each image.</p>
<p>&nbsp;</p>
<p><a title="Pin Search" href="https://chrome.google.com/webstore/detail/pin-it-button/gpdjojdkbbmdfjfahjcgigfpmkopogic" target="_blank"><strong>Pin Search</strong></a></p>
<p>Users: 2.371.113 ; Rate: 3.66</p>
<p><a href="https://chrome.google.com/webstore/detail/pin-it-button/gpdjojdkbbmdfjfahjcgigfpmkopogic"><img decoding="async" loading="lazy" class="alignnone  wp-image-5572" src="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-300x150.png" alt="Screen Shot 2014-08-19 at 17.10.09" width="406" height="203" srcset="/uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-300x150.png 300w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-1024x512.png 1024w, /uploads-archive/2014/08/Screen-Shot-2014-08-19-at-17.10.09-228x114.png 228w" sizes="(max-width: 406px) 100vw, 406px" /></a></p>
<p>This extension helps you harness the power of Google Search simply using any old image you find on Pinterest. You can use this to track down all sites showing that image, to find more info about the person behind the image, to search for similar images… A surprisingly priceless tool.</p>
<p>&nbsp;</p>
<p><a title="Evernote web clipper" href="https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc" target="_blank"><strong>Evernote web clipper</strong></a></p>
<p>Users: 3.324.994 ; Rate: 4.68</p>
<p><iframe loading="lazy" width="500" height="281" src="http://www.youtube.com/embed/QyuAn1Z_7uM?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p>Use the Evernote extension to save things you see on the web into your Evernote account.</p>
<p>Evernote Web Clipper is the easiest way to save, mark up and share anything you see online. From clipping pages to taking and annotating screenshots, it lets you capture everything, then access it from anywhere.</p>
<p>Although we might not use it within Sterfield, I think it can be very helpful when it comes to take note of the changes required by the client.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>If you want to keep updated with extensions, here is a website that review chrome extensions and filter the most popular ones:</p>
<p><a href="http://www.extensionaires.com/">http://www.extensionaires.com/</a></p>


Great extensions for Web designers:

<p>タイトルにアメブロとありますが、基本的には外部ブログサイトってことでも大丈夫かとは思いますが、RSSをから自身のサイトに表示することをやりましたので、そちらの方法をご紹介します。</p>
<p>ご紹介といっても、調べて参考にさせていただいた記事の通りやったらすんなり成功できたので簡単な紹介になってしまいますが。</p>
<p>いろいろと方法はあるようですが、僕が見た中では3つの方法がありました。</p>
<p>その中で実際に使ったのは、<br />
<a href="http://magpierss.sourceforge.net/" target="_blank">Magpie RSS</a>を使って表示する方法です。</p>
<h2>Magpie RSSを使ってサイトに表示する</h3>
<p>参考にさせていただいたのは、こちらです。<br />
<a href="http://senoweb.jp/mt/weblog/2012/07/php-amebablog-rss.html" target="_blank">【転載】アメブロ対応::phpで外部ブログRSSを自サイトに組み込んじゃおう</a></p>
<p>本当に書いてある通りですが、僕の場合のスクリプトを一応記載しておきます。</p>
<p></p>

		<div id="crayon-649540157ad11453110703" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">PHP</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;?php
require_once("magpierss/rss_fetch.inc");
define("MAGPIE_CACHE_AGE", 60*30);
define("MAGPIE_CACHE_DIR", "/path/2/cache/");
define("MAGPIE_OUTPUT_ENCODING","UTF-8");
 
// 取得したいRSSのurl 例：アメブロ
$url = "http://feedblog.ameba.jp/rss/ameblo/○○○○/rss20.xml";
$rss = fetch_rss( $url );
$max_lines = 5;
$line = 0;
foreach ($rss-&gt;items as $item) {
    $link = mb_convert_encoding($item['link'],"UTF-8","auto");
    $title = mb_convert_encoding($item['title'],"UTF-8","auto");
    $date = date("Y/m/d", intval($item['date_timestamp']));
    if (preg_match("/^PR:.+$/", $title) != 0) continue;
    if ($line++ == $max_lines) break;
    echo "&lt;dl&gt;&lt;dt&gt;$date&lt;/dt&gt;&lt;dd&gt;&lt;a href=\"$link\" target=\"_blank\"&gt;$title&lt;/a&gt;&lt;/dd&gt;&lt;/dl&gt;";
}
 
?&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-649540157ad11453110703-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157ad11453110703-2">2</div><div class="crayon-num" data-line="crayon-649540157ad11453110703-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157ad11453110703-4">4</div><div class="crayon-num" data-line="crayon-649540157ad11453110703-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157ad11453110703-6">6</div><div class="crayon-num" data-line="crayon-649540157ad11453110703-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157ad11453110703-8">8</div><div class="crayon-num" data-line="crayon-649540157ad11453110703-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157ad11453110703-10">10</div><div class="crayon-num" data-line="crayon-649540157ad11453110703-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157ad11453110703-12">12</div><div class="crayon-num" data-line="crayon-649540157ad11453110703-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157ad11453110703-14">14</div><div class="crayon-num" data-line="crayon-649540157ad11453110703-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157ad11453110703-16">16</div><div class="crayon-num" data-line="crayon-649540157ad11453110703-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157ad11453110703-18">18</div><div class="crayon-num" data-line="crayon-649540157ad11453110703-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540157ad11453110703-20">20</div><div class="crayon-num" data-line="crayon-649540157ad11453110703-21">21</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-649540157ad11453110703-1"><span class="crayon-ta">&lt;?php</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157ad11453110703-2"><span class="crayon-k ">require_once</span><span class="crayon-sy">(</span><span class="crayon-s">"magpierss/rss_fetch.inc"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157ad11453110703-3"><span class="crayon-e">define</span><span class="crayon-sy">(</span><span class="crayon-s">"MAGPIE_CACHE_AGE"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">60</span>*<span class="crayon-cn">30</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157ad11453110703-4"><span class="crayon-e">define</span><span class="crayon-sy">(</span><span class="crayon-s">"MAGPIE_CACHE_DIR"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"/path/2/cache/"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157ad11453110703-5"><span class="crayon-e">define</span><span class="crayon-sy">(</span><span class="crayon-s">"MAGPIE_OUTPUT_ENCODING"</span><span class="crayon-sy">,</span><span class="crayon-s">"UTF-8"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157ad11453110703-6"><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-649540157ad11453110703-7"><span class="crayon-c">// 取得したいRSSのurl 例：アメブロ</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157ad11453110703-8"><span class="crayon-v">$url</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">"http://feedblog.ameba.jp/rss/ameblo/○○○○/rss20.xml"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157ad11453110703-9"><span class="crayon-v">$rss</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">fetch_rss</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-v">$url</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157ad11453110703-10"><span class="crayon-v">$max_lines</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">5</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157ad11453110703-11"><span class="crayon-v">$line</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157ad11453110703-12"><span class="crayon-st">foreach</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">$rss</span>-<span class="crayon-h">&gt;</span><span class="crayon-e">items </span><span class="crayon-st">as</span><span class="crayon-h"> </span><span class="crayon-v">$item</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540157ad11453110703-13"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$link</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">mb_convert_encoding</span><span class="crayon-sy">(</span><span class="crayon-v">$item</span><span class="crayon-sy">[</span><span class="crayon-s">'link'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-s">"UTF-8"</span><span class="crayon-sy">,</span><span class="crayon-s">"auto"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157ad11453110703-14"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$title</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">mb_convert_encoding</span><span class="crayon-sy">(</span><span class="crayon-v">$item</span><span class="crayon-sy">[</span><span class="crayon-s">'title'</span><span class="crayon-sy">]</span><span class="crayon-sy">,</span><span class="crayon-s">"UTF-8"</span><span class="crayon-sy">,</span><span class="crayon-s">"auto"</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157ad11453110703-15"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">$date</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-e">date</span><span class="crayon-sy">(</span><span class="crayon-s">"Y/m/d"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-e">intval</span><span class="crayon-sy">(</span><span class="crayon-v">$item</span><span class="crayon-sy">[</span><span class="crayon-s">'date_timestamp'</span><span class="crayon-sy">]</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157ad11453110703-16"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-e">preg_match</span><span class="crayon-sy">(</span><span class="crayon-s">"/^PR:.+$/"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-v">$title</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">!</span>=<span class="crayon-h"> </span><span class="crayon-cn">0</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-st">continue</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157ad11453110703-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-v">$line</span>++<span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-v">$max_lines</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-st">break</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157ad11453110703-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-k ">echo</span><span class="crayon-h"> </span><span class="crayon-s">"&lt;dl&gt;&lt;dt&gt;$date&lt;/dt&gt;&lt;dd&gt;&lt;a href=\"$link\" target=\"_blank\"&gt;$title&lt;/a&gt;&lt;/dd&gt;&lt;/dl&gt;"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540157ad11453110703-19"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540157ad11453110703-20"><span class="crayon-h"> </span></div><div class="crayon-line" id="crayon-649540157ad11453110703-21"><span class="crayon-ta">?&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>あとは、<br />
<a href="http://magpierss.sourceforge.net/" target="_blank">Magpie RSS</a>でダウンロードしたフォルダを「magpierss」としてindex.phpの下の階層にアップロードするだけでOKです。</p>
<h2>wordpressを使ってサイトに表示する</h3>
<p>wordpressを使用しているサイトならコチラの方法がいいかもしれないですね。</p>
<p><a href="http://kyasper.com/wordpress-rss/" target="_blank">WordPress（ワードプレス）RSSを使って、外部サイトの更新情報を自分のサイトに表示する | 福島県郡山市のホームページ制作、Web制作　Kyasper Web Design キャスパーウェブデザイン</a></p>
<h2>Google AJAX Feed APIを使ってサイトに表示する</h3>
<p>ページを.htmlでやりたい！という方はこちらがいいと思います。<br />
Googleさんが提供しているapiを使用する方法になります。</p>
<p><a href="http://www.magical-remix.co.jp/magicalog/archives/1570" target="_blank">Google AJAX Feed APIでフィードを読み込む | Magicalog</a></p>
<p><a href="http://zxcvbnmnbvcxz.com/jquery-google-feed-api/" target="_blank">簡単！RSS（XML）を取得&amp;表示させる方法 – jQuery + Google Feed APIを使用してFeedを表示させる方法 | Stronghold</a></p>
<p>前にxmlを読み込んで表示させたことはあったのですが、<br />
rssとなると方法は変わってくるんですね〜</p>

アメブロのブログ記事をRSSで取得し、サイトに表示する方法

<p>今年の6月から日本郵便の新たなサービスとして「ゆうパケット」なるものをはじめました。 ヤマトや佐川が値上げを進める中、低コスト化を謳ったサービスのようなので、もし本当にコストが下がるならゆうパケットを利用するのもありかなと調べてみました。</p>
<p><a href="/uploads-archive/2014/08/20140521yubin.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5511" src="/uploads-archive/2014/08/20140521yubin.jpg" alt="20140521yubin" width="300" height="95" srcset="/uploads-archive/2014/08/20140521yubin.jpg 300w, /uploads-archive/2014/08/20140521yubin-228x72.jpg 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>そもそもゆうパック（宅配便）とゆうメール（メール便）があるのに、なぜに新サービスという事ですが、私が担当する通販サイトも含めて、扱っている商品によっては上記の２サービスはサイズの条件が微妙だったりします。</p>
<p>コスメやファッション小物、コンタクトレンズなどはメール便で送る場合に厚みの制限に引っ掛かり、しかたなく宅配便を使ったりしている場合があります。</p>
<p>宅配便の送料は大口でも１個４００円以上はするので、送料無料があたりまえになってきている楽天・yahooショッピングなどのモールでは、かなり頭を悩ませるところです。サイズ的にメール便に入ったとしても、配送が遅かったり、追跡ができなかったりと顧客満足度に影響する要素があります。</p>
<p>おそらく「ゆうパケット」はそういったＥＣ事業者をターゲットにしているのだと思います、つまり宅配便とメール便の丁度中間というイメージです。料金的には宅配便より安価でメール便よりも早く届けられるという事なのでしょう。</p>
<p>メール便は厚みの条件が２センチ以内というものが多いですが、ゆうパケットは３センチまで大丈夫のようです、３辺の合計が６０センチを超えなければいいようなので、ある程度自由が利きそうです。</p>
<p>加えて追跡が可能なので、「届かないけど、どうなっているの？」というお客さんがいた場合でも状況を確認できます。メール便（ゆうメール）では追跡ができないので苦労する事が多々ありますが、そこは解消できそうです。</p>
<p>とはいえ一番大事な料金ですが、一体いくらなんだと日本郵便のホームページやらリリースを探し回りましたがのっておらず、結局のところ集配担当になる近くの郵便局と相談の上、料金がきまるようです。ゆうパケットについて書いている記事なんかを見ると１００円～３００円程度となっているようです。</p>
<p>早速、担当となる郵便局の窓口に電話してみましたが、郵便局のスタッフさんは「ゆうパケット？、そんなのあるんですか？」と逆に聞かれてしまいました。郵便局の中でも定着していないような気がしますが、まだ始まって３か月弱という事で、そんなものなのかもしれません。</p>
<p>送料は個数・重さ・サイズによって幅があるようで、個数によっては下げられそうな感じです。ただ1年間に５００個以上という条件があるとの事。</p>
<p><a href="/uploads-archive/2014/08/b2_img01.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5513" src="/uploads-archive/2014/08/b2_img01.jpg" alt="b2_img01" width="680" height="518" srcset="/uploads-archive/2014/08/b2_img01.jpg 680w, /uploads-archive/2014/08/b2_img01-300x228.jpg 300w, /uploads-archive/2014/08/b2_img01-228x173.jpg 228w" sizes="(max-width: 680px) 100vw, 680px" /></a></p>
<p>&nbsp;</p>
<p><strong>ＥＣでの存在感を強める日本郵便</strong></p>
<p>配送サービスでの新しい展開に加えて、ＥＣ-CUBEとの連携も始めたようです。</p>
<p><a href="/uploads-archive/2014/08/5e2ba2041e10013c988debadc5918945.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5518" src="/uploads-archive/2014/08/5e2ba2041e10013c988debadc5918945.png" alt="いよいよEC本格始動！ ゆうびんポータル連携支援パートナー募集   ECサイト構築・リニューアル ECオープンプラットフォームEC CUBE" width="366" height="45" srcset="/uploads-archive/2014/08/5e2ba2041e10013c988debadc5918945.png 366w, /uploads-archive/2014/08/5e2ba2041e10013c988debadc5918945-300x36.png 300w, /uploads-archive/2014/08/5e2ba2041e10013c988debadc5918945-228x28.png 228w" sizes="(max-width: 366px) 100vw, 366px" /></a></p>
<p>EC-CUBEで買い物をする場合は会員登録が必要になりますが、日本郵便が運営するサイトの「ゆうびんポータル」のＩＤでもログインができ、商品を購入できるそうです。</p>
<p>※ゆうびんポータルとは・・・</p>
<blockquote><p><span style="color: #222222;">メールアドレスや住所等を登録して会員になれば、「</span><b style="color: #222222;">ゆうびん</b><span style="color: #222222;">ID」（お客さまID）を取得し、集荷や再配達のお申し込みをはじめとした日本郵便</span><span style="color: #222222;">の各種サービスを利用できる</span></p></blockquote>
<p><a href="http://www.ec-cube.net/jp/partner.php">http://www.ec-cube.net/jp/partner.php</a></p>
<p>&nbsp;</p>
<p>さらに通販事業者からの荷受け増加を目指して、「通販ワンストップ通販ソリューション」なる、サイトの構築、受注、出荷、決済、マーケティングまでをトータル的に請け負うサービスも始めるとのことです。アマゾンFBAのような商品を預かる倉庫もあり、コールセンター運営も行うそうです。</p>
<p>本格的に日本郵便がＥＣ業界に参入する形になりそうです、今後ＥＣ業界における配送サービスの中心的な存在にもなりうるので、どんな展開をみせるのか注意してみていく必要がありそうです。</p>
<p><a href="/uploads-archive/2014/08/www.post_.japanpost.jp-service-tsuhan_solution-pdf-jp_sol.pdf.png"><img decoding="async" loading="lazy" class="alignnone wp-image-5519" src="/uploads-archive/2014/08/www.post_.japanpost.jp-service-tsuhan_solution-pdf-jp_sol.pdf.png" alt="www.post.japanpost.jp service tsuhan_solution pdf jp_sol.pdf" width="800" height="572" srcset="/uploads-archive/2014/08/www.post_.japanpost.jp-service-tsuhan_solution-pdf-jp_sol.pdf.png 903w, /uploads-archive/2014/08/www.post_.japanpost.jp-service-tsuhan_solution-pdf-jp_sol.pdf-300x214.png 300w, /uploads-archive/2014/08/www.post_.japanpost.jp-service-tsuhan_solution-pdf-jp_sol.pdf-228x163.png 228w" sizes="(max-width: 800px) 100vw, 800px" /></a></p>
<p><a href="http://www.post.japanpost.jp/service/tsuhan_solution/pdf/jp_sol.pdf">http://www.post.japanpost.jp/service/tsuhan_solution/pdf/jp_sol.pdf</a></p>
<p>&nbsp;</p>


日本郵便の新サービス『ゆうパケット』でＥＣ事業者は低コスト化を目指せる！？

HTML5のCanvasでレスポンシブなリンク – 円弧編

<p>たまにamazonの商品リンクが張られたツイートがありますが、そういったツイートにリプライするだけで、その商品が購入できるサービスが始まったようです。</p>
<p>仕組みはかなりシンプルで、商品リンクが張られたツイートに「#アマゾンポチ」とハッシュタグをつけてリプライ（返信）するだけです。その後、amazon側から「カートに入りました」というリプライが来ます。</p>
<p><span style="line-height: 1.5em;"><a href="/uploads-archive/2014/08/amazon_notice.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-5463" alt="amazon_notice" src="/uploads-archive/2014/08/amazon_notice.png" width="463" height="231" srcset="/uploads-archive/2014/08/amazon_notice.png 463w, /uploads-archive/2014/08/amazon_notice-300x149.png 300w, /uploads-archive/2014/08/amazon_notice-228x113.png 228w" sizes="(max-width: 463px) 100vw, 463px" /></a></span></p>
<p>&nbsp;</p>
<p>amazonからのリプライに張られてリンクから、カート内を確認できて、そのまま購入できてしまうという事です。</p>
<p>ただ、amazonとtwitterのアカウントがリンクされていないとカートには入りません。</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-5462" alt="www.amazon" src="/uploads-archive/2014/08/www.amazon.jpg" width="600" height="108" /></p>
<p>かなりシンプルで、ページの遷移が極端に少ないので本当に欲しいなと思った時には楽ちんです。</p>
<p>影響力が大きくフォロアーを多数抱えている人は、ツイートするだけで商売ができてしまう気がします。例えばアーティストが自分の音源を買って欲しいとか、著名人が自分の本を買ってほしいとか。</p>
<p>合わせてネットショップの運営にも使えそうな感じがします、顧客にお店のアカウントをフォローしてもらい、チラシ代わりに使うなんてやり方ができると思います。</p>
<p>例えば、タイムセール的な「今から24時間はamazonで商品が５０％オフ」みたいな事ができそうです。楽天やＹａｈｏｏと違ってストアメール（販促メール）を個別に送るのが難しいamazonで活用すると良いかもしれません。</p>


リプライするだけで購入できるアマゾンポチ

<p>PCでの操作というか、スクリーンショットの動画版(といってもgifアニメ)を撮れるアプリです。</p>
<p><a href="http://recordit.co/" target="_blank">Recordit: Record screencasts fast &amp; free! with GIF Support!</a></p>
<p>操作は凄い簡単です。サイトのTOPページを見るだけで、方法がわかります。</p>
<p>試しに、前回記事でも書いたphotoshopのスクリプトを実行した時の動きをやってみました。</p>
<h2>Distribute Layer Spacing Horizontal</h3>
<p><a href="/designer/%e3%81%a8%e3%81%a3%e3%81%a6%e3%82%82%e4%be%bf%e5%88%a9%e3%81%aaphotshop%e3%81%ae%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b35%e9%81%b8.html">とっても便利なphotshopのプラグイン5選 | スターフィールド株式会社</a></p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-5452" alt="HvQ4nmnkkl" src="/demo/abe/sample/HvQ4nmnkkl.gif" width="648" height="400" /></p>
<p>いい感じに撮れてますね。</p>
<p>ちょっとした操作説明やマニュアル作成なんかに便利かもしれません。</p>


PCでの操作を録画してgifにしてくれるアプリ「Recordit」

<p>I have gathered together some interesting tools, that i found out to be really useful when it comes to get an overview of the style guide of other great websites.</p>
<p><strong><a href="http://www.wirify.com">Wirify</a></strong></p>
<p><a href="/uploads-archive/2014/08/Wirify.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-5408" alt="Wirify" src="/uploads-archive/2014/08/Wirify-300x173.png" width="400" height="273" /></a></p>
<p>The first tool will help you to see the internal structure of a website, to get inspired by the layouts of other well designed sites, turning any website you like to a wireframe, with just one click.</p>
<p>I would recommend to wait until the whole page is completely loaded before you attempt to “wirify” it. To return to the original page simply click anywhere on the wireframe.</p>
<p>The best way to keep the wireframe and use it afterwards is to save the whole page as an image, using a browser add-on or extension, like the following ones:</p>
<ul>
<li><a title="Download Google Chrome Screen Capture extension by Google" href="https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg"> Screen Capture extension</a> for Google Chrome</li>
</ul>
<p>&nbsp;</p>
<ul>
<li><a title="Download Screengrab Firefox Add-on by Andy M" href="https://addons.mozilla.org/en-US/firefox/addon/1146/"> Screengrab add-on</a> for Firefox.</li>
</ul>
<p>&nbsp;</p>
<p>Check how Wirify works in this video:</p>
<p><iframe loading="lazy" width="500" height="375" src="http://www.youtube.com/embed/XgzPHFRx-xM?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><b> </b></p>
<p><strong><a href="http://stylifyme.com/">Stylifyme</a></strong></p>
<p><a href="/uploads-archive/2014/08/Stylifyme.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-5409" alt="Stylifyme" src="/uploads-archive/2014/08/Stylifyme-300x186.png" width="400" height="286" /></a></p>
<p>Stylifyme was created to help designers gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. Just copy the link of any particular site you like, and simply paste it in Stylifyme site and you will get the results in a couple of seconds.</p>
<p><b> </b></p>
<p><strong><a href="http://lokeshdhakar.com/projects/color-thief/">Color Thief</a></strong><b> </b></p>
<p><a href="/uploads-archive/2014/08/Color-thief.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-5410" alt="Color thief" src="/uploads-archive/2014/08/Color-thief-300x221.png" width="400" height="321" /></a></p>
<p>This simple tool helps you to grab the colour palette from an image.</p>
<p>Give it a try, scroll down the site and drag an image inside, Colour thief is going to reveal the dominant colour on top and the full colour palette.</p>


Visual tools for web designers

<p>Yahoo！ショッピングが主催するセミナーに参加する機会があり、そこでYahoo!の担当者が今後彼らが目指す方向性を語っていました。その内容が興味深かったので書こうと思います。</p>
<p>参加したセミナーは売上向上策に関するよくあるセミナーだったのですが、余談としてモール自体を今後変化させていくという話がありました。</p>
<p>キーワードとしては大きく３つあり、「パーソナライズ」「キュレーション」「検索の進化」として紹介していました。これらの言葉に関しては、ＷＥＢやネットショップに詳しい方ならすでにご存じのワードかもしれませんが説明させて頂きます。</p>
<h3>パーソナライズ</h4>
<p>パーソナライズとは商品の購入時に年齢や性別、職業、趣味などの情報からモールを訪問した際に関連の高いと思われる商品をおすすめ商品として大きく表示したりする事です。</p>
<p>過去に購入した商品を表示する場合もあります。楽天などでは既に行われています。</p>
<p>つまりユーザーの好みにあった商品や店舗がすぐ見つけられ、使いやすさを向上するということです。逆を返すと商品を売る側からすれば、より買ってもらいやすくなったりリピート率が向上するなど、どちらにもプラスになります。</p>
<p>yahoo！ショッピングもこのパーソナライズをさらに強くするようです。</p>
<h3>キュレーション</h4>
<p>博物館や図書館などの管理者や館長を意味する「Curator(キュレーター)」からきている言葉のようです。何か商品を買う時に知識が豊富な人が推薦するものなら信用が持てると思います。</p>
<p>例えば長年営んでいる八百屋さんが選んだ野菜と、その辺の主婦が選んだ野菜があったら、多くの人は八百屋さんが選んだ野菜を購入すると思います。</p>
<p>yahoo！ショッピングの担当者は、そうしたプロの目利きを参考に買い物ができる仕組みを作りたいという趣旨の話をしていました。</p>
<h3>進化した検索</h4>
<p>どう進化させるのかというと、パーソナライズと若干近いのかもしれませんが、検索結果が人によって異なる物にしたいという事です。年齢や性別などによって求めているもは違うので、モール内の検索に関しても個人の趣味嗜好にあった結果を出せるようにしたいのだそうです。</p>
<p>例えば１０代の女性と４０代の男性が『カバン』と検索した時に同じ検索結果は好ましくないという事です。商品名など細かい情報をいれなくても、ユーザーに沿った検索結果が表示されるなら、かなり便利だと思います。検索エンジンを運営するyahoo!の強みを出すならこういう所なのかもしれません。</p>
<p>&nbsp;</p>
<p>ユーザーにとって使いやすいモールはおそらく売り上げも良くなるはずなので、yahoo!ショッピングには頑張って頂きたいなと思います。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Yahoo！ショッピングが目指すモールの形とは？

HTML5のCanvasでレスポンシブなリンク &#8211; 矩形(四角)編

<p>In the age of information overload&#8230;<a href="https://dragdis.com">Dragdis </a>is the ultimate bookmarking tool that pulls it all together.</p>
<p>This extension helps you curate and organize your resources as soon as you come across them thanks to an extremely simple sidebar.</p>
<p>Launched early March this year, Dragdis works by installing browser extension that adds this bookmarking functionality when you need it.</p>
<p>It goes without saying that there are plenty of tools and utilities, which do this job, like Evernote, Pinterest, Springpad, Finland’s Kippt and Pocket. But none of them focus on easing the process, most of the bookmarking tools you need to do a lot of actions to save anything. However with Dragdis all you need to do is simply drag and drop any link, text, image or video into a folder in the Dragdis bar that appears on the right side of your browser once you start dragging. Very neat.</p>
<p>Once in Dragdis, everything is stored in the cloud. They currently support Chrome, Safari and Firefox. You can have access to your selected apps too, like Facebook, Twitter, Dropbox, Google Drive, Evernote and Pinterest, for example.</p>
<p>The Lithuanian-based startup was founded back in 2012 by first-time entrepreneurs, Domas Sabockis, Karolis Malcevičius and Eugenijus Jusas. Sabockis explains he got the idea for the service while working in an ad agency as a creative, where he was constantly losing images, videos, links he found on the internet. After trying different tools and not finding one he really liked, he decided to quit his job to build Dragdis.</p>
<p>Check out this Dragdis video and see it in action.</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="560" height="315" src="//www.youtube.com/embed/HLEAA_tIpbY" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<p>Interested users can sign up <a href="https://dragdis.com/">here</a>.</p>
<p>What do you think of this simple application?</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2014/09/10

2014/09/04

2014/09/03

2014/09/02

2014/08/27

2014/08/27

2014/08/26

2014/08/20

2014/08/20

2014/08/19

2014/08/06

2014/08/05

2014/08/05

2014/08/05

2014/07/30

2014/07/30

2014/07/30

2014/07/30