<p>海外のブログになりますが、<br />
イラストにて、デザインをする上で重要な知識、スキルとも言える「要素と原則」を丁寧に説明してくれています。</p>
<p><a href="https://designschool.canva.com/design-elements-principles/" target="_blank">Design Elements &amp; Principles</a></p>
<p><img decoding="async" src="/uploads-archive/2016/04/20DP_Infographic-662x3091.jpg" alt="20DP_Infographic-662x3091" width="500" class="aligncenter size-full wp-image-10423" srcset="/uploads-archive/2016/04/20DP_Infographic-662x3091.jpg 662w, /uploads-archive/2016/04/20DP_Infographic-662x3091-64x300.jpg 64w, /uploads-archive/2016/04/20DP_Infographic-662x3091-219x1024.jpg 219w, /uploads-archive/2016/04/20DP_Infographic-662x3091-228x1065.jpg 228w" sizes="(max-width: 662px) 100vw, 662px" /></p>
<p>ブログ内でそれぞれについて詳しく説明してくれていますが、<br />
僕はこの量の英語を読むのはさすがに苦労するので、翻訳したブログが出ることを期待します笑</p>
<p>この大元のブログがいろんなタメになる記事をいっぱい書いているので要チェックですね。</p>
<p><a href="https://designschool.canva.com/" target="_blank" class="link">Canva Design School Blog</a></p>


わかりやすいイラストによるデザインに大事な「要素と原則」

<p>会社のエレベーターに乗っているとき、唐突に「他の階ってどんな会社が入ってるんだ？」と思うことってありませんか。</p>
<p>我々が入居している１０８ビルは９階まであって、それぞれの階にオフィスが入っていますが、２階にある居酒屋「ぶあいそ」以外のことはまるで知りません。<br />
（「ぶあいそ」にはたまに飲みに行きます）</p>
<p>そんなこんなで、試しに9階に入居しているテクノウォーカーさんをググってみたら、かなりすごい会社だったのでご紹介しますね！</p>
<h2>本業はシステム開発！ 教育事業も！</h2>
<p>社名から想像はしていましたが、テクノウォーカーさんのメイン事業はシステム開発でした。<br />
めっちゃ弊社と同じやないですか～！ちょっと親近感です。<br />
取引先にはNHKや参議院などが並んでおり、すごいの一言です。<br />
<a href="http://www.twalker.co.jp/jigyou_.html">http://www.twalker.co.jp/jigyou_.html</a></p>
<p>教育事業としては、ITパスポートなどの情報系資格の本を出されています。<br />
こちらは監修されているということでしょうか。うーんすごい！<br />
（すごいしか言ってないな。）<br />
<a href="http://www.twalker.co.jp/syuppan.html">http://www.twalker.co.jp/syuppan.html</a></p>
<h2>社内研修、社内イベントなどが充実！</h2>
<p>HPをみると、社内研修などの真面目なものだけでなく、歓迎会などのイベントも頻繁に開催されているようです。</p>
<h3>どこよりも早いクリスマスパーティ</h3>
<p>11月13日に「どこよりも早いクリスマスパーティー」をやっています。<br />
斬新すぎるでしょ！<br />
ただの飲み会ではダメだったのでしょうか。<br />
そんな面白いことが上の階で行われていたなんて。。<br />
<a href="http://www.twalker.co.jp/event_20151113.html">http://www.twalker.co.jp/event_20151113.html</a></p>
<h3>社内研修</h3>
<p>テクノウォーカーでは、社員が自ら希望すれば、社内講師や先輩社員がいつでも研修を実施してくれるそうです。<br />
研修内容は、個人のレベルに合わせた資格試験対策や、 日々の業務のスキルUP方法、階層研修などで、<br />
課長が社員の方にプログラミングを教える様子がUPされていました。</p>
<p>すばらしい！<br />
スターフィールドでも採用すべきじゃないでしょうか。<br />
休みの日に徴集されたら暴動を起こしますが。<br />
<a href="http://www.twalker.co.jp/kensyu_201204.html">http://www.twalker.co.jp/kensyu_201204.html</a></p>
<h3>新入社員歓迎会の場所は、な、なんと！</h3>
<p>108ビル2階の「ぶあいそ」でした。</p>
<p>あそこいいですよね！　<br />
エレベーターで降りるだけというアクセスの良さはもちろん、3000円で飲み放題食べ放題ですもん！<br />
さすが高田馬場！<br />
隣の席の学生がうるさいのがたまにキズですが。<br />
<a href="http://www.twalker.co.jp/event_20140605.html">http://www.twalker.co.jp/event_20140605.html</a></p>
<h2>勝手に紹介してすみません！</h2>
<p>テクノウォーカーさま、勝手に紹介して申し訳ありません。<br />
（問題あれば削除いたします。。）</p>
<p>個人的には、勉強会や交流会など、なにか一緒にできたら良いなと思いました。<br />
せっかくお近くにいるので！<br />
どうぞよろしくお願いいたします！</p>


超近いのに遠い会社！テクノウォーカーがすごかった！

<p>MOOCという大学の講義を無料でも学べるサービスには有名なところでCoursera、edX等がありますが、Courseraにて今秋からData ScienceのMasterを取得できるプログラムが始まるらしいです。<br />
ただし、これは有料です。</p>
<p>公式<br />
<a href="https://www.coursera.org/university-programs/masters-in-computer-data-science" class="link">Master of Computer Science in Data Science (MCS-DS)</a></p>
<p>関連ニュース<br />
<a href="http://qz.com/650283/coursera-is-offering-a-way-to-get-a-real-masters-degree-for-a-lot-less-money/"　　class="link">&#8211; Coursera is offering a way to get a real master’s degree for a lot less money</a><br />
<a href="http://www.marketwired.com/press-release/first-mooc-based-masters-degree-data-science-presents-new-model-meeting-market-demand-2110101.htm"　　class="link">&#8211; The First MOOC-Based Master&#8217;s Degree in Data Science Presents a New Model for Meeting the Market Demand for Highly Skilled Data Scientists</a></p>
<p>Admissionを見てみると</p>
<blockquote><p>
Applicants must hold a bachelor’s degree. If it is not in computer science, applicants must have sufficient background in computer programming as well as data structures and algorithms. The recommended undergraduate GPA for applicants applying to the MCS-DS is a 3.2/4.0 or higher. All applicants must submit an application form, three letters of reference, a statement of purpose, resume, and official transcripts from all completed university coursework. TOEFL / IELTS scores may be required for international applicants.
</p></blockquote>
<p>とあり、学士号は必要なようですが、必ずしもcomputer scienceである必要はないようです。</p>
<p>これなら働きながら取得できるかもしれません。</p>
<p>Couseraといえば、最近流行り乗っかり、Machine Learningのコースを受講してみていますが、気軽に機械学習を学べるコンテンツは他にあまりないと思うので、とても恩恵を受けています。<br />
<a href="https://www.coursera.org/learn/machine-learning"　 class="link">Machine Learning</a></p>


CourseraでMasterが取れるようになるかもらしい

