【jQuery】 slick カルーセルスライダーを使ってみる

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-10-14-50


%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-11-10-12-46

システム部の渡辺です。

設定が楽で使い回せるスライダーを探してました。

レスポンシブ対応が細かくできて、
自前で何かを書き足さなくてもすむスライダーの候補として
slick.js はけっこういいです。

slick 公式

サンプル

よく使うスライダーの代表例のサンプルを作成してみました。

レスポンシブ対応

最近の案件はほぼレスポンシブなので、
PC、タブレット、スマホの設定を、わかりやすく簡単に設定できるかがポイントだと思いますが、例えば「768px 以下になった時には2列に変更」などといった指定を複数できる setting が用意されてあり、重宝しそうです。


$('.slick-3').slick({
  responsive: [
    {
      breakpoint: 959,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
      }
    },
    {
      breakpoint: 768,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
      }
    },
    {
      breakpoint: 470,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
      }
    }
  ]
});

その他

タブ切り替え機能を、用意されている setting ですぐできます。( asNavFor )

スライドさせる列に、div などではなく、いきなり img 要素を指定すると、妙な動きがある気がするので、 div の方がよさそう。どうせだから .slick-slide というデフォクラス名つけておくとロード時の崩れ防止になる様子。

クリッカブルマップがrwdImageMapsで消える|動かなくなる場合がある件

こんにちは、システムの渋谷です。
画像の一部分の領域からリンクを張る、クリッカブルマップという便利な機能があるのですが、レスポンシブで画像のサイズが変わってもリンクの領域は自動的に変わらないため、ブラウザのサイズ変更に応じてリンクの領域をjavascriptで変えてあげる必要があります。

その作業を簡単に行ってくれるResponsive Image Maps jQuery Pluginという著名なjQuery Pluginがあるので、通常これを使ってクリッカブルマップのレスポンシブ対応を実現しています。

使い方も簡単で、「jquery.rwdImageMaps.min.js」を読み込んで

$(‘img[usemap]’).rwdImageMaps();

とするだけでOK!
まったく簡単だ!

と思ってたら、なぜかクリッカブルマップが正常に動いていない案件が……

やせいの バグが とびだしてきた!

症状としては、

  • タブを使って複数のクリッカブルマップを切り替える仕様
  • クリッカブルマップを切り替えるとリンク領域が消えている
  • ブラウザサイズを変更するとなぜか復活する

いろいろ適当にいじってみても正常に動作しないので、泣きながら(というほどでもないですが)ソースを読んでみました。

画像ロード時にimg要素の大きさを取得して、それをもとにレスポンシブで変更された画像の大きさでのリンク領域の計算を行っているようです。

つまり…タブで切り替える仕様などで、rwdImageMaps()実行時にクリッカブルマップが非表示の状態になっていると画像の幅と高さが「0」とされてしまうので、リンク領域も出なくなってしまう、と。

それで解決方法は?

これを解決するには、画像を表示するタイミングでサイズを取得してあげるようにすればいいのですが、プラグインの中身に手を入れると管理が面倒になるので今回は「ブラウザサイズを変更するとなぜか復活する」点に注目して、タブの切り替え時にresizeイベントを発火させることで解決することができました。

コードとしては、タブ切り替え時のslideDown等の関数のコールバックに

function(){$(window).resize();}

を指定してあげればいいだけです。

rwdImageMaps自体が結構長い間メンテナンスされておらず、最新のjQueryで廃止された関数を使っていたりするのでいろいろ書き換えたいところがあるんですけどね。

ご存知でしたか?Google Map APIの使用にAPI Keyが必須になりました

システム部の鈴木です。

もはやwebサイト制作だけではなく日々の生活に無くてはならなくなったGoogle Map
世界中の人が無料で使えて、これを活用したサービスだって無料で作れる。
当たり前になりすぎてしまいこの恩恵の価値を忘れてしまうくらいでしたが
ここにきて少し動きがあった事、ご存知でしたか?

Google Map API

これを使うと、自分のサイトの中にこんな感じで、沢山の好きなアイコンを並べたり
様々なカスタマイズを加えた独自のマップを作ることができます。

