11月, 2016 - AGN Web!

SNSのトップを知る!!

どうも、Kazです。
SNSは何を使っていますか？
そして、そのSNSで最も人気がある『アカウント』は何か…
気になった事はありませんか？

情報の拡散などで使われるSNSですが、トップになるからにはそれなりの理由があるはずです。
その『もっとも人気のあるアカウント』を見て調べることで気づくこともあると思います。

そこで
Facebook、Twitter、Instagramの「いいね!」や「フォローワー数」でのランキングがわかるサイトを紹介いたします！！

魅力的な演出盛りだくさん！クリスマスプロモーションWebサイト 2016

ハロウィンが終わったと思ったら、次はもうクリスマス！一大イベントに向けて、早くもクリスマス仕様のWebサイトやページが続々公開されています。
普段よりも華やかにドレスアップしたWebサイト。魅力的なデザインを一足お先に、チェックしてみました。

ミキハウスクリスマスサイト

https://www.mikihouse.co.jp/christmas/

赤・白・ピンクのベースカラーのグリッドが、ぎゅっと詰め込まれたギフトボックスのよう。子ども服のブランドですが、贈る側の大人もぐっとくるシックなデザインですね〜。ギフトの詳細ページは左右2分割の縦スライダーで、くるくる互い違いに回る動きが楽しいです！
※レスポンシブデザイン

クリスマス 2016 – ロイヤルコペンハーゲンジャパンオンラインショップ

https://www.royalcopenhagen.jp/christmas2016/

ロイヤルコペンハーゲンのある風景とともにクリスマスギフトを紹介されています。メインカラーのグリーンを基調に金色をアクセントとした、全体的に高級感のあるデザイン。キャッチコピーのリボンのアニメーションが、可愛らしいアクセントになっています。
※レスポンシブデザイン

三越伊勢丹グループ「こころに太陽を呼ぶ、祝祭。」

http://cp.miguide.jp/christmas-journey/

闇に浮かぶオレンジ色の「スカイランタン」が印象的。明朝体のコピーも力強く、目を惹きつけられます。クリスマスを「こころに太陽を呼ぶ、祝祭。」とし、太陽をモチーフとしたあしらいや色彩でページを彩っています。あえてバックを暗色にさせていることで、より光が引き立っているところもまたすてきですね。コンテンツの開閉も、ちょっと楽しいアニメーションになっています。
※レスポンシブデザイン

土屋鞄のクリスマスギフトサイト｜土屋鞄製造所

http://www.tsuchiya-kaban.jp/c/2016xmas.php

シンプルなツリーに、星座がきらめくシンプルなメインイメージがすてき。クリスマスまでのカウントダウンにもわくわくしてきますね！
取り扱っているギフトは、鞄や財布などの革製品。革の絶妙な光沢が映えるような、濃紺や深緑などの落ち着いた配色でまとめられています。
※レスポンシブデザイン

Your Tree　大切なひとへ、ツリーを贈ろう。｜土屋鞄製造所

http://www.tsuchiya-kaban.jp/event/2016xmas_yourtree.php

こちらも土屋鞄製造所さんのクリスマスサイト。ランダムで作られるツリーに添えて、ちょっとユニークな一言メッセージを送れるサービスです。
ぴょこぴょこ動くサンタのおしりが可愛い！

TOKYU CHRISTMAS WONDERLAND 2016 – Disney CRYSTAL MAGIC

http://crystalmagic.jp/s/tokyu/

ラインと絶妙な濃淡で表現された、クリスタルのイメージが美しいです。
ボタンやページトップのホバーアニメーション、ゆっくりと変化するクリスタル調の背景など、細かいところまでこだわりを感じるデザインです。
※レスポンシブデザイン

あかりを灯そう　マザーハウスのクリスマス2016｜MOTHERHOUSE

http://www.mother-house.jp/event-campaign/xmas/

町に立ち並ぶ家が、なんとギフトボックスに。ふわっと広がる灯りの表現や、微妙な濃淡が重なる淡い色彩が、とてもやさしいサイトです。
他にもタイトルロゴやワンポイントのツリーなど、すみずみまで可愛らしいあしらいに溢れています。
※レスポンシブデザイン

HAPPY HOLIDAY｜PARCO

http://parco.jp/gift/

油絵調のイラストに迷い込んでしまったような、可愛らしいけどちょっと不思議な世界観のデザインです。実写とイラストが混じり合う、イメージビジュアルもすてき！

アガット | agete