<p>4月8日から越境ECに関する新しい税制が施行された。</p>
<p>1. 行郵税の廃止<br />
2. 免税措置(50元以下)の廃止<br />
3. 購入上限の引き上げ (1000→2000元)<br />
4. 3の範囲内であれば関税は0、それを超える場合は一般貿易と同じ税率となる<br />
というのがおおまかなポイントだ。</p>
<p>まとめると、</p>
<table>
<tbody>
<tr>
<th colspan="2"></th>
<th>個人輸入</th>
<th>一般貿易</th>
</tr>
<tr>
<td rowspan="2">旧税制</td>
<td>税金</td>
<td>行郵税</td>
<td>関税・増値税・消費税</td>
</tr>
<tr>
<td>限度額</td>
<td>1000元まで</td>
<td>無制限</td>
</tr>
<tr>
<td rowspan="2">新税制</td>
<td>税金</td>
<td>増値税・消費税</td>
<td>関税・増値税・消費税</td>
</tr>
<tr>
<td>限度額</td>
<td>2000元まで</td>
<td>無制限</td>
</tr>
</tbody>
</table>
<p>となる。</p>
<p>では実際に日本→中国への越境ECによる影響はどうなるのか、という話について<br />
一般論として税率は上がる場合が多いが下がる場合もある、と言われている。<br />
金額が安い方が影響度が高く、高値のほうが影響が低いという傾向があるようだ。</p>
<p>前提として、今回の改定の目的は、購入代理等による課税逃れと、<br />
行郵税と一般貿易による課税の価格差(行郵税の方が安い)の解消と言われている。</p>
<p>要は税金を一元管理しやすい一般貿易に誘導して個人輸入の量を減らすという方向のようだ。</p>
<p>ここで感じるのは、中国は元の国外流出を止めるべく、越境EC自体を規制するのでは、という話が以前あったが<br />
そうではないということ。<br />
一般貿易としての越境ECについてはむしろ拡大しようとしているようにも見える。<br />
その証拠に今回の改定の1つとして、増値税、消費税の税率を30%減額するという項目も含まれている。<br />
そう考えると、むしろやりやすくなる会社も多いのではないかとさえ思う。</p>
<h2>まとめ</h2>
<p>上述の理由から、EMS等事前申告が無い配送手段への検閲は厳しくなると予想される。<br />
また、一般貿易を優遇する方向性であると仮定すると、事前申告型の配送手段が増えると予想される。<br />
具体的にはヤマトチャイナダイレクトなどだ。<br />
今EMSに頼っている店舗は見直しを始めた方がよいのと、税金をどのように徴収するかというスキームを考えていかなければならないと思われる</p>


【中国越境EC】4月8日から新税制が施行

スパゲッティコードを整理してみる

bc39ab4aa42da2e300a76b020e249067-1024x574.jpg

css3のflexboxを使うとすごい簡単になるレイアウトを試してみた

<p>お買い物好きな女性ならネットサーフィンしていて「あ！コレいいな！」そう思ったらいつの間にかポチっとしちゃいますよね。</p>
<p>私も<del datetime="2016-04-11T09:40:01+00:00">無駄に</del>買い物が好きで、スマホでネットをウロウロしてるとつい買ってしまう事が多々あります。</p>
<p>そんな買い物好きな女が特に買ってしまいそうになるLPサイトをご紹介します。</p>
<h2>可愛かったり、綺麗だったり、につい目が引かれる</h2>
<blockquote><p><a href="http://www.wacoal.jp/ribbonbra/" target="_balak"><br />
 ※ ワコール | リボンブラ</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp07-e1460444024990.jpg" rel="attachment wp-att-10350"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10350" src="/uploads-archive/2016/04/lp07-e1460444024990.jpg" alt="lp07" width="498" height="368" /></a></p>
<p>スクロールすると歩く赤ずきんちゃん<br />
<a href="/uploads-archive/2016/04/lp08-e1460444035384.jpg" rel="attachment wp-att-10351"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10351" src="/uploads-archive/2016/04/lp08-e1460444035384.jpg" alt="lp08" width="498" height="368" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp09.jpg" rel="attachment wp-att-10352"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10352" src="/uploads-archive/2016/04/lp09.jpg" alt="lp09" width="414" height="740" srcset="/uploads-archive/2016/04/lp09.jpg 414w, /uploads-archive/2016/04/lp09-168x300.jpg 168w, /uploads-archive/2016/04/lp09-228x408.jpg 228w" sizes="(max-width: 414px) 100vw, 414px" /></a></p>
<p>スマホでもスワイプで赤ずきんちゃんが歩きます。<br />
下着なので完璧に女性をターゲットにしているデザインですね、可愛くてつい見入ってしまいます。このギミック自体も面白くて見ちゃいますね。</p>
<blockquote><p>
<a href="http://www.surusuru.jp/cha/lp/sc01/"><br />
　※ スルスル茶 | 新発売キャンペーン</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp01-e1460368916209.jpg" rel="attachment wp-att-10305"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10305" src="/uploads-archive/2016/04/lp01-e1460368916209.jpg" alt="lp01" width="498" height="364" srcset="/uploads-archive/2016/04/lp01-e1460368916209.jpg 498w, /uploads-archive/2016/04/lp01-e1460368916209-300x219.jpg 300w, /uploads-archive/2016/04/lp01-e1460368916209-228x167.jpg 228w" sizes="(max-width: 498px) 100vw, 498px" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp02-1.jpg" rel="attachment wp-att-10309"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10309" src="/uploads-archive/2016/04/lp02-1.jpg" alt="lp02" width="419" height="741" srcset="/uploads-archive/2016/04/lp02-1.jpg 419w, /uploads-archive/2016/04/lp02-1-170x300.jpg 170w, /uploads-archive/2016/04/lp02-1-228x403.jpg 228w" sizes="(max-width: 419px) 100vw, 419px" /></a></p>
<p>「もしかして･･･30歳になって急に太った？？？」</p>
<p>言われたらかなり傷付くワード＝自分が気になっていること。こういった特定のターゲットを絞ったキャッチコピーについ「そうそう」と続きを見てしまいます。さらに畳みかけるように”管理栄養士が作った”なんて書かれていたらそれなりの効果を期待しちゃったり、この商品は安心だと思いますよね。</p>
<p>イラストも女性が好きそうなかわいいキャラクターがメインに来ていて、全体的に説明もザックリしていてシンプルにまとまっているので、怪しいサイト特有のごちゃごちゃ感が無く買いやすいです。</p>
<blockquote><p>
　<a href="http://blacklabel.suzuin.co.jp/"><br />
※ プレミアム印章専門店SUZUIN | 鈴印ブラックレーベル</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp10.gif" rel="attachment wp-att-10360"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10360" src="/uploads-archive/2016/04/lp10.gif" alt="lp10" width="498" height="367" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp11.jpg" rel="attachment wp-att-10362"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10362" src="/uploads-archive/2016/04/lp11.jpg" alt="lp11" width="414" height="741" srcset="/uploads-archive/2016/04/lp11.jpg 414w, /uploads-archive/2016/04/lp11-168x300.jpg 168w, /uploads-archive/2016/04/lp11-228x408.jpg 228w" sizes="(max-width: 414px) 100vw, 414px" /></a></p>
<p>でっかい写真をバーン！テキストがずっらーーー！<br />
場所によってはテキストが見辛い部分がありますが、全体のイメージと写真にこだわっているみたいですね。<br />
説明文はあまり見えなくても雰囲気でつい持ちたくなってしまいます。</p>
<p>ちなみにお値段は大体２万円～</p>
<blockquote><p><a href="http://u-tokinoirodori.com//lp/campaign/"><br />
　※ オールインワンセラム | 季乃彩</a></p></blockquote>
<p>PC<br />
<a href="/uploads-archive/2016/04/lp03-e1460369799532.jpg" rel="attachment wp-att-10310"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10310" src="/uploads-archive/2016/04/lp03-e1460369799532.jpg" alt="lp03" width="498" height="370" /></a></p>
<p>SP<br />
<a href="/uploads-archive/2016/04/lp04.jpg" rel="attachment wp-att-10311"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10311" src="/uploads-archive/2016/04/lp04.jpg" alt="lp04" width="412" height="740" srcset="/uploads-archive/2016/04/lp04.jpg 412w, /uploads-archive/2016/04/lp04-167x300.jpg 167w, /uploads-archive/2016/04/lp04-228x410.jpg 228w" sizes="(max-width: 412px) 100vw, 412px" /></a></p>
<p>パッと見はごちゃついてますが、「数量限定」「初回限定価格」「本品お試しキャンペーン」など･･･すごくそそられるキーワードが沢山書かれていますね。なくなり次第終了とも書かれていますので、ついそれだけで買っちゃいそうになっちゃいます。<del datetime="2016-04-11T09:40:01+00:00">まあ、なくなることなんてないんだろうけど。</del></p>
<p>購入画面（一部）<br />
<a href="/uploads-archive/2016/04/lp05.jpg" rel="attachment wp-att-10315"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10315" src="/uploads-archive/2016/04/lp05.jpg" alt="lp05" width="419" height="740" srcset="/uploads-archive/2016/04/lp05.jpg 419w, /uploads-archive/2016/04/lp05-170x300.jpg 170w, /uploads-archive/2016/04/lp05-228x403.jpg 228w" sizes="(max-width: 419px) 100vw, 419px" /></a></p>
<p>今すぐ購入からはごちゃついているTOPと打って変わってシンプルな詳細ページ。実際に使用したお客様のレビューが見られるのはとってもいいですね。</p>
<h2>おまけ</h2>
<blockquote><p><a href="http://www.hatalike.jp/ct/edit/takashi/index.html" target="_blank"><br />
　※ はたらく臓器inたかし｜求人・転職情報サイト【はたらいく】</a></p></blockquote>
<p>ECサイトではないけれど、なにこれおもしろい</p>
<blockquote><p><a href="https://mediplus-orders.jp/static/lp/an01/1064680/lp52/f/" target="_blank"><br />
　※ 30日間返金キャンペーン実施中！肌環境底上げコスメ『メディプラスゲル』</a>（</p></blockquote>
<p>肌の賞味期限･･･？</p>
<blockquote><p><a href="http://www.collage-shop.jp/shop/pages/bk_lp_b.aspx" target="_blank"><br />
　※ 敏感肌だってエイジングケア | B.K.AGE | 持田ヘルスケア株式会社 持田製薬グループ</a></p></blockquote>
<p>どこにでもあるECサイトですが、手書きフォントを使われていると親近感というか誰かの感想なのかな･･･とちょっと気になると思いました。</p>
<h2>まとめ</h2>
<p>LPって見てるだけでも面白いですよね。今回まとめてみて私はデザインで買ってしまう傾向があるんだなと思いました。<br />
するする茶、買おうかな･･･</p>


