http://www.hp-stylelink.com/news/2015/02/20150217.php
[jQuery] Enterキーでフォーカスを移動するには
Enterキーでフォームを送信したくない時は あるWebアプリケーションのフォームで、Enterキーを押してもSubmitされない様にする必要があって、ちょっと調べた。 リターン（Enterキー）でフォームを送信しない方法: 小粋空間 とりあえずこの記事の「４．押されたキーを判定して抑止する」の所に書いてある方法で対応出来た。 Enterキーで次のフィールドにフォーカスを移動するには 次に、どうせならEnterキーで次のフィールドにフォーカスを自動で移動させたいな～、という事になった。やってみたら、jQueryのおかげでこんな感じで割りと簡単に出来た。 Enterキーが押された時にfalseを返すのではなくて e.preventDefault() を使う様に変えた。その理由はこちらを参照。 Shift＋Enterキーにも対応するには さらについでにShift+Enterキーでの逆順の移動に
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
5分で理解する React.js - Qiita
いまさらですがReact（react.js）をはじめてみました。 Virtual DOMばかりが話題にあがるReactですが、それにとらわれていると理解が進まない、と言うかReactで理解しなければならないのはVirtual DOMではないことがわかりました。 Reactについての良い資料はすでにたくさんありますので、末尾に参考資料としてあげています。 このエントリは自分がReactのチュートリアルをなぞりながら書いた自分用のメモですが「1エントリで概要をちゃちゃっと理解したい」という方に役に立ったら良いな、とも思っています。 Reactチュートリアル http://facebook.github.io/react/docs/tutorial.html 基本 JavaScriptで書かれたライブラリ。react.jsをインクルードして使う。 （MVCで言うところの）Viewのみを担当する。
JavaScript フレームワーク - ペパボテックブログ
フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。 この項目の担当 @hadashiA どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 (2) SPA（シングルページアプリケーション） 流行り廃り (1) MVC (2) MVVM (3) Virtual DOM どれを使う？ どうしてフレームワークを使う？ (1) ドメインロジックとプレゼンテーションの分離 まずこちらの画面を見てください。 ©任天堂 スーパーマリオワールド スーパーマリオが右にダッシュすると、マ
JavaScriptにフレームワークが必要な理由 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? JavaScriptにはむしろもっと抽象化がもたらされるべき - Qiitaという記事で、もう少し踏み込んだ話を書いてみました。 某所でReact.js界隈の人に聞きたいというフレームが発生したのだが、はてなブックマークでコメントしたらIDコールされたので、反論をここに書くことにした。(最近は技術系記事はQiitaにしか書いてないので)。 あくまで僕が考えるなので、JavaScript界の人達が本当はどう思っているかはわからない。そもそもJavaScriptを本格的にさわり始めたのごく最近なので、JavaScript界では異端かもしれな
Backbone.JSからAngular2まで、全9大JavaScriptフレームワークを書き比べた! -
(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(アルファ版) これらのフレームワークでは、以下のような機能が実現さ
Javascriptでのオブジェクト定義覚え書き#1 - Qiita
Javascriptでのオブジェクト定義方法として、prototypeチェーンを使うのが一般的。 多少の変形があるが、おおよそは下記のような構造での継承の仕組みをCoffeeScriptのようなトランスレータやPrototype.js, jQueryのようなフレームワークなどでも使用している （CoffeeScriptなどでは直接規定オブジェクトのインスタンスを生成せず、継承の実現方法にいわゆる「extend」関数を使っているはず） コンストラクタ関数を定義 継承にて基底オブジェクトとして使用する場合、引数0個でのオブジェクト生成できるようにするのがよさそう ECMAScript 5th対応であれば、Object.create(MyObject.prorotype)でもよい。 (派生オブジェクトを作る場合) prototypeプロパティに基底オブジェクトのインスタンスを作成し、設定する。
Error オブジェクトの種類と独自例外オブジェクトの作成方法
EvalError と SyntaxError の違いが分からなかったのですが、何となく ↓ のような切り分けなんだろうと勝手に推測しています。 EvalError → eval 実行時に発生したエラーを表す例外オブジェクト SyntaxError → （eval に限らず）全体的に不適切な構文が存在した場合に使用する例外オブジェクト 他の言語と同様に JavaScript でも独自の例外オブジェクトを定義できますが、まずはこれらのオブジェクトで事が足りるのかを検討するのがいいかなと思います。 2. Error オブジェクトを継承した独自例外オブジェクトの作成方法 定義されている例外では要件を満たせない場合は独自の例外オブジェクトを定義します。 次は Error オブジェクトを継承した例外オブジェクトの定義です。 「入力された文字列の書式が不適切な場合に使用する」というサンプルの例外オブジ
無料エディター「Brackets」にも恋に落ちた
先日から、Adobe提供の無料開発エディター「Brackets」を使っています。 僕はこれまで、Wordpressテーマの開発などは「恋に落ちるエディター」のキャッチフレーズでおなじみのSublime Text 3を利用してきました。Sublime Textは、そのキャッチフレーズ通りの素晴らしいエディターです。 けれど、初めてBracketsをインストールして少し使ってみた瞬間から、「これは！」と、Sublime Textを初めて使った時と負けないぐらいの衝撃を受けました。 Bracketsも、Sublime Textと同様拡張で様々な機能を追加できるようになっています。けれどまず今回はデフォルト機能だけで気に入った部分を紹介したいと思います。 Bracketsとは Bracketsは、HTML、CSS、JavaScriptで開発されているオープンソースコードエディターです。Window
オシャレなtoastが簡単に実装出来るjsプラグイン「iziToast」
iziToastのインストールはこちらの公式ページからダウンロードする方法の他、パッケージマネージャーを使っての導入にも対応しています。 # npm npm install izitoast --save # bower bower install izitoast <!-- ブラウザ上でライブラリの読み込み --> <link rel="stylesheet" href="/izitoast/dist/css/iziToast.min.css"> <script src="/izitoast/dist/js/iziToast.min.js></script> iziToastの基本的な使い方は、プロパティの ' title ' に toastのタイトル ' message ' に表示させたい本文を割り当てて使います。 ( デフォルトでは5秒で自動的にtoastが非表示にされます * 設
Webページの印刷プレビューを見やすく素早く表示させるjQueryプラグイン・Print Preview - かちびと.net
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 Webページの印刷プレビューを、 その場で見やすく素早く表示 させるjQueryプラグインです。 地味だけど結構良かったです。 IEには対応して無い様ですが、 印刷が必要なページに導入する と良いユーザービリティになるかも。 この手のライブラリは個人的に初見だったので備忘録的にご紹介します。 このようにその場で直ぐにプレビューを表示させる事が出来ます。プラグインを導入すると、プレビュー用のボタンが指定した箇所に表示されます。また、ショートカット（WinならCtrl+P）でも同じエフェクトでプレビューが表示されます。 通常のブラウザの機能の印刷プレビューでも確認したところ、確かに別途用意したprint.cssを読み込んでくれているようでした。 ご覧いただいたほうが早そ
Web開発が捗るFirebase入門！JavaScriptで「Webユーザー認証」機能を超お手軽に作るチュートリアル大公開！ -
どうも、まさとらん（@0310lan）です。 今回は、Webサービスなどを開発する際に、ユーザーの管理や識別などで必要になる「ユーザー認証」機能を、できるだけシンプルに作ってみたいと思います。 利用するのは、さまざまなバックエンド機能を提供するGoogleの【 Firebase 】です！ 非常に多機能なサービスですが扱いはとてもシンプルで、簡単なコードを覚えてしまえば誰でも活用できるはずです！ 自分でサーバーを用意する必要もなく、基本的な機能は無料で使えるので今すぐ始められるのも特徴と言えるでしょう。 ■始め方！ 今回は、「メールアドレス」と「パスワード」でログインする一般的な「ユーザー認証」ページの作成に挑戦してみましょう！ そこで、まずはFirebaseにアクセスして新規にプロジェクトを作成します。 好きな「➀プロジェクト名」と、自分の「➁国名」を指定します。 すると、プロジェクト
JavaScript: window.open() 小窓の基礎
window.open()で小窓 いわゆる小窓です。これはJavaScriptの window.open() というメソッドで 小窓となるウィンドウを生成します。 各引数の文字列は一重引用符または二重引用符で括って指定します。 第１引数「URL」は生成されるウィンドウに表示するページのURLです。 ※ ウィンドウに表示するページ（別のファイル）は別途作成して用意しておきます。 第２引数「ウィンドウ名」は特に指定する必要がなければ null で良いでしょう。 ウィンドウ名を指定するときは引用符で括ります。 ※ null を指定するとウィンドウ名の設定されていない新規ウィンドウとなります。 (HTMLの属性 target="_blank" と同等です) 例: window.open('example.html', null); 第３引数「オプション」はウィンドウの特徴を設定する文字列です。 こ
解決：IEでアドレスバーを出さないようにしても出てしまう謎な現象 - Qiita
UPDATED@2015-10-01 この現象は、Microsoft Edge では修正済みとのことです。素晴らしい。 https://connect.microsoft.com/IE/Feedback/Details/1850614 TL;DR IE で window.open する時に、fullscreen オプションは絶対に指定してはいけません。何があっても！ 経緯 業務アプリで、IE 限定な環境下だと、アドレスバーを出したくないというニーズがあったりします。ブラウザなんだけどアプリっぽく見せて、ユーザーにへんなことさせたくない、とかですね。 イマドキのいけてる環境だったら、Electron 使ってブイブイ言わせるのでしょうが、そうじゃない場合には、まあ、IE で頑張るしかない。 その過程で妙な現象に遭遇して、多大な時間を浪費してしまったので、メモっときます。 消しても消しても出てく
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.hp-stylelink.com/news/2014/12/20141217.php
私がenchant.jsではなくtmlib.jsでゲームを作る5つの理由
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
[Chrome] console.log()の色々な書き方 - Qiita![[Chrome] console.log()の色々な書き方 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c1e6ffc03f36cd48cf46f07d0cf78188312542c/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMTc5NjklMkZwcm9maWxlLWltYWdlcyUyRjE1NzkwNjM0OTg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZTFmNGYzOTY2ODUyMTRjOGIwZTViNWU2ZTk0YmJkNjQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D6ebfab993ec3b2f119232f9ae8752bcc%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQ2hyb21lJTVEJTIwY29uc29sZS5sb2clMjglMjklRTMlODElQUUlRTglODklQjIlRTMlODAlODUlRTMlODElQUElRTYlOUIlQjglRTMlODElOEQlRTYlOTYlQjkmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1iMjg3YWQ2NWJhOTQ0ZDBmZjdmYWQ2YjIwMzgxYjRiYw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBuYWtham1nJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9OGJjNTQyNjI4OWVhMzFhOWM2OGU1ZmQzMTU1OWIwMjI%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dc31e2a781fdc44e221728f89490d3f79)
経過時間をconsoleで手軽に計測するJavaScript - Qiita