http://www.agete.com/2016christmas/

セピア調の繊細なタッチで描かれたイラストが美しいです。ウィンドウ内でページが完結するレイアウトで、メニューの配置がちょっと珍しく感じました。
商品ページも同じくセピア調でまとめられ、ゆっくりと降る雪のアニメーションやラインの飾り枠が、華奢で繊細なアクセサリーにとてもマッチしています。
※レスポンシブデザイン

HOLIDAY SPECIAL – Crafted by Hand ＆ Heart｜スターバックスコーヒージャパン

http://www.starbucks.co.jp/holiday/

動画で進んでいく、スクロールアニメーション。描くように表示されるボタンやコピー、手描き調のあしらいや、ちょっとコミカルなコマ撮りアニメーションなど。木目調の背景と相まって、全体的にほっこりと暖かいデザインイメージです。

トマムのクリスマス～雪に願いを～｜星野リゾート　トマム【公式】

http://www.snowtomamu.jp/special/xmas/

雪原に広がるキャンドルの灯りと、満天の星空がとても幻想的ですね…！フルスクリーンと降雪のさりげないアニメーションで、その地の魅力をシンプルに演出しています。
※レスポンシブデザイン

西武・そごうのクリスマス｜西武・そごう

https://www.sogo-seibu.jp/christmas2016/

縦組み＆明朝体のキャッチコピーが印象的。くるくるとした曲線と交わるロゴタイプもすてきです。イラストで埋められたバックと、プレゼントを結ぶリボンを思わせるような赤色のバックがとてもにぎやか。

TOKYO KAIKAN 東京會舘 Christmas 2016

https://www.kaikan.co.jp/special/xmas/

左右2分割されたメニュー。こちらはケーキやレストランの問い合わせ先が複数あるのですが、こうして入り口から分けられていると動線がシンプルでわかりやすいですね！
赤・白・金で落ち着いた彩度の色どりで、華やかな大人のクリスマスといったイメージです。
※レスポンシブデザイン

ルピシアクリスマス 2016

http://www.lupicia.com/shop/e/eX16/

お茶のオンラインショップ「ルピシア」のクリスマスサイト。クリスマスの限定ギフトに描かれたキャラクターたちが登場する、絵本「アルチザンたちの物語」が楽しめます。メインビジュアルはパララックススクロールで、奥行きのある演出がされています。
※レスポンシブデザイン

サンリオクリスマス特集2016

https://shop.sanrio.co.jp/special/xmas2016/

クリスマスカラーにまとめられた、シンプルなキャラクターイラストがメインビジュアル。ツリーのオーナメントになったキャラクターたちも、パララックススクロールで背景を彩ります。

終わりに

このほかにも、AGN Webチームでは気になったWebデザインを、下記のサイトでまとめてご紹介しています。

Web Site Clips
http://agn-websiteclips.tumblr.com/

よかったら、のぞいてみてくださいね！

ファイルとキーボード・マウスの共有にUSBリンクケーブルを使ってみた。（windows10とmacOS Sierraにて）

会社のデスクで、WindowsとMacを並べてつかってます。
以前はUSB切り替え機で、USBのキーボードとマウスを切替えて使ってましたが、
配線が乱雑になるに加え認識しないこともままあり、結局は2組のキーボードとマウスを並べて使ってました。
ですが、デスク上に2組もキーボード・マウスがあると邪魔なんですよね。

そこで！USBリンクケーブルです。
2台のPCをUSBで繋いでデータをやり取りするケーブルです。結構昔からあるジャンルの製品です。
最近知ったのですが、キーボードなどの入力デバイスの共有もできるんです。

と言うわけで試しに一番安い製品を買ってみました。よくわからない中国製（Ugreen）です。Amazonで1000円ちょっと。

外観はUSBケーブルそのもの。
片方のコネクタ部分にストレージが入っているようです。（USBメモリとして認識します。）
そこにリンク用のソフトウェアが同梱されていおり、仮想CD的に自動起動、インストールを行います。

使いたい双方のUSBポートに接続して使用します。
設定は特に不要で繋げば常駐ソフトがインストールされて自動で使えるようになります。きちんと日本語化してありました。
使いこなすには、色々設定した方が便利そうです。

とりあえず、2台のディスプレイをマウスで移動できる設定にしました。

2台が繋がると、片方のデスクトップからもう片方のデスクトップにマウスカーソルが移動できるようになります。
移動した段階で、移動先PCを移動元のキーボード・マウスでコントロールできるようになります。

