I would like to share two useful resources, TheStocks and Mazwai. Both are the very best of free stocks one for images and the other one for videos.

<h3 style="line-height: 14.25pt;">The Stocks:</h2>
<a href="http://thestocks.im/">TheStocks</a>, which is actually a tumblr, collects a total of 14 free stock image websites in one site. This site can safes you a lot of time hunting manually through all those free stocks sites, tumblrs, etc.
Although all these stock photo sites are infinite scrollers…which can be a little tiring. I recommend to click in “Archives” to go through the images.
Here are some picture examples:
<a href="/uploads-archive/2014/12/tumblr_n7qhtcBPvQ1sfie3io1_1280.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6503 " src="/uploads-archive/2014/12/tumblr_n7qhtcBPvQ1sfie3io1_1280-1024x539.jpg" alt="Mazwai" width="717" height="330" /></a>
Picture from New Old Stock
<a href="/uploads-archive/2014/12/tumblr_ng9v03ynLQ1tomxvuo2_1280.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6528 " src="/uploads-archive/2014/12/tumblr_ng9v03ynLQ1tomxvuo2_1280-1024x670.jpg" alt="tumblr_ng9v03ynLQ1tomxvuo2_1280" width="711" height="478" /></a>
Picture from Movefast
<a href="/uploads-archive/2014/12/QDSMoAMTYaZoXpcwBjsL__DSC0104-1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6526 " src="/uploads-archive/2014/12/QDSMoAMTYaZoXpcwBjsL__DSC0104-1-1024x706.jpg" alt="QDSMoAMTYaZoXpcwBjsL__DSC0104-1" width="712" height="615" /></a>
Picture from Unsplash
 
<h3 style="line-height: 14.25pt;">Mazwai</h2>
One of the elements that can help to power up the Web is the video (or animated) website background. The usage of video could add dynamics and ambience to the site. It is also a good way to draw attention and make people stop and stare, increasing the time they spend on the site and hopefully lead to more interaction with the contents on the site.
Here is a beautiful example of a full-blown video background:
<a href="http://www.madebyhangar.com/"><img decoding="async" loading="lazy" class="alignnone wp-image-6518 " src="/uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.43.53-1024x289.png" alt="Screen Shot 2014-12-16 at 15.43.53" width="677" height="191" srcset="/uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.43.53-1024x289.png 1024w, /uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.43.53-300x84.png 300w, /uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.43.53-228x64.png 228w" sizes="(max-width: 677px) 100vw, 677px" /></a>
If you want to give it a try and add video background into your designs you should check <a href="http://mazwai.com/">Mazwai</a>.
Mazwai is a free stock of high quality videos. Its purpose is to help web designers, creative and artist to find great video resources for their projects.
<a href="http://mazwai.com/"><img decoding="async" loading="lazy" class="alignnone wp-image-6509 " src="/uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.16.27-1024x500.png" alt="Screen Shot 2014-12-16 at 15.16.27" width="682" height="333" srcset="/uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.16.27-1024x500.png 1024w, /uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.16.27-300x146.png 300w, /uploads-archive/2014/12/Screen-Shot-2014-12-16-at-15.16.27-228x111.png 228w" sizes="(max-width: 682px) 100vw, 682px" /></a>
The videos are free to use and transform as long as you credit the original author in some way.
New videos are added regularly. There is no subscription and no download limitation.

TheStocks &#038; Mazwai: Great image/video resources