女の私がつい買ってしまいそうになるECサイトのLPデザインはコレ

<p>botのイメージというと、Twitterで機械的に過去の発言などをつぶやく有名人botやとあるジャンルに絞ったコピペを投稿するbotが私の中での定義に近かったのですが、もっと広い意味合いでbotという言葉が使われ始めているなと思っていたところにtechcrunchをみていて、様々なbotを集めた「Botlist」というサイトがあることを知ったのでご紹介です。</p>
<p><a href="http://techcrunch.com/2016/04/11/botlist-is-an-app-store-for-bots/" target="_blank">Botlist is an app store for bots</a></p>
<p>なんていう記事を書いていたら、cnetでも<a href="http://japan.cnet.com/news/commentary/35081012/" target="_blank">マイクロソフトのボット戦略&#8211;各部門の取り組みを探る</a>という記事を発見しました。</p>
<p>bot盛り上がってますね。</p>
<h2>Botlist</h2>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/botlist_%e2%80%a2_an_app_store_for_bots_/" rel="attachment wp-att-10337"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10337" src="/uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20-300x138.png" alt="Botlist_•_An_App_Store_For_Bots_" width="300" height="138" srcset="/uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20-300x138.png 300w, /uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20-768x354.png 768w, /uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20-1024x472.png 1024w, /uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20-228x105.png 228w, /uploads-archive/2016/04/e428d274916df79130a94c77ce68bd20.png 1263w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h3>対応プラットフォーム</h3>
<ul class="list-unstyled">
<li>Android</li>
<li>Email</li>
<li>Facebook Messenger</li>
<li>iPhone</li>
<li>Kik</li>
<li>Slack</li>
<li>SMS</li>
<li>Telegram</li>
<li>Web</li>
</ul>
<p>これだけの数があるのが初めて知りましたが、中でもKik、Telegramという見慣れないものがあったのですが、どちらもメッセージングサービスであるんですね。</p>
<p><a href="https://www.kik.com/" target="_blank">https://www.kik.com/</a></p>
<p><a href="https://telegram.org/" target="_blank">https://telegram.org/</a></p>
<p>数としてはslackが圧倒的に多く登録されていました。</p>
<p>その中でも気になった一つを試してみました。</p>
<p>またGoogleアナリティクスネタです。</p>
<h2>Statsbot</h2>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/botlist_%e2%80%a2_an_app_store_for_bots_-2/" rel="attachment wp-att-10340"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10340" src="/uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98-300x144.png" alt="Botlist_•_An_App_Store_For_Bots_ 2" width="300" height="144" srcset="/uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98-300x144.png 300w, /uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98-768x369.png 768w, /uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98-1024x492.png 1024w, /uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98-228x110.png 228w, /uploads-archive/2016/04/722f65c65948334b3c9a2f0e08c7ba98.png 1170w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>slackとGoogleアナリティクスを連携するbotです。</p>
<p>リンクはタイトル下からしかいけないです。</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot/" rel="attachment wp-att-10341"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10341" src="/uploads-archive/2016/04/Statsbot-300x134.png" alt="Statsbot" width="300" height="134" srcset="/uploads-archive/2016/04/Statsbot-300x134.png 300w, /uploads-archive/2016/04/Statsbot-768x343.png 768w, /uploads-archive/2016/04/Statsbot-1024x458.png 1024w, /uploads-archive/2016/04/Statsbot-228x102.png 228w, /uploads-archive/2016/04/Statsbot.png 1271w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>あとはお馴染みの連携のステップを進めていきます。自分自身slackは初めてですが、この辺りは一緒ですね。</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot-2/" rel="attachment wp-att-10342"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10342" src="/uploads-archive/2016/04/Statsbot-2-300x56.png" alt="Statsbot 2" width="300" height="56" srcset="/uploads-archive/2016/04/Statsbot-2-300x56.png 300w, /uploads-archive/2016/04/Statsbot-2-768x143.png 768w, /uploads-archive/2016/04/Statsbot-2-1024x191.png 1024w, /uploads-archive/2016/04/Statsbot-2-228x43.png 228w, /uploads-archive/2016/04/Statsbot-2.png 1228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>最後にGoogleアナリティクスのビューを選びます。</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot-3/" rel="attachment wp-att-10344"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10344" src="/uploads-archive/2016/04/Statsbot-3-300x221.png" alt="Statsbot 3" width="300" height="221" srcset="/uploads-archive/2016/04/Statsbot-3-300x221.png 300w, /uploads-archive/2016/04/Statsbot-3-768x567.png 768w, /uploads-archive/2016/04/Statsbot-3-1024x756.png 1024w, /uploads-archive/2016/04/Statsbot-3-228x168.png 228w, /uploads-archive/2016/04/Statsbot-3.png 1195w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>完了するとslackの画面にbotが追加されました。</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot___sterfield_slack/" rel="attachment wp-att-10345"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10345" src="/uploads-archive/2016/04/statsbot___sterfield_Slack-300x228.png" alt="statsbot___sterfield_Slack" width="300" height="228" srcset="/uploads-archive/2016/04/statsbot___sterfield_Slack-300x228.png 300w, /uploads-archive/2016/04/statsbot___sterfield_Slack-768x585.png 768w, /uploads-archive/2016/04/statsbot___sterfield_Slack-1024x780.png 1024w, /uploads-archive/2016/04/statsbot___sterfield_Slack-228x174.png 228w, /uploads-archive/2016/04/statsbot___sterfield_Slack.png 1237w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>後は、用意されたコマンドを叩くと応答してくれます。</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot-4/" rel="attachment wp-att-10346"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10346" src="/uploads-archive/2016/04/Statsbot-1-300x183.png" alt="Statsbot" width="300" height="183" srcset="/uploads-archive/2016/04/Statsbot-1-300x183.png 300w, /uploads-archive/2016/04/Statsbot-1-768x467.png 768w, /uploads-archive/2016/04/Statsbot-1-1024x623.png 1024w, /uploads-archive/2016/04/Statsbot-1-228x139.png 228w, /uploads-archive/2016/04/Statsbot-1.png 1147w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>例にあったように</p>

		<div id="crayon-649540263bc35735888758" 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></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;">
