<h2>共通のWEB発注システムCLIOS</h2>
コンタクト製品を扱うメーカーや代理店に商品を発注をする際に使われているツールにCLIOS（クリオス）という物があります。日本コンタクトレンズ協会が運営しているツールでContact Lens Information &amp; Order Systemの略との事です
これはWebで発注ができるもので、各メーカーや代理店が共同で利用しています。おそらくほとんどのメーカー・代理店が利用しています。
<a href="/uploads-archive/2015/06/063011.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7622" src="/uploads-archive/2015/06/063011.gif" alt="06301" width="284" height="172" /></a>
販売店がCLIOSを通して複数のメーカー・代理店に発注をかけられます。
その他にコンタクトを患者（コンタクト利用者）に直送したり、トライアルの注文なんかもできます。商品のロット情報を確認したりリアル店舗しか使わないかもしれませんが製品のバーコード情報を取り出せます。
使用するためにはＩＤとパスワードが必要です。CLIOS事務局に直接連絡して使用の申請を行うか、メーカー側からCLIOSを使えるように申請してもらえば使用可能です。
発注できるメーカーは以下の通り、もちろんメーカーとの契約がある場合です。
<table>
<tbody>
<tr>
<td style="width: 350px">アイミー（株）</td>
<td style="width: 350px">日本アルコン（株）</td>
</tr>
<tr>
<td style="width: 350px">（株）シード</td>
<td style="width: 350px">パナメディカル（株）</td>
</tr>
<tr>
<td style="width: 350px">クーパービジョン・ジャパン（株）</td>
<td style="width: 350px">ポシュロム・ジャパン（株）</td>
</tr>
<tr>
<td style="width: 350px">ジョンソン・エンド・ジョンソン（株）</td>
<td style="width: 350px">（株）メニコン</td>
</tr>
<tr>
<td style="width: 350px">（株）レインボーオプチカル研究所</td>
<td style="width: 350px">HOYA（株）</td>
</tr>
<tr>
<td style="width: 350px">東レ（株）</td>
<td style="width: 350px">（株）オフテクス</td>
</tr>
<tr>
<td style="width: 350px">（株）アイレ</td>
<td style="width: 350px">（株）シンシア</td>
</tr>
<tr>
<td style="width: 350px">（株）ユニオンメディカル</td>
<td style="width: 350px"></td>
</tr>
</tbody>
</table>
この他のメーカー・代理店にも発注は可能のようです。
ログインするとこのような発注画面になります。左目・右目ごとに入力するので慣れないとちょっと違和感を感じるかもしれません。
<a href="/uploads-archive/2015/06/06302.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7628" src="/uploads-archive/2015/06/06302.gif" alt="06302" width="700" height="435" /></a>
&nbsp;
&nbsp;
&nbsp;
&nbsp;

コンタクト製品をWEB発注できる共通ネットワークCLIOS

web上で動画を利用する際に色んな理由でGIFアニメーションに変換したいという場合があると思います。
最近メールに動画を埋め込む事でコンバージョン率が高くなったという事例をよく見ますが、動画ファイルを直接埋め込むと容量が大きすぎるために開けなかったり送れなかったりしてしまいます。そこでGIFアニメーションを使うことがよくあるみたいです。
そこで動画ファイルを簡単にGIFアニメーションに返還する方法を調べてみました。
<h2>mp4ファイルをphotoshop ccを使って簡単にGIFアニメーションに返還する</h2>
私も実際やってみたのですが、かなり簡単なので使える方法だと思います。しかし、動画ファイルがmp4である必要がみたいなので、そこだけご注意下さい。（h.264のmp4ファイル以外は試していません）
<h3>動画を読み込む</h3>
まずタイムラインを表示させます。
<a href="/uploads-archive/2015/06/img1.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7603" src="/uploads-archive/2015/06/img1.jpg" alt="img1" width="700" height="394" srcset="/uploads-archive/2015/06/img1.jpg 720w, /uploads-archive/2015/06/img1-300x169.jpg 300w, /uploads-archive/2015/06/img1-228x128.jpg 228w" sizes="(max-width: 700px) 100vw, 700px" /></a>
タイムラインにあるフィルムのようなアイコンをクリックしてメディア追加から読み込む動画ファイルを開きます。
<a href="/uploads-archive/2015/06/img2.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7604" src="/uploads-archive/2015/06/img2.jpg" alt="img2" width="660" height="327" srcset="/uploads-archive/2015/06/img2.jpg 678w, /uploads-archive/2015/06/img2-300x149.jpg 300w, /uploads-archive/2015/06/img2-228x113.jpg 228w" sizes="(max-width: 660px) 100vw, 660px" /></a>
読み込みが完了するとpremiereに近い編集画面になります。動画の切り貼りやトリミングなどかなりpremiereに近い感覚で編集が可能です。
<a href="/uploads-archive/2015/06/img3.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7605" src="/uploads-archive/2015/06/img3.jpg" alt="img3" width="668" height="375" srcset="/uploads-archive/2015/06/img3.jpg 720w, /uploads-archive/2015/06/img3-300x168.jpg 300w, /uploads-archive/2015/06/img3-228x128.jpg 228w" sizes="(max-width: 668px) 100vw, 668px" /></a>
ビデオグループの上にレイヤーを作ればタイムにあわせてテロップを出すこともできます。
<a href="/uploads-archive/2015/06/img4.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7606" src="/uploads-archive/2015/06/img4.jpg" alt="img4" width="668" height="375" srcset="/uploads-archive/2015/06/img4.jpg 720w, /uploads-archive/2015/06/img4-300x168.jpg 300w, /uploads-archive/2015/06/img4-228x128.jpg 228w" sizes="(max-width: 668px) 100vw, 668px" /></a>
さらにpremiereのビデオトランジションのような感覚でフェードをかけたりもできます。
<a href="/uploads-archive/2015/06/img5.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7607" src="/uploads-archive/2015/06/img5.jpg" alt="img5" width="594" height="420" srcset="/uploads-archive/2015/06/img5.jpg 594w, /uploads-archive/2015/06/img5-300x212.jpg 300w, /uploads-archive/2015/06/img5-228x161.jpg 228w" sizes="(max-width: 594px) 100vw, 594px" /></a>
出力する時は「web用に保存」でGIFの形式で保存すれば完了です。
&nbsp;
<h2>ファイルを軽くするためにフレームレートを変更する</h2>
注意点としてはファイルの容量が重たくならないように気を付ける必要があります。せっかくGIFアニメーションにしても結局重たいファイルになってしまっては意味がないので、フレームレートを下げる事で容量を小さくします。
一般的には30fpsや24fpsなどが多いかと思うのですが、10fpsくらいまで下げて動画ファイルを書き出したほうがいいと思います。
やはり、どうしてもカクカクしてしまうのですが、これは仕方がないかと・・・
フレームレートの違いを比べてみて下さい。
10.00fps　480×270 ファイル容量　3.3MB
<a href="/uploads-archive/2015/06/sample10fps1.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7610" src="/uploads-archive/2015/06/sample10fps1.gif" alt="sample10fps" width="480" height="270" /></a>
29.97fps　480×270 ファイル容量　7.5MB
<a href="/uploads-archive/2015/06/sample30fps.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7611" src="/uploads-archive/2015/06/sample30fps.gif" alt="sample30fps" width="480" height="270" /></a>