今年の「Linux Journal Awards」が発表されたので、興味のあるものだけを転載されていただきます。 
英語は、わかりやすいものをそのまま、難しいのものを注釈されていただきます。 
知らないものがいっぱい出てきて刺激です。 
元リンクは<a href="http://www.linuxjournal.com/rc2014" target="_blank">ここ</a>です。
<h2>Best Linux Distribution</h2>
<ol>
<li>Ubuntu 16.5%</li>
<li>Debian 16.4%</li>
<li>Linux Mint 11%</li>
<li>Arch Linux 8.5%</li>
<li>Fedora 8.3%</li>
<li>CentOS 6%</li>
<li>openSUSE 5.3%</li>
<li>Kubuntu 4.1%</li>
<li>Gentoo 2.9%</li>
<li>Slackware 2.7%</li>
<li>Xubuntu 2.5%</li>
<li>Other 2.3%</li>
<li>Red Hat Enterprise Linux 1.6%</li>
<li>NixOS 1.4%</li>
<li>elementary OS 1.3%</li>
<li>Lubuntu 1.2%</li>
<li>CrunchBang 1%</li>
<li>Mageia .7%</li>
<li>LXLE .4%</li>
<li>Tails .4%</li>
<li>Android-x86 .3%</li>
<li>Bodhi Linux .3%</li>
<li>Chakra .3%</li>
<li>Kali Linux .3%</li>
<li>PCLinuxOS .3%</li>
<li>SolydK .3%</li>
<li>Mandriva .1%</li>
<li>Oracle Linux .1%</li>
</ol>
<h2>Best Mobile Linux OS</h2>
<ol>
<li>Stock Android 37.1%</li>
<li>Sailfish OS 27.6%</li>
<li>CyanogenMod 20.2%</li>
<li>Other 3%</li>
<li>Ubuntu Phone 3%</li>
<li>Amazon Fire OS 1.5%</li>
<li>Ubuntu for Android 1.4%</li>
<li>Replicant .8%</li>
<li>Tizen .8%</li>
</ol>
<h2>Best Linux Tablet</h2>
<ol>
<li>Google Nexus 7 35.3%</li>
<li>Google Nexus 10 14.8%</li>
<li>Samsung Galaxy Tab 14%</li>
<li>Samsung Galaxy Note 9.8%</li>
<li>ASUS Transformer Pad 8.4%</li>
<li>Other 6.4%</li>
<li>Kindle Fire HD 4.7%</li>
<li>ASUS MeMO Pad 2%</li>
<li>Dell Venue 1.6%</li>
<li>Acer Iconia One 1.4%</li>
<li>Samsung Galaxy Note Edge .9%</li>
<li>Ekoore Python S3 .7%</li>
</ol>
<h2>Best Other Linux-Based Gadget (スマホとタブレット以外の装置)</h2>
<ol>
<li>Raspberry Pi 71.4%</li>
<li>BeagleBone Black 8.1%</li>
<li>Other 4.3%</li>
<li>Lego Mindstorms Ev3 3.7%</li>
<li>Moto 360 3.4%</li>
<li>Cubieboard 1.7%</li>
<li>Parrot A.R Drone 1.7%</li>
<li>Samsung Gear S 1.4%</li>
<li>Yamaha Motif XF8 1.1%</li>
<li>Nvidia Jetson-K1 Development System .8%</li>
<li>Cloudsto EVO Ubuntu Linux Mini PC .5%</li>
<li>VoCore Open Hardware Computer .5%</li>
<li>LG G Watch .4%</li>
<li>RaZberry .4%</li>
<li>VolksPC .4%</li>
<li>IFC6410 Pico-ITX Board .2%</li>
<li>JetBox 5300 .1%</li>
</ol>
<h2>Best Content Management System</h2>
<ol>
<li>WordPress 34.7%</li>
<li>Drupal 25.3%</li>
<li>Joomla! 11.1%</li>
<li>MediaWiki 10.5%</li>
<li>Other 10%</li>
<li>Alfresco 4.3%</li>
<li>WebGUI 1.3%</li>
<li>ikiwiki 1.1%</li>
<li>eZ publish .7%</li>
<li>Wolf CMS .4%</li>
<li>Elgg .3%</li>
<li>Blosxom .2%</li>
</ol>
<h2>Best Web Browser</h2>
<ol>
<li>Firefox 53.8%</li>
<li>Chrome 26.9%</li>
<li>Chromium 8.1%</li>
<li>Iceweasel 4%</li>
<li>Opera 3%</li>
<li>Other 2%</li>
<li>SeaMonkey .8%</li>
<li>rekonq .5%</li>
<li>dwb .4%</li>
<li>QupZill .4%</li>
<li>Dillo .2%</li>
</ol>
<h2>Best Cloud-Based File Storage</h2>
<ol>
<li>Dropbox 30.5%</li>
<li>ownCloud 23.6%</li>
<li>Google Drive 16%</li>
<li>rsync 8.3%</li>
<li>Other 7.5%</li>
<li>Amazon S3 6.6%</li>
<li>SpiderOak 4.4%</li>
<li>Box 1.8%</li>
<li>Copy 1%</li>
<li>AjaXplorer .3%</li>
</ol>
<h2>Best Virtualization Solution</h2>
<ol>
<li>Oracle VM VirtualBox 33.4%</li>
<li>VMware 22.3%</li>
<li>KVM 21.1%</li>
<li>XEN 5.7%</li>
<li>QEMU 5.3%</li>
<li>OpenStack 4.9%</li>
<li>Other 4.2%</li>
<li>OpenVZ 1.7%</li>
<li>Linux-VServer 1.3%</li>
<li>Symantec Workspace Virtualization .1%</li>
</ol>
<h2>Best Monitoring Application（システム監視）</h2>
<ol>
<li>Nagios 27.1%</li>
<li>Wireshark 20.7%</li>
<li>htop 12.3%</li>
<li>Zabbix 10.5%</li>
<li>Other 8.6%</li>
<li>Zenoss 6.2%</li>
<li>Munin 3.4%</li>
<li>PC Monitor 2.8%</li>
<li>New Relic 1.9%</li>
<li>Opsview 1.2%</li>
<li>SaltStack 1%</li>
<li>NTM (Network Traffic Monitor) .7%</li>
<li>xosview .7%</li>
<li>Manage Engine .5%</li>
<li>FlowViewer .3%</li>
<li>Circonus .2%</li>
<li>SysPeek .2%</li>
</ol>
<h2>Best DevOps Configuration Management Tool※</h2>
<ol>
<li> Git 39.4%</li>
<li>Puppet 17.2%</li>
<li>Ansible 8.9%</li>
<li>cron jobs 8.8%</li>
<li>Subversion 7.6%</li>
<li>Chef 5%</li>
<li>SaltStack 5.4%</li>
<li>Other 4.6%</li>
<li>CFEngine 3%</li>
</ol>
<h2>Best Programming Language</h2>
<ol>
<li>Python 30.2%</li>
<li>C++ 17.8%</li>
<li>C 16.7%</li>
<li>Perl 7.1%</li>
<li>Java 6.9%</li>
<li>Other 4.6%</li>
<li>Ruby 4.3%</li>
<li>Go 2.4%</li>
<li>JavaScript 2.4%</li>
<li>QML 2.2%</li>
<li>Fortran 1.4%</li>
<li>Haskell 1.4%</li>
<li>Lisp 1.2%</li>
<li>Erlang .6%</li>
<li>Rust .6%</li>
<li>D .4%</li>
<li>Hack .1%</li>
</ol>
<h2>Best Scripting Language</h2>
<ol>
<li>Python 37.1%</li>
<li>Bash/Shell scripts 27%</li>
<li>Perl 11.8%</li>
<li>PHP 8.4%</li>
<li>JavaScript 6.7%</li>
<li>Ruby 4.9%</li>
<li>Other 2.1%</li>
<li>Lua 2%</li>
</ol>
<h2>Best New Linux/Open-Source Product/Project</h2>
<ol>
<li>Docker 28%</li>
<li>Jolla and Sailfish OS 19%</li>
<li>LibreOffice 7%</li>
<li>ownCloud 5%</li>
<li>Steam 5%</li>
<li>Zenoss Control Center 5%</li>
<li>Raspberry Pi 4%</li>
<li>Git 4%</li>
<li>Apache Cordova/OpenOffice/Spark/Tika 3%</li>
<li>Ansible 2%</li>
<li>Elementary OS 2%</li>
<li>OpenStack 2%</li>
<li>Zabbix 2%</li>
<li>CoreOS 2%</li>
<li>Firefox OS 2%</li>
<li>KDE Connect 1%</li>
<li>NixOS and NixOps 1%</li>
<li>Open Media Vault 1%</li>
</ol>
※開発と操作合わせてDevOpsといいます。

