Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 背景 僕が本格的にWebのエンジニアになったのは2014年頃からで、早いものでもう丸2年ほど経ってしまうことになります。 Webに転向してからは主にフロントエンドエンジニアとして勤務してきました。 よく言われることですが、最近のフロントエンドの趨勢は本当に早いです。 最初はキャッチアップに苦労したことを覚えています。 しかし段々と新しい何かを覚えることは苦でなくなり、今はこの流れに身を置くことが楽しいと思えるようになってきました。 激動の趨勢の中で、Webのフロントエンドエンジニアが口にするパラダイムは日ごとに変化しています。 この記事
投稿推進部の外村（@hokaccha）です。 クックパッドブログの開発でRails上にECMAScript6などのモダンなJavaScript開発環境を導入した経験を元にノウハウを紹介したいと思います。 RailsはSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みが提供されています。Sprocketsによるasset管理の仕組みは非常によくできており、AltJSのトランスパイルやファイルの結合、minifyなど、assetのコンパイルに必要な機能を一通り備えています。 しかし、JavaScriptにおけるモジュールの依存関係の解決や、ライブラリの管理などについてはモダンなJavaScript開発と乖離してきているのが現状です。そこで、Railsでも以下のようなことを実現できることを目標に環境を作りました。 ECMAScript6のシンタックスを使う モジュ
本記事は1分で実現できる有用な技術 Advent Calendar 2015の4日目の記事です。 WEB アプリケーションを開発していると「ユーザのブラウザで起きたエラーをサーバに送って DB に収集したい」という要望が出てきたり、外部からお願いされたりすることがあります。 こういう場面で、「どうやればいいのん」と悩む方は少なくないようです。 このような場合にはイベントハンドラの onerror を利用すると便利です。 エラーハンドリングしたい対象のコードより先に呼ばれる位置で、次のようなコードをぺいっと貼っ付けておきましょう。 そうそう、try-catch している場合には onerror に引っかからないので、そういった場合には個別に呼び出してください。 window.onerror = function(errorMsg, fileName, lineNumber) { var er
解除できるラジオボタンを設置したいときもあります。 解除ボタンを追加して押させるのもスマートじゃないので、チェック済のラジオボタンを押したら選択解除できるようにしてみます。 ネットで情報を探すと苦戦している人も多いけど、チェックされてる値を記憶しておいて、同じラジオボタンが押されたら解除するだけ、意外と簡単です。 JQueryで書いてみましたが、別に素のJavaScriptでも簡単だと思います。 選択肢１ 選択肢２ 選択肢３ <script> $(function(){ var nowchecked = $('input[name=xxxx]:checked').val(); $('input[name=xxxx]').click(function(){ if($(this).val() == nowchecked) { $(this).prop('checked', false); no
はじめに こんにちは。デスクトップアプリケーションを手軽に作りたいと思ったことはないでしょうか？ 普段Webアプリケーションを開発している場合、 デスクトップアプリケーションを作ろうとすると、開発言語やライブラリがWebアプリケーションとは違うので、別な知識が必要になるのと複数のプラットフォームで動くものを作ろうとすると大変ですね。 そこで、今回はWebアプリケーションのKPTBoardのJavaScriptとCSSのコードを一部流用と修正して、Electronで動かしてみました。 Webアプリケーション版のKPTBoardと違う点 今回はWebアプリのデスクトップクライアントアプリではなくて、単体で動くデスクトップアプリとして作ってます。 複数人には対応してないです。 投稿した内容は、データーベースではなくてアプリのlocalStorageに保存されます。 Electronとは http
1000 100000 1000000 のような数値に対して、 1,000 100,000 1,000,000 のように、3桁ごとにカンマを挿入する方法を解説します。 正規表現による方法 数値を文字列に変換し、正規表現で置換します。 var num = 1234; String( num ).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,' ); // 1,234 Perlなどの後読みをサポートする正規表現ならば、 String( num ).replace( /(?<=\d)(?=(\d\d\d)+(?!\d))/g, ',' ); のようにも書けるのですが、JavaScriptは後読みをサポートしないため、前述のようにする必要があります。 whileループによる方法 whileループで置換をくり返す方法もあります。しかしグローバルマッチの置換で処理で
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback console.log(parseInt("123")); // 123 (default base-10) console.log(parseInt("123", 10)); // 123 (explicitly specify base-10) console.log(parseInt(" 123 ")); // 123 (whitespace is ignored) console.log(parseInt("077"
Events/jQuery.Event jQueryのイベントシステムは、W3C標準に準拠した実装になっています。イベントオブジェクトはjQueryのイベントハンドラーに確実に渡されます。（コールバック関数に引数として渡されず、window.eventなどから取得するタイプのブラウザであっても、そのようなチェックは必要ありません） オリジナルのイベントオブジェクトが持つ殆どのプロパティは、このオブジェクトにコピーされます。 このオブジェクトのコンストラクタも公開されており、triggerを呼ぶ際に用いられます。 コンストラクタではありますが、newオペレータはあってもなくても構いません。 どういった場面でEventオブジェクトを作成するのかは、trigger関数のドキュメントを参照して下さい。 Example: jQuery.Eventを new をつけずに作成する var e = jQu
書いてみるっていうか、わけあってPrototypeやらJQueryが使えないので仕方なくスクラッチ。 eventオブジェクトから発生源のオブジェクトを取得したいのだけど、IEとFireFoxで挙動が違う。 困ったもんだ。 下記のような場合 ① 特定のタグAにclick時のイベントを設定 ② イベント内でタグAの情報を取得したい ■ポイント1 IEとFIREFOXのイベント登録時の表記方法が違う IE: .attachEvent('onclick', function() {}, false); FireFox : addEventListener('click', function() {}, false); ■ポイント2 IEとFIREFOXの発生源オブジェクトの取得方法が違う IE: .window.event.srcElement.id FireFox : e.target.id コ
<h1>WYSIHTML5 - A better approach to rich text editing</h1> <p>wysihtml5 is an <span class="wysiwyg-color-green"><a href="https://github.com/xing/wysihtml5">open source</a></span> rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inlin
CKEditor は、高機能でありながらもカスタマイズも可能で、ブログの書き込み画面のようなボタンによる編集を容易に実現できるWYSIWYGエディタです。 デモページ も同サイト内に公開されています。 WYSIWYGエディタは、数々公開されていたりしますがあまりにも多機能すぎるとアプリに適用した際に、ユーザーが使いこなせなかったり、複雑すぎるところからサポートが返って面倒になったりもします。 なので、提供される機能からさらに一部を公開したり、アプリの画面要件に沿ってうまく組み込めたり出来るものが無いかを探しているときに見つけました。 しかも日本語に対応してくれていますので、ボタンの説明（alt属性）がちゃんと日本語で表示されます。 また、フォーム要素（テキストボックスやラジオボタン、チェックボックスなど）を埋め込む機能もあるため、カスタマイズ次第ではCMSのアプリを作ることも可能かもしれま
ajaxを使うと、Javascriptを使ってホームページを再度読み込まなくても、サーバーとデータをやり取りをして表示を変更することができます。 .loadを使う サンプルでnews.htmlの中の#news要素を読み込ませます。 $(function(){ $("button").click(function(){ $(".load").load("news.html #news"); }); }); $("button").click(function(){ 要素buttonをクリックしたときに命令が行われます。 $(".load").load("news.html #news"); セレクタで選んだ.loadの部分に news.htmlの#newsを読み込ませて表示しています。 別ページにある部分を読み込ませたいという時にも使えますよ。 .ajaxを使う サーバーからのリクエストやレ
var XHR = new XMLHttpRequest(); query = "http://www.muratayusuke.com/"; XHR.open("GET",query,true); XHR.onreadystatechange = function(){ if (XHR.readyState == 4 && XHR.status == 200){ alert("hoge"); } }; XHR.send(null); 上記のコードなんかよく見るXMLHttpRequestのコードだと思いますが、最近のChromeでこいつがエラーを吐くようになりました。そう、 "XMLHttpRequest cannot load http://www.muratayusuke.com/. Origin http://muratest is not allowed by A
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く