ajaxの書き方

JSON形式のデータを返すAPI

横幅だけじゃない！Media Queryでの指定の方法

やっぱりAPPLEはすごかった。 
何がすごいかとサポートの手厚さです。
高収益企業が利益を顧客満足度の向上のために投資する。はたまた、顧客満足度を追求したから高収益を生んだのか。2つはバランスするのだろう。
今回は、愛用中のiphone5のホームボタンがくるくる回ってしまう症状に見舞われました。
ウェブで調べてみると稀なケースなようで、中の爪が折れているので、下手をするとホームボタンが取れてしまうようです。
回転をするというのは通常◯の中に□が描かれている（iphone5s以降ではない）のですが、その四角が回転してしまって◇のようになってしまいます。
まだ、AppkeCareの期間はあるし、これは修理かな〜なんて思っていたのですが、AppleStoreに行って有料なんて言われても嫌なので、まず、症状を問い合わせてみようとサポートを辿っていたところ、チャットで問い合わせが出来ることが分かりました。
<h2>appleオンラインサポートページへ</h2>
<a href="http://www.apple.com/jp/support/contact/" target="_blank">http://www.apple.com/jp/support/contact/</a>
<a href="/uploads-archive/2014/11/screenshot.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6206" src="/uploads-archive/2014/11/screenshot-300x205.png" alt="screenshot" width="300" height="205" srcset="/uploads-archive/2014/11/screenshot-300x205.png 300w, /uploads-archive/2014/11/screenshot-1024x703.png 1024w, /uploads-archive/2014/11/screenshot-228x156.png 228w, /uploads-archive/2014/11/screenshot.png 1034w" sizes="(max-width: 300px) 100vw, 300px" /></a>
&nbsp;
都内ですとAppleStoreに行けてしまうので、予約して訪問するか迷うのですが、日本に数店舗しかないのでこの対応が充実していくのだなと思いました。
<a href="/uploads-archive/2014/11/screenshot1.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6207" src="/uploads-archive/2014/11/screenshot1-151x300.png" alt="screenshot" width="151" height="300" srcset="/uploads-archive/2014/11/screenshot1-151x300.png 151w, /uploads-archive/2014/11/screenshot1-228x451.png 228w, /uploads-archive/2014/11/screenshot1.png 459w" sizes="(max-width: 151px) 100vw, 151px" /></a>
指示通りに進めていくとこのような画面が立ち上がりました。
まずは、定型文から向こうもスタッフがスタンバイをするようで程なくしてチャットがスタートしました。インターフェースはimassageそのものですね。
<a href="/uploads-archive/2014/11/screenshot2.png"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-6208" src="/uploads-archive/2014/11/screenshot2-151x300.png" alt="screenshot" width="151" height="300" srcset="/uploads-archive/2014/11/screenshot2-151x300.png 151w, /uploads-archive/2014/11/screenshot2-228x451.png 228w, /uploads-archive/2014/11/screenshot2.png 459w" sizes="(max-width: 151px) 100vw, 151px" /></a>
&nbsp;
&nbsp;
メールですと、症状が上手く伝わらない場合、何度も往復するはめになるのですが、チャットであれば即レスを頂けます。
何度かのやりとりで状況の説明が終わり、
<blockquote>
通常使用で、このような症状がでた場合には、おそらく無償で対応をさせていただけるかと思います。ただ、あくまでも工場判断になるため、落下痕などがあった場合には、4400円で対応をさせていただきます。
</blockquote>
と欲しかった返答を頂けたことで安心してチャットを終らせることが出来ました。
対応も非常に丁寧で終始、ちゃんとサポートするから安心をして欲しいという言葉が投げかけられ好感が持てました。
最後に、エビデンスとして残したいな〜とスクリーンショットを取っていたのですが、しっかりチャット全履歴がメールにて送られてくる辺りがさすがだな〜と思いました。

apple製品サポートに困ったらチャットが使える！

small_nino-eye (5).jpg

thumbnail_nino-eye (5).jpg

nino-eye (5).jpg

「Matter.js」を使ってCanvasの物理演算をやってみました

