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に移行しても良いように古いコードは使わないよう書き換えていきたいです。

ウェブアクセシビリティのJIS規格対応

システム部の渡辺です。
ユーザビリティという言葉はよくききますが、
アクセシビリティについて説明するのはなかなか難しいのではないでしょうか。

アクセシビリティといえば高齢者・障がい者の方々を考慮したWEBコンテンツ、
病院サイト、介護老人施設サイトなどを多く扱う弊社では特に気を使う点です。

一般的に制作時に気にする点といえば、

「視力が悪い人が困らないように大きくてわかりやすい色の文字を使う」
「画像の alt 属性を記入する」

このぐらいかと思いますが、
日本で定められているアクセシビリティ規格を正しく守るには、

「音声読み上げを考慮したコーディング」
「キーボードだけで全ての操作を可能にする」
「CSS、Javascript をオフにした状態の対応」

など、普段あまり触れることのない対応も必要になってきます。

公的機関の公式ホームページのウェブアクセシビリティ

厳密にどのように対応すべきか、というところですが、
日本国内では JIS(日本工業規格)の中で規格が定められてます。

名称 JIS X 8341-3
正式名称 高齢者・障害者等配慮設計指針-情報通信における機器,ソフトウェア及びサービス-第3部:ウェブコンテンツ
URL http://waic.jp/docs/jis2016/understanding/201604/

公的機関ではアクセシビリティ対応を試験されています。
「公的機関におけるウェブアクセシビリティ方針策定と試験結果表示の実態調査(2014年11月)」
例えば、東京都では、「東京都公式ホームページ作成に関する統一基準」というものが決まっています。

東京都立○○の公式ホームページなどを制作する場合、上記に注意する必要があります。

JIS X 8341-3対応

JIS X 8341-3対応のサイト制作をする場合は、
サイトを作る前から充分に気をつけたいところです。
正直、JIS X 8341-3対応するつもりでつくっていなかったサイトを、
JIS X 8341-3対応するのは、かなり骨の折れる作業です。

  • デザイン時に気をつける項目
  • コーディング、特にベース部分制作時に気をつける項目
  • コーディング、各ページ固有の制作時に気をつける項目

の3つに分けて、注意したい対応項目をまとめたいと思いますが、
長くなったので次回に!

【MDの夏採用、始めました】

FB

こんにちは。病院チームのTです。
現在、3月4月のどたばたを乗り越え、1年を通して案件が落ち着く時期を迎えています。

いつもは時間を割けられず後回しになっていたところを改修するいいタイミング、ということで、
今回はリクルートページを大幅にリニューアル致しました。

img01

img02

社内の雰囲気をお伝えできれば、ということで社内の写真を多く起用しています。
また、今回の改修で応募フォームを新たに設置しました。
3ステップで簡単に応募できるようになっています。

現在はディレクター、エンジニア、デザイナーを募集中です。
採用を検討している方はこの機会にぜひ、ご覧になってみて下さい。
https://www.medical-design.co.jp/recruit/

[PHP]タイトルや本文に文字数制限して表示する場合に、出来るだけ終了地点を揃える。

タイトルのセンスがなさすぎて辛い…。

うまく伝える魅力的なタイトルが思い浮かびませんでした、システム部のヒライです。
端的に言いますと、WordPress等の記事一覧ページで、タイトルやら本文を省略して表示する場合に、それぞれの終点を揃えたいということです。

mb_substr()を使う。

文字数制限なんかで探しますとmb_substr()という関数が引っかかります。

75文字で省略し、最後に「…」を付けてみます。

mb_substr

 

・・・美しくない。

 

終わりに表示している「…」の位置がずれていてキレイじゃありません。

そんなときはmb_strimwidth()を使います。

こちらも同じく75文字で省略し、最後に「…」を付けてみます。

mb_strimwidth

 

・・・美しい。

 

終わりの「…」の位置が揃っています。大変キレイです。

mb_substr()とmb_strimwidth()の違い。

mb_substr()は全角文字列と半角文字列を判別せず、1文字としてカウントするのに対し、
mb_strimwidth()は全角なら2文字、半角なら1文字としてカウントしてくれるので、終了地点があまりズレないということですね、とても優秀です。

冒頭の話に戻り、例えばWordPress上でタイトルを省略しつつ、且つ終点を揃える場合。

[php]// 第一引数にタイトル、第二に始点(0文字目から)、第三に終点(100バイト分の文字)、第四に終点に付け加える文字列、第五に文字コード
<?php echo mb_strimwidth($post->post_title, 0, 100, "…", "UTF-8"); ?>[/php]

※mb_strimwidthについて詳しく知りたい方はこちらをご覧下さい。

一覧画面上に複数出ているタイトルや本文の終わりを揃えたいとお考えの方、ぜひお試し頂ければと思います。

プログラマのためのthree.jsでの絵作り

03

システムの渋谷です。

three.jsでのモデル描画ができないままだと何か負けた気分だったので、モデル描画サンプルを用意しました。
方言に苦しめられるFBXとかではなく、json形式でデータを書き出したので今回は描画の乱れ等は起きずに済みました。

サンプルはこちら

ステレオカメラが標準で実装されていたので、裸眼立体視にしてみましたが、標準だと画角が小さいせいか効果が弱すぎたのでソース弄って効果を10倍にしています。

サンプルを用意する中で、レンダリング画像が簡単にきれいになるいくつかの抑えておきたい項目を紹介しておきたいと思います。

1.  アンチエイリアス設定

var renderer = new THREE.WebGLRenderer({antialias: true});

レンダラーを初期化するときにantialias: trueを指定しておくと汚いジャギーが消えてくれます。
three.jsのソースを見た限り特に処理の内容が書いていなかったのでブラウザに処理が依存していると思われます。
標準のandroidブラウザでは反映されていませんでした。

2. premultiplied gamma

renderer.gammaInput = true;
renderer.gammaOutput = true;

この2つを指定しておくと光が当たってるところの白とびが抑えられたり、暗すぎるところが明るくなります。

a02

3. HemisphereLight(半球ライト)

lighting

表示したいモデルに当てる光について、屋外を考えた場合

  1. 太陽光
  2. 青空からの環境光
  3. 地面にあたった太陽光の反射

がざっくりあるので、これを用意していきます。

 var directionalLight = new THREE.DirectionalLight(0xfff1d7,0.80);
 directionalLight.position.set(-6, 11, 10);

太陽光は通常の平行光源を使っています。
青空からの青い光と合わせて白になるように若干黄色がかった白を指定しておくといい感じになります。

環境光と地面からの反射は通常はアンビエントライトで我慢するのですが、three.jsではHemisphereLightが用意されているのでこれを使います。

 var hemisphereLight = new THREE.HemisphereLight( 0xd7fbff, 0x7e94a8, 0.7 );
 scene.add( hemisphereLight );

HemisphereLightの第1引数が空の色で、第2引数が地面からの反射の色になります。

反射の色は空の色に合わせたものか、明度を抑えておくと自然な感じに落ち着きます。

a03

というわけである程度見られるレベルにはなったと思うのですが、いかがでしょうか…?

3Dで見せたい商品がある等の場合、写真から3Dモデルが作れる123D Catchmementoなどを組み合わせれば、そう難しくなく実現できそうですよね。