<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>


Dragdis:　The ultimate Bookmarking service

<p>前回css3のアニメーションの記事を書きましたが、</p>
<p><a href="/designer/css3%e3%81%aeanimation%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f%e3%82%89%e4%ba%88%e6%83%b3%e4%bb%a5%e4%b8%8a%e3%81%ab%e7%b0%a1%e5%8d%98%e3%81%a0%e3%81%a3%e3%81%9f%ef%bc%81.html">css3のanimationを使ってみたら予想以上に簡単だった！ | スターフィールド株式会社</a></p>
<p>タイトルのようなwebサービスがあるようです。</p>
<p>その名も、<a href="http://bouncejs.com/" target="_blank">Bounce.js</a></p>
<p>四角いボックスのアニメーションを、</p>
<p>様々な項目から設定でき、css3でエクスポートできます。</p>
<p>エクスポートのソースかなり長いですね笑</p>
<p>&nbsp;</p>
<p>アニメーションのパターンも用意されています。</p>
<p><a href="http://bouncejs.com/" target="_blank" class="link">Bounce.js</a></p>
<p>&nbsp;</p>


css3アニメーションをwebブラウザ上で作成できるサービス

<p>本日は、htmlやcssはたまたjavascriptのソースを綺麗にしてくれるwebサービスを紹介します！<br />
もちろんお金等はかかりません。</p>
<p>綺麗に書くように意識しつつも、<br />
忙しい時期や、修正が繰り返し発生したりすると、<br />
ソースを綺麗にする意識はどこかにいってしまいがちですよね・・・(自分だけでしょうか？)</p>
<p>そんな時に、ソースを書き終わったら、<br />
このツールを使えば、ソースがあっという間にキレイになります。</p>
<p>&nbsp;</p>
<h2>PrpCSSor</h3>
<p><a href="http://procssor.com/process" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-4547" alt="ProCSSor - Advanced CSS Prettifier" src="/uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-1024x693.jpg" width="505" height="341" srcset="/uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-1024x693.jpg 1024w, /uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-300x203.jpg 300w, /uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-228x154.jpg 228w, /uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier.jpg 1117w" sizes="(max-width: 505px) 100vw, 505px" /></a><br />
こちらはcss専用で、オプションが豊富です。</p>
<p>・インデントの設定（1から4の半角スペース）<br />
・括弧の位置の指定<br />
・複数セレクタ指定の際、改行or一行の選択<br />
・親子関係の際にインデントの指定</p>
<p><a href="http://procssor.com/process" class="link" target="_blank">PrpCSSor</a></p>
<h2>DIRTYMARKUP</h3>
<p><a href="http://www.dirtymarkup.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-4545" alt="Dirty Markup · Tidy and Beautify your HTML, CSS, and JavaScript code" src="/uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-1024x684.jpg" width="506" height="337" srcset="/uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-1024x684.jpg 1024w, /uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-300x200.jpg 300w, /uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-228x152.jpg 228w, /uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b.jpg 1132w" sizes="(max-width: 506px) 100vw, 506px" /></a><br />
こちらは、html,css,javascriptも整形出来ます。<br />
デバック機能もあるようです。</p>
<p>・インデントの設定（1から4の半角スペース、タブ）</p>
<p><a href="http://www.dirtymarkup.com/" class="link" target="_blank">DIRTYMARKUP</a></p>
<h2>ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）</h3>
<p><a href="http://u670.com/pikamap/htmlseikei.php" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-4546" alt="ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）" src="/uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-1024x693.jpg" width="503" height="340" srcset="/uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-1024x693.jpg 1024w, /uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-300x203.jpg 300w, /uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-228x154.jpg 228w, /uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35.jpg 1117w" sizes="(max-width: 503px) 100vw, 503px" /></a><br />
こちらはHTMLのみになりますがシンプルなので、<br />
単純に整形したい場合は、こちらでやるのがいいかと思います。</p>
<p>・インデントの設定（1,2,4の半角スペースかタブ）<br />
名前の通りデバッグ機能もあるようです。</p>
<p><a href="http://u670.com/pikamap/htmlseikei.php" class="link" target="_blank">ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）</a></p>
<p>個人的にはソースは汚すぎなければいいという考えですが、<br />
googleさんでhtmlが「こう書いたほうがいいよ」というレギュレーションがあるみたいなので、<br />
それに沿ってみようかなと思う今日この頃です。</p>
<p>それはコチラ</p>
<p><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml" target="_blank">Google HTML/CSS Style Guide</a></p>
<p>これを翻訳したのがコチラ、<br />
<a href="http://re-dzine.net/2012/05/google-htmlcss-style-guide/" target="_blank">「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN</a></p>
<p>中には、cssをアルファベット順に書くという面倒くさそうなものもあります・・・</p>
<p>googleが提唱しているのであれば、<br />
それにのっとるのがベストなのかもしれませんね・・・</p>


HTMLやCSSをキレイに整形してくれるオンラインツールご紹介