大手銀行と流通関係の業界団体が、銀行振込した際にリアルタイムで振込先に通知を送るシステムの共同実験をしているとのこと。
現在企業間の支払は請求書発行 → 振込 → 通帳確認 → 着金/未着 という流れが主流。
着金の確認や未着を探したり管理したりするのは面倒。
日々複数の商品とお金のやりとりが発生する流通業界では、どの入金がどの商品のものなのかを照合するのに一苦労だとのこと。
銀行名は非公開だが、大手銀行と流通関係の業界団体が今月実験を開始するという。
実験はEDI(電子データ交換)という通信回線を使い、従来数字とカナ20桁しかやりとりができなかった通信を
商品名や個数など含め140桁までやりとりできるようにするという。
買い手が振り込んだ情報がどの請求書に対するものかが自動で判断できるようになるとのこと。
要は振込に対してコールバックを受け取れるようになる。
考えてみれば、これだけECが一般化されている中で企業間取引で請求書と通帳を照合しているというのはおかしな話だ。
一部クレジットカードを使って取引できるサービスもあるが、手数料や決算時の集計の手間などで一般化はしていない。
銀行直結であれば話は別で、一気に広がりそうだ。
今までの常識が変わる注目したい流れ

銀行振込にコールバック関数実装中

I would like to make a special mention about<a href="http://www.awwwards.com/44-useful-infographics-for-web-designers.html"> Awwards’ Infographics post for Web designers</a>. The post collects a total of 44 Infographics complete with a vast quantity of information that I am sure both newbie and experienced designers are going to find out something new to learn.
The topics go from Web Design history, anatomy of effective Web Design, SEO, Colour Theory and Psychology, Typography, UE, Design trends, RWD, etc.
One of the Infographics I found more interesting and not as usually commented as others, like Color theory or RWD, is the Infographic about <a href="http://trends.e-strategyblog.com/2014/08/09/eye-tracking-technology-web-design-infographic/20668">eye tracking technology in Web Design</a>, in other words, about how your eyes move on a website.
&nbsp;
<a href="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.41.48.png"><img decoding="async" loading="lazy" class="alignnone wp-image-6184 " src="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.41.48-1024x400.png" alt="Screen Shot 2014-11-04 at 17.41.48" width="651" height="225" /></a>
Some interesting tips As it shows the Infographic:
<ul>
<li>Users maintain and “F/E” shaped viewing pattern</li>
</ul>
<a href="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.42.06.png"><img decoding="async" loading="lazy" class="alignnone wp-image-6185" src="/uploads-archive/2014/11/Screen-Shot-2014-11-04-at-17.42.06-253x300.png" alt="Screen Shot 2014-11-04 at 17.42.06" width="299" height="366" /></a>
<ul>
<li>69% of the users’ time is spent looking at the left half of a Webpage.</li>
<li>Logos and brands on top left side are remembered 58,4% more than other placement areas.</li>
<li>Users spend 80% of their time looking at information above the “fold” or the portion of the web page that doesn’t require any scrolling.</li>
</ul>
&nbsp;

Infographics for Web designers

CentOS 6から7にアップグレード

<h2>セブンネットショッピング コンビニで即日受取サービス開始</h2>
セブン&amp;アイ・ホールディングスが、グループのECサイトで購入した商品をコンビニで当日受け取れるサービスを始めるとのこと。
明記されていないが、おそらく対象は以下だと思われる。
セブンネットショッピング
http://www.7netshopping.jp/all/
の中のeデパート、ネットスーパー、セブンミール、アカチャンホンポ。
あとLOFTも対応するようだ。
&nbsp;
サービスをまとめると
・午前7時までの購入で同日19時に受け取れる
・夜中の注文で翌朝出勤時に受け取れる
・全300万商品中150万商品を月内に対応
&nbsp;
現在1500億円のEC売上を20年度に1兆円に引き上げるとのこと。
&nbsp;
すでにECが一般化され、サービス合戦になってきた感じ。
ネット上で買えないものはほぼなくなり価格競争が横行する中
独自の店舗・物流網を活かした新しいサービスに期待がもてそう
&nbsp;
<h2>ローソン12,000店舗でAmazon商品注文受付</h2>
ニーズがあるのか疑問だが、ローソンが店舗のロッピー端末でAmazonの商品を注文 → レジで支払うというサービスを開始するとのこと。
ユーザーのメリットは
・オペレーターが対応 → 高齢者向け
・レジで支払 → 子供向け
とのこと。
店頭で受け取れるのは良いが、忙しいビジネスマンなどはネットで発注するだろうし、個人的には謎なサービスなのだが、今後もアパレルなどAmazon以外の商材も揃えていくとのことだ。