@Statsbot summary yesterday</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-649540263bc35735888758-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-649540263bc35735888758-1"><span class="crayon-sy">@</span><span class="crayon-e">Statsbot </span><span class="crayon-e">summary </span><span class="crayon-i">yesterday</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>と打ち込むと下記のように返してくれました。</p>
<p>&nbsp;</p>
<p><a href="/officer/slack%e3%82%84dropbox%e3%81%be%e3%81%a7%e6%a7%98%e3%80%85%e3%81%aabot%e3%82%92%e9%9b%86%e3%82%81%e3%81%9f%e3%80%8cbotlist%e3%80%8d/attachment/statsbot___sterfield_slack-3/" rel="attachment wp-att-10353"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10353" src="/uploads-archive/2016/04/statsbot___sterfield_Slack-3-300x141.png" alt="statsbot___sterfield_Slack 3" width="300" height="141" srcset="/uploads-archive/2016/04/statsbot___sterfield_Slack-3-300x141.png 300w, /uploads-archive/2016/04/statsbot___sterfield_Slack-3-768x361.png 768w, /uploads-archive/2016/04/statsbot___sterfield_Slack-3.png 1024w, /uploads-archive/2016/04/statsbot___sterfield_Slack-3-228x107.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>他にも日時のレポートを送ってくれるスケジュールもセット出来るようです。</p>
<h2>まとめ</h2>
<p>bot面白い</p>

slackやdropboxまで様々なbotのまとめサイト「Botlist」

<p>CINEMA4Dを使っているなら一度は見た事があるかもしれませんが、Cineversityというチュートリアルサイトが存在します。Cineversityはできたらカッコイイ表現のチュートリアルを動画でいくつもアップしています。</p>
<p>基本的に全て英語ですが、操作方法を解説してくれる部分については動画の通りに設定をすれば良いので、きちんと聞き取れなくても利用できると思います。</p>
<p>Cineversityにはこちらからどうぞ<a href="http://www.cineversity.com">http://www.cineversity.com</a></p>
<h2>membership option</h2>
<p>Cineversityのメンバーシップにはフリーとプレミアムが存在します。</p>
<p><a href="/uploads-archive/2016/04/2-1.gif" rel="attachment wp-att-10332"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10332" src="/uploads-archive/2016/04/2-1.gif" alt="2" width="640" height="361" /></a></p>
<p>フリーでもチュートリアルを観る事はできるのですが内容に制限があります。</p>
<p>プレミアムは一年間で約1万円さらに初年度は約3万円とかなり割高ですが、結構便利なプラグインをいくつもダウンロードできるので、プラグインを購入したと思えば安いかもしれません。とはいえプレミアムに入るのは高い！という方がほとんどだと思います。約4万円をポンと出すのはかなり厳しい物があります。</p>
<p>しかし、MSAに加入しているユーザーなら無料でプレミアムメンバーとしてCineversityを利用できます。キャンペーンなどでCINEMA4Dを購入した方はMSAがついてくる事がよくあるみたいなので、MSAに加入している方は是非利用してみてください。</p>
<h2>プレミアムへのクーポンコード</h2>
<p>MSA加入者にはMAXONからCineversityをプレミアムで利用するためのクーポンコードがメールで送られます。おそらくMSAに加入した時点で送られているようなので確認してみてください。</p>
<p>メールの内容は全て英語表記で「Free Cineversity voucher for MSA customers」というタイトルで送られてきます。</p>
<p>&nbsp;</p>
<p>送られてきたクーポンコードをUse Couponから入力し、名前や住所などを入力すればプレミアムメンバーに変更できます。</p>
<h2>便利なプラグインをダウンロードできるCV-TOOLBOX</h2>
<p>TOOLBOXがどんな物かこちらを見て頂ければ分かりやすいと思います。</p>
<p>http://www.cineversity.com/vidplaylist/cineversity_resources/cv_toolbox</p>
<p>TOOLBOXはCineversityからダウンロードして、他のプラグインと同様に「プラグイン」のフォルダに入れてください。その後、CINEMA4Dを立ち上げ直すとCineversityの登録アドレスとパスを入力してログインすればOKです。</p>
<p><a href="/uploads-archive/2016/04/3-1.gif" rel="attachment wp-att-10333"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10333" src="/uploads-archive/2016/04/3-1.gif" alt="3" width="640" height="382" /></a></p>
<p>プラグインにCV-Toolboxという名前で入っています。</p>
<p><a href="/uploads-archive/2016/04/4.gif" rel="attachment wp-att-10334"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10334" src="/uploads-archive/2016/04/4.gif" alt="4" width="536" height="225" /></a></p>
<p>CV-Toolbox開き、ここから必要なプラグインにチェックを入れる事でダウンロードができます。</p>
<p><a href="/uploads-archive/2016/04/5.gif" rel="attachment wp-att-10335"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10335" src="/uploads-archive/2016/04/5.gif" alt="5" width="640" height="370" /></a></p>


CINEMA4D 最新のチュートリアルとプラグインを利用できるCineversity

<p>webサイトを翻訳する場合、複数の方法がある。</p>
<p>その中でも最も簡単に実装できる方法の1つはフロント側での対応 = jsでの対応と思っており、良いツールなどが無いか調べてみた。</p>
<p>&nbsp;</p>
<p>いくつか調べてみた中ではこれの評価が高いように思えたため使ってみた</p>
<p><a href="http://www.openxrest.com/translatejs/" target="_blank">http://www.openxrest.com/translatejs/</a></p>
<p>&nbsp;</p>
<p><a class="demo" href="/demo/hoshino/65/" target="_blank">デモ</a></p>
<p>&nbsp;</p>
<p>構造としては、以下のようにまずjsonで定義しておく必要がある。</p>

		<div id="crayon-649540263ba46821042236" 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">JavaScript</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;">
var t = {
	signin: {
		jp: "ログイン",
		en: "Sign in"
	},
	registration: {
		jp: "会員登録",
		en: "Registration"
	},
	cart: {
		jp: "カート",
		en: "Cart"
	},
	contactus: {
		jp: "お問い合わせ",
		en: "Contact Us"
	}
}</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-649540263ba46821042236-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-2">2</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-4">4</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-6">6</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-8">8</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-10">10</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-12">12</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-14">14</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-16">16</div><div class="crayon-num" data-line="crayon-649540263ba46821042236-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263ba46821042236-18">18</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-649540263ba46821042236-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">t</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-2"><span class="crayon-h">	</span><span class="crayon-i">signin</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-3"><span class="crayon-h">		</span><span class="crayon-i">jp</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"ログイン"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-4"><span class="crayon-h">		</span><span class="crayon-i">en</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"Sign in"</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-5"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-6"><span class="crayon-h">	</span><span class="crayon-i">registration</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-7"><span class="crayon-h">		</span><span class="crayon-i">jp</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"会員登録"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-8"><span class="crayon-h">		</span><span class="crayon-i">en</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"Registration"</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-9"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-10"><span class="crayon-h">	</span><span class="crayon-i">cart</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-11"><span class="crayon-h">		</span><span class="crayon-i">jp</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"カート"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-12"><span class="crayon-h">		</span><span class="crayon-i">en</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"Cart"</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-13"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-14"><span class="crayon-h">	</span><span class="crayon-i">contactus</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-15"><span class="crayon-h">		</span><span class="crayon-i">jp</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"お問い合わせ"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-16"><span class="crayon-h">		</span><span class="crayon-i">en</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"Contact Us"</span></div><div class="crayon-line" id="crayon-649540263ba46821042236-17"><span class="crayon-h">	</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263ba46821042236-18"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>それを例えば</p>

		<div id="crayon-649540263ba4a916126260" 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">JavaScript</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;">
$('body').translate({lang: "jp", t: t});</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-649540263ba4a916126260-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-649540263ba4a916126260-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'body'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">translate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">lang</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"jp"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-i">t</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i">t</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>このように特定の要素(ここではbody)に対して実行すると指定した言語に変換される</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>定義が面倒だが、1つの選択肢としては手軽に導入できて良いかもしれない</p>

多言語翻訳用jQuery【translate.js】

スマホに合ったステップリストをインラインSVGで

