カテゴリー別アーカイブ: Web Design

エラスティックビデオの実装

エラスティックビデオとは, YouTubeなどの埋め込み動画のサイズをレスポンシブに変化させる実装のことです.

実装はCSSを設定するだけでできるので比較的簡単にできます.

以下のようにHTMLがあるとします.

 <div class="embed-container"><iframe src="//www.youtube.com/embed/dCvuBz1FYWg" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

CSSは以下のように設定します.

.embed-container {
    // for elastic video
    position:relative;
    padding-bottom:56.25%;  // 315 / 560
    height:0px;
    overflow:hidden;

    // for elastic video
    iframe,
    object,
    embed {
        position:absolute;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
    }
}

ポイントは, iframe (, object, embed) のスタイルと, 埋め込み動画のコンテナとなる要素 (.embed-container) の padding-bottomです.
iframe (, object, embed) を上記のように設定することで, ブラウザの幅に応じて埋め込み動画のサイズも変化します.
ただし, これだけだと, 高さが変化しないので, コンテナとなる要素に, padding-bottom を (動画のheight / 動画のwidth) の比率で設定しておきます.

Web Audio API解説サイトのグローバルナビゲーションのリニューアル

Web Audio API解説サイト WEB SOUNDERのグローバルナビゲーションのリニューアルしました.

リニューアルポイントは,

  • テキスト部分を画像ではなくテキストにしてフォントの変更に柔軟に対応できるようにする
  •  画像のRetinaディスプレイ対応

ぱっと見た感じではそんなに変わりませんが…

これでいよいよ, 最終章のデバイス連携の記事を書いていく準備が整いました,

jQuery $(window).innerWidthメソッドの注意点

jQueryの$(window).innerWidthメソッド (とinnerHeightメソッド) はてっきり, window,innerWidth / window.innerHeightプロパティのアクセッサメソッド (ゲッター / セッター) になっていると思っていたのですが, jQueryをのぞいてみると, 実はそうではなく,

document.documentElement.clientWidth;
document.documentElement.clientHeight;

上記2つのプロパティのアクセッサメソッドとなっていました…

レスポンシブサイトを作成しているときに, どうもメディアクエリの幅と$(window).innerWidthメソッドで取得した幅が合致しないのでバグなのかな ? と思っていたのですが, これで解決しました.

ちなみに, メディアクエリの値と合致するのは, window,innerWidth / window.innerHeightプロパティです. したがって, レスポンシブサイトの作成で, JSから画面幅などを取得するときにはjQueryのメソッドではなく, window,innerWidth / window.innerHeightプロパティを利用するようにしましょう.

Photoshop スマートオブジェクトの使いどころ

久々にPhotoshopのこと.

Photoshopにはスマートオブジェクトという機能があってこれがなかなか便利なのです. 使いどころとしては,

  1. 同じデザインのイラストが多い
  2. 写真を変形する
  3. フィルタ (スマートフィルター)
  4. Illustratorのデータを読み込み

1. 同じデザインのイラストが多い

この場合は, 作成したボタンなどをスマートオブジェクトに変換して,  レイヤーを複製することで, 例えばデザインの変更があっても,1つを修正すれば, スマートオブジェクトで複製したレイヤーのものがすべて変更される. これが何気に最もうれしい.

Photoshop スマートオブジェクト
Photoshop スマートオブジェクト

2. 写真を変形する  3. フィルタ (スマートフィルター)

写真はラスタデータなので, そのまま変形 (拡大・縮小や回転) を繰り返すと, 画質がどんどん劣化していく. 同じように, フィルターも何度もフィルタをかけ直したりしていると画質が劣化していく. スマートオブジェクトに変換しておくことによってこの心配がいらなくなる.

Photoshop スマートオブジェクト (スマートフィルタ)
Photoshop スマートオブジェクト (スマートフィルタ)

また, スマートフィルター (スマートオブジェクトにしてフィルターをする) にしておけば, フィルターをレイヤースタイルのように操作することが可能になるので, フィルターの調整はもちろん, フィルタの表示 / 非表示の切り替えが可能になります.

Photoshop スマートフィルタ 操作
Photoshop スマートフィルタ 操作

4. Illustratorのデータを読み込み

「スマートオブジェクトとして開く」で変形やフィルターを繰り返し適用しても画質が劣化しません.

Photoshop スマートオブジェクトとして開く
Photoshop スマートオブジェクトとして開く

ちなみに, スマートオブジェクトを適用せずに変形やフィルター処理をすると元に戻せなくなる処理を破壊編集と呼ぶそうです.

スマートオブジェクトを適用すれば, 元の状態に戻すことが可能になります (非破壊編集).

Googleカスタム検索のフォームをデザインする

Googleのカスタム検索を利用する場合, 一般的には指定された<script>タグと<gcse:search>タグを記述する.

<script>
 (function() {
 var cx = '検索エンジン ID ';
 var gcse = document.createElement('script');
 gcse.type = 'text/javascript';
 gcse.async = true;
 gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
 '//www.google.com/cse/cse.js?cx=' + cx;
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(gcse, s);
 })();
</script>
<gcse:search></gcse:search>

これで, 検索機能はもちろんUI・デザインもそれなりのものなので, 特にカスタマイズしないという場合はこれでOKです.

しかしながら, デザインを大きく変更したい場合, この方法だとJavaScriptによってたくさんのタグやid / class属性が付加されるのでCSSで制御しづらい…

その場合には, こちらのページにあるHTMLフォームを利用します.

<form id="cse-search-box" action="http://google.com/cse">
  <input type="hidden" name="cx" value="YOUR SEARCH ENGINE ID goes here" />
  <input type="hidden" name="ie" value="UTF-8" />
  <input type="text" name="q" size="31" />
  <input type="submit" name="sa" value="Search" />
</form>
<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

“YOUR SEARCH ENGINE ID goes here” の値には, 検索エンジン IDを入力します.

注意点としては, Googleのロゴ画像は必ず表示する必要があるので,

<img src="http://www.google.com/cse/images/google_custom_search_smwide.gif">

は必ず必要です. もしくは, <img>タグの代わりに, <script>タグで読み込んでもOKです.

<script type="text/javascript" src="//www.google.com/cse/brand?form=cse-search-box&lang=en"></script>

<script>タグを利用して画像を読み込んだ場合, 検索キーワードを入力するテキストボックスのプレースホルダーとして利用できます.

Web Audio API 解説サイト レスポンシブレイアウトの変更

Web Audio API 解説サイトのスマートフォン (320px – 767px) / タブレット(768px – 1023px) のナビゲーションを変更しました.

ヘッダーにメニューアイコンを追加して, アイコンをタップするとグローバルナビゲーションが表示されるようにしました.

狭い画面で何を重視して見せる & PCサイトと同じようにユーザビリティを確保する…これは経験とアイデアを磨いていくしかないですね

Photoshop 写真の一部分を選択する

Photoshopで写真の一部分 (オブジェクト) を選択する方法はいくつかありますが, もっとも精彩に選択できる方法は,

  1. マグネットツール or 多角形ツールでおおよそを選択
  2. クイックマスクモードで編集  -> ディテール部分を調整
  3. 画像描画モードで編集

久々に使ったので, 書いておきました.