JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
Webブラウザ、それもクライアントサイドだけで実現するテキストの音声読み上げ·speak.js MOONGIFT
speak.jsはHTML5を使ってクライアントサイドだけでテキスト音声読み上げを実現するJavaScriptライブラリです。 speak.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。コンピュータの世界で常に望まれてきたのがテキストと音声の融合です。人が話せば音声を解析してテキストにし、逆にテキストを書けばコンピュータがしゃべるといった具合です。 幾つかのパラメータがある そうした技術はOSレベルで実現されていますが、実用的かと言われるとまだまだ遠いかも知れません。さらにAndroidやiOSのようなスマートフォンでも音声による指示が可能になっています。そして今回紹介するspeak.jsはWebベースでテキスト読み上げを実現するライブラリになっています。 Text-to-Speechは昔からありますが、それをWebベースで実現してしまった所がユニークです。さらに
ハートの絵文字「❤💘💓💔💕💗💝💞」など、さまざまな絵文字の入力方法
さまざまなハートの絵文字「❤💘💓💔💕💗💝💞❣」をはじめ、誕生日やバレンタインなどのイベントの絵文字、野菜・果物・食べ物・飲み物の絵文字、動物・魚・虫・植物の絵文字を紹介します。 絵文字はスマホでもパソコンでも、簡単にコピペで利用できます。 スマホの絵文字がWindowsなどのパソコンでかわいく表示されない、自分のブログを絵文字対応にしたい時には、下記のページを参考にしてください。 ハートや動物など、スマホのかわいい絵文字をパソコンやブログでも表示できるようにする -Emoji One 著作権表示・登録商標記号の絵文字 ハート・スペード・ダイヤ・クローバーなどの絵文字 イベントの絵文字 野菜・果物・食べ物・飲み物の絵文字 動物・魚・虫・植物の絵文字 著作権表示・登録商標記号の絵文字 絵文字 絵文字をコピー 名称
画像を使わずにハートを表示する方法（特殊文字について）＞覚え書き＞お姫様倶楽部Petit
コードの書き方は２パターン。 「&」と「;」で「ワード」を挟む文字実体参照（実体参照） 「&」と「;」で「コード」を挟む数値文字参照（文字参照）。 どっちをつかっても同じ文字が出る（筈）。 ただし閲覧環境（OSやブラウザ、インストールされているフォントセット）によっては表示できないものもあるやもしれぬ。 また、一部のブログや掲示板などでは、未対応だったり使用できないようになっていたりすることもある。 なお、実体表示の場合、「&」と「;」で挟む文字は大文字と小文字を別ものとして扱うので、注意が必要。 例： ♠と表記すると→「♠」が表示されるが、 &Sades;と表記すると→「&Sades;」とそのまま表示される。 †と表記すると「†（短剣符）」が表示され、 ‡と表記すると「‡（二重短剣符）」が表示される。
HTML5ベースのオープンソースなマインドマップ作成ツール「mindmaps」:phpspot開発日誌
mindmaps HTML5ベースのオープンソースなマインドマップ作成ツール「mindmaps」 マインドマップツールも色々ありますが、HTML5ベースで、インタフェースも結構イケてるツールの紹介。ソースのダウンロードも可能です。 項目をマウスオーバーすると赤い丸が出るのでそれをドラッグ＆ドロップでツリーをどんどん広げていけるインタフェースも使いやすいです。 マウスホイールでマインドマップ自体の拡大・縮小が可能で、細かいところにも配慮がされています。 Chromeであればサクサク動いて、本来の目的である思考に集中することができるでしょう。 ツリーの折りたたみなんかもできちゃいます。 ソースはこちらのgithubにてダウンロード可能
Google
世界中のあらゆる情報を検索するためのツールを提供しています。さまざまな検索機能を活用して、お探しの情報を見つけてください。
hij1nx/SugarSkull - GitHub
What? SugarSkull is a client side URL router. It's the smallest amount of glue needed for building dynamic single page applications. Not a jquery plugin, no dependencies. Why? Storing some information about the state of an application within the URL allows the URL of the application to be emailed, bookmarked or copied and pasted. When the URL is visited it restores the state of the application. A
Windows 8では、HTML5とJavaScriptでWindowsアプリを開発可能に
Windows 8がどのようなOSになるのか、マイクロソフトは始めてその詳細を同社のWebサイトの記事「Previewing ‘Windows 8’」で開示し、動画でのデモンストレーションも公表しました。 Previewing ‘Windows 8’: Article by Julie Larson-Green, corporate vice president, Windows Experience. 多くのメディアでは、タイル形式の新しいタッチユーザーインターフェイスに注目していますが、Windows 8の注目すべき特徴の中の1つとして、HTML5とJavaScriptに対応することが明らかにされています。 Web-connected and Web-powered apps built using HTML5 and JavaScript that have access to th
HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。:phpspot開発日誌
HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 2011年05月26日- DESKTOPIFY Aquaron HTML5のデスクトップ通知を簡単に扱えるjqueryプラグイン「desktopify」。 このライブラリを使うことで簡単にjquery風の記法でデスクトップ通知が出来るようです 試しに、入力して送信してみると。 という具合にChromeだと表示されます。 通知していいかどうかも聞かれるのでそこを一度許可すれば、便利な通知として使えます。 LightBox的通知もいいですが、わかりやすさでいえばこちらもいいですね。 関連エントリ JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 ブラウザに分かりやすい通知を送れるスクリプト色々 利用者に対し非常に分か
スマフォ対応の洗練されたUIエレメントがすぐに実装できるCSSとJSの開発キット -Skeleton
Forms -フォーム [ad#ad-2] Skeletonの特徴 スマフォ対応のグリッド Skeltonでは軽量の960pxのグリッドシステムを採用しています。 ブラウザやタブレット、スマートフォンなどスクリーンのサイズが小さくなると、そのサイズに最適なレイアウトに変更します。 Fast to Start 洗練されたベーシックなUIエレメントをあらかじめ用意してあるので、すばやくサイトの制作が始められます。 Style Agnostic SkeltonはUIのフレームワークではありません。最もベーシックなスタイルを提供していますが、あなたの好きなデザインを適用することができる開発キットです。 Skeltonの対応ブラウザ・デバイス Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, I
【レポート】HTML5、日本語で音声入力する方法 | エンタープライズ | マイコミジャーナル
Google Chrome runs web pages and applications with lightning speed. Chrome 11安定版にはスピーチ入力機能が実装されている。input要素の入力に音声を利用できるというもので、Chrome 11以降のバージョンを使っているなら、たとえばGoogle翻訳のページで簡単に試すことができる。Google翻訳の翻訳元言語を「英語」にすると、テキストエリアの右下にマイクのアイコンが表示される。このアイコンをクリックすると音声入力を受け付けるモードに入る。音声は英語に変換され、テキストエリアに表示される。 この機能はinput要素を拡張する形で実装されており、試してみるのに特別なプログラミンは必要ない。「<input x-webkit-speech type="text" />」のように、input要素の属性にHTML5の「x-
iPhoneやiPadでも綺麗なレイアウトで表示されるWebサイトを制作する為のスターターキット・Skeleton
なかなかシンプルで良かったので ご紹介。人気のデバイス、iPhone やiPadで閲覧してもレイアウトを綺麗 に保てるように設計されたWebサイト のスターターキット。内容物はHTML、 CSS、JavaScriptです。 シンプルな構成ですが、欲しい部分は用意してくれている、と言った感じのスターターキット。なかなか気に入ったのでデモを作りました。 HTML+CSSのシンプルなフレームワークです。グリッドレイアウトを使った美しいレイアウトで、Media QueryによるiPhone / iPadでのアクセス時のレイアウトも最適化されており、jQueryで作るタブコンテンツのサンプルコードもあります。 デモ作ったので、宜しければお好きなデバイスでアクセスして見てください。 Sampleサイト※別窓 iPhoneでアクセス iPhoneでアクセス。 ランドスケープ iPadでアクセス iPad
JavaScriptのお勉強をするときの話（環境構築編） - 愛と勇気と缶ビール
この記事は、JavaScriptを勉強して可能なら使えるようになりたいけど、どこからやっていいかよくわからない、という昔の僕みたいな人のためのガイドです。ちなみにいささかCUI寄りです。 初めに断っておきたいのは、僕が多少なりとも真面目にJavaScriptを勉強し始めたのは10ヶ月ほど前のことなので、いわゆるマスター的なヨーダでも何でもなく、未だ途上の何たらだということです。 開発環境を用意する JavaScript入門、みたいな紙媒体やWeb上の記事には、「JavaScriptは基本的にはブラウザ上で動く言語なので、特別な実行環境を用意する必要はありません！楽勝ですね！」みたいなことがよく書いてあるのですが、アホか、という話です。 ブラウザ上で動かす（場合が多い）言語であるからこそ、むしろ実行はめんどくさいです。 「ワイはとにかくDOMが操作できればええんや！言語仕様とかどうでもええわ
【スマホ集中連載 第4回】 "HTML5とCSS3で何ができる？" 〜メリット・デメリットを徹底研究！ : LINE Corporation ディレクターブログ
※この記事はChromeで見るのがおすすめです。 こんにちは。新規開発グループ ディレクター兼マークアップエンジニアの浜です。 スマホ連載の第4回目は、HTML5とCSS3という実装寄りの内容になります。とは言っても難しいコードはあまり出てきません。「HTML5とCSS3で何ができるのか」という事をメインに、知っておくと、構成書を作る時のアイディアベースになったりデザイナー・マークアップエンジニア（コーダー）と打ち合わせをする際に話しやすくなる内容をお送りします。 記事のアウトラインは以下です。 そもそも、HTML5とCSS3ってもう使えるの？ HTML5とCSS3を使うメリットは？ HTML5とCSS3で何ができるの？ そもそも、HTML5とCSS3ってもう使えるの？ 使えます。 （※ここから先は、その根拠について説明します。必要ない方は、次の章に飛んでしまっても構いません） 現在のスマ
［速報］グーグル、Webアプリのマネタイズを提供、わずか5％の決済手数料。Google I/O 2011
［速報］グーグル、Webアプリのマネタイズを提供、わずか5％の決済手数料。Google I/O 2011 グーグルがサンフランシスコで開催中のイベント「Google I/O 2011」。2日目の基調講演はWebがテーマになりました。Webアプリケーションでの課金、高速なゲームの実現、そしてChromeを搭載した専用のノートPCである「Chromebook」が発表されました。 2日目の基調講演の模様を紹介しましょう。 Chromeはさらに高速に 昨日に続いて、グーグル Senior Vice PresidentのVic Gundotra氏登場。Galaxy Tabは気に入ってくれたかな？ 今日のテーマはWebだ。Chromeチームはスピード、セキュリティ、機能などに関してWebを前進させてきた。Chromeの今後について話をしよう。 Chrome担当、Senior Vice Presiden
インラインCSSで書かれたHTMLを一撃でCSSファイルと分割する「Cascader」
とある理由から、インラインでCSSが書かれているHTMLを、綺麗にCSSファイルと分割させたいというときもありますよね。 しかし、これを手作業で進めるのはとても手間がかかり、０から作り直したほうが速いことがほとんど。 今回は、そんなときに一撃でCSSファイルと分割できるサービスをご紹介します。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! インラインCSSのHTMLをCSSファイルと分割する「Cascader」 「Cascader」は、インラインでCSSが書かれているHTMLファイルを、一発でCSSファイルと分割してくれるオンラインサービス。 ひとつひとつ分解しなくても、HTMLをコピペするだけで分割できてしまうのが非常に便利です。 HTMLタグを貼り付けるだけで分割 ↑たとえば、画像のようにイ
JavaScriptやHTML5でデスクトップアプリケーションを開発するツール「Chromeless 0.2」リリース | OSDN Magazine
Mozilla Labsは4月29日、JavaScriptなどのWeb技術を利用してデスクトップアプリを構築する実験プロジェクト「Chromeless 0.2」を公開した。Firefox 4と同じレンダリングエンジンを利用、最新のWeb技術を利用できるという。 Chromelessは、HTML、JavaScript、CSSといったWeb技術を用いたデスクトップアプリケーションを作成するためのツールを開発する実験的プロジェクト。 Chromeless 0.2では、先にMozillaが公開していたFirefox 4と同じレンダリングエンジンを採用、「WebM」「HTML5 Parser」などの最新技術が利用でき、マルチタッチ、WebGL、コンテンツのハードウェアアクセラレーション、JavaScript 1.8.5などにも対応する。 Chromelessで作成したアプリケーションは、Chrome
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Paper.js
TechCrunch | Startup and Technology News
Web開発者の皆様へ - Firefox5周りでの変更点について