動画を簡単にGIFアニメーションに変換する方法

こんなタイトルですが、書籍の紹介になります。。。
そもそも悩み事と考え事の違いみたいなところはよく語られたりしてますよね。
<h2>悩み事と考え事の違いって？</h2>
【悩み事】 
1.利益を生まないもの 
2.自分でコントロールできない問題（外部要因、環境や人間関係） 
3.ネガティブな気持ちになったり、過去の出来事を思って後悔したりする
【考え事】 
1.利益を生むもの 
2.自分でコントロールできる問題（内部要因） 
3.ポジティブな気持ちで、なにか目標を達成しようと、未来について思うこと
例えばこんな感じですが(もっといろいろとあると思います・・・)
要は、 
【悩み事】は非生産的で、【考え事】は生産的であると言えます。 
なので、 
同じ時間を使うなら「悩む」のではなく「考えましょう」ということですね。
とは言え、人生に悩みを尽きないですよね。。 
まぁよく私も悩みます。 
でもその悩みって実は時間が経っちゃうと忘れるどころか思い出せないことがほとんどです。
一年前の悩みなんて覚えてないですよね？！悩んでいたかどうかもよくわからないはずです。
つまり、悩みなんて結局覚えてないんだから、悩みに時間を浪費するなんてもったいない、 
もっと気楽にいこうっていう気持ちで日々過ごせたらいいなと思ってます。
<h2>１日１０分であらゆる問題がスッキリする「ひとり会議」の教科書のご紹介</h2>
話はだいぶ脱線しましたが、その「悩み事」を「考え事」に変えるであったり、 
「考え事」をシンプルにして実行しやすくするための考え方を紹介している本をご紹介します。
それは、「１日１０分であらゆる問題がスッキリする「ひとり会議」の教科書」という本です。 
<iframe loading="lazy" width="300" height="150" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&amp;bc1=000000&amp;IS2=1&amp;bg1=FFFFFF&amp;fc1=000000&amp;lc1=0000FF&amp;t=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;m=amazon&amp;f=ifr&amp;ref=qf_sp_asin_til&amp;asins=4861139465" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe>
こちらは悩み事や考え事の解決のステップを4つにしており、
１．悩み事や考え事を書き出す 
 ２．それぞれ「どうなるのが理想か」を考える 
 ３．その理想をどうやったらできるかを考える 
 ４．それぞれの答えを計画、実行する
といった感じです。 
ちなみに上記記載の4つのステップ本に書いてあることとは違いますが、 
私はこう理解しているという考えになりますので、詳しくは本をご覧ください。
この本を読んで、ぜひ「悩む」のではなく、「考える」ようにしましょう！ 
と自分にも再度言い聞かせつつのご紹介でした！

悩み事・考え事を1人で解決するための方法

ローディングアニメーションって画像として作るのは少し面倒くさいこともあり、2,3パターン作ってから全く作ってないのですが、CSSのみで出来るとなればいろんなパターンを作ってみたくなりますね！
今回は以下のサイトを元に自分で少し試してみました。 
15パターンのローディングアニメーションがあり、ダウンロード無料です。 
<a href="http://www.css-spinners.com/" class="link" target="_blank">css-spinners</a>
私が作ったのは以下からご覧下さい。 
<a href="/demo/abe/58/" class="demo" target="_blank">DEMO</a>
CSSのkeyframesやCSS3の装飾を使ってやってます。
参考サイトを見ると、複雑なやつはソースが凄いことになっています。。。
IE10以上の対応にはなりますが、基本はIE10,11が多いと思いますし、 
IE9の方でもローディング自体あってもなくてもコンテンツ自体には問題はないので 
ローディンはグ画像ではなく、CSSで作るもので充分な気がしますね！！