2014 Linux Journal Awards

【WordPress】WordPress Popular Postsでサムネイル画像を指定サイズのものに差し替える方法

ネットショップの運営をしていると、セミナーやツールの営業が電話やメールで数多くきます。
耳にしたことがある企業や団体が開催しているものは有料で、結構いい値段だったりすることが多いです。
無料で参加できるような物に限って運営している企業や団体がマイナーなためにどうしても如何わしい印象がしてしまいます。
そこで信用がもてそうな無料のオンライン講座を見つけたのでご紹介します。
&nbsp;
<a href="/uploads-archive/2014/12/img_logo.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6527" src="/uploads-archive/2014/12/img_logo.gif" alt="img_logo" width="364" height="36" /></a>
独法の<a href="http://www.smrj.go.jp/">中小企業基盤整備機構</a>が提供している「ネットショップ開店Ch」というオンライン講座です。
&nbsp;
<a href="/uploads-archive/2014/12/header_img.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-6530" src="/uploads-archive/2014/12/header_img.jpg" alt="header_img" width="622" height="260" srcset="/uploads-archive/2014/12/header_img.jpg 682w, /uploads-archive/2014/12/header_img-300x125.jpg 300w, /uploads-archive/2014/12/header_img-228x95.jpg 228w" sizes="(max-width: 622px) 100vw, 622px" /></a>
<a href="http://ec.smrj.go.jp/online/">中小機構「ネットショップ開店Ch」</a>
&nbsp;
ターゲットは”これからネットショップを開店したい方々、また既存のネットショップの運営力をアップしたい方々”としています。
内容はかなり基本的な「ネットショップとは何か？」というところからスタートするので、既に運営を担当している方は途中からで良さそうですが、かなり丁寧な印象です。
３つのシリーズに分かれていて、１回１時間程度の動画を全２０回に渡って配信しています。
■シリーズ1：ネットショップを開店するための基礎知識
■シリーズ2：ネットショップで売上を作るための基礎知識
■シリーズ３：ネットショップの運営テクニック
第６回まで既に配信されていて、アーカイブで観る事ができます。次回は１２月１７日（水）に配信予定で、３月７日まで週に１回のペースで配信されます。
&nbsp;
ネットショップ初心者の女性出演者と一緒に学んでいくスタイルでメインの講師は「ネットショップのてらこや」代表の方です。他に47CLUB、ネットショップ総研、エンパワーショップが監修しています。
&nbsp;
<iframe loading="lazy" width="560" height="315" src="//www.youtube.com/embed/EwLpl7QhMvg" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
webのリテラシーが高くない場合も想定して制作されているので、ECに関するツールやサービスを開発している企業が、顧客向けに教えてあげても良いかもしれません。
&nbsp;
youtubeのチャンネル
<a href="https://www.youtube.com/user/smrjec">https://www.youtube.com/user/smrjec</a>
&nbsp;

（独）中小機構がネットショップのオンライン講座を無料でやっている

