Webブラウザ、それもクライアントサイドだけで実現するテキストの音声読み上げ·speak.js MOONGIFT
speak.jsはHTML5を使ってクライアントサイドだけでテキスト音声読み上げを実現するJavaScriptライブラリです。 speak.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。コンピュータの世界で常に望まれてきたのがテキストと音声の融合です。人が話せば音声を解析してテキストにし、逆にテキストを書けばコンピュータがしゃべるといった具合です。 幾つかのパラメータがある そうした技術はOSレベルで実現されていますが、実用的かと言われるとまだまだ遠いかも知れません。さらにAndroidやiOSのようなスマートフォンでも音声による指示が可能になっています。そして今回紹介するspeak.jsはWebベースでテキスト読み上げを実現するライブラリになっています。 Text-to-Speechは昔からありますが、それをWebベースで実現してしまった所がユニークです。さらに
初心者の頃分からなかったWeb用語：フレームワーク … CSSからHTML5、WordPressまで
Webを見ていると、フレームワークっていう言葉をよく目にします。初心者の頃は、このフレームワークっていうものがどんなものなのか、いまいち分かりませんでした。今回は、色んな例でフレームワークというものを紹介してみました。なので、フレームワークって何だろうっていう人向けの記事です！ Web制作関連のブログを読んでいると、ときどきフレームワークっていう言葉がでてきます。例えば CSSのフレームワークとか、HTML5 + CSS3 のフレームワークとか …。 今でこそ、このフレームワークって何だかわかりますが、初心者の頃は、このフレームワークっていう言葉が何だか難しそうで、意味の分からないものでした（私だけ？）。何となく雰囲気で、使ってみると便利なのかなーという感じはしましたけど、そもそもフレームワークという言葉自体の意味が分かっていなかった頃は、使ってみよう！というところまで行きませんでした。
あなたがコーディング初心者を脱する方法
比較的経験の浅めの人のHTMLとCSSコーディングを見ることが増えたのですが、その際にこうしたほうが良いかなーと思う箇所が共通してたりするので、まとめてみました。 ただ以下にあげる例は、状況によっては使わないといけなかったりするので絶対ではありません。そう絶対ではありません。 floatを覆っている要素の高さをだす 要素をfloatすると、それを覆っている要素の高さがなくなります。その高さをだす場合は以下のような方法をとります。 親要素にoverflow: hidden;を指定する 親要素にclearFixを使う 強引にheightで高さをだしている場合をよく見るのですが、その方法だと中の要素が変わるたびに指定をしなおさないといけなくなりますので、height以外の方法をとるのがオススメです。 floatを解除する方法のまとめ: 小粋空間 floatはclearする 先ほどのclearFi
Webサイト高速化に必要なHTTPの仕組みを理解する （1/4）：CodeZine
はじめに こんにちは、クラスメソッド株式会社でWebを担当している野中です。これから身につけるWebサイト高速化テクニック第2回目です。 第1回の「Webサイト高速化対策の現状」は読んでいただけましたか？「Webサイト高速化対策の現状」では高速化対策がなぜ必要なのかを紹介しているので、この回を読む前にぜひ読んでおいてください。 今回は、Webサイトの高速化に大きく関係するHTTPについて復習したいと思います。高速化対策と言ってもWebサイトが遅延する原因はさまざまです。 読み込むファイル数が多いことやサーバー側の処理に時間がかかっている、またはエンドユーザーが利用しているネットワークが原因かもしれません。 ところが原因を探っていくと、Webサイトが遅くなってしまう要因の多くにHTTPが関係しています。 実際の高速化手法も大事ですが、事前知識としてHTTPについて知っておきましょう。 対象読
http://inputxoutput.com/html-doctype/
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
いまさら聞けないHTML5 Canvasの使い方
Flashになじみのある人がHTML5でまず興味を持つのが、アニメーションやモーションなどの表現力ではないでしょうか？ 私がFlashに興味を持ち、虜になったきっかけも、モーションの気持ちよさやデザイン性、インタラクティブな表現力でした。 今回は基本的なモノ(object)を動かすための準備として、矩形や円を描画してみましょう。HTML5では、canvas要素とJavaScriptのCanvas APIによって、ビットマップ画像を描画できます。 Canvasで画像を描画するには、HTMLでキャンバス領域を定義します。 ■サンプル1[01.html] <body> <canvas id ="cvs1" width="150" height="150"></canvas> <script type="text/javascript" src="js/01.js"></script> </bod
そろそろHTML5始めてみませんか？
HTML5（※）が何かと話題です。「Flash vs HTML5」のような対立構図で取り上げた記事や議論もよく見かけましたが、新しい技術に飛びつけばいいのではなく、ターゲットユーザーのブラウザー環境や最適な表現技術、パフォーマンスや互換性を考慮して使い分けるべきでしょう。 とはいえ、最近ではiOSやソーシャルメディアの普及などで、JavaScriptやCSS3使ったHTMLベースでの開発に対する要望も増えています。従来のWebサイトでは主にPCでの閲覧を中心に考えていましたが、現在ではスマートフォンやタブレットなどさまざまな端末での閲覧を想定した、より柔軟な対応がクリエイターに求められています。 スマートフォンやタブレットだけではありません。Retinaディスプレイを搭載したMacBook Proが発売されたり、ネット接続を前提としたスマートTVが注目されたり、デバイスも日々進化を遂げてい
Best Practices for Speeding Up Your Web Site - Yahoo Developer Network
Best Practices for Speeding Up Your Web Site The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices divided into 7 categories. Minimize HTTP Requests tag: content 80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, styleshee
イマドキのIDE事情(128) 「Codiqa」でjQuery MobileのデザインをWYSIWYG編集!
jQuery MobileとCodiqa jQuery Mobileは、スマートフォン向けのWebアプリケーションを作成するためのUIフレームワーク。iPhoneやAndroidをはじめ、様々なモバイルデバイスに対応している。HTMLに簡単な記述を追加するだけで、ネイティブアプリケーションのようなリッチなユーザインタフェースを作成できるのが特徴だ。 Codiqaは、このjQuery Mobileを使用したWebアプリケーションのデザインを、Webブラウザ上でWYSIWYG編集可能なサービスを提供している。アカウントを作成することで無償で利用可能で、有償のプレミアムアカウントにアップグレードすると作成したアプリケーションの保存や共有、画像のアップロードなどが可能になる (プロジェクト数などに応じて$10/月と$30/月のプランが用意されている)。 Codiqaを試してみよう Codiqaを利
スマホアプリをHTML5＋CSS3＋JSだけで構築しアプリへのコンテンツ配信や解析もできる「App Cloud」をブライトコーブが日本で展開 | Web担当者Forum
ブライトコーブは、クラウドを活用したコンテンツ配信関連のサービスを日本で拡充し、4月12日より販売を開始した。 今回発表されたのは、モバイルアプリ関連と動画関連の2つのクラウド型サービス。 スマホ・タブレット向けアプリをHTML5＋CSS3＋JavaScriptで構築し 管理・配信する「Brightcove App Cloud」アプリ関連では、スマホ・タブレット向けのアプリケーションを構築・管理・配信・更新できるプラットフォーム「Brightcove App Cloud」を日本語版としてサービス開始した。 すでに提供されていた英語版では、米国国務省やFOXニュースなどが利用している。 App Cloudは、iPhone・iPad・Androidなどのスマートフォンやタブレット向けのアプリケーションを企業が提供する際のプラットフォームとなるサービス。アプリケーションの構築や公開、その後の運用
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (2/3)
レスポンシブWebデザインを選択する4つの理由 ではなぜ、海外では レスポンシブWebデザイン が話題になっているのだろうか？ 大きく4つの理由がある。 ワンソースなので画像やテキストの変更などのメンテナンスが容易なこと CSSだけで実装するのでフロントエンドで開発が完結すること 他のデバイスへの拡張性が高いこと スマートフォン非対応のCMSでもCSSの調整だけで対応できること 1つずつ詳しく説明しよう。 1．ワンソースなので画像やテキストの変更などのメンテナンスが容易なこと Webサイトをマルチデバイスに対応させる場合、少し前であれば、iPhone, iPad などのOSやスクリーンサイズごとにキメ細かくデザインを調整したページ（HTML）を用意し、サーバーサイドの技術などを利用して細かく振り分ければよかった。しかし、各社からAndroid端末が次々と発売されている現在は、何パターンのス
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
HTML5に踏み出せない人に捧げる、HTML5を使う10の理由
HTML5、使ってますか？ このサイトも未なのですが、これからHTML5を使い始めるぞっとなる10の理由を紹介します。 Top 10 Reasons to Use HTML5 Right Now [ad#ad-2] 下記は各ポイントを意訳したものです。 10. アクセシビリティ 9. ビデオとオーディオのサポート 8. Doctype 7. よりクリアなコード 6. ストレージ 5. インタラクション 4. ゲームの開発 3. 古いブラウザのサポート 2. スマートフォンへの対応 1. これからはHTML5 10. アクセシビリティ HTML5は「セマンティック」「ARIA」の2つの理由でサイトをアクセシブルにします。header, footer, nav, section, adiseなどのような要素はスクリーンリーダーにもコンテンツに容易にアクセス可能なようにします。また要素にrole
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTMLの知識は必要なし！「Dino」を使えばスマホサイトが誰でも簡単に作れてしまう｜U-NOTE [ユーノート]![HTMLの知識は必要なし！「Dino」を使えばスマホサイトが誰でも簡単に作れてしまう｜U-NOTE [ユーノート]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6683594a0ccbc6923f5ae3801701a22025fab90b/height=288;version=1;width=512/http%3A%2F%2Fimg.u-note.me%2Fnote%2Fcaption%2F47498704.jpg)
_level0 | Kayac Interactive Designer's Blog
screw-axis.com