タグ

ブックマーク / www.codegrid.net (7)

  • Web Speech APIの実装 - Speech Synthesis API | CodeGrid

    Web Speech APIの実装 前編 Speech Synthesis API 指定テキストを音声再生させることができる、Speech Synthesis APIについて紹介します。音声ファイルなどを用意せずとも手軽に扱えるメリットを活かした利用が考えられます。 はじめに Web Speech APIは、W3C Community Final Specification Agreement(FSA)の元、Speech APIコミニュティグループにより公開されている仕様で、Speech Synthesis API音声合成)とSpeech Recognition API音声認識)の2つのAPI仕様から構成されています。これらの仕様はW3Cの正式なワーキンググループの作業として策定されてるわけでなく、コミュニティグループによるレポートという位置付けです。 今回は、音声ファイルを用意せずと

    Web Speech APIの実装 - Speech Synthesis API | CodeGrid
  • 静的HTMLのためのテンプレートエンジン - 共通部分が多いHTML | CodeGrid

    静的HTMLのためのテンプレートエンジン 第1回 共通部分が多いHTML 共通部分が多いHTMLを効率よく作るには、さまざまな手法が考えられます。このシリーズでは、テンプレートエンジンを使用してHTMLを生成するという手法を取り上げ、解説していきます。 はじめに ピクセルグリッドでは、企業サイトのリニューアル案件やWebアプリケーションのフロント側の制作が主になっています。中でも、リニューアル案件では、ページの量産は行わず、量産のもととなるページのHTMLを作成しています。量産は行いませんが、サイトの規模によっては、それなりの量のHTMLを作成していく必要があります。 最近関わった案件ではPC用40ページとSP用40ページ、合計80ページを作成する必要がありました。それらのHTMLには、ヘッダーやフッターであったり、サイドバーであったりと、共通する部分が多く存在します。筆者はその80ページ

    静的HTMLのためのテンプレートエンジン - 共通部分が多いHTML | CodeGrid
    kathew
    kathew 2017/10/16
    各手法について細かいまとめ。いずれも一長一短があってコレという解がない。ローカルでインクルードするのは面白い(環境構築を要するのでこちらも最適解ではない)
  • z-index再入門 | 第1回 z-indexの仕組み

    次のようなケースでは、冒頭のサンプルのような意図しない重なりになる可能性が高いため注意が必要です。 positionプロパティの値をrelative、absoluteにし、かつz-indexの値をauto以外の整数値にしたとき positionプロパティの値をfixed、stickyにしたとき なぜなら、上記の条件下では、スタック文脈というものが形成されるからです。次に、スタック文脈を解説します。 スタック文脈とスタックレベル スタック文脈(stacking contexts)、スタックレベル(stack level)という概念は、z-indexを扱う上でとても重要なものです。 スタック文脈 スタック文脈とは、ある条件を満たした要素によって形成される階層構造(文脈)のことです。 スタック文脈を形成する条件は前述した通りですが、例えば、position: absoluteとz-indexに整

    z-index再入門 | 第1回 z-indexの仕組み
  • Webアプリ構築のためのBackbone.js入門 | CodeGrid

    Backbone.jsという、中〜大規模なWebアプリ構築のためのJavaScriptのライブラリを解説します。その機能、使いどころ、Backbone.jsを用いたアプリケーション設計方法が理解できます。

    Webアプリ構築のためのBackbone.js入門 | CodeGrid
  • 快適アプリ開発Backbone.Marionette | 第1回 Backbone.Marionetteとは

    それぞれ、このシリーズの後続の回で詳しく触れていきますが、Application、AppRouter、ControllerはViewやModelの間を取り持つ機能を担っています。ItemView、CollecttonView、CompositeView、Region、Layoutはそれぞれ異なった役割で、View周りのコーディングに役立つ機能を持っています。 Marionette.jsにできること Marionette.jsから得られる恩恵は大小さまざまで、細かいものを挙げていくときりがないほどですが、大きなものを挙げるとすれば、次のような点があります。 モジュール化のサポート 開発者が書かなければならないコード量の減少 機能の部分的な利用 モジュール化のサポート Marionette.jsの機能の中で大きなものとして、モジュール化のサポートがあります。モジュール化というのは、ある機能を表

    快適アプリ開発Backbone.Marionette | 第1回 Backbone.Marionetteとは
  • jQuery deferredの使い方 | 前編 deferredの基本

    jQuery deferredの使い方 前編 deferredの基 jQuery deferredをなんとなく知っているが使い方がよくわからない人のために短期シリーズでおさらいをします。第1回目は非同期処理の概念からdeferredの基機能までをおさえます。 なぜ、今、jQuery deferred? この短期シリーズでは、2回に分けてjQuery deferredについて解説します。 jQuery deferredは、jQuery1.5で追加された機能であり、特に新しいものではありません。 しかしながら、私が昔書いたjQuery deferredに関するブログ記事をブックマークする人が、いまだにちょこちょこいるのが見受けられるのです。 もしかして、deferredの存在はなんとなく知っているけれど、どのように使ったらいいのかよくわからないという人が多いのかもしれないと思い、改めてまと

    jQuery deferredの使い方 | 前編 deferredの基本
  • 現場で使えるgulp入門 | 第1回 gulpとは何か

    現場で使えるgulp入門 第1回 gulpとは何か さまざまな作業を自動化するビルドシステムgulpの基礎を解説します。第1回目は、gulpとは何か? 自動化のメリットはどこにあるのか概観。インストールから簡単なタスクを走らせてみます。 はじめに このシリーズでは、JavaScriptで書かれたビルドシステムであるgulp(ガルプ)について、導入から使い方など、基的な部分を解説します。 なお、記事執筆時点のgulpのバージョンは3.8.7です。 第1回目では、まず、なぜgulpのようなツールが必要なのか、ツールの背景に触れます。さらにgulpの概要と、環境設定を中心に解説します。 gulpとは gulpはNode.jsをベースとしたビルドシステムヘルパーです。以前CodeGridでも紹介したGruntと似た目的を持って作られたツールで、gulpを使えばさまざまな作業を自動化することができ

    現場で使えるgulp入門 | 第1回 gulpとは何か
  • 1