タスクトレイに常駐しているユーティリティのおかげで、ファイルをドラッグドロップでコピーできます。さらにクリップボードも共有できます。

↓こんな感じです。↓　右のWindowsから左のMacへ移動する様子。

モニタをまたぐときに一瞬もたつくものの、感覚的にはデュアルモニタに近い操作性です。
ソフトウェアで同じ事ができるSynergyなどありますが、こちらの方が設定も簡単でファイルのコピーもできますし、どなたにもおすすめできます。
（ケーブルという性質上、2台での共有に限られます。）

ファイルの転送は上記設定でドラッグ＆ドロップで可能ですが、転送用の専用ソフトGO!Bridgeも付属します。
エクスプローラー的に操作したいときには便利に使えそうです。

良いことばかりでは無くデメリットもあります。
あたりまえですが、OSが立ち上がってないと共有はできません。BIOSの操作などは厳しいですね。機械的なKVMに劣る所です。

電源が入っていても片方がスリープしていると、ディスプレイをまたいでカーソルの移動ができません。
ショートカット（ALT+S）で強制切替えをし、操作することになります。
また、私は片方（Mac）をサブマシン的に使っているので気になりませんが、メインマシン的に使うとレスポンスが気になるかも知れません。
今回使ったのがUSB2.0版だったので、USB3.0対応であれば、もっと快適かも知れませんね。

色々制限もありますが、複数台のPCを使う人なら1本あると便利だと思います♪

備考
上記記事の執筆にあたり、
・Windows10 aniversary update適用済み
・Mac os x sierra / Mac mini 2013
にて動作チェックを行いました。

jQuery3.1.1でbxSliderが動かないこととGoogle Fonts + 日本語早期アクセスを試してみたこと

blog161110

あれ？bxSlider動かない・・・

いつも通りに設置したのになぁ。
なんか書き間違えたかな？。。。
161105sample_bxslider01

コンソールを見るとなんかエラーしてますね。

jquery-3.1.1.min.js:4 Uncaught TypeError: Cannot read property ‘indexOf’ of undefined(…)

jQuery3.xになって`load()`がなくなった

調べてみたら、bxslider.jsの中でload()が使われているのが原因みたいです。

参考サイト
jquery 3.0 url.indexOf error -stackoverflow

うーん、load()はon('load',function(){})で書き換えればいいらしいですけど、プラグインファイル直接修正するのはちょっとなぁ。
slick.jsと並んでスライダー系では使いやすくて大好きなプラグインなんですけど。。。
bxSliderを使うときはjQueryは3.xになる前のバージョンなら動くので、そっちですかね。
ちょっと残念。

load()以外にも、いろいろなくなったり変わったりしているので参考サイトなどで見ておくといいかもです。

参考サイト
jQuery3.0 アップグレードガイド -Qiita

でも動くときもあるよ？

そうなんです。別な時にすっかり忘れててjQuery3.1.1使ってbxSlider入れたら普通に動くんです。
あれれ、jQuery3.xだと動かないんじゃないの？
動いてしまったのはこんなソースです。

<div class="bxslider">
        <div class="slider-item">
            <h2>title01</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
        </div>
        <div class="slider-item">
            <h2>title02</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
            <p><img src="images/dummy.jpg" /></p>
        </div>
        <div class="slider-item">
            <h2>title03</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
        </div>
        <div class="slider-item">
            <img src="images/dummy.jpg" />
        </div>
</div>

<h2>title01</h2>

<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>

</div>

<h2>title02</h2>

<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>

</div>

<h2>title03</h2>

<p>てきすとてきすとてきすとてきすとてきすとてきすと</p>

</div>

</div>

それではちゃんとbxslider.jsのエラー箇所をみてみます。

bxslider.jsの該当箇所

var loadElements = function(selector, callback) {
  var total = selector.find('img:not([src=""]), iframe').length,
  count = 0;
  if (total === 0) {
    callback();
    return;
  }
  selector.find('img:not([src=""]), iframe').each(function() {
    $(this).one('load error', function() {
      if (++count === total) { callback(); }
    }).each(function() {
      if (this.complete) { $(this).load(); }
    });
  });
};