海外のブログ、<a href="http://marketblog.envato.com/trends/best-worst-web-design-trends-2014/">The Best &amp; Worst Web Design Trends of 2014 &#8211; Market Blog</a> 
こちらで2014年に流行ったwebデザイントレンドを紹介しています。
簡単に見出しだけ抽出しますと、 
以下のことを説明しています。
ベストトレンドとしては、 
・ミニマルなフラットデザイン 
・改善されたwebフォント 
・フルスクリーンの背景 
・レスポンシブデザインの改善
ワーストトレンドとしては、 
・モーダルウィンドウプロモーション 
・多すぎるソーシャルメディア 
・永遠につづくローディング画面 
・カスタマイズされたスクロールバー
もし、気になるものがあればブログを見てみてください 
（説明少なすぎてすみません・・・）
今年はなんといっても、 
フラットデザイン、ミニマルなデザインが流行りましたね。 
フラットデザイン自体はもう少し前ぐらいから出現してましたが、 
日本のwebサイトでグッと増えたのは、今年からだと思います。 
一年前と比べると、フラットでミニマルなサイトがかなり増えました！
今はフラットデザインをやるのに適した環境ですね！ 
この流れがいつまで続くのかが気になるところです。
あと、上記にはなかったのですが、 
フラットデザインが流行したついでに、相性のよいシングルページ(縦長ページ)も多く見かけました。 
パララックス程のアニメーションはしていないのですが、多少スクロールと連動したアニメーションを取り入れたサイトが多かったように感じます。
<h2>おまけ</h2>
最近見かけた便利そうなサービスを紹介します。
<img decoding="async" loading="lazy" class="alignnone wp-image-6507" src="/uploads-archive/2014/12/Tridiv-CSS-3D-Editor-1024x563.jpg" alt="Tridiv CSS 3D Editor" width="640" height="352" srcset="/uploads-archive/2014/12/Tridiv-CSS-3D-Editor-1024x563.jpg 1024w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor-300x164.jpg 300w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor-228x125.jpg 228w, /uploads-archive/2014/12/Tridiv-CSS-3D-Editor.jpg 1184w" sizes="(max-width: 640px) 100vw, 640px" />
<a href="http://tridiv.com/">Tridiv | CSS 3D Editor</a> 
CSSを使った3Dポリゴンを作成することができるwebサービスです。
&nbsp;
&nbsp;
<img decoding="async" loading="lazy" class="alignnone wp-image-6508" src="/uploads-archive/2014/12/TypeWonder-Beta-1024x563.jpg" alt="TypeWonder - Beta" width="640" height="352" srcset="/uploads-archive/2014/12/TypeWonder-Beta-1024x563.jpg 1024w, /uploads-archive/2014/12/TypeWonder-Beta-300x164.jpg 300w, /uploads-archive/2014/12/TypeWonder-Beta-228x125.jpg 228w, /uploads-archive/2014/12/TypeWonder-Beta.jpg 1184w" sizes="(max-width: 640px) 100vw, 640px" /> 
<a href="http://typewonder.com/">TypeWonder &#8211; Beta</a> 
好きなサイトのフォントを、選んだフォントに変更できてしまうサービスです。 
いつか使う場面が来るかもしれません。
&nbsp;
&nbsp;
<img decoding="async" loading="lazy" class="alignnone wp-image-6506" src="/uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-1024x555.jpg" alt="Coolors - The super fast color palettes generator!" width="640" height="347" srcset="/uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-1024x555.jpg 1024w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-300x162.jpg 300w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator-228x123.jpg 228w, /uploads-archive/2014/12/Coolors-The-super-fast-color-palettes-generator.jpg 1199w" sizes="(max-width: 640px) 100vw, 640px" /> 
<a href="http://coolors.co/ad7a99-b2cede-8cdfd6-6dc0d5-5a716a">Coolors &#8211; The super fast color palettes generator!</a> 
5つの色を自動生成してくれ、スペースを押すとまた新たに5つの色を生成してくれます。

2014年のベスト＆ワーストのwebデザイントレンド

今週のニュースとしては、一番の衝撃でした。
Google翻訳が遂にミャンマー語に対応しました。
<a href="http://googletranslate.blogspot.jp/2014/12/google-translate-10-more-languages-with.html" target="_blank">http://googletranslate.blogspot.jp/2014/12/google-translate-10-more-languages-with.html</a>
公式ブログでも言及されているように、長い間チャレンジを続けてきたというくらいミャンマー語の機械翻訳は念願でした。
当社のミャンマー法人の社長がミャンマー語は難しいと言うほど、言語構造が複雑で更にWebにおいては、フォントの両面で実現が難しいとされてきました。
これで、社内の少し距離が近づくことが出来ることが楽しみです。
さらに、今回の10言語が追加され世界90の言語の機械翻訳が出来るようになったとのことです。
ကျေးဇူးတင်ပါသည်

Google翻訳が遂にミャンマー語対応！

HTML5のCanvasの画像処理に挑戦(透過率の変更)

Twigの基本

