Google Chrome11の正式版がリリースされたわけですが、音声入力APIに対応したようです。 音声入力APIはフォームの入力を音声から取得してテキストに変換してくれるAPIです。 HTML Speech Input API Specification 使い方は超かんたん。speech属性をinput要素に指定するだけ。chrome11ではx-webkitっていうprefixつかないとダメっぽい。こんな感じ。 <input type="text" speech x-webkit-speech> 対応してるブラウザだったらテキストボックスにマイクのアイコンがでてると思うのでクリックすると音声で入力できます。 あと、言語をlang属性で指定できる模様。 <input type="text" speech x-webkit-speech lang="en"> ちなみにGoogle検索とかG

ドットインストール代表のライフハックブログ

この記事で取り上げているスマートフォンサイトの「BEFORE & AFTER」を以下の記事で紹介しています。合わせてご覧ください。 日本のスマホサイトは2年間でこんなに変わった iPhone、Androidの普及を背景に、スマートフォンのブラウザー向けにコンテンツや表示を最適化した「スマートフォンサイト」（スマホサイト）を開設する企業が増えている。当初はiPhone（iOS）の標準UIに倣った画一的なデザインが多かったが、最近では独特のレイアウトや斬新な色使いの個性的なスマートフォンサイトも増えてきた。 好評だった前編に引き続き、Web制作者が見ておきたいスマートフォンサイト（日本語／企業サイト限定）を業種別に分類して紹介する。スマートフォンサイトの制作に入る前にチェックしておこう。

Google Apps Scriptが普通のGoogleアカウントでも使えることを知ったので、試しに問い合わせフォームをつくってみました。 フォームで氏名、メールアドレス、件名、本文を入力してもらい、お問い合わせが送信されると指定したアドレスに問い合わせメールが届くという簡単なものです(メール自体はスプレッドシートの「通知」 > 「ユーザーがフォームを送信したとき」にチェック で届きますが、「フォームが送信されました」というメッセージだけで内容は含まれていないので内容を含めるためにGoogle Apps Scriptを使いました)。 作成する手順は下記です。 フォームを作成する Googleドキュメントの「新規作成」 > 「フォーム」でフォームの編集画面を開く 「氏名」「メールアドレス」「件名」をテキスト形式で、「本文」を段落テキスト形式で作成 必要なら「その他の操作」 > 「確認を編集」

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

Androidの開発してると、各デバイスのディスプレイサイズとかモデル名を気にしなきゃいけない時って言うのがちょくちょくある。 そんなとき、毎回実機で、、、というのはあまりにも効率がわるすぎ。どっか一箇所に情報集めればいいんじゃないかな、、、 ということで各デバイスの情報をシェアするアプリ「Android Device Info Share」をリリースしました！ 起動時に自機の情報をサーバにアップし、サーバにアップされた情報は全デバイスからブラウズすることが出来ます。 しばらく野良で様子を見てMarketに上げたいと思ってるので色んな端末情報をシェアしてもらえると嬉しいです！ 5/4 update Marketにアップしました。 https://market.android.com/details?id=com.itog_lab.android.adis 野良の場合はこちらのリンクから最新

iPhoneやiPadなど人気のタッチデバイス に対応させる事が最近では大きな課題 の一つでもあり、その方法としてライブラリ やツールを使う方法など様々です。WPも 多くの方法がありますが、今日のテーマは 既に最適化されたフレームワークになります。 css3のメディアクエリで様々なデバイスでも美しいレイアウトを保てるようにされているWPテーマのフレームワーク。HTML5を採用しています。 いままでも何度かこの手のものをご紹介してきましたが、選択肢の一つとして。何をもって最適化なのかは意見が分かれそうですので疑問がありましたらデモで確認してみてください。 iPhone、iPadに限らず、様々な環境で見やすいレイアウトを維持します。テーマ作成用のフレームワークとしてなかなか良さそうですよ。 フレームワークらしくシンプルに Starkersほどではありませんが、これといった装飾は一切されていませ