CSSのみで実装されてるローディングアニメーション

ECに適した動画の利用方法を色々と考えてみました。
動画を観ながら良いと思ったらすぐに購入できるようなスタイルを作ってみました。
<a class="demo" href="/demo/makabe/06/06demo.html">demo</a>
currentTime（動画の現在尺）によってカートやお気に入りに入る商品を振り分けているだけなのです。
1本の動画で複数の商品を説明する場合なんかは、このようなスタイルもありかなと思います。

EC向け動画：動画を見ながら直接カートに商品を入れる

「あうんの呼吸でコミュニケーション」というキャッチコピーで、キャプチャを撮り、それにメモを加えて遅れるというサービスが最近出来たそうです。
前にも海外のサービスでこういうのがあった気がしたのですが、 
少し使いづらかったのかあまり記憶に残ってないです。。。
コチラのほうが断然使い勝手は良さそうだなという感じです。
webサイトの制作で修正が発生すると、それを伝えるのが結構大変なこともあります。 
社内のみならいいのですが、お客さんや別事務所にいるスタッフにいる時なんかは、 
デザインの修正を電話やメールで伝えたりしますが、 
どうしても「どこの部分？」「どんな風に？」というやりとりをしながら確認していくことになり、 
双方が大変になります。 
たまにお客さんでwebサイトをプリントアウトして、それに書き込んでそれをデータをして送ってくれ、 
それはほぼ齟齬がなく修正できるのですが、かなり労力がかかってしまいます。
このサービスは「伝える側」と「受け取る側」が共にわかりやすい指示を簡単に作成できるかと思います。
簡単にこのサービスの特徴を説明すると、 
・無料、会員登録の必要もなし 
・URL、画像、クリップボードから修正ファイルを登録できる 
・URLの場合、BASIC認証もいける 
・トリミング機能あり 
・短縮URL発行、パスワードもかけられる
といった感じでしょうか。
では使い方を見て行きましょう！
&nbsp;
<h2>AUNの使い方</h2>
TOPページにURLを記入する欄がありますが、 
そこでURLを入れてボタンを押すだけで、キャプチャを撮りメモを記入する画面に移ります。 
ちなみにBASIC認証がかかっているページでもOKです。
URLがない場合は、「画像ファイル」「クリップボード」を使うこともできます。 
<a href="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7533" src="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-1024x553.jpg" alt="2ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="340" srcset="/uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-1024x553.jpg 1024w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-300x162.jpg 300w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043-228x123.jpg 228w, /uploads-archive/2015/06/3e73c77a5f2bd9a3ccf6ce6e5cd56043.jpg 1233w" sizes="(max-width: 630px) 100vw, 630px" /></a>
&nbsp;
画像をアップすると、トリミングをすることもできます。
メモを記入する画面は以下の通り、 
<a href="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7534" src="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-1024x553.jpg" alt="3ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="340" srcset="/uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-1024x553.jpg 1024w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-300x162.jpg 300w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405-228x123.jpg 228w, /uploads-archive/2015/06/57626826c9b88d39b6e024bc6d883405.jpg 1233w" sizes="(max-width: 630px) 100vw, 630px" /></a>
&nbsp;
修正箇所を囲むとメモ書く吹き出しが出てきて、「メモを追加」を押すと、右側の「メモリスト」に追加されキャプチャには番号付きの赤線囲み線ができるので、どこが修正箇所なのかわかりやすくなっています。
完成し「保存する」を押すと、
&nbsp;
<img decoding="async" loading="lazy" class="alignnone wp-image-7535" src="/uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-1024x547.jpg" alt="4ビジュアルコミュニケーションツール - AUN[あうん]" width="630" height="336" srcset="/uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-1024x547.jpg 1024w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-300x160.jpg 300w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4-228x122.jpg 228w, /uploads-archive/2015/06/8d3b7a4e8e22e67d327479d4b261a6b4.jpg 1247w" sizes="(max-width: 630px) 100vw, 630px" />
&nbsp;
タイトル、パスワードを設定することができます。
そして保存をすると、共有URLが発行されますので、それを送れば相手側が見れるようになります！ 
保存期間は7日間で、経過すると削除されるようです。
これはいいサービスですね！ 
「伝える側」にとって非常にいいツールになると思います！
&nbsp;
<a class="link" href="http://aun.tools/" target="_blank">ビジュアルコミュニケーションツール &#8211; AUN[あうん]</a>
&nbsp;
最近web制作会社にとって便利なツールがどんどん出てきていて、 
効率的に進められるようになって気がします。

デザインや文字の修正依頼で活躍しそうなサービス「AUN」

フォーム・選択要素で使えそうなjQuery「Selectivity」

EC向け動画：クリックで色が変わる動画