株式会社ジャストシステムがネット調査のサービスを利用して「ネット通販に関するアンケート」を実施しました。
アンケートの対象は「直近半年以内にネットショッピングを利用した」と回答した20代～50代の男女1,000名で,
2014年の11月17日に行われました。
調査結果の全体は有料？で閲覧できるようですが
下は調査結果の一部ですがこれだけでもなかなか興味深いです。
<a href="https://www.fast-ask.com/report/report-netshopping-20141205.html#reportform"><img decoding="async" loading="lazy" class="alignnone wp-image-6470" src="/uploads-archive/2014/12/report-netshopping-20141205.gif" alt="report-netshopping-20141205" width="522" height="397" /></a>
「普段使いの商品」を購入する際に購入を後押しする要素は何かという問いについての結果です。
&nbsp;
<h2>送料無料の効果はやはり大きい！</h2>
この問に関して、最も影響が大きいのは「送料の有無」で５６．６％が非常に影響を与える、３３．８％が影響を与えると答えています。
つまり9割近くのお客さんは送料が無料なら買う可能性が上がるという事です。
&nbsp;
それに対してレビューなどの評価については２４．５％が非常に影響を与える、４５，７％が影響を与えると答えていて、合わせて約７５％です。
数字からすると無視できるものでは当然ありませんが、ショップとして優先すべきは送料を無料にする事の様です。
&nbsp;
<h2> お得感が大切、定期的なセールは必須</h2>
送料の有無、レビューなどの評価に続いて影響が大きいのは商品を購入した際に「付与されるポイントの有無」と「期間限定の割引の有無」です。どちらも７０%弱が影響があると答えています。
「ポイントの有無」にしても「期間限定の割引」にしても販売価格が一緒ならば、得した感を与えられる商品を選ぶという事だと思います。いわずもがなですね。
「セール中で今だけ安い」という感覚を与える事はかなり効果があるという事です。７０％弱が影響があると答えているわかですから、定期的にセールは行うべきです。
&nbsp;
<h2>オマケの効果は？</h2>
私が運営を担当するショップでも商品にオマケをつけるという事は行っていますが、実際のところ効果はどうなんでしょうか。
アンケートの結果では約３５％が影響すると答えています。もし、オマケを無くすと送料が無料にできるのであればすぐにでも実践したほうがいいですね。
&nbsp;
<h2>ネットショップが優先すべき要素</h2>
ショップとして売上を伸ばすために何を優先すべきかという問題に戻ると、価格が最も左右する要素なのはもちろんなので、優先順位はおそらくこんな感じです。
&nbsp;
商品価格 ＞ 送料 ＞ 評価（レビュー） ＞ セールの開催 ＞ ポイント ＞ オマケ
&nbsp;
もちろんモール内でショップを展開する場合には表示順位などが大きな要素となってきますが、この優先順位はどんなネットショップでも共通だと思われます。
この優先順位は運営の際にどの要素にどれだけ時間をかけるかという目安にもなると思います。

レビュー？送料？売上向上のためにネットショップが優先するべきなのは何か

【PHP】可変長引数リスト

最近はちょっとした動きはもちろん、今までjavascriptで制御していた動きもcssでできるようになってきました。
css3も含めて、動かすプロパティはいっぱいあるのですが、正直把握しきれていないのと、実際どういう動きをするかわからないのもあります。
自分でいろいろ試すのも面白いのですが、 
動きのパターンをたくさん用意してくれているサイト(フレームワークになるのかな)を紹介します。
まずはhoverの動きです。
<h2>Hover.css</h2>
様々なパターンが用意されているので、そのまま使ってみたり、 
ここから発想させて自分なりの動きを考えてみたりできるかと思います！
<img decoding="async" loading="lazy" class="alignnone wp-image-6457" src="/uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-1024x583.jpg" alt="Hover.css - A collection of CSS3 powered hover effects" width="640" height="365" srcset="/uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-1024x583.jpg 1024w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-300x170.jpg 300w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects-228x129.jpg 228w, /uploads-archive/2014/12/Hover.css-A-collection-of-CSS3-powered-hover-effects.jpg 1160w" sizes="(max-width: 640px) 100vw, 640px" />
<a href="http://ianlunn.github.io/Hover/" target="_blank">Hover.css &#8211; A collection of CSS3 powered hover effects</a>
次はクリックでの動きです。
<h2>magic_animations</h2>
hover.cssと同様、様々なパターンが用意されています。 
これを見て、動きを考えるのがいいですね！
<img decoding="async" loading="lazy" class="alignnone wp-image-6458" src="/uploads-archive/2014/12/Magic-Animations-CSS3-1024x583.jpg" alt="Magic Animations CSS3" width="640" height="365" srcset="/uploads-archive/2014/12/Magic-Animations-CSS3-1024x583.jpg 1024w, /uploads-archive/2014/12/Magic-Animations-CSS3-300x170.jpg 300w, /uploads-archive/2014/12/Magic-Animations-CSS3-228x129.jpg 228w, /uploads-archive/2014/12/Magic-Animations-CSS3.jpg 1160w" sizes="(max-width: 640px) 100vw, 640px" />
<a href="http://www.minimamente.com/example/magic_animations/" target="_blank">Magic Animations CSS3</a>
webサイトのアクセントとしてこのような動きがあるだけでも、 
だいぶ違って見えるので、サイトのリッチ感がアップして見えますね。
デザインの発想にも使えるので見てるだけでも楽しいです！

css3だけでhoverやclickの動きを豪華にしよう！