ECに力を入れるコンビニ各社

前回はフィルターの設定を飛ばして、送り状の印刷を説明してしまったので、今回はフィルターの設定方法をご紹介します。
フィルターを作るにはまずスタートメニューのフィルタ設定を開きます。
<a href="/uploads-archive/2014/10/yupuri1.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-6066" src="/uploads-archive/2014/10/yupuri1.gif" alt="yupuri1" width="377" height="299" /></a>
&nbsp;
フィルタ設定を開くの下のような画面になります。
フィルタには取込フィルタと出力フィルタがあります。今回は取込フィルタを作成するので、タブを取込にして下さい。
&nbsp;
<a href="/uploads-archive/2014/10/yuupaket1.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-6133" src="/uploads-archive/2014/10/yuupaket1.gif" alt="yuupaket1" width="621" height="437" /></a>
「新規」をクリックすると下の様なポップアップが出てくるので、フィルタの種類を「発送データ」、詳細設定にチェックを入れてＯＫをクリックして下さい。簡易編集でも大丈夫ですが、色んなモールの管理ツールと情報をリンクさせる場合には詳細でフィルタを作成する方が汎用性があるのでオススメします。
<a href="/uploads-archive/2014/10/yuupaket2.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6134" src="/uploads-archive/2014/10/yuupaket2.gif" alt="yuupaket2" width="282" height="179" /></a>
&nbsp;
するとこんな画面になります。取込ファイルパスにはこれから作るフィルタを介して取込ファイルを指定します。
フォーマット種別には「フリーフォーマット」の他に「楽天」「e-決済」「yahoo」「amazon」が既に用意されています。
モールの管理ツールから直接出力したCSVに合わせて作ったフィルタですが、yahooは最近仕様が変わっていますし、楽天については何等かのツールを使って出力している方も多いと思います。デフォルトで用意されたフィルタをコピーして使うのがイイかもしれません。今回はとりあえずフリーフォーマットで作ります。
データ形式、列見出し、区切り文字、囲み文字についても設定が必要です。通常のCSVなら画像の通りで良いと思います。
&nbsp;
画面の下部にはかなりの数の項目が出てきます。画面のサイズを変更できないので正直かなり見難いです。
<a href="/uploads-archive/2014/10/yuupaket3.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-6137" src="/uploads-archive/2014/10/yuupaket3.gif" alt="yuupaket3" width="624" height="439" /></a>
ゆうパケットで仕様する際には印刷できる内容が限られているので、一部の項目だけ紐づける事になります。
まず「郵便種別」の項目の固定値のセルに「9」を入力します。9はゆうパケットを意味しています。
「元／着払／代引」の項目は「0」を入力します。ゆうパケットは着払いも代引きも対応していないので元払いを意味する0にしておきます。
続いて「送り状種別」は「1800800001」と入力して下さい。これは送り状の形式で「ゆうパケットタックシール」というものを意味していいます。基本的にゆうパケットは「ゆうパケットタックシール」に印刷をします。基本設定で使用する送り状を「ゆうパケットタックシール」にしておく必要があります。
<a href="/uploads-archive/2014/10/yuupaket4.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-6140" src="/uploads-archive/2014/10/yuupaket4.gif" alt="yuupaket4" width="621" height="182" /></a>
送り先の情報については補助情報のセルをクリックします。ここで取込ファイルパスに指定したデータを元に取り込む項目を設定します。
<a href="/uploads-archive/2014/10/yuupaket5.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-6147" src="/uploads-archive/2014/10/yuupaket5.gif" alt="yuupaket5" width="630" height="444" /></a>
「取込データから選択」にチェックをいれて、送り先紐づける項目を選択します。
ゆうパケットタックシールに必要な項目は以下になります。
・お届け先郵便番号
・お届け先住所　（※ＣＳＶの仕様によって住所２、住所３の紐づけが必要になる場合もあります。）
・お届け先名称　（※ＣＳＶの仕様によって名称２の紐づけが必要になる場合もあります。）
&nbsp;
以下の内容は固定値にで入力しておくと楽です。
・お届け先敬称区分　→　基本的は「様」となる「0」で良いと思います。
・ご依頼主郵便番号
・ご依頼主住所
・ご依頼主名称
・ご依頼主敬称区分　→様をつける必要がないので空欄で大丈夫です。
&nbsp;
&nbsp;
&nbsp;