クロネコヤマトの送り状発行ソフトにはインストール型のB2とクラウド型のB2webがあります。
両方使ってみて違いをまとめてみました。
<table style="height: 232px;" width="571">
<tbody>
<tr>
<td style="text-align: center;"></td>
<td style="text-align: center;">B2インストール型</td>
<td style="text-align: center;">B2webクラウド型</td>
</tr>
<tr>
<td style="text-align: center;">導入までに必要な作業</td>
<td style="text-align: center;">・ヤマトの専用ページから申込み・担当店舗から承認</td>
<td style="text-align: center;">・ヤマトビジネスメンバーズに登録</td>
</tr>
<tr>
<td style="text-align: center;">メリット</td>
<td style="text-align: center;">・ネット環境が不安定でも作業ができる・1年間発送先のデータ残しておける
・ソフトの反応が早い
・発送先データの編集画面が使いやすい</td>
<td style="text-align: center;">・複数の端末で発送データの共有ができる</td>
</tr>
<tr>
<td style="text-align: center;">デメリット</td>
<td style="text-align: center;">・複数の端末で発送データの共有ができない</td>
<td style="text-align: center;">・発行した送り先のデータは最長で3か月間までしか残らない・一度に取り込める送り先データは100件まで
・ネット環境が不安定だと作業が遅い、または途中で取り込んだ消える
・発送先データの編集画面が使いにくい</td>
</tr>
<tr>
<td style="text-align: center;">サポート体制</td>
<td style="text-align: center;">専用のフリーダイヤルあり</td>
<td style="text-align: center;">専用のフリーダイヤルあり</td>
</tr>
</tbody>
</table>
両方のツールを使ってみて結局のところ作業の速さと使いやすさを求めるとインストール型の方が良いと感じました。
クラウド型はデータを編集する際や送り状をプリントアウトする際に処理に時間がかかってしまい、若干イラッとする事が多々あります。
さらにネットが不安定だったりすると編集していたデータが消えてしまったりなんて悲劇も起きてしまうので、複数のPCで発送データを共有する必要が無い限りインストール型をおすすめします。
&nbsp;

クロネコヤマトの送り状発行B2とB2webはどちらがいいのか？

デザインを制作していると、フリー素材を使うことがよくあります。 
ブログで紹介していたり、専用のサイトがあったりと様々で、それを見つける度に、ブックマークをしているのですが、そういったサイトを一つに集約しているサイトがありましたので紹介します。
ちなみに写真のフリー素材を漁っていると、その辺の広告なんかでよくフリー素材が使われています。
<h2>Makerbook</h2>
海外のサイトになります。
以下のカテゴリでわかれています。
・Photography(写真) 
・Mockups(モックアップ) 
・Graphics(アイコン、ベクター素材等) 
・Textures(パターンやテクスチャ) 
・Fonts(フォント) 
・Colours(スウォッチ) 
・Video(動画) 
・Audio(音楽)
中には元々日頃お世話になっているサイトもありましたので、 
このサイトを起点にすると探しやすいかもと思いました。
<a href="http://makerbook.net/" target="_blank" class="link">Makerbook &#8211; The best free resources for creatives.</a>
皆さんもぜひ使ってみてください！

デザイナー向けフリー＆有料素材まとめサイト「Makerbook」