<p>当社運営サイトコンペナビ(<a href="http://compe.sterfield.jp/" target="_blank">http://compe.sterfield.jp/</a>)にてコンペ主催のお手伝いをさせていただいた</p>
<p>第1回 行田市CMコンテストが本日表彰式を終え、無事終了した。</p>
<p>&nbsp;</p>
<p>1回目であるということ、行田まで足を運び撮影をする必要があること</p>
<p>という障壁があり、10件程度集まれば良い方と主催者にお伝えしていたが、</p>
<p>結果として36件もの応募を頂いた。</p>
<p>実物の公表はまだ主催者側で無いので伏せるが、クオリティが高い作品が多かったと思う。</p>
<p>成功と言える形で完了し、胸を撫で下ろしているわけだが、</p>
<p>今一度初心に帰ってコンテストをやる意味、コンペナビを使うメリットを考えてみた。</p>
<p>&nbsp;</p>
<h2>コンテストを主催する意味</h3>
<p>・プロを含む複数の人からアイデアをもらえる</p>
<p>募集のしかたによって、プロ禁止や学生限定などターゲットを絞って作品やアイデアの応募ができる。</p>
<p>例えば女性向けのアパレル企業がキャッチコピーを募集すると、</p>
<p>ターゲットの客層に限定したコンテストにすることで企業側の意図と顧客のニーズをマッチさせることができる。</p>
<p>また、賞をその企業の商品数十万円分などとすればその企業の製品が好きな人が集まりやすい。</p>
<p>&nbsp;</p>
<p>・応募(受賞)作品の著作権を得られる</p>
<p>例えば今回の場合はCMコンテストだったが、多くのコンテストの場合、</p>
<p>受賞作品は賞や賞金と引き換えに主催者側に作品の所有権若しくは使用権が与えられる。</p>
<p>要は主催者の思うとおりに使用できる。</p>
<p>&nbsp;</p>
<p>・話題になる</p>
<p>コンテストはアイデアや作品を募集するということを1つのイベントにすること。</p>
<p>プレスリリースができるし、メディアに取り上げられやすい。</p>
<p>あとはSNSとの親和性も高いため話題になりやすいし、ファンを増やせる要素が多い。</p>
<p>&nbsp;</p>
<h2>コンペナビを使うメリット</h3>
<p>・過去5年間のコンテストデータから適切な企画が立てられる</p>
<p>例えば4月から動画コンテストを開催したい場合、過去のデータからこの時期に行われている動画コンテストと</p>
<p>その賞金や募集要項など細かい情報がコンペナビのデータベースに入っている。</p>
<p>応募者がかぶりそうな場合は競合のコンテストより賞金を上げたり、応募者層をかぶらないよう内容や時期を変更するという判断ができる。</p>
<p>あとは過去の広告方法に対する募集数のデータを参照することによって戦略も立てやすい。</p>
<p>&nbsp;</p>
<p>・業界トップクラスの掲載&amp;アクセス数</p>
<p>業界トップクラスの掲載数とアクセス数があり、トップページ上に</p>
<p>募集期間中広告をジャックすることができるため、複数の応募者にリーチすることができる。</p>
<p>&nbsp;</p>
<p>・応募システムがある</p>
<p>データでの応募が可能なコンテストでは、コンペナビに応募フォームを設置し</p>
<p>データのアップロードもできる機能がある。</p>
<p>そのため手続きなどがいらず手軽に応募できる。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


第1回 行田市CMコンテスト

<p>とても鋭いサービスを見つけたのでシェア。<br />
<a href="http://www.fromjapanlimited.com/" target="_blank">http://www.fromjapanlimited.com/</a></p>
<p>バナーをはるだけで海外販売ができるというとても目を引くサービス。<br />
直感的に切り口が鋭いというかセンスが良いと思った。</p>
<p>特長は<br />
・バナーを貼るだけで海外に販売できる<br />
・初期費用、月額0円<br />
・回収リスク無し<br />
・顧客対応代行<br />
となっており、手軽に既存のサイトに以下のようにバナーを貼るだけで設定は完了とのこと。</p>
<p><a href="/uploads-archive/2014/03/place_sample.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4510" alt="place_sample" src="/uploads-archive/2014/03/place_sample-300x219.png" width="300" height="219" srcset="/uploads-archive/2014/03/place_sample-300x219.png 300w, /uploads-archive/2014/03/place_sample-1024x747.png 1024w, /uploads-archive/2014/03/place_sample-228x166.png 228w, /uploads-archive/2014/03/place_sample.png 1200w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>仕組みとしてはたぶん<br />
・バナーはおそらくformになっており価格や加盟店情報がサービス提供元に送られる<br />
・共通の決済画面で決済<br />
・決済はクレジットカードとなっており回収リスクをカバー<br />
・サービス提供元は決済代行による収益を得る<br />
という流れではないかと個人的には予想。</p>
<p>以下のようなECサイトにはとても助かる機能だと思う。<br />
・決済会社がグローバル決済に対応していない<br />
・ASPが多言語対応していない</p>
<p>あと、顧客対応をしてくれるというのは大きいと思う。<br />
(商品についての説明ができるのかは不明)</p>
<p>あとは本サービスで配送までやってくれるのかは分からないが、<br />
そこのノウハウと体制があれば非常に強いと思った。</p>
<p>とても刺激的で参考にしたいサービスだ</p>


【良いサービス】バナーをはるだけで海外販売

<p>今更ながらですが、google fontsについての記事を書くことにしました。</p>
<p>1,2年前ぐらいwebフォントが出現し、モリサワ等の会社もwebフォントを提供していますが、<br />
webフォントを実際のサイトで使用したことはまだありません。</p>
<p>その理由としては有料ということもあると思いますが、そこまでフォントに対してこだわるお客さんがいないといった所でしょうか。。webフォントを読み込むのに時間がかかってユーザビリティが悪いといった懸念もあるように思います。</p>
<p>google fontsは無料かつ商用可で、特に登録もなく利用できるのですが、<br />
こちらは英語しかないためまだ使用に至っていません。</p>
<p>結局の所、今後もしばらくはwebフォントを使う予定はないかもしれません笑</p>
<p>とはいえ、使い方を学んでおくにこしたことはないので、<br />
軽くでは試してみたので、そちらとその流れを紹介したいと思います。</p>
<p><a class="demo" href="/demo/abe/36/" target="_blank">DEMO</a></p>
<h2>Google Fontsを使ってみた</h3>
<p>まずは、<a href="http://www.google.com/fonts" target="_blank">Google Fonts</a>で使いたいフォントを選びます。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3728" alt="Google Fonts" src="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>今は全部629種類のフォントがあるようですね。<br />
基本的にはこの画面から、<br />
フォントのカテゴリー（Serif,Sans Serif,Display,Handwriting）やThickness,Slant,Widthを設定して検索できます。</p>
<p>フォントの右下の⇒みたいなマークを押すと、</p>
<p>詳細画面に遷移します。</p>
<h2>webフォントのスクリプトタグをゲット！</h3>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/12/Google-Fonts2.jpg"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3727" alt="Google Fonts2" src="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts2-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts2-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts2.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></a></p>
<p>右側のストップウォッチみたいものはそのフォントを読み込むのかかる時間を表しているようです。</p>
<p>このページの下に、以下のようなwebフォントを読み込むスクリプトタグがあります。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd594c5c654787806" 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">XHTML</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;link href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'&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-64953fd594c5c654787806-1">1</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-64953fd594c5c654787806-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">href</span>=<span class="crayon-s ">'http://fonts.googleapis.com/css?family=Wellfleet'</span><span class="crayon-h"> </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">'stylesheet'</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s ">'text/css'</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>もうこれでOKです！</p>
<p>&nbsp;</p>
<p>あとはcssで、</p>
<p></p>

		<div id="crayon-64953fd594c60148252762" 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-family: 'Wellfleet', cursive;</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-64953fd594c60148252762-1">1</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-64953fd594c60148252762-1"><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'Wellfleet'</span><span class="crayon-i ">,</span><span class="crayon-h"> </span><span class="crayon-i ">cursive</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>としてすればOKです！</p>
<p>非常に簡単ですね！</p>
<p>&nbsp;</p>
<h2>Google Fontsを選ぶのに便利なサイト</h3>
<p>以下のサイトでは、実際にgoogle fontsを試せて、ダウンロードまでできるサイトです。<br />
フォントの数が多いのでこちらで試しながらフォントを決めるのがオススメです！</p>
<p><a href="http://typecast.com/preview/google" class="link" target="_blank">Typecast &#8211; Public Demo | Design in the browser with web fonts and real content</a></p>
<p>また、googlefontsとは関係ないのですが、<br />
フォント選びということで、便利なサイトを紹介します。</p>
<p>好きな文字/単語を、<br />
自分のパソコンに入っているフォントで一覧で表示してくれるサイトです。<br />
一つ一つPhotoshopで試すのはちょっと面倒ですよね！<br />
意外と役に経ちます。</p>
<p><a href="http://wordmark.it/" class="link" target="_blank">wordmark.it &#8211; helps you choose fonts!</a></p>
<p>&nbsp;<br />
&nbsp;<br />
&nbsp;</p>
<p>google fontsで日本語出してくれないかな〜</p>

Google Fontsを使ってみた＆フォント選びに便利なツール

<p>いよいよ、igoogleの終了が迫ってきましたね。igoogleがスタートして以来、RSSリーダーが発展しようがソーシャルメディアが出てこようが、私のブラウザのホームボタンはいつもigoogleでした。</p>
<p>調べて見ると、2005年に始まったサービスのようです。私も学生時代から使っていたことを記憶していますので、7年以上のお付き合いになるかと思います。</p>
<p>この一覧性による「新聞の一面だけ見ておけ的な」サービスが好きです。</p>
<p>ということで、googleの戦略を考えるとigoogleに留まって欲しくないのは必然だろうなと惜しまれつつも終了が近づいているので、移行先を探しています。</p>
<p>igoogle代替のサービスとして<a href="http://www.symbaloo.com/">Symbaloo</a>、<a href="http://www.ighome.com/">igHome</a>、<a href="http://www.netvibes.com/ja-jp">Netvibes</a>などが名乗りを挙げており、特に<a href="http://www.netvibes.com/ja-jp">Netvibes</a>を押すブログが多いのですが、私はあえてMy　Yahoo!を選択しました。</p>
<h2>My Yahoo!</h3>
<p><a href="/uploads-archive/2013/10/Yahoo__JAPAN-6.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3496" alt="Yahoo__JAPAN-6" src="/uploads-archive/2013/10/Yahoo__JAPAN-6-300x142.jpg" width="300" height="142" srcset="/uploads-archive/2013/10/Yahoo__JAPAN-6-300x142.jpg 300w, /uploads-archive/2013/10/Yahoo__JAPAN-6-228x107.jpg 228w, /uploads-archive/2013/10/Yahoo__JAPAN-6.jpg 959w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>まず、My Yahoo!への遷移ですがなんとTOPページの右横にあります。力を入れている証拠でしょうか？</p>
<p><a href="/uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3497" alt="My_Yahoo__-_Myページ-6" src="/uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512-300x167.jpg" width="300" height="167" srcset="/uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512-300x167.jpg 300w, /uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512-1024x572.jpg 1024w, /uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512-228x127.jpg 228w, /uploads-archive/2013/10/3b76771c30e7f4a62524fe3cb5dcd512.jpg 1355w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>デフォルトのトップページです。右上の領域は広告が入っています。これは固定で動かすことが出来ません。</p>
<p>&nbsp;</p>
<h3>igoogle設定エクスポート</h4>
<p><a href="/uploads-archive/2013/10/3a53b4077ab6e6901cca74c790fff10f.jpg"><img decoding="async" loading="lazy" alt="iGoogle_の設定" src="/uploads-archive/2013/10/3a53b4077ab6e6901cca74c790fff10f-300x118.jpg" width="300" height="118" /></a></p>
<p>それでは、移行の準備をしましょう！</p>
<p>igoogle&gt;igoogleの設定から最下部でエクスポートができます。</p>
<h3>igoogle移行ツール</h4>
<p>そしてここからが、My Yahoo!の真骨頂です。</p>
<p>なんとigoogleの移行ツールが用意されています。</p>
<p>広告の少し上の帯か以下のURLからアクセスしてください。</p>
<p><a href="http://docs.my.yahoo.co.jp/st/promo/change/" target="_blank">http://docs.my.yahoo.co.jp/st/promo/change/</a></p>
<p><a href="/uploads-archive/2013/10/3573bb63cb2593989d1af3436688de93.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3498" alt="My_Yahoo_へカンタン引っ越ししよう！_-_Yahoo__JAPAN" src="/uploads-archive/2013/10/3573bb63cb2593989d1af3436688de93-300x273.jpg" width="300" height="273" srcset="/uploads-archive/2013/10/3573bb63cb2593989d1af3436688de93-300x273.jpg 300w, /uploads-archive/2013/10/3573bb63cb2593989d1af3436688de93-228x207.jpg 228w, /uploads-archive/2013/10/3573bb63cb2593989d1af3436688de93.jpg 973w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><span style="font-size: 0.83em;">上記サイトから先ほどエクスポートをしたファイルをアップロードするだけです。</span></p>
<p><a href="/uploads-archive/2013/10/My_Yahoo__-_Home-2.jpg"><img decoding="async" loading="lazy" class="alignnone size-medium wp-image-3500" alt="My_Yahoo__-_Home-2" src="/uploads-archive/2013/10/My_Yahoo__-_Home-2-300x160.jpg" width="300" height="160" srcset="/uploads-archive/2013/10/My_Yahoo__-_Home-2-300x160.jpg 300w, /uploads-archive/2013/10/My_Yahoo__-_Home-2-1024x548.jpg 1024w, /uploads-archive/2013/10/My_Yahoo__-_Home-2-228x122.jpg 228w, /uploads-archive/2013/10/My_Yahoo__-_Home-2.jpg 1343w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>急上昇ランキングなど、GoogleのサービスでYahoo!で類似のものを持っている場合は、置き換えれるようです。</p>
<p>素敵な機能ですね！</p>
<h2>まとめ</h3>
<ul>
<li>igoogleのバックアップはお早めに！</li>
<li>My Yahoo!最大の利点はigoogle移行ツールが用意されている</li>
<li>Google独自サービスでYahoo!に類似があれば代替してくれる</li>
<li>Yahoo!検索もGoogleと同じアルゴリズムなので、検索結果に差はない</li>
</ul>
<p>ということで、Yahoo!の依存度が高くなりそうな予感をしつつ様子を見てみたいと思います。</p>


igoogleの移行先はMy Yahoo!推し

<p>この業界は、日々新しいことが生まれたり、技術に上限がなかったりと、</p>
<p>日々学んでいくことが必要とされていますが、</p>
<p>そのために必要な勉強会やサイトの情報を紹介します。</p>
<p>現段階で僕が知っている情報ですので、もっと他にもあればぜひぜひ教えて頂きたいです！！</p>
<p>紹介するのは、webサービスや勉強会、イベントサイトになります。</p>
<p>&nbsp;</p>
<h2>3分動画でマスターする初心者向けプログラミング学習サイト &#8211; ドットインストール</h3>
<p><a href="http://dotinstall.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2452" alt="3分動画でマスターする初心者向けプログラミング学習サイト - ドットインストール" src="/uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563.jpg 1228w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-300x164.jpg 300w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-768x419.jpg 768w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-1024x559.jpg 1024w, /uploads-archive/2013/06/ebba14db0b76930f45af05e17ab91563-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>このサイトは素晴らしく、web系をまんべんなく網羅しています。<br />
全部やりきれば一人でほとんどのことはできるんじゃないでしょうか？<br />
無料という所も素晴らしいです！有料にすると、添削機能もつきます！</p>
<p>&nbsp;</p>
<p><a href="http://dotinstall.com/" target="_blank">3分動画でマスターする初心者向けプログラミング学習サイト &#8211; ドットインストール</a></p>
<p>&nbsp;</p>
<h2>schoo（スクー） WEB-campus</h3>
<p><a href="http://schoo.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2453" alt="schoo（スクー） WEB-campus" src="/uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b.jpg 1228w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-300x164.jpg 300w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-768x419.jpg 768w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-1024x559.jpg 1024w, /uploads-archive/2013/06/218ed2bad1655586e3dacf0a3a671e2b-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>このサイトはIT専門ってわけではなく、<br />
ビジネスマンのための学校をweb上で体現しています。<br />
その道のプロが毎週変わる変わるweb上で授業をしてくれます。<br />
動画配信なので、一回だけでなく、好きなときに見ることも出来ます。</p>
<p>無料で利用できますが、有料でも月500円なのでお得だと思います。</p>
<p>&nbsp;</p>
<p><a href="http://schoo.jp/" target="_blank">schoo（スクー） WEB-campus</a></p>
<p>&nbsp;</p>
<h2>TechAcademy [テックアカデミー] | ITに特化したスクール</h3>
<p><a href="http://techacademy.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2454" alt="TechAcademy [テックアカデミー]  ITに特化したスクール" src="/uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b.jpg" width="598" height="326" srcset="/uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b.jpg 1228w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-300x164.jpg 300w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-768x419.jpg 768w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-1024x559.jpg 1024w, /uploads-archive/2013/06/3035ffb4764a9429ddd5417b8419ce4b-228x124.jpg 228w" sizes="(max-width: 598px) 100vw, 598px" /></a></p>
<p>こちらはweb系よりの学校で、お金はかかりますが、時間単位で換算すると、<br />
そこまで高くないかと思います。<br />
まだ一度も行ったことはないので、なにか参加してみたいなぁと思っております。</p>
<p>&nbsp;</p>
<p><a href="http://techacademy.jp/" target="_blank">TechAcademy [テックアカデミー] | ITに特化したスクール</a></p>
<p>&nbsp;</p>
<h2>ストリートアカデミー</h3>
<p><a href="http://www.street-academy.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2455" alt="ストリートアカデミー" src="/uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9.jpg" width="601" height="327" srcset="/uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9.jpg 1228w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-300x164.jpg 300w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-768x419.jpg 768w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-1024x559.jpg 1024w, /uploads-archive/2013/06/171cc755f46487ec7e2f018977c01de9-228x124.jpg 228w" sizes="(max-width: 601px) 100vw, 601px" /></a></p>
<p>こちらは、勉強会サイトで、IT/web専門というわけではないですが、比較的多く行われているようです。</p>
<p>&nbsp;</p>
<p><a href="http://www.street-academy.com/" target="_blank">ストリートアカデミー</a></p>
<p>&nbsp;</p>
<h2>イベントの決済ができるコミュニティ運営システム | Doorkeeper</h3>
<p><a href="http://www.doorkeeper.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2456" alt="イベントの決済ができるコミュニティ運営システム  Doorkeeper" src="/uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44.jpg 1228w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-300x164.jpg 300w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-768x419.jpg 768w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-1024x559.jpg 1024w, /uploads-archive/2013/06/e8e23f194070d09a809043bd669deb44-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a><br />
<a href="http://www.doorkeeper.jp/" target="_blank">イベントの決済ができるコミュニティ運営システム | Doorkeeper</a></p>
<p>こちらは、勉強会告知のコミュニティサイトで、けっこうプログラムの要素が濃く、<br />
すでにコミュニティがいろいろと存在しているので、近くにあるならば参加してみたいですね</p>
<p>&nbsp;</p>
<h2>ライブ・クラブ・セミナー・イベントの集客管理ツール : everevo</h3>
<p><a href="http://everevo.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2457" alt="ライブ・クラブ・セミナー・イベントの集客管理ツール - everevo" src="/uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42.jpg" width="599" height="319" srcset="/uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42.jpg 1228w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-768x410.jpg 768w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-228x122.jpg 228w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-300x160.jpg 300w, /uploads-archive/2013/06/a697c8b61fd54baefd09df322a5a9b42-1024x546.jpg 1024w" sizes="(max-width: 599px) 100vw, 599px" /></a></p>
<p>イベントツールのサイトですが、<br />
どちらかというと交流会要素が強いものが開催されているかなと思います。</p>
<p>&nbsp;</p>
<p><a href="http://everevo.com/" target="_blank">ライブ・クラブ・セミナー・イベントの集客管理ツール : everevo</a></p>
<p>&nbsp;</p>
<h2>イベント集客 告知 | 集客ならイベントアテンド</h3>
<p><a href="http://atnd.org/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2458" alt="イベント集客 告知  集客ならイベントアテンド" src="/uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881.jpg" width="600" height="327" srcset="/uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881.jpg 1228w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-300x164.jpg 300w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-768x419.jpg 768w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-1024x559.jpg 1024w, /uploads-archive/2013/06/d13daf6671e0c8e2768b113399d3a881-228x124.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>あらゆるタイプのイベントを集客するサイトなので、IT系はそこまで多くありません。</p>
<p>&nbsp;</p>
<p><a href="http://atnd.org/" target="_blank">イベント集客 告知 | 集客ならイベントアテンド</a></p>
<p>&nbsp;</p>
<h2>CSS Nite公式サイト</h3>
<p><a href="http://cssnite.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-2459" alt="CSS Nite公式サイト - 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント" src="/uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b.jpg" width="598" height="326" srcset="/uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b.jpg 1228w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-300x164.jpg 300w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-768x419.jpg 768w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-1024x559.jpg 1024w, /uploads-archive/2013/06/7f3c87a31df7f5d358912cbbf0014d5b-228x124.jpg 228w" sizes="(max-width: 598px) 100vw, 598px" /></a></p>
<p>&nbsp;</p>
<p>言わずと知れたcss nite で説明するまでもないと思いますが、<br />
web系を学ぶための集まりとしてはうってつけで暇があればぜひ参加したいものばかり開催されています。</p>
<p>&nbsp;</p>
<p><a href="http://cssnite.jp/" target="_blank">CSS Nite公式サイト &#8211; 「CSS」だけでなく、Web制作全般に関するトピックを取り上げるセミナーイベント</a></p>
<p>&nbsp;</p>
<p>僕的には、もっとデザインよりのイベント・勉強会があればいいな〜と思っています。</p>
<p>参加できるときは参加して、もっと成長したいと思います！</p>


IT・web系の勉強をするためのwebサービス

<p>Web上ではPDFファイルへのリンクを貼ることが度々あります。</p>
<p>ただその場合閲覧する側は、一度ページを離れなくてはならないだけでなく、</p>
<p>PDFがダウンロードされるのを待たねばならないため、あまり軽快とはよべないページになってしまいがちです。</p>
<p>&nbsp;</p>
<p>今回ご紹介するGoogle Docs Viewerは、Googleドライブを利用している方は</p>
<p>その中でファイルを開くときに、目にする機会も多いと思いますが、</p>
<p>コチラのビューアをWebページ内に設置して、</p>
<p>PDFなどのファイルを軽快に閲覧できるようにすることができます。</p>
<p>&nbsp;</p>
<p>今回はPDFで紹介しますが、他にも多くのドキュメントファイルの表示に対応しています。</p>
<p>対応しているファイル形式(<a href="https://support.google.com/drive/answer/2423485?p=docs_viewer&amp;rd=1" target="_blank">Googleドライブヘルプより</a>)</p>
<ul>
<li>画像ファイル（.JPEG、.PNG、.GIF、.TIFF、.BMP）</li>
<li>動画ファイル（WebM、.MPEG4、.3GPP、.MOV、.AVI、.MPEGPS、.WMV、.FLV）</li>
<li>テキスト ファイル（.TXT）</li>
<li>マークアップ/コード（.CSS、.HTML、.PHP、.C、.CPP、.H、.HPP、.JS）</li>
<li>Microsoft Word（.DOC、.DOCX）</li>
<li>Microsoft Excel（.XLS、.XLSX）</li>
<li>Microsoft PowerPoint（.PPT、.PPTX）</li>
<li>Adobe Portable Document Format（.PDF）</li>
<li>Apple Pages（.PAGES）</li>
<li>Adobe Illustrator（.AI）</li>
<li>Adobe Photoshop（.PSD）</li>
<li>Tagged Image File Format（.TIFF）</li>
<li>Autodesk AutoCad（.DXF）</li>
<li>Scalable Vector Graphics（.SVG）</li>
<li>PostScript（.EPS, .PS）</li>
<li>TrueType（.TTF）</li>
<li>XML Paper Specification（.XPS）</li>
<li>アーカイブ ファイルの種類（.ZIP and .RAR）</li>
</ul>
<p>&nbsp;</p>
<p>↓こちらがDEMOです。</p>
<p><a class="demo" href="/demo/ninomiya/22/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>設置の仕方</h3>
<h3>1.Googleドキュメントビューアのページを開きます。</h4>
<p>URL：</p>
<p><a href="https://docs.google.com/viewer" target="_blank">https://docs.google.com/viewer</a></p>
<p>&nbsp;</p>
<h3>2.表示させるPDFファイル(または表示に対応している他の形式のファイル)のURLを入力し、HTMLタグを生成します。</h4>
<p><img decoding="async" loading="lazy" alt="ファイルのURL入力" src="/uploads-archive/2013/06/ggl_dv01.jpg" width="656" height="438" /></p>
<p>&nbsp;</p>
<h3>3.生成したHTMLタグをWebページの表示させたい場所にコピー&amp;ペーストすれば、完了です。</h4>
<p><img decoding="async" loading="lazy" alt="HTMLタグ生成" src="/uploads-archive/2013/06/ggl_dv02.jpg" width="656" height="611" /></p>
<p>&nbsp;</p>
<p>※注意点</p>
<p>テスト環境などで、Basic認証などのアクセス制限がかかっていると、ビューアがPDFにアクセスできないため、</p>
<p>表示することができませんので、ご注意ください。</p>
<p>&nbsp;</p>
<p>Googleドキュメントビューアのサイトに毎回アクセスしてHTMLタグを生成しなくても、下の「ファイルのURL」のところに表示したいURLを入力すれば、Webページ内での表示が可能です。</p>

		<div id="crayon-64953fd58b483660315348" 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">XHTML</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;iframe src="http://docs.google.com/viewer?url=「ファイルのURL」&amp;amp;embedded=true" width="565" height="780" style="border: none;"&gt;&lt;/iframe&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-64953fd58b483660315348-1">1</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-64953fd58b483660315348-1"><span class="crayon-r ">&lt;iframe </span><span class="crayon-e ">src</span>=<span class="crayon-s ">"http://docs.google.com/viewer?url=「ファイルのURL」&amp;amp;embedded=true"</span><span class="crayon-h"> </span><span class="crayon-e ">width</span>=<span class="crayon-s ">"565"</span><span class="crayon-h"> </span><span class="crayon-e ">height</span>=<span class="crayon-s ">"780"</span><span class="crayon-h"> </span><span class="crayon-e ">style</span>=<span class="crayon-s ">"border: none;"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/iframe&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>ただ、こちらのURLは普通のURLではなく、URLエンコード形式にする必要があります。</p>
<p>静的なサイトの場合はコチラのサイト（<a href="http://www.tagindex.com/tool/url.html">http://www.tagindex.com/tool/url.html</a>）などでエンコードして利用することができます。</p>
<p>PHPなど動的なサイトの場合は、「 <b>urlencode</b> ([ファイルのURL])」などの関数を使って、</p>
<p>利用することができます。</p>
<p>&nbsp;</p>
<p>現時点での欠点としては、<a href="/demo/ninomiya/22/" target="_blank">DEMO</a>で見ていただけると分かりますが、</p>
<p>写真などのラスター形式の画像は、画質が著しく劣化します。</p>
<p>画質を重視する場合は、あまりオススメできません。</p>
<p>&nbsp;</p>
<p>その分表示速度はとても速く、ファイルも軽いので、</p>
<p>軽快にPDFを表示したい場合にはとてもオススメです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

small_nino_eye130612.jpg

thumbnail_nino_eye130612.jpg

nino_eye130612.jpg

PDFなどをページ内で軽快に閲覧できるGoogle Docs Viewer

<p>4月22日に<a title="アマゾン データ サービス ジャパン株式会社" href="http://kokucheese.com/main/host/%E3%82%A2%E3%83%9E%E3%82%BE%E3%83%B3+%E3%83%87%E3%83%BC%E3%82%BF+%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9+%E3%82%B8%E3%83%A3%E3%83%91%E3%83%B3%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE/">アマゾン データ サービス ジャパン株式会社</a>主催のセミナーに参加してきました。</p>
<p>どのような内容かというと、</p>
<blockquote><p><strong>[クリエイティブ×クラウドについて]</strong><br />
キャンペーンサイト・スマホ&amp;TV連動・ソーシャル活用・O2O、、、 デジタルマーケティングにおいてクラウドは欠かせない技術となってきました。本セミナーでは、実際にクラウドを企業マーケティングに活用されているWeb制作・クリエイティブの皆様に最新の活用事例をご紹介いただきながら、新たなクラウド活用の可能性を探っていきます。</p></blockquote>
<p>というものです。アマゾンさんが主催ということで、基本的にはアマゾンウェブサービス（以下、AWS）の活用事例を複数社がプレゼンをするという内容でした。</p>
<p>対象ターゲットとしては、AWSの理解を深めたい、AWSを使用したことがないので検討したい、そもそもAWSってどうなのよ？といった方たち向けで、私の会社も普段は、さくらインターネットさんにお世話になることが多いので、大変参考になる話を聞くことが出来ました。</p>
<p>以下、抜粋でご紹介します。</p>
<h2> アマゾンウェブサービスの強み</h3>
<p>custer experienceを高めていく、小売のamazonのDNAが注ぎ込まれたサービスを提供している。</p>
<p>具体的には、AWS商品ラインナップを拡充して利用者を拡大→規模の経済を働かせ、徹底的に効率を追求→コストを下がったところで、サービスの値下げと商品ラインナップの拡充→さらに利用者を拡大というサイクルを常に回している。</p>
<p>また、お客様のフィードバックに基づく迅速なイノベーションを行い、機能改善を続けている。</p>
<p>実際に、AWSは数十回の値下げと数百回のバージョンアップを繰り返している。</p>
<p>&nbsp;</p>
<h2>未来の予測が立てにくい新規サービスに最適</h3>
<p>チームラボさんは</p>
<ul>
<li>AWS使用歴は2年</li>
<li>300名 70%がエンジニア</li>
<li>100人月超規模の大規模SI</li>
</ul>
<p>というような会社さんで、業界では超有名な企業ですが、</p>
<ul>
<li>新規サービス、新規事業の立ち上げが多い</li>
<li>ゼロスタートで試行錯誤</li>
<li>未来の予測がたてにくい</li>
</ul>
<p>お仕事が多いため、AWSとの相性がすごくいいとのことです。</p>
<p>&nbsp;</p>
<p>そして、こんな話がありました。</p>
<p><a href="http://www.teamlabbody.com/3dnote-jp/" target="_blank"> チームラボボディ</a>というサービスを立ち上げることが決まった時点で、全くの新しいため、インフラのランニングコストが読めない。</p>
<p>とりあえず、スモールスタートでVPSにて構築。</p>
<p>医療機関の方々が見る想定でサービスインをしたところ</p>
<p><strong>yahoo砲発動！！！</strong></p>
<p>一気にサーバ落ちる。</p>
<p>すぐに、AWSに移行し、サーバ復旧させたとのこと。</p>
<p>また、unityという3Dエンジンを利用していたため、初期で数十MBをロードしていることが判明。</p>
<p>これも、AWS内のcloudfrontというサービスに移管し、負荷を最適化させることが出来た。</p>
<p>さらに、AWS移行後も継続的にアクセスが集中。</p>
<p>トラフィックを調べていくと、デザイナーや美術の方がデッサンにちょうどいいという内容がTwitterに拡散されていて、当初想定していたターゲットと異なる層から大量のアクセスがあることが分かり、AWSでなければこれも危なかったとのこと。</p>
<p>以上のような様々なことがあったにも関わらず月額$82で済みました。</p>
<h2>トラフィックが一時的に集中するキャンペーンサイトに最適</h3>
<p>CMなど広告向けの制作会社大手のTYOさんもキャンペーンサイトとのAWSの相性はよいと仰っていました。</p>
<ul>
<li>どのインスタンスを使えばよいのか？</li>
<li>どういう組合わせがいいのか？</li>
<li>アクセス数は？</li>
</ul>
<p>→結局いくらかかるの？</p>
<p>というところを具体的に紹介してくれました。</p>
<p>AWSがpay as you goで使った分だけ支払うというものであり、ストレージ容量、転送量、CPU、メモリのスペックなど細かく課金されるため、参考値ということです。</p>
<ul>
<li>ピーク時30万PV/日で月額$300〜$400</li>
<li>ピーク時600万PV/日で月額$2000</li>
</ul>
<p>いずれもピーク時の値で、グラフを見せて頂いた限りでは、開始当初にピークが立ちその後は緩やかにトラフィックが下がっていく典型的なものでした。それにしても、ピーク時600万PVというのは感覚的ですが、非常に大型のキャンペーンサイトですね。CMやyahoo!のトップバナーでも展開しない限り行かない数値かと思います。もしこれを予測し、ピークに合わせて専用サーバを構築していればとても、$2000では済まないことでしょう。</p>
<h2>まとめ</h3>
<p>セミナーを聞いていくと、弊社のビジネス活動においてAWSを選ばない理由が少ないと感じました。</p>
<p>また、AWSを使いこなしている友人エンジニアに聞くと、日本で展開されているクラウドは「値段」「サポート」においてはAWSに勝っているが、機能面や速度はAWSに軍配が上がるとのこと。英語が理解出来てやサポートがなくてもゴリゴリと進められるエンジニアであれば、AWS以外に選択肢はないと言い切っていました。</p>


クリエイティブＸクラウド　最新テクノロジーが生み出すWEBコンテンツ事例セミナー

<p>世の中便利になったもので、<br />
非常にありがたいものが無料で見ることができます。</p>
<p>日々いろんな情報を取得していく中で、<br />
最近(けっこう前でもある)タメになったものをご紹介します！</p>
<h2>デザイン</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/11608357" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/shirokuro331/web-11608357" title="Webデザインのセオリーを学ぼう" target="_blank">Webデザインのセオリーを学ぼう</a> </strong> from <strong><a href="http://www.slideshare.net/shirokuro331" target="_blank">Toshiaki Sasaki</a></strong> </div>
<p>非常に丁寧でわかりやすく書かれています。<br />
デザインは論理的ですね！</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/14902681" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/saucerjp/ss-14902681" title="ノンデザイナーのための配色理論" target="_blank">ノンデザイナーのための配色理論</a> </strong> from <strong><a href="http://www.slideshare.net/saucerjp" target="_blank">tsukasa obara</a></strong> </div>
<p>なるほどなるほど・・・それでも配色は難しい・・・</p>
<h2>ディレクション</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15442293" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/cafekenta/20121117-01-dirmtg01" title="20121117 01 dir-mtgスライド01" target="_blank">20121117 01 dir-mtgスライド01</a> </strong> from <strong><a href="http://www.slideshare.net/cafekenta" target="_blank">Kenta Nakamura</a></strong> </div>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15442318" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/cafekenta/20121125-02-dirmtg02" title="20121125 02 dir-mtgスライド02" target="_blank">20121125 02 dir-mtgスライド02</a> </strong> from <strong><a href="http://www.slideshare.net/cafekenta" target="_blank">Kenta Nakamura</a></strong> </div>
<p>まさしくディレクションとはこのことだと思います。<br />
もっとこれを多く実践してくれる人が増えたらいいのにと思います。</p>
<h2>その他</h3>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/7665168" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/hayatomizuno/jquery-7665168" title="ノンプログラマーのためのjQuery入門" target="_blank">ノンプログラマーのためのjQuery入門</a> </strong> from <strong><a href="http://www.slideshare.net/hayatomizuno" target="_blank">Hayato Mizuno</a></strong> </div>
<p>初心者向けですね。枚数は多いですが、サクサク読み進められるので、時間はあまりかからないと思います。</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/15002576" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/nukaga/webwordpress-15002576" title="文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう" target="_blank">文系デザイナーでも大丈夫！レスポンシブWEBサイトをWordPressで作ってみよう</a> </strong> from <strong><a href="http://www.slideshare.net/nukaga" target="_blank">Junko Nukaga</a></strong> </div>
<p>これも初心者向けですね。概念から方法までわかりやすく見やすいものになってます。</p>
<p><iframe loading="lazy" src="http://www.slideshare.net/slideshow/embed_code/16459192" width="597" height="486" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe> </p>
<div style="margin-bottom:5px"> <strong> <a href="http://www.slideshare.net/copywritter/ss-16459192" title="カヤックコピー部のコピー講座" target="_blank">カヤックコピー部のコピー講座</a> </strong> from <strong><a href="http://www.slideshare.net/copywritter" target="_blank">長谷川 哲士</a></strong> </div>
<p>これは、もうなるほどと思ってしまう内容で、とても参考になります。</p>
<p>こういうスライドは本当にありがたく勉強になります。<br />
僕も何か書いてみようかな。。。</p>


web制作においてタメになる(なった)スライドのご紹介

CodeIgniterの基本的な設定

<p>最近米国を中心にサブスクリプション・コマースというのが人気になっているらしく、</p>
<p>日本でも徐々に浸透しつつある現状のようです。</p>
<p>&nbsp;</p>
<p>サブスクリプション・コマースとは、定期購入型の販売モデルで、</p>
<p>例えば、 一ヶ月単位で金額を支払い、それ相応の商品を月毎で受けられるというものです。</p>
<p>&nbsp;</p>
<p>どのサービスも基本的にはなにか特化したものになり、</p>
<p>その道のプロであったり、長けた人達が</p>
<p>その人におすすめな商品や、適した商品を 選択し提供する形になります。</p>
<p>&nbsp;</p>
<p>現代では、物がありふれていて、どれが良くて、どれが悪いかなんてわかりづらいですが、</p>
<p>厳選したものを提供してくれるなら選ぶ手間も省けていいかもしれませんね。</p>
<p>そんなサービスを国内で運営しているものをご紹介します！</p>
<p>&nbsp;</p>
<h2>GLOSSYBOX</h2>
<p><img decoding="async" src="/demo/abe/images/subec01.jpg" alt="" width="656" /></p>
<p>&nbsp;</p>
<p>コスメのサンプルが毎月送られてきます。</p>
<p>化粧品は数も多いし、新しいのもどんどん発売されるので、 自分に合った商品を探すためにいいかもしれませんね。</p>
<p>&nbsp;</p>
<p><a href="http://glossybox.jp/" target="_blank">GLOSSYBOX</a></p>
<p>&nbsp;</p>
<h2>フリパン</h2>
<p><img decoding="async" src="/demo/abe/images/subec02.jpg" alt="" width="656" /></p>
<p>&nbsp;</p>
<p>こちらは、男性用のパンツが毎月７枚まで送られてきます。</p>
<p>このサービスはなんと無料らしいです。</p>
<p>なぜ無料なのかというと、パンツに広告がプリントされているからです。</p>
<p>タダコピみたいな感じですかね。</p>
<p>&nbsp;</p>
<p><a href="http://www.free-pants.jp/" target="_blank">フリパン</a></p>
<p>&nbsp;</p>
<h2>SAKELIFE</h2>
<p><img decoding="async" src="/demo/abe/images/subec03.jpg" alt="" width="656" /></p>
<p>酒蔵を営んでいるプロの方が厳選したお酒を毎月送ってくれます。</p>
<p>お酒を楽しんでもらうために、まずは、軽いものから、 徐々に濃いものへと段階を経て送ってくださるそうです。</p>
<p>&nbsp;</p>
<p><a href="http://sakelife.jp/" target="_blank">SAKELIFE</a></p>
<p>&nbsp;</p>
<h2>yamory</h2>
<p><img decoding="async" src="/demo/abe/images/subec04.jpg" alt="" width="656" /></p>
<p>&nbsp;</p>
<p>非常食の定期宅配サービスです。</p>
<p>こちらは、月額で支払い、商品は半年毎に送られてきます。</p>
<p>常に新しい非常食を保管しておけるイメージですね。</p>
<p>新しいのが送られてきたら、古いのを食べるみたいな。。。</p>
<p>&nbsp;</p>
<p><a href="http://yamory.com/" target="_blank">yamory</a></p>
<p>&nbsp;</p>
<h2>「やさい便」</h2>
<p><img decoding="async" src="/demo/abe/images/subec05.jpg" alt="" width="656" /></p>
<p>&nbsp;</p>
<p>新鮮野菜の定期宅配サービスで、クックパッドにより提供されています。</p>
<p>やさいを届けて、クックパッドでその調理を見てもらう、 といった感じでしょうか。</p>
<p>何人かの農家、専門家の方がいて、その中から好きな人を選んで、</p>
<p>その人に、隔週もしくは週毎で送ってもらえるです。</p>
<p>&nbsp;</p>
<p><a href="https://shop.cookpad.com/" target="_blank">「やさい便」</a></p>
<p>&nbsp;</p>
<h2>バニラ</h2>
<p><img decoding="async" src="/demo/abe/images/subec06.jpg" alt="" width="656" /></p>
<p>&nbsp;</p>
<p>生理用品定期お届けサービスです。</p>
<p>毎月訪れるもので、かつ女性からすると買うのを忘れてしまいがちなもののようなので、</p>
<p>定期販売の理に敵ったサービスかもしれませんね。</p>
<p>&nbsp;</p>
<p><a href="http://vanilla-day.com/" target="_blank">バニラ</a></p>
<p>&nbsp;</p>
<h2>Box To You</h2>
<p><img decoding="async" src="/demo/abe/images/subec07.jpg" alt="" width="656" /></p>
<p>&nbsp;</p>
<p>こちらは商品を販売しているのではなく、</p>
<p>個人でもfacebookを通じて、販売ができるようになるサービスです。</p>
<p>facebookの実名を活かして安心、安全にできるとのことですが・・・</p>
<p>&nbsp;</p>
<p><a href="https://www.box2you.com/" target="_blank">Box To You</a></p>
<p>&nbsp;</p>
<h2>プラナスボックス-PrunusBox</h2>
<p><img decoding="async" src="/demo/abe/images/subec08.jpg" alt="" width="656" /></p>
<p>&nbsp;</p>
<p>お試しコスメをお届け、</p>
<p>とのことですが、</p>
<p>上の方で説明した、GLOSSYBOXと同じようなサービスです。</p>
<p>&nbsp;</p>
<p><a href="http://prunusbox.jp/" target="_blank">プラナスボックス</a></p>
<p>&nbsp;</p>
<h2>HATCH（ハッチ）</h2>
<p><img decoding="async" src="/demo/abe/images/subec09.jpg" alt="" width="656" /></p>
<p>&nbsp;</p>
<p>ライフスタイルアイテム定期購入型通販サイトとのことですが、</p>
<p>なにかひとつに特化した商品ではなく、</p>
<p>その道のプロ、専門家が複数おり、その方々からサービスを受けるというものです。</p>
<p>雑貨やCD、はたまた、スタイリストによるスタイリングなんてのもあるみたいです。</p>
<p>&nbsp;</p>
<p><a href="http://shop.hatch8.jp/" target="_blank">HATCH（ハッチ）</a></p>
<p>&nbsp;</p>
<h2>ワイナレッジ</h2>
<p><img decoding="async" src="/demo/abe/images/subec10.jpg" alt="" width="656" /></p>
<p>&nbsp;</p>
<p>ワイン定期購入サービスで、 ソムリエの方が、毎月厳選したものを送ってくださるそうです。</p>
<p>&nbsp;</p>
<p><a href="http://wine-k.jp/" target="_blank">ワイナレッジ</a></p>
<p>&nbsp;</p>
<p>そして最後におまけとして、 mixiが18日に開始したサービスを紹介します。</p>
<p>&nbsp;</p>
<h2>Petite jet&eacute;(プティジュテ)</h2>
<p><img decoding="async" src="/demo/abe/images/subec11.jpg" alt="" width="656" /></p>
<p>&nbsp;</p>
<p>ちょっとオトナのファッションを、</p>
<p>とのことで、２０代の女性向けに、</p>
<p>オンでもオフでも着れるような服を届けてくれるサービスです。</p>
<p>&nbsp;</p>
<p><a href="http://petite-jete.com/" target="_blank">Petite jet&eacute;(プティジュテ)</a></p>
<p>&nbsp;</p>
<p>いろいろ紹介しましたが、 サービスのポイントとしては、</p>
<p>大きくいうと</p>
<p>&nbsp;</p>
<p><strong>・商品が数多くあり、素人目にはなかなか違いがわからないもの</strong></p>
<p><strong>・大事なんだけど、購入を忘れてしまいがちなもの</strong></p>
<p>&nbsp;</p>
<p>といった感じでしょうか。</p>
<p>&nbsp;</p>
<p>お酒やワインなんかは、今まであんまり飲んでなかったけど、</p>
<p>これから飲んでみたいから頼むっていうのもあるかもしれないですね。</p>
<p>&nbsp;</p>
<p>もしくは、「選んで買う」という行為自体が面倒くさくなってしまった人達向けでもあるんでしょうか？</p>
<p>&nbsp;</p>
<p>物があふれるこの現代に適したサービスかもしれませんが、</p>
<p>選択することを放棄してしまうので、</p>
<p>自分でなにかを選ぶという行為がおろそかになり、</p>
<p>物を判断する能力が劣化してしまうのではないかと思ってしまいます。</p>
<p>&nbsp;</p>
<p>とはいえ、 これからどんな新しいサービスがでてくるのか楽しみにしたいと思います！</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #webサービス

2014/07/30

2014/06/17

2014/03/26

2014/03/19

2014/03/19

2013/12/04

2013/10/29

2013/06/19

2013/06/13

2013/04/24

2013/02/28

2012/12/19

2012/09/19