ゆうプリＲでゆうパケット用のフィルターを作成する方法

ソフトバンクがインドやインドネシアのEC企業に相次いで投資したというニュースが話題になっており
アジアのECに注目が集まっている感じがしたので、アジアの国別に主要なECサイトを列挙してみた。
&nbsp;
国の並び順は2013年の名目GDP順であり、各ECサイトは自分がネット上の情報や評判、アクセス数等から判断してピックアップしたもの。
<table>
<tbody>
<tr>
<td rowspan="3">中国</td>
<td>天猫 / 淘宝网</td>
<td><a href="http://www.tmall.com/" target="_blank">http://www.tmall.com/</a> 
<a href="http://www.taobao.com/" target="_blank">http://www.taobao.com/</a></td>
</tr>
<tr>
<td>京东商城</td>
<td><a href="http://www.jd.com/" target="_blank">http://www.jd.com/</a></td>
</tr>
<tr>
<td>QQ网购</td>
<td><a href="http://www.wanggou.com/" target="_blank">http://www.wanggou.com/</a></td>
</tr>
<tr>
<td rowspan="3">日本</td>
<td>楽天市場</td>
<td><a href="http://www.rakuten.co.jp/" target="_blank">http://www.rakuten.co.jp/</a></td>
</tr>
<tr>
<td>Amazon</td>
<td><a href="http://www.amazon.co.jp/" target="_blank">http://www.amazon.co.jp/</a></td>
</tr>
<tr>
<td>ヤフー</td>
<td><a href="http://www.yahoo.co.jp/" target="_blank">http://www.yahoo.co.jp/</a></td>
</tr>
<tr>
<td rowspan="3">インド</td>
<td>Snapdeal</td>
<td><a href="http://www.snapdeal.com/" target="_blank">http://www.snapdeal.com/</a></td>
</tr>
<tr>
<td>Flipkart</td>
<td><a href="http://www.flipkart.com/" target="_blank">http://www.flipkart.com/</a></td>
</tr>
<tr>
<td>Myntra</td>
<td><a href="http://www.myntra.com/" target="_blank">http://www.myntra.com/</a></td>
</tr>
<tr>
<td rowspan="2">韓国</td>
<td>G-market</td>
<td><a href="http://www.gmarket.co.kr/" target="_blank">http://www.gmarket.co.kr/</a></td>
</tr>
<tr>
<td>interpark</td>
<td><a href="http://www.interpark.com/" target="_blank">http://www.interpark.com/</a></td>
</tr>
<tr>
<td rowspan="3">インドネシア</td>
<td>Kaskus</td>
<td><a href="http://www.kaskus.co.id/" target="_blank">http://www.kaskus.co.id/</a></td>
</tr>
<tr>
<td>TokoBagus</td>
<td><a href="http://www.olx.co.id/" target="_blank">http://www.olx.co.id/</a></td>
</tr>
<tr>
<td>Berniaga</td>
<td><a href="http://www.berniaga.com/" target="_blank">http://www.berniaga.com/</a></td>
</tr>
<tr>
<td rowspan="3">台湾</td>
<td>PChome</td>
<td><a href="http://www.pchome.com.tw/" target="_blank">http://www.pchome.com.tw/</a></td>
</tr>
<tr>
<td>Yahoo</td>
<td><a href="https://tw.yahoo.com/" target="_blank">https://tw.yahoo.com/</a></td>
</tr>
<tr>
<td>博客来</td>
<td><a href="http://www.books.com.tw/" target="_blank">http://www.books.com.tw/</a></td>
</tr>
<tr>
<td rowspan="2">タイ</td>
<td>we love shopping</td>
<td><a href="http://portal.weloveshopping.com/" target="_blank">http://portal.weloveshopping.com/</a></td>
</tr>
<tr>
<td>dealfish</td>
<td><a href="http://www.olx.co.th/" target="_blank">http://www.olx.co.th/</a></td>
</tr>
<tr>
<td rowspan="3">マレーシア</td>
<td>Lelong.my</td>
<td><a href="http://www.lelong.com.my/" target="_blank">http://www.lelong.com.my/</a></td>
</tr>
<tr>
<td>ebay</td>
<td><a href="http://www.ebay.com.my/" target="_blank">http://www.ebay.com.my/</a></td>
</tr>
<tr>
<td>Qoo10</td>
<td><a href="http://www.qoo10.my/" target="_blank">http://www.qoo10.my/</a></td>
</tr>
<tr>
<td rowspan="3">シンガポール</td>
<td>Reebonz</td>
<td><a href="http://www.reebonz.com.sg/" target="_blank">http://www.reebonz.com.sg/</a></td>
</tr>
<tr>
<td>Qoo10</td>
<td><a href="http://www.qoo10.sg/" target="_blank">http://www.qoo10.sg/</a></td>
</tr>
<tr>
<td>Redmart</td>
<td><a href="https://redmart.com/" target="_blank">https://redmart.com/</a></td>
</tr>
<tr>
<td rowspan="3">香港</td>
<td>淘宝网</td>
<td><a href="http://hk.taobao.com/" target="_blank">http://hk.taobao.com/</a></td>
</tr>
<tr>
<td>Yahoo</td>
<td><a href="https://hk.yahoo.com/" target="_blank">https://hk.yahoo.com/</a></td>
</tr>
<tr>
<td>ebay</td>
<td><a href="http://www.ebay.com.hk/" target="_blank">http://www.ebay.com.hk/</a></td>
</tr>
<tr>
<td rowspan="3">フィリピン</td>
<td>Sulit.com.ph</td>
<td><a href="http://www.olx.ph/" target="_blank">http://www.olx.ph/</a></td>
</tr>
<tr>
<td>Ayos Dito</td>
<td><a href="http://www.ayosdito.ph/" target="_blank">http://www.ayosdito.ph/</a></td>
</tr>
<tr>
<td>Lazada Philippines</td>
<td><a href="http://www.lazada.com.ph/" target="_blank">http://www.lazada.com.ph/</a></td>
</tr>
</tbody>
</table>
&nbsp;
全てかわわからないが、まずはCtoCが人気になり、その後BtoCが巻き返すという流れが主流な模様。