前回に引き続きクロネコヤマトB2webの操作方法についてです。
前回の記事で送り状を印刷するところまでをご説明しましたが、今回は送り状の番号をB2webから出力する方法です。
&nbsp;
まず前回同様にヤマトビジネスメンバーズにログインします。
<a href="/uploads-archive/2015/05/nekopos1.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7349" src="/uploads-archive/2015/05/nekopos1.gif" alt="nekopos1" width="647" height="239" /></a>
&nbsp;
一度ログインしていても一定時間が過ぎると勝手にログアウトしてしまいます、結構すぐにタイムアウトしてしまうのでちょっと面倒です。。。
さらに送り状発行システムB2webを開きます。
<a href="/uploads-archive/2015/05/nekopos2.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7351" src="/uploads-archive/2015/05/nekopos2.gif" alt="nekopos2" width="647" height="367" /></a>
ここまでは送り状の発行と変わりません。
<h2>B2web 出荷データ検索から発行済みのデータを出力する</h2>
送り状発行システムB2webの「状況確認」にある「出荷データ検索」をクリックします。
<a href="/uploads-archive/2015/05/b2web1.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7438" src="/uploads-archive/2015/05/b2web1.gif" alt="b2web1" width="646" height="262" /></a>
&nbsp;
するとこちらの画面に移行します。
<a href="/uploads-archive/2015/05/b2web2.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7439" src="/uploads-archive/2015/05/b2web2.gif" alt="b2web2" width="651" height="467" /></a>
&nbsp;
発送予定日や伝票番号などでその日に発送した送り状のデータを表示させます。
「送り状未発行」については実際に発送していないので外しておいた方が良いと思います。
<a href="/uploads-archive/2015/05/b2web3.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7440" src="/uploads-archive/2015/05/b2web3.gif" alt="b2web3" width="651" height="464" /></a>
&nbsp;
条件を設定して発送済みの情報を表示させたら、必要なデータにチェックを入れて外部出力をクリックします。
<a href="/uploads-archive/2015/05/b2web4.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7441" src="/uploads-archive/2015/05/b2web4.gif" alt="b2web4" width="648" height="364" /></a>
上の様なポップアップが出てくるので必要な形式にチェックを入れて保存して下さい。
&nbsp;
かなりシンプルですが難点があります、一度に外部出力できるデータは100件までとなっているので、100件を超える場合は出力するファイルをいくつかに分けて複数出力する必要があります。
ちなみに注文情報を「外部データの取込み」から取り込む際も一度に取り込めるのは100件までとなっています。
発送個数が多い店舗には向いていないかもしれません。
&nbsp;
<h2>B2web 出力したCSVの項目（フィールド）</h2>
<a href="/uploads-archive/2015/05/b2web5.gif"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-7442" src="/uploads-archive/2015/05/b2web5.gif" alt="b2web5" width="411" height="131" /></a>
&nbsp;
B2webから送り状番号を含むCSVデータを出力すると、送り状番号は上のように4列目になります。
B2webでは項目名や項目の並び順を変更できないので、モールによっては他のツールが必要となる場合もあります。
<h2>CSVの項目（フィールド）の順番を入れ替えるのに便利なツール</h2>
<a href="http://nuria.jp/products">Magic Converter マジックコンバーター</a>
<a href="http://nuria.jp/products"><img decoding="async" loading="lazy" class="alignnone wp-image-7443" src="/uploads-archive/2015/05/magic-conberter.gif" alt="magic-conberter" width="650" height="467" /></a>
CSVの項目を並べ替えたり、データを結合させたり、表記を変えたりと、かなり重宝するツールです。このツールがあれば大抵のことはできます。
さすがに有料ですが3900円で、一度購入すればずっと使用できます。ダウンロード版のみの販売で、30日のテスト使用期間が設けられているので一度試してみるのをおすすめします。
&nbsp;
<a href="http://www.ec-tencho.jp/">まとまるＥＣ店長</a>
<a href="http://www.ec-tencho.jp/"><img decoding="async" loading="lazy" class="alignnone wp-image-7444" src="/uploads-archive/2015/05/ECtencho.gif" alt="ECtencho" width="653" height="432" /></a>
いくつもモールを運営されている場合は「まとまるＥＣ店長」をおすすめします。
マジックコンバーターはファイルごとに並べ替えを行う必要がありますが、まとまるEC店長ならCSVの受け側を設定できるのでかなり便利です。
そもそもこのツールは複数モールでの運営を一括で行うためのツールなので受注から発送までをその名の通りまとめる事ができます。
一括管理ツールはいくつも出ていますが、EC店長の強みはまず安いという事です。月額9800円（税別）で他の一括管理ツールに比べるとかなり安く済みます。約1年ほど使用していますが、安かろう悪かろうという事は感じた事はありません。
何よりこのツールのスゴイ所はサポート体制がしっかりしている点です。フリーダイヤルの電話でのサポート窓口があるので、分からない場合はすぐに聞けますし対応もかなり親切です。
さらに良い所は常にツールが進化しているところです。モール側の変更にもすぐ対応してくれますし、どんどん使いやすいツールになっていっていると思います。
私がサポート窓口に要望させて頂いた内容もいくつか反映して頂きました。管理できるモールの数も多いのでオススメです。

ネコポスの送り状番号を出力して注文情報に反映させる方法

スマホに適したlightbox系javascriptプラグイン「PhotoSwipe」

この仕事を始めていこうずっと、webデザインを作成するときはPhotoshopを使っており、 
今は、Photoshop CCを使用しております。 
<a href="http://www.adobe.com/jp/products/photoshop.html" target="_blank">http://www.adobe.com/jp/products/photoshop.html</a> 
これのフォトグラフィプランですね(以前キャンペーンで期間限定的な感じだったのに、今もうプランとして固定されてる・・・)
Dreamweaverは数年前に辞め、 
Adobe製品はこれ以外には、時々illustratorを使うくらいなので、 
Photoshopをやめたら、脱Adobeになってしまうかもしれません。
とはいえ、Photoshopを辞めることなんて早々無いだろうと思っていたのですが、 
最近いろいろな情報を見ていると、Photoshopに劣らないであろう製品がいくつかあるようです。
よく目にする3つをご紹介します。
<h2>Photoshop以外の画像編集ツール</h2>
<h3>Sketch 3</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7378" src="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg" alt="Bohemian Coding - Sketch 3" width="630" height="382" srcset="/uploads-archive/2015/05/Bohemian-Coding-Sketch-3-1024x621.jpg 1024w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-300x182.jpg 300w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3-228x138.jpg 228w, /uploads-archive/2015/05/Bohemian-Coding-Sketch-3.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
mac向けで、webサイトのデザインやプレゼンテーションスライドの作成ができるようです。 
$99ですが、trialも出来るので試してみて良かったら購入できますね！
cssへワンクリックで書き出せるとか、 
起動が早いとかあるみたいで、
以下でしっかりまとめられてるのでご覧ください！ 
<a href="http://matome.naver.jp/odai/2140584105966404801">デザイナー必見！今注目のツール「Sketch3」の使い方を勉強できるサイト &#8211; NAVER まとめ</a>
私もTrialをダウンロードしましたが、今だ試せずにいます。
<a class="link" href="http://bohemiancoding.com/sketch/" target="_blank">Bohemian Coding &#8211; Sketch 3</a>
<h3>Pixelmator</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7380" src="/uploads-archive/2015/05/Pixelmator-1024x621.jpg" alt="Pixelmator" width="630" height="382" srcset="/uploads-archive/2015/05/Pixelmator-1024x621.jpg 1024w, /uploads-archive/2015/05/Pixelmator-300x182.jpg 300w, /uploads-archive/2015/05/Pixelmator-228x138.jpg 228w, /uploads-archive/2015/05/Pixelmator.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
こちらもmac向けですが、価格は3600円と安め。 
Photoshopと機能性はほぼ同じくらいでpsdファイルとの連携も問題ないそうです。 
最近iPhone用のアプリも発売されたようです。
<a href="http://blockworks.jp/pixelmator/" target="_blank">Pixelmator入門</a>
<a class="link" href="http://www.pixelmator.com/" target="_blank">Pixelmator</a>
<h3>GIMP</h3>
<img decoding="async" loading="lazy" class="alignnone wp-image-7379" src="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg" alt="GIMP - The GNU Image Manipulation Program" width="630" height="382" srcset="/uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-1024x621.jpg 1024w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-300x182.jpg 300w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program-228x138.jpg 228w, /uploads-archive/2015/05/GIMP-The-GNU-Image-Manipulation-Program.jpg 1164w" sizes="(max-width: 630px) 100vw, 630px" /> 
もう何年も前からあるソフトで、こちらはwindowsでも使用できます。 
こちらは基本無償で、簡単な写真加工ならこれで充分できるようです。 
初心者で試しに・・・という人にこちらはオススメです！！
<a href="http://synclogue-navi.com/category/gimp" target="_blank">GIMPの使い方</a> 
<a class="link" href="http://www.gimp.org/" target="_blank">GIMP &#8211; The GNU Image Manipulation Program</a>