var loadElements = function(selector, callback) {

var total = selector.find('img:not([src=""]), iframe').length,

count = 0;

if (total === 0) {

callback();

return;

}

selector.find('img:not([src=""]), iframe').each(function() {

$(this).one('load error', function() {

if (++count === total) { callback(); }

}).each(function() {

if (this.complete) { $(this).load(); }

});

};

functionの第一引数selectorにはver preloadSelector = slider.children.eq(slider.settings.startSlide); が入ってくるようですので、きっと一番はじめに表示されるアイテムのことですね。

image . complete
画像が完全にダウンロードされた、または、画像が指定されなかったなら、true を返します。そうでなければ、false を返します。
<http://www.html5.jp/tag/elements/img.html>

ということなので、<・・・前略・・・>そのスライダーアイテムにsrc属性が指定されたimgもしくはiframeがあったら、<・・・中略・・・>、(※ここから)もし画像がダウンロードされてたらその画像をロードしてね、ここでload()って何よっていうエラーなんですね。
だから、最初のアイテムに画像が含まれていなければ、普通に動くということみたいです。
しかしiframeだと普通に動くな。。なんで？？

Google Fontsで「はんなり明朝」とか使える!!

そんなことより(いや上のも大切なことですよ？)、これはすごい大ニュースなのでは??

Google Fonts は、デザイナーウェブフォントを直感的にご利用いただける、安定したオープンソースディレクトリです。Google Fonts 早期アクセスでは、現時点で完全にはサポートしていないフォントを試験的に提供しています。

膨大な数の文字のデザインに要する時間や、大容量のフォントファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts 早期アクセスを通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。
Google Fonts + 日本語早期アクセスより引用

ということですから、完全にサポートされているわけではありません。
日本語の無料で使えるWebフォントが少ないっていうのは常々の悩みでしたし。
いろんなデバイスを考えた時に明朝体がうまいものがなくて、泣く泣く画像にしたりしてましたから。
「はんなり明朝」とか好きなフォントですし、嬉しいですね！

ただフォントによっては漢字のないものや、ひらがなもないものもあるのでその辺は要注意です。
漢字のない明朝系のフォントは、漢字部分はデフォルトフォントで表示されるみたいです。
なので、フォントファミリーに他の明朝体も入れておくといい感じになるかもしれませんね。

使えるフォント

M+ 1p
Rounded M+ 1c
はんなり明朝
こころ明朝
さわらび明朝
さわらびゴシック
ニクキュウ
ニコモジ
Noto Sans Japanese

漢字なし

はんなり明朝
こころ明朝
ニクキュウ
ニコモジ

ひらがななし

ニクキュウ

せっかくなのでbxSliderと新しい日本語WebフォントでDEMOを作ってみました。
よかったら見てみてくださいね。
jQueryのバージョンはjQuery3.1.1です！
ちなみに今回はスマホ意識してないのでPCでご覧くださいね(汗)

【DEMO】

ミキハウス クリスマスサイト

クリスマス 2016 – ロイヤルコペンハーゲンジャパンオンラインショップ

三越伊勢丹グループ「こころに太陽を呼ぶ、祝祭。」

土屋鞄のクリスマスギフトサイト｜土屋鞄製造所

Your Tree 大切なひとへ、ツリーを贈ろう。｜土屋鞄製造所

TOKYU CHRISTMAS WONDERLAND 2016 – Disney CRYSTAL MAGIC

あかりを灯そう マザーハウスのクリスマス2016｜MOTHERHOUSE

HAPPY HOLIDAY｜PARCO

アガット | agete

HOLIDAY SPECIAL – Crafted by Hand ＆ Heart｜スターバックス コーヒー ジャパン

トマムのクリスマス～雪に願いを～｜星野リゾート トマム【公式】

西武・そごうのクリスマス｜西武・そごう

TOKYO KAIKAN 東京會舘 Christmas 2016

ルピシアクリスマス 2016

サンリオクリスマス特集2016

終わりに

あれ？bxSlider動かない・・・

jQuery3.xになってload()がなくなった

でも動くときもあるよ？

Google Fontsで「はんなり明朝」とか使える!!

使えるフォント

漢字なし

ひらがななし

参考サイト

ミキハウスクリスマスサイト

土屋鞄のクリスマスギフトサイト｜土屋鞄製造所

Your Tree　大切なひとへ、ツリーを贈ろう。｜土屋鞄製造所

あかりを灯そう　マザーハウスのクリスマス2016｜MOTHERHOUSE

HOLIDAY SPECIAL – Crafted by Hand ＆ Heart｜スターバックスコーヒージャパン

トマムのクリスマス～雪に願いを～｜星野リゾート　トマム【公式】

jQuery3.xになって`load()`がなくなった