small_cart.png

thumbnail_cart.png

cart.png

アジアのEC

WebGLなどCanvas上でグラフィックを扱う場合、
JSON化されたデータを読み込んで、表示するという手順がよく使われることになると思います。
このJSON化されたグラフィックデータなのどデータには、ユーザーにダウンロードされて流用されることを避けたいものも多いかと思います。
Flashなどのプラグインを使った場合は、コードをユーザーに見られないようにすることができるので、このリスクを避けられますが、
HTML5でJSONを扱う場合はJavaScriptを使って読み込むことになるため、
ユーザーがHTMLやJavaScriptからデータの場所をたどってJSONデータがダウンロードされるリスクが高まります。
&nbsp;
そこで、JSONデータを難読化して、簡単にはJSONデータが利用できないような仕組みについて、
調べて実際にやってみました。
&nbsp;
↓こちらが作ってみたものです。
<a class="demo" href="/demo/ninomiya/55/" target="_blank">DEMO</a>
&nbsp;
<h2>方法</h2>
<h3>1.JSONコードを暗号化する。</h3>
<a class="link" href="http://www.broadband-xp.com/obfuscation/crypt.html" target="_blank">参考サイト： JavaScript難読化のためのヒント</a>
今回はこちらの記事を参考に、暗号化を試みてみました。
&nbsp;
<h3>2. 暗号化前のJSON本体はPHPで読み込み、URLを伏せる</h3>
暗号化前のJSONデータはPHPで記述したURLからアクセスするようにして、
ユーザーからは直接URLがわからないようにしました。
&nbsp;
<h3>3.暗号解読のJavaScriptコードも暗号化する。</h3>
JavaScriptコード自体も暗号化して、より難読生を高めます。
ただ、暗号解読のコードは記述せざるを得なかったりするので、
飽くまでも、解読するための手間を多くするのが限界です。
&nbsp;
その他参考サイト
<a class="link" href="http://ja.wikipedia.org/wiki/%E3%82%B7%E3%83%BC%E3%82%B6%E3%83%BC%E6%9A%97%E5%8F%B7" target="_blank">シーザー暗号 &#8211; Wikipedia</a>
<a class="link" href="http://www.php-ref.com/bapi/02_ord.html" target="_blank">ＰＨＰリファレンス（ord()）</a>
&nbsp;