Photoshop以外の画像編集ツールでついにAdobe脱却！？

今年の春からクロネコヤマトで「ネコポス」と「宅配便コンパクト」という新しいサービスがはじまりました。運営しているＥＣサイトでは今まで他の配送業者を利用して商品を発送していましたが、最近「ネコポス」の利用を開始したので送り状の作り方をまとめてみました。
これから説明する送り状の作成方法は「ヤマトビジネスメンバーズ」に登録が必要になります。ヤマトビジネスメンバーズは法人が対象のサービスです詳しくはこちらで確認してください。<a href="https://bmypage.kuronekoyamato.co.jp/bmypage/serviceGuide_beforeLGI.html">https://bmypage.kuronekoyamato.co.jp/bmypage/serviceGuide_beforeLGI.html</a>
ネコポスの送り状作成にはインストール型の「<a href="http://www.kuronekoyamato.co.jp/newb2/newb2.html">送り状発行ソフトＢ２</a>」とクラウド型の「Ｂ２web」があります、今回はＢ２webの方で送り状を作成します。
<h3>ヤマトビジネスメンバーズにログインする</h3>
まずはヤマトビジネスメンバーズにログインします。お客様コードとパスワードは契約完了後に担当の営業所からもらえます。
<a href="/uploads-archive/2015/05/nekopos1.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7349" src="/uploads-archive/2015/05/nekopos1.gif" alt="nekopos1" width="625" height="231" /></a>
ログインが完了すると次のような画面になります。
<a href="/uploads-archive/2015/05/nekopos2.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7351" src="/uploads-archive/2015/05/nekopos2.gif" alt="nekopos2" width="624" height="353" /></a>
送り状発行システムＢ２webのを開いてください。カーソルを上にのせるとポップアップが出るので利用するを選択して下さい。すると下のような画面になります。
この画面で送り状を作成したり、送り状番号のデータを出力したりします。
<a href="/uploads-archive/2015/05/nekopos3.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7352" src="/uploads-archive/2015/05/nekopos3.gif" alt="nekopos3" width="623" height="370" /></a>
&nbsp;
<h3>B2webに届け先のデータを取り込む</h3>
つづいて届け先の名前、住所、電話番号などのデータをB2webに取り込みます。（※送り状を一枚ずつ作成する場合は「個別発行」から操作して下さい。）
「外部データ取込み」をクリックします、すると取り込むデータの紐付けを行う画面が出てきます。
<a href="/uploads-archive/2015/05/nekopos4.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7354" src="/uploads-archive/2015/05/nekopos4.gif" alt="nekopos4" width="624" height="480" /></a>
&nbsp;
取り込むデータが既にB2用に整えられていない場合は、まず取込パターンで「新規レイアウト」を選択し項目の紐付けを行います。
データ形式は取り込むデータの形式を確認してください。yahooや楽天などモールの場合はほとんどがCSV形式になっていると思います。
データの紐付けは以下の項目が必須になっています。
・出荷予定日
・送り状種別
・お届け先電話番号
・お届け先名
・お届け先郵便番号
・お届け先住所
・ご請求先顧客コード※
・運賃管理番号※
ここで「ご請求先顧客コード」と「運賃管理番号」はB2web上で必須と表示されていませんが必ず入力が必要になります。この２つは紐付けではなく固定値を入力した方が良さそうです。
「ご請求先顧客コード」はログインした際のお客様コードと同じ文字列が入り、「運賃管理番号」は通常「01」となりますが念のため担当の営業所に確認してください。
そして「送り状種別」ですが配送方法によって番号が決められています。ネコポスの場合は「７」になります。これも固定値で入力するか、もしくはCSVを出力する側で調整して下さい。
ちなみに「レイアウト項目」の「記事」にモールの注文番号を紐付けておくと、複数のモールを運営している場合送り状を見ただけでモールが判断できるので便利です。
<a href="/uploads-archive/2015/05/nekopos5.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7357" src="/uploads-archive/2015/05/nekopos5.gif" alt="nekopos5" width="625" height="337" /></a>
&nbsp;
それぞれのレイアウト項目をクリックすると取り込むデータの方式や最大文字数などの説明が表示されます。紐付けを行う際に参考にしてください。
紐付けが完了したら取込開始のボタンが浮き上がってくるのでクリックします。
<a href="/uploads-archive/2015/05/nekopos6.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7359" src="/uploads-archive/2015/05/nekopos6.gif" alt="nekopos6" width="625" height="494" /></a>
&nbsp;
修正が必要な送り先データに関しては通し番号のセルが赤くなるので、「編集」から必要な部分を修正して下さい。
修正が全て完了したら、印刷する全てのデータで「選択」にチェックが入っている事を確認して送り状発行のボタンをクリックします。
<h3>送り状を印刷する</h3>
続いて下の様な画面がでてきます。
ラベルシールの枚数を表示させてたい場合は「プレビュー画面を表示」にチェックを入れておいて下さい。
<a href="/uploads-archive/2015/05/nekopos7.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7360" src="/uploads-archive/2015/05/nekopos7.gif" alt="nekopos7" width="622" height="413" /></a>
プリンターにラベルシールをセットしたら「発行開始」をクリックして下さい。
<a href="/uploads-archive/2015/05/nekopos9.gif"><img decoding="async" loading="lazy" class="alignnone wp-image-7387" src="/uploads-archive/2015/05/nekopos9.gif" alt="nekopos9" width="583" height="347" /></a>
&nbsp;
すると上のようなポップアップが出てきます。１/１となっている箇所にラベルシールの印刷枚数が表示されます。
これで送り状の作成は完了です。