ページを下に進むと現れて、クリックするとページ上部までスクロールするスクリプトを紹介します。結構ありがちですが、さりげなくCSS3を使っているところや、現れるタイミングやスクロールの早さなどカスタマイズしやすそうなところがおすすめポイントです。 Animated Scroll to Top - web designer wall ソースもダウンロードできるようになっているので、カスタマイズできそうなところを簡単に説明していきます。 次にjavascriptのところを。jQueryをGoogleから読み込んで、以下の部分を記述しています。 <script> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(win

twitter facebook hatena google pocket あとどのくらい時間が残っているのか、図にしてあるとわかりやすいですよね。 Pietimer jQuery Pluginは、それを実現できるjQueryプラグインです。 sponsors 使用方法 Pietimer jQuery Pluginからファイルをダウンロード。 <script src="jquery-1.5.1.min.js" type="text/javascript"></script> <script src="jquery.pietimer.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $('#id名').pietim

「iPadが薄くて軽くなったら買うね」と言っておきながらiPad2を傍観しているminamiです。 今回は便利なjQueryのプラグインの紹介です。 Ajaxでも「進む」「戻る」ボタンを使いたい Ajaxを利用して、ページ遷移することなくコンテンツを展開するWebページも増えてきていると思いますが、URLが遷移しないので、ブラウザの「進む」「戻る」ボタンを使ってさかのぼることができないのがネックです。 そこで最近よく見かける手法が、URL中の"#"以下の文字列を元にページの情報を表示する方法です。TwitterのPCページなどでも取り入れられています。ちなみにこの方法の是非についてもいろいろと議論があるようですが（主に検索エンジン対策）、そこは割愛します・・・ jQuery hashchange eventを使う jQuery hashchange eventは、jQueryのプラグインと

wonderflは、サイト上でFlashをつくることのできるサービス。 通常Flashをつくるためには、Flash IDEやFlex、FlashDevelop等といったツールを使って、コードを書き、コンパイルする必要がありますが、wonderflでは、サイトにあるフォームにActionscript3のコードを書けば、サーバサイドでコンパイルを行えます。 つまり、ブラウザさえあれば、Flashをつくれます。コンパイル結果はサイト上に表示され、作成されたFlash（swf）はページ上に自動的に表示されるので、完成したFlashをリアルタイムに見ながらコードを書くことができます。 ※APIとして、はてな OpenIDを使用してネットにさえつながれば、誰もがFlashクリエイターになれます。世界中のFlashクリエイターがユーザーになるwonderflは、 文字通り、世界のFlash図鑑となってい

SVG女子で盛り上がっている中、空気を読まずにjQuery UIで入力補完ウィジェットを作りました。 候補リストを表示する機能は無く、FirebugのCSS編集のようなシンプルなものを目指しました。 ※ダウンロードが機能しないブラウザの場合、ソースをコピペして下さい。 /* * jQuery UI Complement * * Depends: * jquery.ui.widget.js */ ;(function($) { $.widget('ui.complement', { options: { source: [], delimiter: null }, dataKey: 'ui-complement-data', _create: function() { if (!this.element.is(':text')) return; var self = this, upDown

配列に追加するのは []+ でやってます。 （比は文字列の量に対して一次関数的ではないかもしれませんが、まあ許してください。） また意外な結果が。IE9で配列に追加するのはpush()より[]+の方が数%程遅かったので、それが影響しているのでしょうか？ + : join() の所要時間比を以下に示します。（+を100とする） Firefox3.6 ... 100 : 71 Chrome10 ... 100 : 76 IE8 ... 100 : 50 IE9 ... 100 : 201 ← ！？ // 演算子+=で連結して代入 $('#plus').click(function(event) { var times = getTimes(); var str = ''; var d = new Date(); // 試験実施 for (var i = 0; i < times; i++) {

Tim Bray氏のブログ記事を解説したものです。Tim Bray氏はXMLの生みの親であり、最近はGoogle Developer AdvocateとしてAndroidの普及に務めています。Twitterをはじめ、最近のWebサービスにて「twitter.com/#!/timbray」のようにURLに「#!」というhash-bang（shebang）が含まれるのをよく目にしますが、Tim氏はこの流行に批判の意を示しています。 hash-bangを含むURLはAjaxを利用するために考えられたしくみです。#以降は単なるフラグメントとして処理されるため、サーバは#より前のURLを解釈しコンテンツを出力します。そしてブラウザにてJavaScriptが#以降を解釈し、以降のパスに相当するコンテンツをAjaxにて取得しコンテンツを書き換えます。このしくみができた背景は、Ajax後のコンテンツをSE

wonderflは、サイト上でFlashをつくることのできるサービス。 通常Flashをつくるためには、Flash IDEやFlex、FlashDevelop等といったツールを使って、コードを書き、コンパイルする必要がありますが、wonderflでは、サイトにあるフォームにActionscript3のコードを書けば、サーバサイドでコンパイルを行えます。 つまり、ブラウザさえあれば、Flashをつくれます。コンパイル結果はサイト上に表示され、作成されたFlash（swf）はページ上に自動的に表示されるので、完成したFlashをリアルタイムに見ながらコードを書くことができます。 ※APIとして、はてな OpenIDを使用してネットにさえつながれば、誰もがFlashクリエイターになれます。世界中のFlashクリエイターがユーザーになるwonderflは、 文字通り、世界のFlash図鑑となってい