JSONデータの難読化について調べてみました

AdobeさんからついにCreative Cloudライブラリなるものがでていました。
これは簡単にいうと、Creative Cloudのアカウントでクラウド上にお気に入りのアセット（ブラシ、グラフィック、フォント、カラー、スタイル）を保存しておき、別のデバイスでも同じように利用できるというものです。
<a href="http://www.adobe.com/jp/creativecloud/libraries.html" target="_blank">アドビのファイル＆アプリでアセットを同期 | Creative Cloudライブラリ</a>
<a href="https://helpx.adobe.com/jp/creative-cloud/how-to/creative-cloud-libraries.html" target="_blank">Creative Cloudライブラリの使い方入門 | Adobe Creative Cloudチュートリアル</a>
僕はCCはphotoshopを持っているので、早速導入してみました。 
まぁ導入といっても、photoshopの更新をしたら、ライブラリが勝手に入っていたんですが・・・
<img decoding="async" loading="lazy" class="alignnone wp-image-6123" src="/uploads-archive/2014/10/2fab95d7a81fa10bbabef0cfc2fc5287-1024x648.png" alt="" width="640" height="406" />
こんな感じでサイドにライブラリが追加されていました。
&nbsp; 
ちなみにライブラリの作成は制限がなく、ライブラリには1000個までアセットが登録できます。 
自分なりにライブラリを作って、分類分けをするのがいいですね！
さっそく、フラットアイコンというライブラリを作り、フリーのアイコンを追加してみました。
<img decoding="async" loading="lazy" src="/uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8.png" alt="スクリーンショット 2014-10-28 14.47.00" width="399" height="509" class="alignnone size-full wp-image-6124" srcset="/uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8.png 399w, /uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8-235x300.png 235w, /uploads-archive/2014/10/31b7d5c68b080c96dabbb11c0aaad4a8-228x290.png 228w" sizes="(max-width: 399px) 100vw, 399px" /> 
&nbsp; 
このライブラリは簡単にドラッグ&#038;ドロップで簡単に使用することができます。
<img decoding="async" src="/demo/abe/sample/201410281500.gif" alt="スクリーンショット 2014-10-28 14.47.00" width="640" /> 
&nbsp;
簡単に、よく使用してる素材を呼び出すことができますね！ 
以前こんなプラグインがないかと探し、<a href="http://pixeldropr.com/" target="_blank">Pixel Dropr</a> 
というものを見つけて買おうかどうか迷ったんですが、もう必要ないかもしれません。
ユーザーによって使い方は様々あると思うので、この機能はけっこうありがたいですね！
ちなみに少し前にアプリがいろいろ出ていたのですが、 
<a href="http://www.adobe.com/jp/creativecloud/catalog/mobile.html" target="_blank">アドビモバイルおよびタブレットアプリ | Adobe Creative Cloud</a> 
iPhoneやiPadでブラシやシェイプを作り、ライブラリと連携することができるようです。 
どこでも制作ができるようになったみたいなふれ込みですが、それがいいのか悪いか・・・笑
<h2>おまけ、、、</h2>
先週の記事の中で、 
興味ある記事がありました。 
<a href="http://liginc.co.jp/web/js/other-js/121082" target="_blank">LIGのソースコードレビュー会で使用している共有ツールとライブラリの活用方法の紹介 | 株式会社LIG</a>
このツールもさることながら、ソースコードレビュー会、これはいいなぁと思いました。会社としてレベルアップするためにもこういう会は必要だと思うので、弊社でも実践してみようかな。。。と思います。