現在のAPIはVer.3 となり、Ver.2 までは煩わしかったAPI Keyが不要になった、ということで制作者にとっては非常にありがたいアップデートになりました。

2016-07-01_21.47.20

ところが、それは突然の出来事でした・・・

Mapが表示されない!?

いつも通りに作ったはずが全く表示されない?
今まで動いていたサイトのコードを流用しているんだから間違ってるはずもないのに?

そこでChromeのデベロッパーツールでコンソールを開くと見慣れないエラーが。。

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

NoAPIKeysエラー?

APIKeyはいらないはず、と思いながら調べたところ、Google が2016年6月22日に以下のようなアナウンスを出していた事が分かりました。

http://googlegeodevelopers.blogspot.jp/2016/06/building-for-scale-updates-to-google.html

これによると6/22より、スタンダードプラン(無料のもの)を使って新しく作成するアプリケーションでは
API Keyが必須になったとあります。

Google developers blog でもそんな事書いていなかった気がするんですが。。

API Keyはどうやって取るの?

まずは予めGoogle アカウントにログインをしておいてください

160701

Google Map API のサイトにある「キーを取得」を選択します

 

160701_02

するとこんな感じのモーダルが表示されるので「続ける」を選択

 

160701_03

今度はGoogle API Console に遷移します。
「プロジェクトを作成」を選択したまま「続行」します。

160701_04

するとこのような「認証情報」という画面が表示されます。

ここでAPI Keyを発行するのですが、とりあえず「作成」します。

 

160701_05

なにやらAPIが発行されたようです。

 

160701_06

まだこの段階では発行されたAPIが使われるサイトのドメインが登録されていません。

作成されたAPIキーの名前を選択してドメインを登録しましょう。

 

160701_07

API Key発行の画面が表示されるので、ここで改めてアプリケーションを作成するサイトのドメインを設定します。
テストサイトと本番サイトがサブドメインでわかれている場合は、サブドメインをワイルドカードにすれば環境ごとにキーを設定する必要が無く便利です。

 

これで、API Keyの準備ができました。

あとはアプリケーション側で、APIのロードをこんな感じで変更します。

変更前
変更後
これで今までどおり、Google Map APIが使用出来るはずです。

前に作ったアプリケーションはどうなるの?

6/22以前にすでに稼働しているアプリケーションは、今のところAPI Keyなしでも動きます。
今のところはAPI Keyをいつまでに付けなければいけない、という事も無さそうです。

しかし今後いつ、今回のように突然の変更があるかは分かりません。

今後はAPI Keyを必須にするという方針に沿って、直せるうちになおした方が良いでしょう。

jQuery 3が来ていますが

Photoshopのアップデートが来て、新機能にテンションが青天井なシステムの渋谷です。
先月開催されたAdobeデジタルフォト&デザインセミナーでは、新機能が「コンテンツに応じた切り抜き」しか紹介されていなかったのですが、それ以外にも細かいところが改善されていて、今回のアップデートはかなり好感触です。

jq

アップデートといえば、今月jQueryの「3」がリリースされていました。
動作が速くなったということで早速新規立ち上げサイトで使ってみたかったのですが、システム部で鈴木さんに相談したところ「初期ロットは不具合が出やすい」ということでもうちょっと枯れるまで待つことになりました。

変更点をかいつまんで

3.x系を入れる準備だけはしておこうということで、とりあえず実験的に2.xで使っていたコードをそのまま動かしたら案の定エラーはいて止まってました。
結構たくさん変更点があるようで、やっぱりこういうのはちゃんと読まないとだめです。

じっくり読んだので、多くのサイトで使っていそうな機能の変更点を2点ほどピックアップしました。

display:noneをhtmlに直接style=”~”の形で書くと.show(),.hide(),.toggle()等で意図した動作にならない

今どきのレスポンシブ対応サイトだとstyle=”display:none”を直接書くようなケースはあまり考えられないのですが、これをインラインで書いてしまうと上書きされず、.show()を使っても表示されないようです。

