You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
JavaScriptフレームワークのコストを考える | POSTD
先日、私はBrightonで開かれたJavaScriptのカンファレンスFFConfで「(ここにライブラリやフレームワークの名前を入れる)を使おう。これこそ最強中の最強中の最強だ！」と題して話をしました。 ここに、そのプレゼンテーションの内容を書き起こします。もっと注目されるべき、最近のモバイルデバイスのフレームワークにかかるコストに関して、議論を広げる一助となればと思います。 2015年11月16日更新 – テーブルに1行、プロダクション環境下のReactについての行を追加しました。良いニュースをお伝えしますと、これはvanillaよりも3倍遅いですが、TodoMVCに関して言えば速いと言えます！PolymerのTodoMVCサンプルも最新バージョン1.2.2にアップデートされ、同様により速くなりました。 読むよりも見たい方へ、講演のビデオはこちらです。（必要なら、 スライドも入手できま
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
JavaScript製FlashPlayer「swf2js」って？ ある日、ある会社(Apple)の偉い人が言いました。 「僕たちFlashサポートしないよ。」 そして、世はスマホ時代へ突入。 本当にFlashがサポートされないまま突入。。。 困る！！ っということでJavaScript製FlashPlayerを作ってみました。 完成品 swf2js/swf2js サンプル提供 GAMEDESIGNさんのサイトからご提供していただきました。 ありがとうございます！ GAMEDESIGN 対応バージョン FlashLite 1.x, 2.x, 3.x, 4.x ActionScript 1.0, 2.0, 3.0 「swf2js」の使い方 ベーシックな使い方 応用的な使い方 ベーシックな使い方 <html> <head> <script type="text/javascript" src=
AngularJSの基礎を理解しよう(1/5):初心者のためのAngularJS入門 - libro
AngularJSは、JavaScriptのライブラリです。――というと、多くの人は「ああ、なるほどね……」と思うでしょう。そして、そこで急速に興味を失う人も多いかも知れません。 「JavaScriptのライブラリ？ まぁ、どんなのか知らないけど、特にいらないよ。jQueryがあるし、それで十分だからね」――そう思いませんでした？ 皆さんが今まで知っているJavaScriptライブラリは、基本的に「JavaScriptを便利にするもの」でした。「DOMの取得や属性の操作がjQueryなら格段に簡単に書けるよ」というようなことでライブラリを導入していくことになった人も多いでしょう。 これらは、プログラマが自分で作成するプログラムを考え、それを書いていくことを楽にしてくれる、というものでした。作成する処理は自分で考える。それを作るのが楽になる――それが今までのライブラリでした。 では、Angu
今どきのJavaScriptで使われているインデント規約まとめ - ICS MEDIA
みなさんは普段JavaScriptを使って開発する場合、インデントはどのようにしていますか？ タブ、スペース2個、スペース4個・・・などいくつかの選択肢があります。 個人で開発している方は問題ありませんが、チームで開発している場合は意見が分かれ議論になることもあるでしょう。プロジェクト開始早々インデント論争でチーム内の雰囲気を悪くしたくはありません。 本記事はそんなインデント論争の1つの解決策となるべく、ブラウザベンダーやプロダクトで定めているJavaScriptコーディングのインデントルールを調べてみました。 この記事のポイント* 海外のJS界隈ではスペース2個のインデントが多数派 ESLINTなどの設定ファイルからコーディングルールを調べられる なぜインデント論争が起こるのか？ そもそもなぜインデント論争が起こってしまうのでしょうか？ それはそれぞれ一長一短のため好みが分かれてしまうか
Web制作者にもチャレンジできるIoT入門～Tesselの基礎～
2015年はIoT元年と言われるくらい、IoTやWoTという単語がバズワード化してきました。2014年頃からArduinoやRaspberryPi、Galileo、Edisonといったマイコンボードが急激に人気になってきましたね。Web開発者がハードウェア領域に進出しやすくなりました。ただ、センサーの利用など応用的なことをしようとすると、GPIOや電流などの知識をある程度は知っておく必要があります。 今回は、Webの知識だけでほぼ操作でき、初心者向けのTesselというマイコンボードを紹介します。具体的には、Tesselの開発環境整備から環境センサを扱うところまでを紹介したいと思います。Webエンジニア向けに説明を書きましたが、Webデザイナーやディレクターなど、非エンジニアの方でもチャレンジしていただけたら幸いです。 Web制作者向けマイコンボードTesselとは 参考リンク 次世代マイ
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! - paiza times
(English article is here.) こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 ウェブ開発に欠かせないJavaScriptフレームワークですが、日々発展しておりReact.js, Ractive.js, Aurelia.js, AngularJS2.0など次々と新しいフレームワークが出てきています。 一体どれを使えばいいのか？何が違うのか？何から調べていいのか迷うことがあります。 そこで、現時点で事実上全てとなる、９大主要フレームワークについて、実際に使ってみて比較を行います。 Backbone.js Ember.js Knockout.js AngularJS(1.x) React.js Ractive.js vue.js Aurelia.js AngularJS2.0(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
今すぐ使えるRactive.js入門 - Qiita
Ractive.jsとは http://www.ractivejs.org/ データバインドに特化したjsライブラリです。 状態監視にVirtualDomの概念を用いているため、挙動が軽く高速です。 実装をテンプレートと、それを監視するRactiveモデルに分離することで、デザインとロジックの分離を実現できます。 モデル設定の記述が直感的かつシンプルで、初見の開発者でも何となく実装を理解できることが強みです。 またテンプレートに必要最低限のロジックを備えているため、複雑なオブジェクトの展開も難なく行うことが出来ます。 Vue.jsほど対応ブラウザに偏りがなく、Angular.jsほど巨大ではない、 データバインドを手軽に取り入れたい際に非常に便利なライブラリです。 Knockout.jsとは立ち位置が似ているので、記法が好みな方を選べばいいのではないかと個人的には思っています。 対応ブラウ
このJavaScriptフレームワークでHTML5は救われるかもしれない | readwrite.jp
HTML5はウェブ・ページをアプリのように動かし、そしてFlashに取って代わるはずだった。しかしパフォーマンスの問題で、アプリ開発者のHTML5導入は遅れてしまっている。 Famo.us社はこのギャップを埋めるためにスタートした小さな会社だ。同社は2Dと3Dの両方のエフェクトを高速表示するため、HTML5の遅延要素を本質的に回避する独自のフレームワークを開発した。このFamo.usによって、開発者はHTML5のパフォーマンスの問題に苦しむことなく、より短期間でクロスプラットフォームのアプリを開発することが可能となったのだ。 Famo.usの秘密はJavaScriptを利用していることだ。JavaScriptは極めて高速に動作し、既にあらゆるブラウザで広く使われている。Flashとは異なり、ブラウザ・プラグインをユーザーがダウンロードしたり、ブラウザメーカーがそれをサポートする必要もない。
今どきのGruntを使ったフロントエンド開発（HTML/CSS編） - MOL
SassなどのCSSプリプロセッサを使うWebデザイナが増えてきました。Sassをコンパイルするだけなら黒い画面（ターミナル）を使わずともGUIアプリからの利用で問題ありません。が、ここは一歩踏み込んでGrunt（JavaScript製のタスクランナー）を使って、Sass以外のコンパイルやライブリロード、画像最適化、CSSのリントやスタイルガイド生成など、あらゆる作業をGruntに任せてより効率的な開発環境を手に入れてみませんか。 ども、Front-end Developerをしております@t32kです。今日はがんばります。 Frontrendというコミュニティ活動をしています。通常は東京で3~4ヶ月の周期でフロントエンドをテーマにした勉強会を開催しています。良かったらみなさんもご参加くださいませ。 Agenda 今日の話す内容は以下のとおりです。 なぜGruntを使うの？ Gruntの使
マイクロソフトがテストツール「BrowserSwarm」発表
テスト結果はInternet Explorer（IE）、Google Chrome、Firefox、Safari、OperaなどのWebブラウザのバージョンごとに合格率が表示される。テストに合格した項目と不合格だった項目は別々に参照でき、修正が必要な個所がすぐに分かるようになっている。 BrowserSwarmのプロジェクトは、jQueryライブラリの開発などに参加しているappendTo、クラウドベースのテスト用プラットフォームを提供するSauce Labs、マイクロソフトのInternet Explorer（IE）チームが協力して手掛けている。 IEチームは「質の高いフレームワークは現代のWebの基盤であるにもかかわらず、さまざまな端末やWebブラウザで横断的なテストができるリソースはあまり存在していなかった。BrowserSwarmでは相互運用性を備えたフレームワークの構築を支援する
JavaScript製の顔認識ライブラリがすごい | DECONCEPTER
JavaScript製顔認識ライブラリを紹介します。 試してみたところ想像以上に精度が高かったので驚きました。横顔や傾けた顔の認識は難しようですが、正面の精度がすごい。 auduno/clmtrackr デモは画像の顔認識トラッキング（Tracking in image）ビデオの顔認識トラッキング（Tracking in video）認識顔に別の顔を乗せてマスキング（Face masking）認識した顔のデフォルメ（Face deformation）の4つがあります。 デフォルメとマスキングが特に面白いのでお試しあれ。 ちなみにおっぱいを顔として認識してもらおうとしたら怒られました。
フォームでユーザーにヘルプをツールチップで実装するjQueryプラグイン・jQuery FormHelp
割と需要ありそうなので備忘録ついでにご紹介。ツールチップで実装する、テキストのフォームヘルパーです。「こういう具合に入力してね」みたいなのを明示するやつ。 フォームのそれぞれの項目にヘルプを作るスクリプトです。マウスホバーやフォーカスでツールチップを出す、というもの。プラグインで実装するほどのものでも無いかもですけど、これはこれで楽そう。 動作サンプルです。HTMLを普通にマークアップするだけで自由にツールチップ内に実装できるのは楽ですね。 コード 本体とプラグインを読み込みます。 $.formHelp();コールします。 <input id="input-email" type="email"/> <span class="helptext" data-for="#input-email"> <p>ここにツールチップ</p> <hr> HTMLが自由に使えます <ul> <li>One<
70を越えるOAuthプロバイダに対応した認証デーモン·OAuth daemon MOONGIFT
OAuth daemonはnode/JavaScript製のオープンソース・ソフトウェア（GNU Affero General Public License）です。 OAuth.ioはフロントエンドエンジニアにとっては便利なサービスと言えますが、セキュリティ的にはOAuthの概念を覆してしまう問題があります。そこでOAuth.ioのコア部分を取り出してオープンソース化したOAuth daemonを使ってみましょう。 管理画面です。まず最初に管理者アカウントを設定します。 次にアプリケーションを作成します。複数作成が可能です。 ドメインも複数指定できます。 そしてプロバイダごとにキーの設定を行います。 例えばこんな感じです。 Tumblrなどになるとどこに設定を行うべきかのヘルプもあります。分かりやすいです。 クライアントID、シークレットを設定します。 その場で試すことができます。認証ダイ
Bootstrap 3正式版がリリース。モバイルファースト、レスポンシブ、フラットデザインなどを採用
複雑なCSSを自分で書かなくてもHTMLのマークアップで簡単に美しい比率のグリッドレイアウトを構成でき、分かりやすいボタン、パンくずリスト、メニューなどのWebページを記述できるCSSフレームワーク、「Bootstrap」の最新版「Bootstrap 3」が公開されました。 Bootstrap 3ではモバイルファーストを意識したデザインとなり、ボタンやメニューなどはフラットデザインを採用。 公開されのは現地時間8月19日で、Bootstrapの2周年にあたる日でした。 Bootstrap 3のテンプレート例 下記はBootstrap 3ではさまざまなテンプレートがの用意されていますが、下記もそのテンプレートの1つ。
【保存版】IEのバージョンを判別し、バージョンごとにスタイルを適用する3つの方法 | DX.univ
エンジニアの菊池です。 今回、初めてブログを投稿させていただ[...]エンジニアの菊池です。 今回、初めてブログを投稿させていただくことになりました。 業務では主にフロントエンドの実装とマークアップ等を担当しています。 さて、Windows XPのサポート終了まで残り約8ヶ月となりました。 ようやく長くにわたり苦しめられてきたIE6から解放されることになりますが、でも実はIE7、8、9もIE6ほどではないまでもバグや独自解釈が多かったりします。 そんな時にはCSSハック等の手法やJavascriptを利用してIEだけ特別な処理やスタイルを適用したりします。 ということで今回かなり今更感はありますが、自分用の備考録も兼ねてIE6〜10のバージョン別CSSハックと条件付きコメント分岐、jQueryによるIEバージョン判別の3つの方法についてまとめてみました。 1.CSSハック /* I
何でも埋め込めてカッコいいモーダルダイアログ実装用jQueryプラグイン「Pop Easy」:phpspot開発日誌
Pop Easy | by Thomas Grauer 何でも埋め込めてカッコいいモーダルダイアログ実装用jQueryプラグイン「Pop Easy」 モーダルダイアログ実装用のプラグインは色々ありますが、次のようなカッコよくスタイリングされたダイアログが実装できます ダイアログの他、動画、IFRAMEの埋め込みが可能っぽいです CSSなので当然リデザインは可能ですが、初期デザインをちょっとカスタマイズして自サイト用にするだけで完成度の高いものが実装できそうですね 関連エントリ jQueryでモーダルダイアログを実現するプラグイン２０ クールなモーダルダイアログ実装ライブラリ「SimpleModal」
JavaScriptベースのEPUB 3リーダーが相次いで公開「Readium.js」と「Epub.js」。いずれもオープンソースで
JavaScriptベースのEPUB 3リーダーが相次いで公開「Readium.js」と「Epub.js」。いずれもオープンソースで Webブラウザを用いJavaScriptで実装をしたEPUB 3リーダーが相次いで公開されました。1つはEPUB 3を策定したIDPF（International Digital Publishing Forum、国際電子出版フォーラム）が後押しするEPUB 3リーダーのリファレンス実装開発プロジェクトのReadiumが発表した「Readium.js」、もう1つは、米Berkeley大学による「Epub.js」です。 どちらもgithubでオープンソースとして公開されています。 電子書籍のフォーマットとして策定されたEPUB 3は、HTML5/CSS3などのWeb標準がベースになっています。そのため、EPUB 3リーダーはWebKitなどのWebブラウザのレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ページ高速化のため .htaccess でキャッシュ設定を絶対やっておこう！
PHP,Ruby,Node.js等のサーバサイドのデバッグをChrome上で行える「Chrome Logger」:phpspot開発日誌