求めていた機能がついに！AdobeのCreative Cloudライブラリ

easyABのユニバーサルアナリティクスに対応した実装方法

MEAN(MongoDB, Express, AngularJS, Node.js)アーキテクチャは、下記の特徴で注目されています。 
・JavaScriptフルスタックである 
・データモデルはjson使っている
<h3>各パーツの紹介</h3>
<h4>MongoDB &#8211; <a href="http://www.mongodb.org/" target="_blank">http://www.mongodb.org/</a></h4>
RDBと概念が異なり「DB」「コレクション」「オブジェクト（＝ドキュメント）」といった新しい概念になります。
<h4>Express &#8211; <a href="http://expressjs.com/" target="_blank">http://expressjs.com/</a></h4>
Node.js上で動くWeb Applicationフレームワークのようです。
<h4>AngularJS &#8211; <a href="https://angularjs.org/" target="_blank">https://angularjs.org/</a></h4>
「Directive」、「Module」、「Provider」や「Dependency Injection」というアーキテクチャを持つJavaScriptフレームワークです。
<h4>Node.js &#8211; <a href="http://nodejs.org/" target="_blank">http://nodejs.org/</a></h4>
サーバサイドJavaScript環境です。
<h3>YEOMANジェネレータ</h3>
いくつMEANのYEOMANジェネレータが存在するらしくて、使わなければどういう感じなものかがわからないです。 
あとで調査しますが、コマンドを打ってファイルを生成するものかと思います。
一番優れるジェネレータは下記であるのようです。 
<a href="https://github.com/DaftMonk/generator-angular-fullstack" target="_blank">DaftMonk/generator-angular-fullstack · GitHub</a>

MEANアーキテクチャ

HTML5のCanvasで画像をリサイズ＆トリミングして中央表示する方法

After approximately a year in public beta version, <a href="http://froont.com/">FROONT</a> version one came live this October 13th.
<a href="http://froont.com/">FROONT</a>  is a tool for designers to speed up the process of protytype and design responsive web sites.
Take elements from other pages to build your own. Work in the environment you&#8217;re designing for – the browser. You have full control over desktop and mobile layouts, which are responsive from the start. Deliver fully working code without writing it. Connect it to the web, or simply zip the code and send to your client or developer.
&nbsp;
<iframe loading="lazy" width="500" height="281" src="//player.vimeo.com/video/95264559" frameborder="0" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen"></iframe>
<a href="http://vimeo.com/95264559">Intro to FROONT</a> from <a href="http://vimeo.com/froont">Froont</a> on <a href="https://vimeo.com">Vimeo</a>.
In other words, rather than designing in a page layout program or designing in Photoshop, designers can actually work right in the browser thanks to Froont’s pre-existing <a href="http://techcrunch.com/2013/05/06/froont/">browser-based visual editor</a>. You can explore FROONT web designs library and get inspired or literally take elements from pages you like to build your own.
This tools allows designers to actually build for various layouts at the same time. So any time of your design process you can check how your design looks in various devices: PC, tablet screen, phone screen&#8230;making much faster the process to build for different environments.
<a href="/uploads-archive/2014/10/froont-editor-595x329.jpg"><img decoding="async" loading="lazy" class="wp-image-6082 size-full aligncenter" src="/uploads-archive/2014/10/froont-editor-595x329.jpg" alt="froont-editor-595x329" width="595" height="329" srcset="/uploads-archive/2014/10/froont-editor-595x329.jpg 595w, /uploads-archive/2014/10/froont-editor-595x329-300x165.jpg 300w, /uploads-archive/2014/10/froont-editor-595x329-228x126.jpg 228w" sizes="(max-width: 595px) 100vw, 595px" /></a>
&nbsp;
The usual way of designing websites is that the design of the website is given to the developer, this approach however, can involve a lot of unnecessary back and forth as the design gets lost in translation. The responsive designs of FROONT, built using HTML/CSS and hosted in the cloud, can be viewed and shared instantly in a web browser, on any device being targeted. And when it’s time to hand off the design to a developer, instead of a static PNG file or something similar, in theory they’re given “nice, clean HTML/CSS or the ‘face’ of the website already made,” says the company.
Froont isn’t so much aiming at simplifying coding but providing better tools for design. It can be used for production, however, designs usually need to be customised in several ways upon client requests, but it is definitely a good starting point.
&nbsp;
In some ways it’s similar to how something like Github works for raw code, and the wider open source movement as a whole, but for visual web designers. As Froont co-founder and CEO Sandijs Ruluks says “The same applies for Github, where people are embracing the community and reuse code made by others. The interesting part is that open-sourced coding is now perceived as something totally normal and its benefits can’t be denied. Open-sourced design on the other hand, isn’t there yet, although we see the excitement around it”.
&nbsp;
Pages created by non-paying users are always public and can be cloned, edited and reused by others. If you want to keep your work private you pay a subscription. Or, as Ruluks puts it, “for free you pay with sharing, for privacy you pay with money”. Here you have the pricing list.
<a href="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38.png"><img decoding="async" loading="lazy" class="wp-image-6085 aligncenter" src="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-1024x412.png" alt="Screen Shot 2014-10-21 at 17.28.38" width="619" height="249" srcset="/uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-1024x412.png 1024w, /uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-300x120.png 300w, /uploads-archive/2014/10/Screen-Shot-2014-10-21-at-17.28.38-228x91.png 228w" sizes="(max-width: 619px) 100vw, 619px" /></a>
&nbsp;
Actually FROONT is not the only tool to create professional Responsive Website without code, but it is the only &#8220;free&#8221; version.
There&#8217;s also <a href="https://webflow.com/">Webflow</a>, <a href="https://creative.adobe.com/products/reflow">Adobe Edge Reflow</a> and <a href="http://macaw.co/">Macaw </a>. If you want to read more about the topic you might like to <a href="http://www.awwwards.com/4-tools-that-enable-small-town-designers-to-sell-an-idea-to-companies-like-coca-cola.html">read this post of Awwwards.</a>