先日、iphone5からNexus5にメインのスマートフォンに変えました。
変えた理由はいろいろあるのですが、一番大きかったのが、Nexus5が一括0円で売られていたことです。
過去にも何度か実施しているようですが、Nexus6が発売されることから在庫処分的な意味合いで最後の投げ売りになっているようです。
一括0円かつ、emobile時代から受け継ぐYmobileの誰とでも定額でトータルの通信費を抑えることが出来つつ、躊躇なくAndroidに変えることが出来たのが、最新のOSであるAndroid5.0の出来が良かったからです。
これは、Androidも慣れないとなという思いで買ったNexus7をAndroid5.0にアップデートして確信したことでした。
昔は、正直iOSには負けてしまっている感が私の中ではあったのですが、もはや互角かそれ以上になっている感があります。
GmailなどのGoogle純正アプリは、Androidのほうがスピード、機能共に既に進んでいます。
<h3 id="toc_0">移行に必要な項目</h2>
<ul>
<li>アプリ</li>
<li>メールアカウント</li>
<li>電話帳</li>
<li>写真</li>
</ul>
移行する項目を考えてみたのですが、これくらいですよね。
<h3>アプリ</h3>
いきなり、割愛しますがiOSとAndroidで両方リリースされているものが多いです。 
私の場合、ほとんどローカルにだけ置いておくということがなく、メモやドキュメント関連であればEvernote、その他のファイルはDropbox、Googleドキュメントとクラウドとの連携をしているので、同じアプリをインストールするだけで全く問題ありませんでした。 
メモ帳を純正のアプリで保存していたりという方は下記などを参照するといいかもしれません。
<a class="link" href="http://d.hatena.ne.jp/rhea/20121124/1353755510" target="_blank">iOSのメモ帳をAndroidと同期する</a>
<h4 id="toc_2">メールアカウント</h3>
続いて、メールアカウント 
仕事のメールはGoogleApps導入済み、プライベート用もGmailと統一しているので全く問題御座いません。 
複数アカウントの切替もAndroidのGmailアプリは早いです。 
また、Gmail5.0以降のアプリでは、通常のPOPアカウントやYahoo!メールなど他のアカウントも追加出来るようになっており、統合型のメーラーとして機能します。 
試してみたら、@icloud.comのメールアドレスも普通に追加出来ました。 
もはや、appleが提供するメールアドレスという制約は全くありませんね。
<h4 id="toc_3">電話帳</h3>
電話帳は、私の中で一番重要でした。
いくつか方法はあるようですが、それぞれサードパーティのアプリを介さず、純正の機能だけで出来る以下の方法が一番早そうです。
<a class="link" href="http://andronavi.com/2013/03/255145" target="_blank">意外と簡単にできた！iPhoneからAndroidへの電話帳移行の方法</a>
<h4 id="toc_4">写真</h3>
一応写真データも移行しました。 
これは、icloudで保存していたものを書き出して、PCに放り込んでおけばいいかなとも思いましたが、容量が16GBから32GBに倍増したこともあって、余裕があるのでやってみました。 
Dropboxを介したカメラアップロードという方法もありますが、フォトアプリで閲覧出来るようにするには、以下のGoogle+を経由した方法がオススメです。
<a class="link" href="http://c-through.blogto.jp/archives/24647852.html" target="_blank">複数デバイス iOS (iPhone, iPad) / Android / Mac / Windows 間の写真共有に Google+ を使おう！</a>
<h3 id="toc_5">まとめ</h2>
便利な世の中になりました。 
iphone6PlusのSimフリーが安くなったら、MVNOとの組合わせでまた戻ろうかとも考えていますが、これだけ移行が簡単なのであれば、何も躊躇する必要がありません。

iphoneからAndroidへの移行に際してやったこと

スナップチャットが個人間の少額決済を代行するサービス「Snapcash」を始めた。
<iframe loading="lazy" width="500" height="281" src="https://www.youtube.com/embed/kBwjxBmMszQ?feature=oembed" frameborder="0" allowfullscreen></iframe>
&nbsp;
上限は1週間で250ドルで、審査により最大2,500ドルまで増やせるとのこと。
システムはスクエアのものを利用しており、利用者の手数料は無料、スナップチャットが費用を負担するという。
&nbsp;
個人間決済は今後の需要と新たなサービスモデル創出ですごく注目の分野だ。
このようなインフラの整備が進みつつある状況で、どういったサービスが今後流行するかは我々EC事業者は考えておくべき必要があると思う。
Facebookも今年6月PayPal社長をメッセージング製品部門担当バイスプレジデントとして迎え入れた。
個人の顔が割れていて、サービスとしての安心感があるSNS系からこのようなサービスが始まりそうだ。
&nbsp;
個人的には、これらSNS系のサービスが決済代行や海外送金の窓口になる日も近いと思う。
&nbsp;
個人間で例えばその国でしか買えないものを現地の友人に買っておいてもらって支払いをSNSでやったり、 
その先には企業のキャンペーンでFacebookアプリを作り、その場で支払いをさせるタイムセールのようなものも出てくると思う。
&nbsp;
もしかしたら今回のSnapcashのように、決済による手数料はとらず、あくまでサービスの強化であり収入源は広告という風潮になるかもしれない。 
さらには為替リスクだけとってFacebookコインみたいなドル建ての仮想通貨ができてもおかしくない。
&nbsp;
当面の課題はやはり安全性のアピールだと思うので、やりすぎで市場を壊さないよう慎重に少しずつ進めてもらえるといいなと思った

