こんにちは、システムの渋谷です。
画像の一部分の領域からリンクを張る、クリッカブルマップという便利な機能があるのですが、レスポンシブで画像のサイズが変わってもリンクの領域は自動的に変わらないため、ブラウザのサイズ変更に応じてリンクの領域を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で廃止された関数を使っていたりするのでいろいろ書き換えたいところがあるんですけどね。

システム部の鈴木です。

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

Google Map API

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

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

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

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 アカウントにログインをしておいてください

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

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

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

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

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

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

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

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

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

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

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

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

アップデートといえば、今月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に移行しても良いように古いコードは使わないよう書き換えていきたいです。

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

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

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

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

WebGLで何ができるのか

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

どうやって表示させる？

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

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

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

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

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

別の（もっと簡単そうな）方法

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

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

（次回UnityでWebGL編に続く）

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

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

仕様

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

共通ファイルのhtml

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

[html]
<!–inc_lsit1–>
<ul>
<li>てすと1</li>
<li>てすと1</li>
</ul>
<!–/inc_lsit1–>
<!–inc_lsit2–>
<ul>
<li>てすと2</li>
<li>てすと2</li>
</ul>
<!–/inc_lsit2–>
[/html]

javascript

include.js とかで保存しときます
共通ファイルのURLは今回は決め打ちですが、共通ファイルが多様でない想定のものなので決め打ちで。
[javascript]
$(function(){
var tmp = $.ajax({
url: ‘/path/to/include.html’,
cache: false,
async: false
}).responseText;

var target = $(‘[id^=inc_]’);

jQuery.each(target, function() {
var include = $(this).attr(‘id’);
var reg = new RegExp(‘<\!–‘+include+’–>([\n\r]|.)*<\!–\/’+include+’–>’);
var html = tmp.match(reg);
$(this).html(html[0].replace(reg, ”));
});
});
[/javascript]

読み取る側のhtml

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

以上です。

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

[javascript]
var reg = new RegExp(‘<\!–‘+include+’–>([\n\r]|.)*<\!–\/’+include+’–>’);
var html = tmp.match(reg);
[/javascript]

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

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

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

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

　
さて今回は、

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

サンプル

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

[php] $(function(){
var i = 0, j = 0;
function changeColor(){
i += 5;
j += 3;
if(i>=360) i=0;
if(j>=360) j=0;
var colorR = Math.abs(Math.round(Math.cos(i*Math.PI/180)*128));
var colorG = Math.abs(Math.round(Math.cos(j*Math.PI/180)*128));
$(‘#badge’).css("background-color","rgb("+colorR+","+colorG+",64)")
}
$(‘#badge’).fadeIn();
setInterval(changeColor,70);
});[/php]

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

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

それでは。

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

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

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

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

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

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

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

３　ドキュメントモード（描画エンジン）の変更

ではないでしょうか。

Continue reading →

現在開発中の自社プロジェクト向けにグラフを出力する箇所が発生しそうだったので、少しばかり調べてみるとFLASHを使わずにグラフを生成できるライブラリーを発見

Flotr2　　ダウンロード先: http://humblesoftware.com/flotr2/

少しいじってみましたが、思いのほか使いやすいです。

何より公式のサンプルが多いので、そのままどおりにコピペして数値をPHPなどで変換してやれば色々できますね。

その上わかりやすいサンプルとなっており、プログラムが苦手なコーダーさんでも対応できそうです。

5角形のチャート式グラフのサンプル

昔はグラフを表示する場合は、ほとんどの場合でFLASHにデータを送りFLASHによって表示させていましたが、ほんと世の中便利になる一方ですね。

ただ　IE11ドキュメントモード：　Edge　の場合で小さな不具合を見つけたのでアップデートを待ちたいです。

ちなみにすでに自社で動いているアクセス解析ツールにも利用できるのではないか！そうすればスマートフォン対応（タブレット含む）も可能だし・・　

今度時間を作って埋め込み実験等やってみたいな。