Webブラウザ、それもクライアントサイドだけで実現するテキストの音声読み上げ·speak.js MOONGIFT
speak.jsはHTML5を使ってクライアントサイドだけでテキスト音声読み上げを実現するJavaScriptライブラリです。 speak.jsはHTML5/JavaScript製のオープンソース・ソフトウェア。コンピュータの世界で常に望まれてきたのがテキストと音声の融合です。人が話せば音声を解析してテキストにし、逆にテキストを書けばコンピュータがしゃべるといった具合です。 幾つかのパラメータがある そうした技術はOSレベルで実現されていますが、実用的かと言われるとまだまだ遠いかも知れません。さらにAndroidやiOSのようなスマートフォンでも音声による指示が可能になっています。そして今回紹介するspeak.jsはWebベースでテキスト読み上げを実現するライブラリになっています。 Text-to-Speechは昔からありますが、それをWebベースで実現してしまった所がユニークです。さらに
知ってて当然？初級者のためのJavaScriptで使う即時関数(function(){...})()の全て
(function(){...})()は、 (function($){ $.hoge = function() { }; })(jQuery) みたいに使われていたりするコード。GreasemonkeyとかjQueryのプラグインとか、あれこれ見かけることがあると思います。 この話題はいくつかWebでも取り上げられていますが何がどうなってんのかちょっと難しいですね。しかし、誰でも理解できるレベルではあります。というのも、こういう種の難しさは体系的な知識が備わっているか否かということなのです。 でも、この知識を体系化する作業って結構しんどくて、難しくて、まーハゲるほど悩むこともあるかもしれない。それはきっと、とても毛根に悪いかもしれない。スカルプDも真っ青の状況になるかもしれない。それは、悲しいことなのだと思う・・・っ！ 毛根にはこれからもがんばってほしい！いつだって頭を温かいまなざしで見守
node.jsとMySQLで割と普通のデータベースウェブアプリを作ってみるチュートリアル | さくらたんどっとびーず
2011年はサーバサイド JavaScript の年！ サーバサイド JavaScript の本命は node.js！ ということで割と普通のウェブアプリケーションを node.js で作るためのチュートリアルを書いてみました。WebSocket とか新しめの話題は結構見ますが、PHP とかで普通のウェブアプリ作ってる人向けのチュートリアルとかあんま見ないような気がしたので、って感じです。 チュートリアルの内容ですが、コード量が少なめで機能的にも分かりやすそうなモノということで、短縮 URL ウェブアプリケーションを作ってみることにしました。bit.ly とか t.co とか nico.ms みたいなアレです。短縮 URL のデータは MySQL に保存します。 結構長文になっちゃったので、先に目次置いときます。 node.js のインストール npm (Node Package Mana
Smartyで慣れた記法が使えるJavaScript製レンダリングエンジン·Jarty MOONGIFT
JartyはSmartyライクな構文のJavaScript向けテンプレートエンジン。 JartyはJavaScript製のオープンソース・ソフトウェア。Webシステムを開発する際に、HTMLなどのフロントエンドとサーバサイドは分業になることが多い。PHPを使って開発している際によく使われるのがSmartyだ。システムとデザインの中間言語的な立ち位置でいてくれる。 サンプル 従来はそれで十分だったが、Ajaxが多用されWebアプリケーションを開発しようと思うとフロント部分でもHTMLとJavaScriptの分業が必要になる。そこで使えるのがJartyだ。 JartyはSmartyのJavaScript版だ。scriptタグの中でtype="text/jarty"を使ってテンプレートを定義する。その中はほぼ素のHTMLで、Smartyライクな構文が利用できる。そして変換に利用するデータはJSO
WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」:phpspot開発日誌
WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」 2011年05月09日- Awkward Showcase ? A jQuery Plugin | Awkward Group - A Digital Agency WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward Showcase」。 divの中に複数のdivを並べて初期化することで簡単にコンテンツスライダーを作れます。 １つのコンテンツにはHTMLが入れられ、ツールチップ表示用の機能なんかも同梱されています。 初期化も次のように簡単。コンテンツのサイズ等をオプションとして渡せます。 $("#showcase").awShowcase({ content_width: 700, content_height: 470 }); デモページはこちら
JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」:phpspot開発日誌
JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 2011年05月10日- JavaScript Errors Notifier - Chrome ウェブストア JavaScriptエラー時にエラーを分かりやすく通知してくれるChrome拡張「JavaScript Errors Notifier」 エラーがあった場合に、アドレスバーの星アイコンのとなりに次のように通知してくれます。 アイコンをクリックすれば具体的なエラー内容が分かるという物。 赤のアイコンでエラー検知が分かりやすくていいですね。 通常の状態ではエラーがあろうと、デベロッパーツール等でコンソールを開いてない限り気づくことは出来ませんが、これは開発者は必須のツールかもしれませんね。 関連エントリ PHPのエラーなんかをブラウザで確認できるC
Google ChromeのJavaScriptデバッガの進化がすごい - os0x.blog
Chrome版のFirebugことGoogle Chrome Developer Toolsですが、以前gihyoで解説したときよりさらに便利になっているので、少し紹介します(元はWebKitなので、そのうち(近いうちに)Safariでもそれなりに使えるようになるはずです)。 圧縮されたコードの整形 まず、目立つところからいきましょう。ちょうど先日更新されたChromeのdev版(12.0.742.0)に搭載されたばかりの機能で、minifyされているJavaScriptコードを読みやすいように整形して表示してくれるというものです(IE9の開発者ツールにも実装されている機能です)。 例えば、Google Analyticsのコードは圧縮されていて普通は読めません。 しかし、Chromeのデベロッパーツールなら、 このように整形してくれます。 やり方は簡単で、デベロッパーツールのScript
JavaScriptでSinatra風？RESTfulをサポートしたフレームワーク·Sammy.js MOONGIFT
Sammy.jsはJavaScriptによるRESTfulをサポートしたWebフレームワーク。 Sammy.jsはJavaScript製のオープンソース・ソフトウェア。Webアプリケーションを開発する際には、サーバサイドとクライアントサイドの二つを開発する必要がある。クライアントサイドにはJavaScriptやFlash、HTMLなどが使われているだろう。 フォームのハンドリングも可 しかしJavaScriptはどんどん高度化し、機能が増している。JavaScriptだけで解決できることは日々増えているのだ。もはやサーバサイドを必要とせず、Webアプリケーションを構築できてしまう。そのためのフレームワークがSammy.jsだ。 Sammy.jsはごく小さなWebフレームワークで、ルーティングを備えている。クライアントサイド内でRESTfulをルーティングで定義し、アクションを受け取ることが
node.jsは普及しそうに無い
ここ一ヶ月ぐらいからJavaScriptが注目されているようだ。理由は簡単で、GoogleのJavaScriptエンジンを使ったアプリケーション・サーバーであるnode.jsの性能が高いと主張されているからだ。 地味にブームになりつつあり、Ajaxのようにウェブ開発の現場に定着するかも知れない。多数のブログで紹介がされている。現状のその特徴を振り返りつつ、node.jsが普及するかを考察してみた。 1. JavaScriptは、ブラウザ発の人気スクリプト言語 JavaScriptは、LiveScriptとして1995年にNetscape Navigatorというウェブ・ブラウザに搭載されたのが始まりで、すぐに政治的な理由でJavaScriptに改名された。1996年には、その基本的な文法がECMAScriptとして、ECMA-262とISO/IEC 16262で定義されている。言語仕様が簡
node.js開発者必携。異なるバージョンのnode.jsをインストール、管理する·nave MOONGIFT
naveは複数バージョンのnode.jsを管理、切り替えるためのソフトウェア。 naveはBash製のフリーウェア（ソースコードは公開されている）。今、node.jsが熱い。動作も高速で、その先進性もあってHTML5やWebSocketなどの新しい技術を率先的に試されている。今はまだマイナーかもしれないが、今から取り組んでおいて損はないはずだ。 リモートのバージョン一覧 そんなnode.jsは開発がとても盛んであるためにどんどんバージョンアップが続いている。そのため最新版をインストールしようと思うとソースからしかできず、そのために異なるバージョンが使えなくなったりする。それを防ぐためにもnaveを使おう。 naveはRubyでいうrvm、Pythonでいうvirtualenvのように異なるバージョンのnode.jsを一つのPC上で使えるようにする。リモートにあるバージョンを一覧し、そこから
Ajaxを使い、サーバサイドで処理を行うプログラミングコードハイライトライブラリ·Ajax Syntax Highlighter MOONGIFT
Ajax Syntax HighlighterはAjaxを使ってサーバサイドでプログラミングコードのハイライト表示を行うライブラリ。 Ajax Syntax HighlighterはPHP/JavaScript製のオープンソース・ソフトウェア。Webサイト上でプログラミングコードを表示したいと思うことは多々ある。そんな時にはただコードを載せるのではなく、構文に沿ってハイライト処理を行うと可読性が高まる。 CとJavaの例 プログラミングコードのハイライト処理を行う場合には、言語が決まっていればJavaScriptでも簡単に対応ができる。だが多数の言語に対応したいといった場合には無用なライブラリまで読み込むことになって表示が重たくなる可能性がある。そこで使ってみたいのがAjax Syntax Highlighterだ。 Ajax Syntax Highlighterはその名の通り、ハイライト
Ninja（忍者）とHakcerの違い：Rails Hub情報局：エンジニアライフ
特にJavaScriptやRubyの世界で使われる英語のITジャーゴンとして、最近「Ninja」というのをよく耳にするようになりました。hackerに似て、技術レベルが高いソフトウェアエンジニアのことです。どちらかというと自称する人が多いように思います。 オライリーメディアの新刊の1つ。Novice（初心者）からNinjaへとある hackerといえば、CPUのキャッシュラインのインバリデーションをイメージしながら、pthreadでゴリゴリと低レベルのソフトウェアを書き、自分で使う処理系は自分で書く人というイメージがあります（スミマセン、プロセッサ系のジャーゴンを使ってみたかっただけで、何を言ってるか自分でもよく分かっていません）。ninjaのほうは、これに対するカウンター的な言葉のように感じています。JavaScriptが最初に学んだ開発言語という若い層の人たちで、JavaScriptの
Rails開発者ら、JavaScriptフレームワーク「Cinco」を発表：Rails Hub情報局：エンジニアライフ
Ruby on Railsの生みの親、DHH（David Heinemeier Hansson）らが、モバイル向けのフレームワーク「Cinco」（シンコ）を間もなくオープンソースで公開する模様です（思わせぶりなブログエントリ）。以下は、37signalsのCincoを使った最初のモバイルアプリ「Basecamp Mobile」のデモ映像です。 Cinco自体はまだソースコードが公表されていません。準備が整うまでに数カ月かかるだろと言っています。Cincoはモバイル向けフレームワークで、「基本的には単一ページのJavaScriptアプリを扱うためのRailsだ」と説明されています。対応するプラットフォームは、 iPhone 3GS iPhone 4 iPad Motorola Droid X Motorola Droid 2 Samsung Galaxy S HTC Incredible H
ソーシャルメディアマーケティングの解析も。WebSocketを使ったリアルタイムアクセス解析·Hummingbird MOONGIFT
HummingbirdはWebSocketを使ったリアルタイムアクセス解析システム。 [/s2If] HummingbirdはJavaScript/node.js製のオープンソース・ソフトウェア。リアルタイム、このワードは2010年に注目を集めた技術の一つだった。スマートフォン、フィード、位置情報、Twitterなど様々なシステムがリアルタイムに向かって突き進んでいる。 メイン画面 リアルタイムが要求されるサービスの一つがアクセス解析だ。Webサイトに来るユーザの動向をリアルタイムに分析することで、テストマーケティングの時間を短縮したり、第二、第三の手だてを打てるようになる。それを実現するのがHummingbirdだ。 HummingbirdはWebサイト向けに1×1の画像を返す解析受信サーバと、その結果をリアルタイムに閲覧する管理画面とか提供される。リアルタイムと言うのは一定時間ごとのリ
頻繁に使用している便利なお役立ち系ブックマークレット・19個 - かちびと.net
個人的によく使っているブックマークレットのご紹介。どれも便利で役立つので手放せないものになっています。Web制作をしている人なのでそれ系に偏っているかも知れませんが、多少でも参考になれば幸いです。ほとんど有名なものだとは思いますが・・・ というわけで、便利なお役立ちブックマークレットをいろいろとご紹介。手軽なのが素敵ですよね。以前書いてから大分経ちますので改めてエントリーしますが、少々Web制作系に偏っています。順不同です。 CSS構成を一目で確認出来るXRAY 何かと便利なXRAY。クリックした要素の詳細を教えてくれます。Web屋さんはご存じの方も多いのでは。 XRAY 今見ているページをiPhoneで「後で見る」KeepItWith.Me 最初の設定がすごくストレスだったのですが、設定後の便利さが感動したのでご紹介。PCで見ているページでブックマークレットを使って自分のiPhoneに送
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