広がる個人間決済

Web上でExcelライクなインターフェイスを作れないかと相談があり調べたところ、
複数のjQueryプラグインがあった。
軽くて見た目が良いが演算ができなかったり、どれも長所短所があり迷っていたところ以下のプラグインを発見。フリーのプラグインの中では最も良いかと。
<a href="http://visop-dev.com/Project+jQuery.sheet" target="_blank">http://visop-dev.com/Project+jQuery.sheet</a>
&nbsp;
<h2>グラフを表示する</h2>
<a href="/uploads-archive/2014/12/1.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-6563" src="/uploads-archive/2014/12/1.png" alt="1" width="656" height="302" srcset="/uploads-archive/2014/12/1.png 656w, /uploads-archive/2014/12/1-300x138.png 300w, /uploads-archive/2014/12/1-228x104.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
<h2>プルダウンメニュー</h2>
<a href="/uploads-archive/2014/12/2.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-6564" src="/uploads-archive/2014/12/2.png" alt="2" width="656" height="301" srcset="/uploads-archive/2014/12/2.png 656w, /uploads-archive/2014/12/2-300x137.png 300w, /uploads-archive/2014/12/2-228x104.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
&nbsp;
<h2>演算</h2>
<a href="/uploads-archive/2014/12/3.png"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-6565" src="/uploads-archive/2014/12/3.png" alt="3" width="656" height="314" srcset="/uploads-archive/2014/12/3.png 656w, /uploads-archive/2014/12/3-300x143.png 300w, /uploads-archive/2014/12/3-228x109.png 228w" sizes="(max-width: 656px) 100vw, 656px" /></a>
&nbsp;
&nbsp;
上記以外にもいろいろな機能が揃っており使い切れないレベル。
・表の中のイベントをjsでキャッチ
・ソート
・リードオンリー
・条件分岐
など、何かあればぜひ使ってみようと思った

GoogleスプレッドシートみたいなjQueryプラグイン

cssを使ったちょっとしたテクニック

centosメールサーバー構築（postfix + dovecot + Cyrus SASL）

ここはオンラインリソースだけ紹介します。
<h2>Computer Science入門</h2>
<a href="https://www.google.com/url?q=https%3A%2F%2Fwww.udacity.com%2Fcourse%2Fcs101&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGdmrWTUY5b_qe3xle9-ddkB1YXqA" target="_blank">Udacity &#8211; intro to CS course</a> 
<a href="https://www.google.com/url?q=https%3A%2F%2Fwww.coursera.org%2Fcourse%2Fcs101&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNE-mScGCD0MJRKuWuFyLJbIr4XdbA" target="_blank">Coursera &#8211; Computer Science 101</a>
<h2>少なくとも１個のオブジェクト指向言語を使ってコーディングする &#8211; C++、JavaもしくはPython</h2>
<h3>初心者コース</h3>
<a href="https://www.google.com/url?q=https%3A%2F%2Fwww.coursera.org%2Fcourse%2Fprogramming1&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNERrKn8RoMF2C-tzZ_51XpGA2QzUQ" target="_blank">Coursera &#8211; Learn to Program: The Fundamentals</a> 
<a href="http://www.google.com/url?q=http%3A%2F%2Focw.mit.edu%2Fcourses%2Felectrical-engineering-and-computer-science%2F6-092-introduction-to-programming-in-java-january-iap-2010%2Findex.htm&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHfuFmBicr4_Zh4dtfmk_mYq0BtNQ" target="_blank">MIT Intro to Programming in Java</a> 
<a href="https://developers.google.com/edu/python/" target="_blank">Google&#8217;s Python Class</a> 
<a href="https://www.coursera.org/course/interactivepython" target="_blank">Coursera &#8211; Introduction to Python</a> 
<a href="http://www.openbookproject.net/thinkcs/python/english2e/" target="_blank">Python Open Source E-Book</a>
<h3>中級者コース</h3>
<a href="https://www.udacity.com/course/cs212" target="_blank">Udacity&#8217;s Design of Computer Programs</a> 
<a href="https://www.coursera.org/course/programming2" target="_blank">Coursera &#8211; Learn to Program: Crafting Quality Code</a> 
<a href="https://www.coursera.org/course/proglang" target="_blank">Coursera &#8211; Programming Languages</a> 
<a href="http://cs.brown.edu/courses/cs173/2012/OnLine/" target="_blank">Brown University &#8211; Introduction to Programming Languages</a>
<h2>他のプログラミング言語を勉強する</h2>
例えば、Java Script、CSS、HTML、Ruby、PHP、C、Perl、Shell、Lisp、Scheme。 
<a href="http://www.w3schools.com/" target="_blank">w3school.com &#8211; HTML Tutorial</a> 
<a href="http://www.codecademy.com/learn" target="_blank">CodeAcademy.com</a>
<h2>コードをテストする</h2>
<a href="https://www.udacity.com/course/cs258" target="_blank">Udacity &#8211; Software Testing Methods</a> 
<a href="https://www.udacity.com/course/cs259" target="_blank">Udacity &#8211; Software Debugging</a>
<h2>ロジック推理と離散数学を勉強する</h2>
<a href="http://www.google.com/url?q=http%3A%2F%2Focw.mit.edu%2Fcourses%2Felectrical-engineering-and-computer-science%2F6-042j-mathematics-for-computer-science-fall-2010%2Findex.htm&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEXtF_m9Lj7XMQZFy8Y92633L2EcQ" target="_blank"> MIT Mathematics for Computer Science</a>
<h2>データ構造とアルゴリズムを勉強する</h2>
<a href="http://www.google.com/url?q=http%3A%2F%2Focw.mit.edu%2Fcourses%2Felectrical-engineering-and-computer-science%2F6-006-introduction-to-algorithms-spring-2008%2Findex.htm&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEIwTJvLQcPGJL2hPxLibPRvjhbbg" target="_blank">MIT Introduction to Algorithms</a>
<h2>オペレーティングシステムについて勉強する</h2>
<a href="http://www.youtube.com/watch?v=XgQo4JkN4Bw&amp;list=PL3289DD0D0F0CD4A3" target="_blank">UC Berkeley Computer Science 162</a>
<h2>人工知能</h2>
<a href="http://see.stanford.edu/see/courseinfo.aspx?coll=86cc8662-f6e4-43c3-a1be-b30d1d179743" target="_blank">Introduction to Robotics</a> 
<a href="http://see.stanford.edu/see/courseinfo.aspx?coll=63480b48-8819-4efd-8412-263f1a472f5a" target="_blank">Natural Language Processing</a> 
<a href="http://see.stanford.edu/see/courseinfo.aspx?coll=348ca38a-3a6d-4052-937d-cb017338d7b1" target="_blank">Machine Learning</a>
<h2>コンパイラ構築</h2>
<a href="https://www.coursera.org/course/compilers" target="_blank">Coursera &#8211; Compilers</a>
<h2>暗号化</h2>
<a href="https://www.coursera.org/course/crypto" target="_blank">Coursera &#8211; Cryptography</a> 
<a href="https://www.udacity.com/course/cs387" target="_blank">Udacity &#8211; Applied Cryptography</a>
<h2>Parallel Programming</h2>
<a href="https://www.coursera.org/course/hetero" target="_blank">Coursera &#8211; Heterogeneous Parallel Programming</a>
<h2>元リンク</h2>
<a href="http://www.google.com/edu/tools-and-solutions/guide-for-technical-development/index.html" target="_blank">元リンク</a>