.load(), .unload(), .error()が削除された

非推奨だったものが削除されたようです。ブラウザからそんな関数知らんと怒られます。
.load()の代わりに.on()を使ってくださいとのこと。

$("#hoge").load(fn);
↓
$("#hoge").on("load", fn);

こんなもの使ってないよー、と思っていたのですが、先人が太古の昔に入れたコードに含まれていました。
文字のサイズを変更してクッキーに保存する機能を標準でいれることが多いのですが、ここでunload()を使って怒られていました。

当面はjQuery2を使っていくものの

新規サイト立ち上げの際は、いつjQuery3に移行しても良いように古いコードは使わないよう書き換えていきたいです。

WebGLの時代が来てる(?)

Flash?まぁ…あいつはいいやつだったよ

よくゲーム系の案件をやらせてもらえることの多い渋谷です。

先日、以前Flashで作成した3Dのすごろく(http://ja-dosanko.jp/agri/sugoroku/index.php)をスマホに対応できませんか?という質問をいただいて、ハタと気づいてみればFlashが完全に死んでしまったのでブラウザで3Dをするなら、もうWebGLでやるしかない時代になっていました。

時代が来たと言っても、IE9が未対応でIE11では動作が重いということもあって、最低でもIE9が退場してくれないと「WebGLおすすめです!」と言い出しにくい状況ではありますが。

Internet Explorer 10まで ×
Internet Explorer 11
Microsoft Edge
Google Chrome
Mozilla Firefox
Safari

WebGLで何ができるのか

OpenGL ES 2.0の機能を使ってブラウザに3DCGを描画することができます。
簡単に言うとスマホ用CGとだいたい同じ程度のものを表示できる感じです。

どうやって表示させる?

直でWebGLを叩いてもいいのですが、面倒なコードを山ほど書かなくてはいけないので、そういった作業を簡略化して簡単に3Dを表示してくれるライブラリを使うのが一般的なようです。
有名どころはthree.jsでしょうか?

ちょっとthree.js触って手持ちのモデルを表示させてみます。

three

……ファイルが読み込めないなどのトラブルが多発して、ようやく表示できたのがこれだよ!
法線のフォーマットがおかしくなっているのか正常にライティングが行われてません!

メジャーなファイルフォーマットだと、逆にソフトごとに方言が発生したり、開発元が毎年フォーマットを改定するという所業のせいで、よほど頻繁に更新されるライブラリでないかぎり避けられない問題だったりします。

サンプルプログラムを書き換えるなり、古いフォーマットで書き出し直したりすればうまくいくのかもしれませんが、プログラマは車輪の再開発が大好きなのでパーサーあたりから作りたくなってしまって危険なので泣く泣く諦めます!くやしい!

別の(もっと簡単そうな)方法

最近はやりのゲームを作るためのソフトのいくつかがWebGLに書き出す機能を持っているのでそれに頼りましょう…

代表的なところではUnityUnrealEngineが挙げられますが、渋谷がUnity派のため、ここではUnityでのWebGL制作事例を取り上げたいと思います。

(次回UnityでWebGL編に続く)

【制作事例】ペッサリー情報サイト

 
ふだん病院や、クリニックなどのホームページを作らせてもらうことが多い弊社ですが、
今回は少し珍しい事例で、医療器具(ペッサリー)の情報サイトを制作しました。

「知ろう!ペッサリーのこと」
http://pessary-info.jp
img_pessary

PC/スマートフォンに対応しています
 

ペッサリーと言うと一般的には避妊具のイメージがあるかもしれませんが、
現在の主な使われ方は、子宮脱などの骨盤臓器脱の治療です。

患者さまはもちろん、医療関係者にも
ペッサリー(およびリングペッサリー)について正しい知識と理解をもってもらえるよう
情報発信をしていきたい、という目的で
企画の初期段階からお話をいただき、
弊社で、わかりやすいサイトタイトルやドメイン名も提案させていただきました。
 

掲載されている情報はまだ多いとはいえませんが、
サイト公開後も、少しずつ追加更新しています。
スマートフォン版では
Sidr.jsというプラグインを利用して、
横からスライドしてくるメニューを作成しました。

img_sidr

Sidr.js は特に難しい設定もないので、
CSSをちょこっと上書きした程度で、基本的にはそのままで使用できました。

最新版(v1.2.1)は、Androidで「子要素の最初のリンクURLに勝手に遷移してしまう」
というバグがあるようで、
少し古いバージョン(v1.1.1)を使っています。
 

【制作事例】HTML5によるアニメーションとゲーム

昨年11月にJAセレサ川崎様のHPリニューアルの制作をさせていただきました。
PC/スマートフォンに対応しています。

セレサアニメ

http://www.jaceresa.or.jp/
PC版のトップページのメインビジュアルは
川崎の臨海部〜都市〜里山を気球でめぐる楽しいアニメーションになっています。
ポイントは多重スクロールによる奥行き感と、それがきちんとループでつながっている点です。
気球も動かせます!

 

また、せっかくリニューアルするなら、利用者が楽しめるようなコンテンツを作りたい、というご要望があったので
同じイラストを利用して、オリジナルゲームの制作をご提案しました。

game02_ol
「旬の野菜をキャッチ!GO!GO!CERESA!」
http://www.jaceresa.or.jp/game/

飛んでくる野菜を時間内にできるだけ多くキャッチする!という単純なゲームですが、
季節によって高得点のアイテムが変わったり、ハイスコアランキングがあったりします。
スマホ版もあるので遊んでみてください。

 

何年か前だと、Flashで制作するところですが、
HTML/CANVAS/Javascriptでの制作となるとちょっと手間がかかります。
最近は逆に、ホームページ内でこういったコンテンツを見かける機会が減ったかもしれないですね。

javascriptでphpのincludeみたいな事をしてみる

システム部の鈴木です。
年度末で弊社も大忙しですが、小ネタを一つ。

phpとかですと共通のヘッダやフッタなどを共通化するというのは良くありますが、
それをJavaScriptでやってみたいと思います。

仕様

  • 共通ファイルのhtmlを作成、部品毎に<!–inc_****–><!–/inc_****–>で囲んでおく
  • ajaxで共通ファイルをロード
  • 読み取る側のhtmlでは、<!–inc_****–><!–/inc_****–> の **** 部分を指定して表示

共通ファイルのhtml

例えば幾つかのリストがあって、複数のページで使いまわしたいとします。
それを共通のファイルにぶちこんでおきます。

<br />
&lt;!&#8211;inc_lsit1&#8211;&gt;<br />
  &lt;ul&gt;<br />
    &lt;li&gt;てすと1&lt;/li&gt;<br />
    &lt;li&gt;てすと1&lt;/li&gt;<br />
  &lt;/ul&gt;<br />
&lt;!&#8211;/inc_lsit1&#8211;&gt;<br />
&lt;!&#8211;inc_lsit2&#8211;&gt;<br />
  &lt;ul&gt;<br />
    &lt;li&gt;てすと2&lt;/li&gt;<br />
    &lt;li&gt;てすと2&lt;/li&gt;<br />
  &lt;/ul&gt;<br />
&lt;!&#8211;/inc_lsit2&#8211;&gt;<br />

javascript

include.js とかで保存しときます
共通ファイルのURLは今回は決め打ちですが、共通ファイルが多様でない想定のものなので決め打ちで。

<br />
$(function(){<br />
  var tmp = $.ajax({<br />
    url: &#8216;/path/to/include.html&#8217;,<br />
    cache: false,<br />
    async: false<br />
  }).responseText;</p>
<p>  var target = $(&#8216;[id^=inc_]&#8217;);</p>
<p>  jQuery.each(target, function() {<br />
    var include = $(this).attr(&#8216;id&#8217;);<br />
    var reg = new RegExp(&#8216;&lt;\!&#8211;&#8216;+include+&#8217;&#8211;&gt;([\n\r]|.)*&lt;\!&#8211;\/&#8217;+include+&#8217;&#8211;&gt;&#8217;);<br />
    var html = tmp.match(reg);<br />
    $(this).html(html[0].replace(reg, &#8221;));<br />
  });<br />
});<br />

読み取る側のhtml

include.js をロードし、読み取りたい部分をidで指定します
以下の例では共通ファイルから<!–inc_list1–><!–/inc_list1–>の範囲だけを抜き出して表示させます

<br />
&lt;script src=&quot;include.js&quot;&gt;&lt;/script&gt;<br />
&lt;div id=&quot;list1&quot;&gt;&lt;/div&gt;<br />

以上です。

今回のように特定のタグ~特定のタグのような範囲を抜く場合は最短マッチを使います。
さらに今回は複数行にマッチさせています。
加えてマッチさせる条件に変数を使いたいので RegExp オブジェクトでパターンを作成してます。
該当部分はここですね。

<br />
    var reg = new RegExp(&#8216;&lt;\!&#8211;&#8216;+include+&#8217;&#8211;&gt;([\n\r]|.)*&lt;\!&#8211;\/&#8217;+include+&#8217;&#8211;&gt;&#8217;);<br />
    var html = tmp.match(reg);<br />

また読み込む側のページで何箇所か抜き出したい、今回の例ならlist1もlist2も表示させたい場合もあると思うので
そのために $(‘[id^=inc_]’) でページ内の表示させたい部分をまとめて拾って、jQuery.each() で順に処理させてます。

いわゆる共通化が目的ならphpが使えればもちろんその方が簡単なのですが、
staticページで作っててmod_rewriteも使えないなど制約があるときにはこんな方法もあります、という小ネタでした。

またはちょっとしたスクレイピングをささっとやりたい場合に使えるかもしれないですね。

Javascriptで画像の色を変えるには

WEBディレクターの平井です。
 
仕事の波ってありますよね。弊社は2〜3月が繁忙期になるタイプの制作会社でして、
スケジュール表とにらめっこの毎日です。

 
さて今回は、

こういう画像があったとして、
これの色をカラフルに変化させたい場合にどうしましょう、というお話です。

 

サンプル

 

Flashでもなく、CanvasやSVGでもなく、GIFアニメーションでもなく、
れっきとしたJavascript/jQueryなのですが、そんなことできるのでしょうか。

 

 

 $(function(){<br />
  var i = 0, j = 0;<br />
  function changeColor(){<br />
    i += 5;<br />
    j += 3;<br />
    if(i&gt;=360) i=0;<br />
	if(j&gt;=360) j=0;<br />
    var colorR = Math.abs(Math.round(Math.cos(i*Math.PI/180)*128));<br />
    var colorG = Math.abs(Math.round(Math.cos(j*Math.PI/180)*128));<br />
    $(&#8216;#badge&#8217;).css(&quot;background-color&quot;,&quot;rgb(&quot;+colorR+&quot;,&quot;+colorG+&quot;,64)&quot;)<br />
  }<br />
  $(&#8216;#badge&#8217;).fadeIn();<br />
  setInterval(changeColor,70);<br />
});

 
 …タネ明かしをすると、白い透過PNGを置いて、後ろにあるdivの背景色をcssで変えているだけです。

 

 

単純ですね。
でも発想の転換、ということで、こういうのを選択肢として思いつけるように頭を柔らかくしておきたいですね。

それでは。

IE11でJavaScriptやjqueryのコードが動かなくなった場合の緊急対処法

IE11がWindows7などでも使えるようになって、早2ヶ月を過ぎようとしております。

ちらほらと今迄動いていたJSのプログラムが動かない・動作が不安定など色々と問題が発生しているようですが、みなさんはいかがでしょうか。

特にIE11からユーザーエージェントも変更となりUAでプログラムのフローを制御している場合などは必ず問題が発生するのではないでしょうか。

ロジックもIE11からIE10からかなり変わっておりjavascriptの動作に関しても大幅に変わっています。

IE11の大きな変更点としてまとめると

1 ユーザーエージェントの変更

2 JavaScriptで取得可能なブラウザー名の変更

3 ドキュメントモード(描画エンジン)の変更

ではないでしょうか。

Continue reading