ネコポスの送り状をB2webで作成する方法

私自身、エンジニアってわけではないのですが、プログラムに片足突っ込んでいるようなものなので、よくわからないことがあり、ググってみたりすると、最近エンジニアに特化している質問サイト等に出くわすことが多くなりました。
以前は誰か個人のブログが多いのですが、最近徐々にこのようなサイトが台頭しているよう感じます。
それでは早速ご紹介します！
<h2>teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム</h2>
<a href="https://teratail.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7311" src="/uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-1024x628.jpg" alt="teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム" width="620" height="380" srcset="/uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-1024x628.jpg 1024w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-300x184.jpg 300w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724-228x140.jpg 228w, /uploads-archive/2015/04/3f1b6ad9323df1402afaa9129bb14724.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
2014年7月に誕生したレバレジーズさんが運営しているサイトです。 
デザインがスッキリしていて見やすいです。
&nbsp;
<a class="link" href="https://teratail.com/" target="_blank">teratail【テラテイル】｜思考するエンジニアのためのQAプラットフォーム</a>
&nbsp;
<h2>スタック・オーバーフロー</h2>
<a href="http://ja.stackoverflow.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7314" src="/uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-1024x628.jpg" alt="スタック・オーバーフロー" width="620" height="380" srcset="/uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-1024x628.jpg 1024w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-300x184.jpg 300w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3-228x140.jpg 228w, /uploads-archive/2015/04/4f53b215a283dbae7d4f1971988018b3.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはよくググると、海外版のサイトがひっかかっていたのですが、その日本語版が2014年12月頃にベータ版として登場したようです。 
こちらもシンプルなデザインで見やすいですね！
&nbsp;
<a class="link" href="http://ja.stackoverflow.com/" target="_blank">スタック・オーバーフロー</a>
&nbsp;
<h2>Qiita &#8211; プログラマの技術情報共有サービス</h2>
<a href="https://qiita.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7310" src="/uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-1024x628.jpg" alt="Qiita - プログラマの技術情報共有サービス" width="620" height="380" srcset="/uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-1024x628.jpg 1024w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-300x184.jpg 300w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d-228x140.jpg 228w, /uploads-archive/2015/04/df0772f72d0f5694a82731c4b774ed6d.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはどちらかと言うと、技術情報共有に重きを置いていて、その中でフィードバックもらうことが出来るようになっています。 
緑が印象的で記憶に残りやすいサイトですね。
&nbsp;
<a class="link" href="https://qiita.com/" target="_blank">Qiita &#8211; プログラマの技術情報共有サービス</a>
&nbsp;
<h2>CodePen</h2>
<a href="http://codepen.io/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7307" src="/uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-1024x628.jpg" alt="CodePen - Front End Developer Playground &amp; Code Editor in the Browser" width="620" height="380" srcset="/uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-1024x628.jpg 1024w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-300x184.jpg 300w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser-228x140.jpg 228w, /uploads-archive/2015/04/CodePen-Front-End-Developer-Playground-Code-Editor-in-the-Browser.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらは質問＆回答ではなく、技術共有のサイトです。 
プログラミングよりはフロントエンドよりの技術が多いかと思います。 
実行の結果とソースが一画面に表示されとても見やすいです！
例えば以下のようなものになります。 
<a href="http://codepen.io/egrucza/pen/bNjQLY" target="_blank">&#8220;Stupid&#8221; Case Study Hover</a>
&nbsp;
<a class="link" href="http://codepen.io/" target="_blank">CodePen</a>
&nbsp;
<h2>Forkwell &#8211; エンジニアのためのポートフォリオサービス</h2>
<a href="https://forkwell.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7308" src="/uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-1024x628.jpg" alt="Forkwell - エンジニアのためのポートフォリオサービス" width="620" height="380" srcset="/uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-1024x628.jpg 1024w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-300x184.jpg 300w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca-228x140.jpg 228w, /uploads-archive/2015/04/2e064922be4e3b6633b5e6ee078345ca.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
ポートフォリオサービスとありますが、技術共有サイトです。 
エンジニアだけでなく、webクリエイター全般に対応しております。 
求人サイトと直結しているようなので、転職を目指す人にはいいかもしれません。
&nbsp;
<a class="link" href="https://forkwell.com/" target="_blank">Forkwell</a>
&nbsp;
<h2>WordPress フォーラム</h2>
<a href="https://ja.forums.wordpress.org/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7313" src="/uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-1024x628.jpg" alt="WordPress › フォーラム" width="620" height="380" srcset="/uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-1024x628.jpg 1024w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-300x184.jpg 300w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25-228x140.jpg 228w, /uploads-archive/2015/04/c2df416e03256da5efa0917841e43a25.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはご存知の通り、wordpress専用のサイトです。 
wordpress関連のことを調べるとよくたどり着きます。
&nbsp;
<a class="link" href="https://ja.forums.wordpress.org/" target="_blank">WordPress フォーラム</a>
&nbsp;
<h2>jsdo.it</h2>
<a href="http://jsdo.it/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7309" src="/uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-1024x628.jpg" alt="jsdo.it - Share JavaScript, HTML5 and CSS" width="620" height="380" srcset="/uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-1024x628.jpg 1024w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-300x184.jpg 300w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS-228x140.jpg 228w, /uploads-archive/2015/04/jsdo.it-Share-JavaScript-HTML5-and-CSS.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはカヤックさんが運営しているサイトで、 
JavaScript,HTML5,CSSに特化しているようなので、エンジニアというよりフロントエンドよりですね。
&nbsp;
<a class="link" href="http://jsdo.it/" target="_blank">jsdo.it</a>
&nbsp;
<h2>W3Q &#8211; Web制作のお悩みを解決するQ&amp;Aとまとめサービス</h2>
<a href="http://w3q.jp/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-7312" src="/uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-1024x628.jpg" alt="W3Q - Web制作のお悩みを解決するQ&amp;Aとまとめサービス" width="620" height="380" srcset="/uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-1024x628.jpg 1024w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-300x184.jpg 300w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78-228x140.jpg 228w, /uploads-archive/2015/04/74b8f1e55f77f26dc3d3827f42d11b78.jpg 1084w" sizes="(max-width: 620px) 100vw, 620px" /></a> 
こちらはweb制作、web業界に関する質問をなんでもっていうサイトなのですが、 
今まで紹介してきたサイトと比べると、匿名のため品のない回答も多く見受けられます・・・
&nbsp;
<a class="link" href="http://w3q.jp/" target="_blank">W3Q</a>
&nbsp;
&nbsp;
私自身エンジニア歴は長くはないので、 
調べたらなんとかなるという状況にいましたが、当初からすると贅沢な状況になっているのかもしれません。
私にとってありがたいサービスが生まれて来ているので、こうゆうサイトで知識を蓄えつつ、 
回答する側に行きたいなぁと思います。