<h2>出版不況と言われていますが絵本はどーなの？</h2>
<p>世の中は出版不況が声高に叫ばれています。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/f3bf3f308449f55e3c5f91f4151721dd_s-300x200.jpg" alt="f3bf3f308449f55e3c5f91f4151721dd_s" width="300" height="200" class="aligncenter size-medium wp-image-10247" srcset="/uploads-archive/2016/04/f3bf3f308449f55e3c5f91f4151721dd_s-300x200.jpg 300w, /uploads-archive/2016/04/f3bf3f308449f55e3c5f91f4151721dd_s-228x152.jpg 228w, /uploads-archive/2016/04/f3bf3f308449f55e3c5f91f4151721dd_s.jpg 640w" sizes="(max-width: 300px) 100vw, 300px" /><br />
（´-`）.｡oO（叫ぶおじさんの写真。特にいみはないです。</p>
<p>現在、1年間に国内で出版された書籍と雑誌の売上高は1兆6000億円を割り込む程度なのですが、これは市場規模がピークだった1996年の2兆6563億円の6割を下回る水準だそうで。</p>
<p>こりゃひどいですね。</p>
<p>じゃあ、絵本はどーなの？（もっとヒドそうだな）と思って調べてみますと、</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/childrens-book-market-process-300x236.jpg" alt="children&#039;s book-market-process" width="300" height="236" class="aligncenter size-medium wp-image-10246" srcset="/uploads-archive/2016/04/childrens-book-market-process-300x236.jpg 300w, /uploads-archive/2016/04/childrens-book-market-process-228x180.jpg 228w, /uploads-archive/2016/04/childrens-book-market-process.jpg 703w" sizes="(max-width: 300px) 100vw, 300px" /></p>
<p>これが実はそんなにヒドくないんですね。</p>
<h3>絵本が比較的売れてる3つの理由</h3>
<ol>
<li>子供は減っているが子供一人あたりにかける教育費はそんなに減っていない？</li>
<li>学校や図書館で最低限度の数は買い支えられている？</li>
<li>大手が参入して、出版点数が増えている。</li>
</ol>
<p>１と２は推測ですが、３はマジっぽいです。</p>
<p>小学生向けのエンターテイメント小説がブームになったときに、大手出版社がこぞって児童文学に新規参入、または力を入れ始めたそうです。</p>
<p>異色なところではブックオフが２０１２年にプライベート絵本ブランドを立ち上げて、価格は税込み５００円。<br />
公式通販サイトや一部ブックオフ店舗、書店などで売られています。</p>
<p>また、作品の作り方も一風変わっていまして。</p>
<blockquote><p>出版する絵本は、フジテレビKIDS などが主催する一般公募の「Be 絵本大賞」の選考から漏れた作品の一部。同賞はこれまで4回実施され、累計6288件の応募があるものの、絵本として出版されるのは一部の作品だった。</p>
<p>そこで、同社は「子どもたちにもっと多くの絵本を読んでほしい」という思いから、選考には漏れたものの良質な絵本作品を出版することを決めた。今回出版するのは「Be 絵本大賞」の過去の優秀作品賞・特別賞獲得受賞作品を中心とした7タイトル。<br />
<a href="http://www.advertimes.com/20120913/article85562/">http://www.advertimes.com/20120913/article85562/</a></p></blockquote>
<h2>新作よりもどうしても古典が売れちゃう絵本業界</h2>
<p>出版業界の低迷のわりには善戦している絵本ですが、どうしても克服できない問題もあります。</p>
<p>それは、新作よりもどうしても古典が売れてしまうという事情です。</p>
<p><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/110717feature4_1_list_big-278x300.jpg" alt="110717feature4_1_list_big" width="278" height="300" class="aligncenter size-medium wp-image-10252" srcset="/uploads-archive/2016/04/110717feature4_1_list_big-278x300.jpg 278w, /uploads-archive/2016/04/110717feature4_1_list_big-228x246.jpg 228w, /uploads-archive/2016/04/110717feature4_1_list_big.jpg 718w" sizes="(max-width: 278px) 100vw, 278px" /></p>
<p>トーハンが出している絵本国内ベストセラーリストを見ると、1位いないいないばあ、2位ぐりとぐら、3位はらぺこあおむし……</p>
<p>めっちゃ見たことありません？？　我々が子供の頃に読んだものと変わりなくないでしょうか。</p>
<p>つまり、ほんの一握りのベストセラーは売れ続け、新作は数をたくさん出すことでなんとか全体として売上を立てているという状況なのです。</p>
<p>たしかに絵本の場合、親が子供に選んであげることになるのですから、「よくわからん新作」よりは「自分も読んで思い出深い古典」を与えてしまう気持ちもわかります。</p>
<h2>でじたる絵本の未来</h2>
<p>では、これからの絵本はどうなるのでしょうか。</p>
<p>角川グループホールディングス会長角川歴彦さんは、「電子書籍に一番向いているのは絵本ではないか？」とインタビューで答えています。</p>
<blockquote><p>
<strong>「電子書籍に一番向いているのは絵本ではないか？」と角川さんは語る。iPadが出たときに、直感的にこれはデジタルえほんが一番いいと思ったというのだ。</strong>これまで、子どもたちも含め、日本人には、パソコンは向かないと言われて来た。タイプライターで言葉を入力する習慣もないからだ。だから、日本は情報化社会に取り残されていくと言われてきたという。しかし、<strong>iPadが登場すると、子どもたちは当たり前のようにタッチして使う。</strong>「タッチ革命」という言葉が生まれた。そのタッチ革命で、日本人の生活は、がらっと変わった。西洋人に立ち後れる理由がなくなったのだ。ITの技術革新はアメリカで始まったが、すでに日本人のDNAになっている。それは子どもも同じ。<strong>これまでは、保護者が子どもに与えるのはテレビだったが、今の親をみていると、タブレットを与えている。「テレビでも見ていなさい。」ではなく、「タブレットでも見ていなさい。」となった。子どもたちはデジタルネイティブだが、お父さんお母さんもデジタル世代。新しい時代へと革命的に変化している。</strong>「子どもたちの経験は、テレビで見たではなく、タブレットで見たに変わってきています。テレビが誕生してから60年。歴史がいま大きく変わろうとしています。」<br />
<a href="http://www.canvas.ws/nanako/?p=195" target="_blank">http://www.canvas.ws/nanako/?p=195</a></p></blockquote>
<p>たしかに、小さな子供たちが親のスマホやタブレットを触りたがるという話はよく聞きます。</p>
<p>僕はなんとなく子供たちには紙の本に触れてほしいという気持ちがあるのですが、ただの感傷でしょうか。</p>
<p>紙への愛着も、デジタルへの抵抗もゼロの子供たち。<br />
彼らの選択や如何！！</p>
<h3></h3>


なんか気になったので絵本出版業界について調べてみた

<h3>vimで連番を作る！</h3>
<div style="padding-left: 15px;">
  併せて小技紹介です。</p>
<p>  普段vimmerだけど連番を使う時だけExcelを開いてrowを使っていませんか？</p>
<p>  そんな貴方にこんな技を紹介です。</p>
<p>  vimにはインクリメント機能が実は存在します。<br />
  Ctrl+a<br />
  を数値に合わせて押すだけです。<br />
  (設定次第では英字も対応可能です。必要性があれば。)</p>
<p>  上記を活用してやってみましょう</p></div>
<h3>実例</h3>
<div style="padding-left: 15px;">
  1を入力します。ここまではいつもどおりです。<br />
<a href="/uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63.png" rel="attachment wp-att-10267"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63-300x183.png" alt="スクリーンショット 2016-04-05 17.53.12" width="300" height="183" class="alignnone size-medium wp-image-10267" srcset="/uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63-300x183.png 300w, /uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63-228x139.png 228w, /uploads-archive/2016/04/dcf9ac55a7e8a6d43d3d1e157d450e63.png 733w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  マクロを作るためにレコードモードに変更します。<br />
  qを押したあと、適当な文字(ここではaとします)を押すとレコーディングスタート！</p>
<p>  yyを押して今の行をコピー。<br />
  pを押して次の行へペースト。(自動的に次の行へ移動されます)<br />
<a href="/uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3.png" rel="attachment wp-att-10268"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-300x173.png" alt="スクリーンショット 2016-04-05 17.55.42" width="300" height="173" class="alignnone size-medium wp-image-10268" srcset="/uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-300x173.png 300w, /uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-768x443.png 768w, /uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3-228x131.png 228w, /uploads-archive/2016/04/110b343fc1022218563beb6906a08cb3.png 831w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  ここで Ctrl+a を押す！すると！<br />
<a href="/uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a.png" rel="attachment wp-att-10269"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-300x176.png" alt="スクリーンショット 2016-04-05 17.55.49" width="300" height="176" class="alignnone size-medium wp-image-10269" srcset="/uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-300x176.png 300w, /uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-768x450.png 768w, /uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a-228x134.png 228w, /uploads-archive/2016/04/ba3007594f18c7991a91c1c46e388d4a.png 844w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  そして再びqを押してレコーディング終了です。</p>
<p>  では、スタートを3でやってみましょう。<br />
<a href="/uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff.png" rel="attachment wp-att-10270"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-300x184.png" alt="スクリーンショット 2016-04-05 17.56.45" width="300" height="184" class="alignnone size-medium wp-image-10270" srcset="/uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-300x184.png 300w, /uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-768x471.png 768w, /uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff-228x140.png 228w, /uploads-archive/2016/04/4bdba9bd943839c289532d2586e600ff.png 891w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  さらにここからがポイント。<br />
  10@a<br />
  と入力してReturnキーを押下！<br />
<a href="/uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5.png" rel="attachment wp-att-10271"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5-300x193.png" alt="スクリーンショット 2016-04-05 17.57.40" width="300" height="193" class="alignnone size-medium wp-image-10271" srcset="/uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5-300x193.png 300w, /uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5-228x147.png 228w, /uploads-archive/2016/04/39252324e310b79aaeea1fcbfe28c0a5.png 754w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  10回分、インクリメント(連番増加)された行が増えましたね。<br />
  アットマーク前が実行回数、最後のaはマクロに登録した文字と言う意味です。</p></div>


vimの小技紹介

<p>前回は、Bigcommerceを紹介しましたが、今回は世界最大といわれる、shopifyを紹介します。</p>
<p>カナダ発のベンチャー企業でこちらは20万ショップが開設済みで100億ドル（1.1兆円の流通総額とのこと。</p>
<p>shopifyは既に上場をしていて、時価総額16億ドル（1800億円）ショップの開設が15分以内に出来るということでインスタントコマースといわれる分野の先駆けです。</p>
<p><a href="https://en.wikipedia.org/wiki/Shopify" target="_blank">https://en.wikipedia.org/wiki/Shopify</a></p>
<h2>サイトからトライアル登録</h2>
<h3>価格表</h3>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/shopify_pricing_-_the_best_ecommerce_platform__now_free_for_14_days/" rel="attachment wp-att-10201"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10201" src="/uploads-archive/2016/04/Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days-300x236.png" alt="Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days" width="300" height="236" srcset="/uploads-archive/2016/04/Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days-300x236.png 300w, /uploads-archive/2016/04/Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days-768x604.png 768w, /uploads-archive/2016/04/Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days-228x179.png 228w, /uploads-archive/2016/04/Shopify_Pricing_-_The_Best_Ecommerce_Platform__Now_Free_for_14_days.png 937w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>&nbsp;</p>
<p>Liteプランは非常に安いです。ただ、Onlinestoreにチェックが入っておらず、独自の店構えが出来ない。どこか別のチャネルで商品を紹介してBuyButtonを設置するというような方法しか取れないようです。</p>
<p>プラスして、注目したのがTRANSACTION FEESの項目でBasicでは2%と掲げられており、クレジットカードの手数料と合わせて4.9％は1注文毎に必ず掛かってくる計算になります。</p>
<p>例）</p>
<h4>Basic</h4>
<ul>
<li>月商50万円</li>
<li>月額　3000円</li>
<li>カード手数料　14,500円</li>
<li>トランザクション　10,000円</li>
<li>計27,500円</li>
</ul>
<h4>Pro</h4>
<ul>
<li>月商50万円</li>
<li>月額　8000円</li>
<li>カード手数料　13,000円</li>
<li>トランザクション　5,000円</li>
<li>計26,000円</li>
</ul>
<p>ということで月商50万円クラスでもProを契約したほうがお得だという計算になります。</p>
<h3>3ステップでトライアル登録</h3>
<p>&nbsp;</p>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/ecommerce_software__online_store_builder__pos_-_free_14-day_trial_by_shopify/" rel="attachment wp-att-10203"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10203" src="/uploads-archive/2016/04/Ecommerce_Software__Online_Store_Builder__POS_-_Free_14-day_Trial_by_Shopify-300x232.png" alt="Ecommerce_Software__Online_Store_Builder__POS_-_Free_14-day_Trial_by_Shopify" width="300" height="232" srcset="/uploads-archive/2016/04/Ecommerce_Software__Online_Store_Builder__POS_-_Free_14-day_Trial_by_Shopify-300x232.png 300w, /uploads-archive/2016/04/Ecommerce_Software__Online_Store_Builder__POS_-_Free_14-day_Trial_by_Shopify-228x177.png 228w, /uploads-archive/2016/04/Ecommerce_Software__Online_Store_Builder__POS_-_Free_14-day_Trial_by_Shopify.png 630w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/shopify-sign-up-for-the-best-online-store-software/" rel="attachment wp-att-10204"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10204" src="/uploads-archive/2016/04/e154aec9cb60aa240d1413c3da04d62b-300x252.png" alt="Shopify — Sign up for the best online store software" width="300" height="252" srcset="/uploads-archive/2016/04/e154aec9cb60aa240d1413c3da04d62b-300x252.png 300w, /uploads-archive/2016/04/e154aec9cb60aa240d1413c3da04d62b-768x645.png 768w, /uploads-archive/2016/04/e154aec9cb60aa240d1413c3da04d62b-1024x860.png 1024w, /uploads-archive/2016/04/e154aec9cb60aa240d1413c3da04d62b-228x192.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/2shopify-sign-up-for-the-best-online-store-software/" rel="attachment wp-att-10205"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10205" src="/uploads-archive/2016/04/5cc71ba0ad951606d98d2b5b5cd214f9-300x201.png" alt="2Shopify — Sign up for the best online store software" width="300" height="201" srcset="/uploads-archive/2016/04/5cc71ba0ad951606d98d2b5b5cd214f9-300x201.png 300w, /uploads-archive/2016/04/5cc71ba0ad951606d98d2b5b5cd214f9-768x514.png 768w, /uploads-archive/2016/04/5cc71ba0ad951606d98d2b5b5cd214f9-1024x685.png 1024w, /uploads-archive/2016/04/5cc71ba0ad951606d98d2b5b5cd214f9-228x153.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>上記の3画面の入力で登録できました。<a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/stershop-home-shopify/" rel="attachment wp-att-10202"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10202" src="/uploads-archive/2016/04/stershop-Home-Shopify-300x160.png" alt="stershop Home Shopify" width="300" height="160" srcset="/uploads-archive/2016/04/stershop-Home-Shopify-300x160.png 300w, /uploads-archive/2016/04/stershop-Home-Shopify-768x410.png 768w, /uploads-archive/2016/04/stershop-Home-Shopify-1024x547.png 1024w, /uploads-archive/2016/04/stershop-Home-Shopify-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>BigCommerceとは異なり、チュートリアルなどは発生せず、このホーム画面から進めていくようです。</p>
<p>ここで読み飛ばすのが後々、仇となります。</p>
<h2>管理画面をザックリチェック！</h2>
<h3>管理画面大項目</h3>
<p>管理画面の項目として翻訳すると以下のような構成でしょうか？</p>
<ul>
<li>検索</li>
<li>ホーム</li>
<li>受注</li>
<li>商品</li>
<li>顧客</li>
<li>レポート</li>
<li>割引</li>
<li>解析</li>
<li>アプリ</li>
<li>設定</li>
</ul>
<p>割引の機能が大項目として入っているのは面白いですね。</p>
<p>頻繁に使い、大きい概念のものからメニューは構成するものでしょうから、Bigcommerceではマーケティングという大項目の中に内包しているものです。</p>
<h3>デザイン編集がどこにもない・・・</h3>
<p>どこを探しても見当たらないと途方にくれていたところ、HOMEの中にある「Add online store」ボタンを押さないといけないんですね。。。</p>
<p>左のメニューを隅々まで見回しましたよ。</p>
<p>ということでようやく左メニューにお店のメニューが追加されました。</p>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/stershop-free-themes-shopify/" rel="attachment wp-att-10207"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10207" src="/uploads-archive/2016/04/stershop-Free-Themes-Shopify-300x160.png" alt="stershop Free Themes Shopify" width="300" height="160" srcset="/uploads-archive/2016/04/stershop-Free-Themes-Shopify-300x160.png 300w, /uploads-archive/2016/04/stershop-Free-Themes-Shopify-768x410.png 768w, /uploads-archive/2016/04/stershop-Free-Themes-Shopify-1024x547.png 1024w, /uploads-archive/2016/04/stershop-Free-Themes-Shopify-228x122.png 228w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<h3>BuybuttonもHOMEから追加</h3>
<p><a href="/officer/shopify%e3%81%ae%e3%83%95%e3%83%aa%e3%83%bc%e3%83%88%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%ab%e7%89%88%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%81%9f/attachment/monetize_your_blog_or_website_-_make_money_on_your_website/" rel="attachment wp-att-10209"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-10209" src="/uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6-300x147.png" alt="Monetize_your_blog_or_website_–_make_money_on_your_website" width="300" height="147" srcset="/uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6-300x147.png 300w, /uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6-768x377.png 768w, /uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6-1024x503.png 1024w, /uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6-228x112.png 228w, /uploads-archive/2016/04/d90b1bf33e52edffcd19918c06f4e6f6.png 1964w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>BigCommerceなどにもなかった機能として、外部のブログやWebサイト上にスクリプトを設置するだけで、決済のポップアップを立ち上げることが出来るBuybuttonという機能があります。</p>
<p>こちらもHOMEから追加出来ます。↓に公式サイトにあったscriptを置いてみました。</p>
<div data-embed_type="product" data-shop="embeds.myshopify.com" data-product_name="YELLOW WATCHES" data-product_handle="yello-w" data-has_image="true" data-display_size="compact" data-redirect_to="checkout" data-buy_button_text="Buy now" data-buy_button_out_of_stock_text="Out of Stock" data-buy_button_product_unavailable_text="Unavailable" data-button_background_color="30373b" data-button_text_color="ffffff" data-background_color="f1f1e9" data-product_modal="false" data-product_title_color="000000" data-next_page_button_text="Next page"></div>
<p><script type="text/javascript">// <![CDATA[
document.getElementById('ShopifyEmbedScript') || document.write('<script type="text/javascript" src="https://widgets.shopifyapps.com/assets/widgets/embed/client.js" id="ShopifyEmbedScript"><\/script>');
// ]]&gt;</script><noscript><a href="https://embeds.myshopify.com/cart/8829753283:1" target="_blank">Buy YELLOW WATCHES</a></noscript></p>
<h2>まとめ</h2>
<p>フリートライアルだけを見る限りでは、BigCommerceが高機能で軍配が。もともとターゲットが違うのかもしれませんが。</p>
<p>しかし、やっぱり当社の<a href="http://launchcart.jp/" target="_blank">LaunchCart</a>負けてない。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Shopifyのフリートライアル版使ってみた

<h3>スプレッドシートのスクリプト活用方法紹介</h3>
<div style="padding-left: 15px;">
  <a href="https://developers.google.com/apps-script/">GAS(Google Apps Script)</a>で実現出来る手軽なシート活用方法です。</p>
<p>  課題管理などを更新日を入れ忘れてどれが最新か解らなくなったことは無いでしょうか？</p>
<p>  GASを活用すれば、そんな記載漏れからおさらば出来ます！</p></div>
<h3>具体的な例</h3>
<div style="padding-left: 15px;">
  スプレッドシートを開いた状態で上部のメニューから<br />
  「ツール」「スクリプトエディタ」<br />
  を選択してください。</p>
<p>  すると新しいウィンドウが出てきます。<br />
  エクセルで言うところのVBAマクロエディタのようなものです。<br />
  (実際はVBAほど実行範囲は広くありません)</p>
<p>  「コード.gs」というスクリプトがデフォルトで表示されています。<br />
  右側のペインのテキストエリアに以下のように入力してみましょう。</p>
<p></p>

		<div id="crayon-649540263b44f887222715" 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">JavaScript</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;">
  function onEdit(event){
    var ss = event.source.getActiveSheet(); //編集したシート
    var us = Session.getActiveUser().getEmail(); //編集者のメールアドレス

    if (ss.getName() == "課題管理") {
      var Row;
      Row = ss.getActiveCell().getRow();
      Col = ss.getActiveCell().getColumn();
      if(Row&gt;2 &amp;&amp; Col &lt; 9 &amp;&amp; Col &gt; 2){ //2行目までがタイトルヘッダーなので
        ss.getRange(Row, 10).setValue(new Date()); // JカラムにDateを突っ込みます
      }
    }
  }</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-649540263b44f887222715-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-2">2</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-4">4</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-6">6</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-8">8</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-10">10</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540263b44f887222715-12">12</div><div class="crayon-num" data-line="crayon-649540263b44f887222715-13">13</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-649540263b44f887222715-1"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">onEdit</span><span class="crayon-sy">(</span><span class="crayon-i">event</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">ss</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">event</span><span class="crayon-sy">.</span><span class="crayon-i">source</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveSheet</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//編集したシート</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">us</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">Session</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveUser</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getEmail</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-c">//編集者のメールアドレス</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-4">&nbsp;</div><div class="crayon-line" id="crayon-649540263b44f887222715-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-i">ss</span><span class="crayon-sy">.</span><span class="crayon-e">getName</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-h"> </span>==<span class="crayon-h"> </span><span class="crayon-s">"課題管理"</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">Row</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">Row</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">ss</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveCell</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getRow</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-i">Col</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-i">ss</span><span class="crayon-sy">.</span><span class="crayon-e">getActiveCell</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">getColumn</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">Row</span><span class="crayon-h">&gt;</span><span class="crayon-cn">2</span><span class="crayon-h"> </span><span class="crayon-sy">&amp;&amp; Col &lt; 9 &amp;&amp; Col &gt; 2){ //2行目までがタイトルヘッダーなので</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-10"><span class="crayon-sy">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ss.getRange(Row, 10).setValue(new Date());</span><span class="crayon-h"> </span><span class="crayon-c">// JカラムにDateを突っ込みます</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540263b44f887222715-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-649540263b44f887222715-13"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>  上の例だと列の番号がベタ書き(数字をそのまま直接書いて)しています。</p>
<p>  内容は<br />
  「編集したシートが」「&#8221;課題管理&#8221;と言う名前なら」<br />
  かつ<br />
  「編集したセルが」「2行目以降」かつ「3列目から8列目までの範囲」<br />
  の時、<br />
  「編集したセルの」「10列目に」「現在の時刻を」「代入する」<br />
  です。</p>
<p>  これだけでは何も動きません。</p>
<p>  上部メニューから<br />
  「リソース」「現在のプロジェクトのトリガー」<br />
  を選択すると以下の様なダイアログが表示されます。<br />
<a href="/uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544.png" rel="attachment wp-att-10250"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-300x92.png" alt="スクリーンショット 2016-04-05 17.41.29" width="300" height="92" class="alignnone size-medium wp-image-10250" srcset="/uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-300x92.png 300w, /uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-768x236.png 768w, /uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544-228x70.png 228w, /uploads-archive/2016/04/c505062ae4aaeea195260000a8cc2544.png 896w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p>  参照画像の例だと<br />
  「onEditという関数を」「スプレッドシートの」「値が変更された時」<br />
  に実行されるという内容となります。</p>
<p>  つまりイベントに対して自分の好きな命令をGASが定めた範囲内で自由に自動化出来るという仕組みです。</p></div>

スプレッドシート管理の小技紹介

<p>JavaScriptのエラーが発生した場合、エラーを通知してくれるChromeの拡張機能の紹介です。<br />
Chromeを使用していれば、JavaScriptのエラーが発生した際に、コンソールに表示してくれるのですが、コンソールを開かない限り気づくことができません。<br />
そこで、JavaScript Errors Notifierという拡張機能を追加すると、コンソールを開かなくても、ツールバーや画面の右下にエラーを通知してくれます。</p>
<h2>追加方法</h2>
<p><a href="https://chrome.google.com/webstore/detail/javascript-errors-notifie/jafmfknfnkoekkdocjiaipcnmkklaajd/related?hl=ja" class="link">JavaScript Errors Notifier</a><br />
にて、追加する。</p>
<h2>使用例</h2>
<p>下のような形でエラーを通知してくれます。<br />
 &#8211; ツールバー上：<br />
<a href="/uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f.png" rel="attachment wp-att-10230"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f-300x52.png" alt="スクリーンショット 2016-04-05 17.20.34" width="300" height="52" class="alignnone size-medium wp-image-10230" srcset="/uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f-300x52.png 300w, /uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f-228x40.png 228w, /uploads-archive/2016/04/28792698317dd3d510fa90ee302bde1f.png 389w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
<p> &#8211; 画面右下：<br />
<a href="/uploads-archive/2016/04/cfc05b21b03413488632549b51866111.png" rel="attachment wp-att-10231"><img decoding="async" loading="lazy" src="/uploads-archive/2016/04/cfc05b21b03413488632549b51866111.png" alt="スクリーンショット 2016-04-05 17.20.55" width="193" height="169" class="alignnone size-full wp-image-10231" /></a></p>
<h2>補足</h2>
<p>以前に作られて以降、アップデートは行われていなかったのですが、今年に入ってから開発が行なわれているようです。<br />
<a href="https://github.com/barbushin/javascript-errors-notifier" class="link">barbushin/javascript-errors-notifier</a></p>
<p>Angular.jsのエラーにも対応してきているようです。</p>


JavaScript Errors Notifier

<p>花びらが散る様子を表現する方法としてはいくつかあるようですが、今回はシミュレーションのパーティクルとモディファイアを使用して制作してみました。</p>
<p>ちなみに事前に桜の木と花びらのオブジェクトがある前提の説明になります。</p>
<h2>エミッタから花びらを出す</h2>
<p>エミッタから花びらが出すための設定です。</p>
<p>まず花びらのオブジェクトをエミッタの子にします。</p>
<p><a href="/uploads-archive/2016/04/1.gif" rel="attachment wp-att-10225"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10225" src="/uploads-archive/2016/04/1.gif" alt="1" width="284" height="60" /></a></p>
<p>エミッタ（吹き出し口）の角度を下向きにして、エミッタの「パーティクル」から「進行方向を向く」と「エディタにオブジェクトを表示」にチェックを入れます。その他の要素については必要に応じて変更してみてください。</p>
<p>次にエミッタのサイズと位置を木のオブジェクトに合わせて調整します。</p>
<h2>風モディファイアを設定する</h2>
<p>花びらが風に乗って散る様子を表現するために風のモディファイアを使います。</p>
<p>モディファイアを効かせるためにはエミッタの「含む」にモディファイアをドラッグ&amp;ドロップしてあげればOKです。モディファイアを複数使用する場合には「含む」の上から順番に効いていきます。</p>
<p><a href="/uploads-archive/2016/04/2.gif" rel="attachment wp-att-10242"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10242" src="/uploads-archive/2016/04/2.gif" alt="2" width="312" height="204" /></a></p>
<p>風モディファイアの「オブジェクト」で風速をいじって花びらが風に流される強さを調整します、タービュランスを少し上げると単純な直線上に吹く風ではなく、実際の気流のように曲線を描く風を吹かせる事ができます。モードは加速度で良いかと思います。</p>
<h2>重力モディファイアを設定する</h2>
<p>風だけですと花びらが舞う感じがあまり出ませんので重力を追加します。先ほど同様にエミッタの「含む」に追加します。</p>
<p><a href="/uploads-archive/2016/04/3.gif" rel="attachment wp-att-10244"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10244" src="/uploads-archive/2016/04/3.gif" alt="3" width="276" height="136" /></a></p>
<p>「オブジェクト」の重力加速度を低めに調整して軽い物が落ちるようにします。</p>
<h2>シミュレーションにスプラインを使った動きを追加する</h2>
<p>花びらが散るようなシミュレーションの場合、来てほしい位置や角度にタイミングよく花びらが来てくれません。アニメーションを走らせる度に異なるので、カメラ前に1枚だけ丁度良く来てほしいなどの演出は狙い通りになりません。</p>
<p>こういう場合は「スプラインに沿う」のタグを使うなどして、狙い通りにオブジェクト（花びら）を動かしてあげる必要がります。</p>
<p>自然に見せるのがなかなか難しいので、スプラインの引き方など工夫が必要です。</p>
<h2>出来上がり</h2>
<p>花びらがヒラヒラする感じが足りないのと、花びらが落ちる速度が速すぎました。次はMographなど他の方法も試してみようと思います。</p>
<div style="width: 720px;" class="wp-video"><video class="wp-video-shortcode" id="video-10216-7" width="720" height="404" preload="metadata" controls="controls"><source type="video/mp4" src="/uploads-archive/2016/04/sakura_final2.mp4?_=7" /><a href="/uploads-archive/2016/04/sakura_final2.mp4">/uploads-archive/2016/04/sakura_final2.mp4</a></video></div>
<p>&nbsp;</p>


CINEMA4D　桜が散るシーンを作ってみた

<p>「あらゆる Web ページを友達とともに即座にブラウジングできます。」</p>
<p>というキャッチコピーで、webページの共有が出来るサービスがいつの間にかFirefoxに追加されていました。</p>
<p>その名も「<a href="https://www.mozilla.org/ja/firefox/hello/" target="_blank">Firefox Hello</a>」。</p>
<p>skypeの画面共有みたいな感じでしょうか？</p>
<p>ブラウザにもしれっとアイコンが追加されていました。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-10212" src="/uploads-archive/2016/04/726b7e2b9a87490fbc1e61b5bd9d4714.png" alt="スクリーンショット 2016-04-05 15.43.23" width="196" height="112" /></p>
<p>ニコちゃんマークみたいなやつです。</p>
<p>ログイン等は必要なく、Firefoxをインストールしていれば使えるようです。<br />
(相手がFirefoxを使っていなくてもできるとのこと！)<br />
※カメラやマイクがないと無理そうかも・・・</p>
<p>開始する方法は、<br />
<strong>・URLを相手に送る</strong><br />
<strong>・Facebookメッセージで送る</strong><br />
の2つで、アイコンをクリックすると、<br />
「このページを共有しますか？」的なメッセージが表示されるので、<br />
そちらをクリックすると以下の様な画面になります。</p>
<p>開始するときの画面はこちら↓<br />
<a href="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png" class="modal"><img decoding="async" class="alignnone size-large wp-image-10213" src="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png" alt="スクリーンショット 2016-04-05 15.49.38" width="640" srcset="/uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-1024x704.png 1024w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-300x206.png 300w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-768x528.png 768w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438-228x157.png 228w, /uploads-archive/2016/04/16a2123400bf9dbc1d2f521c47d16438.png 1221w" sizes="(max-width: 1024px) 100vw, 1024px" /></a></p>
<p>webカメラでお互いを映しながら同じページを閲覧するようです。<br />
Skypeとはまた少し違う感じですね。</p>
<p>僕らの業界では結構webサイトを見ながらなんて事が多いかと思うので、<br />
もしかしたらskypeよりいいかもしれませんね。<br />
ただ、開始するのがskypeよりひと手間かかります。</p>
<p>これを使えば、遠隔で、<br />
webサイトの使い方を教えたり、<br />
一緒の旅行サイトを見たり、<br />
ECサイトみたり、<br />
ぐるなびとか食べログみたり、<br />
いろいろ同じものを見ながら決められそうですね！<br />
(skypeでも出来るか・・・)</p>
<p>今はまだBeta版みたいなので、今後どのように機能が追加されていくか楽しみですね！</p>
<p><a class="link" href="https://www.mozilla.org/ja/firefox/hello/" target="_blank">Firefox Hello — 友達と一緒に Web ブラウジング — Mozilla</a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧

2016/04/19

2016/04/19

2016/04/13

2016/04/13

2016/04/13

2016/04/13

2016/04/13

2016/04/13

2016/04/12

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06

2016/04/06