FROONT:  Sharing Responsive Web Design As Easy As Sharing Code

<h2>NoSQLとは</h2>
データベース管理システム(DBMS)の種類を表す用語で、現在最も普及しているリレーショナルデータベース(RDB/RDBMS → Mysql,PostGre,Oracleなど)とは異なる新しい方式の総称。RDBでデータの問い合わせや操作に用いる言語であるSQLを用いない(使えない)ことからこのように呼ばれる。主にビッグデータを扱うときに用いる。
<h2>NoSQLの種類</h2>
<h4>KVS（Key-Value Store型）</h4>
キーと値をペアにして保持するシンプルなデータ構造を持つ。キーと、格納したいデータを紐付け、キーを指定することでそれに対応したデータを格納／取得することができる。 
例：Memcashed
<h4>列指向型（テーブル指向型）</h4>
列方向のデータのまとまりを効率的に扱えるように設計されたデータベース。列データをファイルシステム上の連続した位置に格納することによって、大量の行に対する少数の列の集約処理や、同一の値をまとめるデータ圧縮などを効率的に行うことができる。大量のデータを対象とした分析やデータマイニングなどに特に適していると言われている。 
例：Cassandra
<h4>ドキュメント指向型</h4>
XMLやJSONなどのように半構造化されたドキュメントデータの格納に特化したデータベース。ドキュメント自体に関するメタデータも含め、全てドキュメント内に保存される点が特徴となっている。 
例：MongoDB
<h4>グラフ指向型</h4>
ノード、エッジ、プロパティから構成されるグラフ構造でデータを格納するデータベース。データ同士の複雑な関連性を表現することができる。 
例：Neo4j
<h2>NoSQLの特徴</h2>
・RDBMSと比べて高速に動作する(大量のデータの読み書きが得意) 
・スケールアウト(サーバを増加させることで性能をアップ)をすることを想定した作り 
・トランザクションやテーブル間のジョインのような仕組みがないものが多く、シンプルな設計＆機能

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - 2014年

2014/11/11

2014/11/06

2014/11/06

2014/11/05

2014/11/05

2014/11/05

2014/11/05

2014/11/04

2014/10/29

2014/10/29

2014/10/29

2014/10/29

2014/10/29

2014/10/28

2014/10/28

2014/10/22

2014/10/22

2014/10/22