googleが技術開発のガイドを出しました

先月Twitterで新しいサービスが試験的に開始されました、その名も「<a href="https://blog.twitter.com/2014/introducing-twitter-offers">Twitter offer</a>」。
どんなサービスか簡単に説明します。購入者はあらかじめtwitterにクレジットカード、またはデビットカードの情報を登録します。そして、お店からのoffer（クーポン）を入手します。
クーポンを入手する際には「get offer」というボタンを押します。例えば5000円以上購入したら500円引きというクーポンを入手したりします。
クーポンを発行した実店舗やネットショップで、twitterに登録したカードを使って5000円の買い物をすると自動で割引がされて4500円になります。
<a href="/uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6417" src="/uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM.png" alt="Screen_Shot_2014-11-18_at_4.10.58_PM" width="700" height="230" srcset="/uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM.png 700w, /uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM-300x98.png 300w, /uploads-archive/2014/12/Screen_Shot_2014-11-18_at_4.10.58_PM-228x74.png 228w" sizes="(max-width: 700px) 100vw, 700px" /></a>
購入者側からすると、いちいちクーポンを見せたりする手間がかかりません。
お店側はクーポンを発行するために必要なのはTwitterだけなので、もちろんクーポンを印刷するコストもかかりませんしクーポンを発行するためのプログラムを構築する必要もなくかなり低コストに抑えられます。
さらにクーポンによる効果を測ることも容易になります。
<a href="/uploads-archive/2014/12/Offers_Screenshot.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6418" src="/uploads-archive/2014/12/Offers_Screenshot.jpg" alt="Offers_Screenshot" width="621" height="575" srcset="/uploads-archive/2014/12/Offers_Screenshot.jpg 621w, /uploads-archive/2014/12/Offers_Screenshot-300x277.jpg 300w, /uploads-archive/2014/12/Offers_Screenshot-228x211.jpg 228w" sizes="(max-width: 621px) 100vw, 621px" /></a>
左はお店から発行されたクーポンを獲得する画面です。
&nbsp;
プロもツイートでクーポンを発行する地域を絞ることもできるので、小規模な店舗にも有効なツールになりますです。
&nbsp;

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2014年

2014/12/17

2014/12/17

2014/12/17

2014/12/17

2014/12/17

2014/12/16

2014/12/10

2014/12/10

2014/12/10

2014/12/09

2014/12/09

2014/12/09

2014/12/09

2014/12/04

2014/12/04

2014/12/04

2014/12/03

2014/12/03