webエンジニアが技術共有＆質問できるサイト7つ

videoタグの動画をcanvasを使って表示する

ECサイトでよくある横並びのリストのいろいろなコーディング方法

<h2>運営のノウハウを無料で学べるＲＵＸ</h2>
楽天に出店している人はもう知っているかもしれません、最近「ＲＵＸ」なるものがＲＭＳ（管理ツール）から利用できるようになりました。
ＲＵＸは楽天における店舗運営のノウハウを動画などで学べるもので、以前からあった楽天大学の一部が無料になったと考えて頂ければわかり易いと思います。ＲＵＸは基本的に出店者以外は見られないようになっています。
具体的な内容としては
・コンサルタント（？）による売り上げアップのノウハウ
・店舗運営者が語る運営のコツ
・撮影・編集のテクニック
といった感じです。ちなみに動画・画像についてはamanaイメージズがレクチャーしてくれるようです。
<a href="/uploads-archive/2015/04/urx.jpg"><img decoding="async" loading="lazy" class="alignnone wp-image-7272" src="/uploads-archive/2015/04/urx.jpg" alt="urx" width="495" height="572" srcset="/uploads-archive/2015/04/urx.jpg 771w, /uploads-archive/2015/04/urx-260x300.jpg 260w, /uploads-archive/2015/04/urx-228x263.jpg 228w" sizes="(max-width: 495px) 100vw, 495px" /></a>
&nbsp;
これまで同様、楽天大学は存続しているので「さらに情報が欲しいという人は有料で学んで下さい」という感じなんだと思います。楽天大学への誘導にも若干思えますが、ＲＵＸだけでも結構為になる気がします。
&nbsp;
&nbsp;

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - Author: スターフィールド編集部

2015/06/30

2015/06/27

2015/06/25

2015/06/17

2015/06/10

2015/06/10

2015/06/04

2015/06/03

2015/05/28

2015/05/28

2015/05/20

2015/05/20

2015/05/13

2015/05/13

2015/04/22

2015/04/21

2015/04/15

2015/04/15