photo credit: wuestenigel Domino effect via photopin (license) みんなのコンピュータサイエンスposted with amazlet at 19.01.25翔泳社 (2019-01-15) 売り上げランキング: 12,305 Amazon.co.jpで詳細を見る 「JavaScript 可変長引数」でググると「arguments」のことばっかり出てきますけど「今やJavaScriptの可変長引数は arguments を使わなくてもスッキリ書けますからねっ！」ってことを書いています。 歴史の古いJavaScriptには、初期の言語仕様が多く残されており、今でもある程度互換性を保っていますから、少々古い書き方でも大方うまく動いてくれます。 一方で、新たな構文や概念も多々導入されていますから、古くからJavaScriptを使っている
Sound Walker という Web アプリを作りました。 ↓ここで遊べます↓（スマートフォンで開いてください） https://www.sound-walker.app リポジトリはこちら https://github.com/Leonardo-mbc/sound-walker ホーム画面に追加することで、インストールしたアプリのように遊べます。 Webでどこまでできるかをやってみようと思って作り始めて、 ほっといて数年たったら技術がみるみる変わっていて、いろいろ味が出てきました。 Service Worker, Add To HomeScreen などなど Webでできるゲームってだけだったのが、普通にスマホで動くゲームになる時代になっております。 Sound Walker で使ってる技術は WebGL(Three.js), WebAudioAPI, ServiceWorker,
ここ数年書いているJavaScript入門本ですが https://jsprimer.net/ というURLで無料で公開しました。 まだ開発中です これからJavaScriptを始める人がES2015以降をベースにして学べる本 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、今のJavaScriptアプリケーションを読み書きできるようになるもの Webサイト: https://jsprimer.net/ リポジトリ: asciidwango/js-primer: JavaScriptの入門書 もともと公開してありましたが、jsprimer.net というドメインを取ったのでURLが変わっただけです。リダイレクトされているので既存のブックマークはリンク切れにはなりませんが、気になる人はブックマークしなおしてください。 またリポジトリ（asciidwan
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
power-doctest という doctest風 にコードと評価結果のコメントを並べるとテストとして実行出来るようなNode製のツールを作りました。
Google タグマネージャ （Google Tag Manager） をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。 Google タグマネージャ公式サイト 機能 ： Google タグマネージャ Google タグマネージャとは？ Google タグマネージャは無料で簡単に使用できるタグ管理システムです。ウェブ上の使いやすい管理画面から自分でタグを管理してモバイル アプリを設定できるため、面倒なコード書き換えは不要で、IT 部門に依頼する必要もありません。 機能 ： Google タグマネージャ から引用 と公式には書いてありますが、簡単にいえば Web ページ内で読み込む各種の JavaScript コード、例えば Google A
暖房器具のチョイスを迷いまくっているminamiです。 Google製のJavaScript MVC（MVVM）フレームワーク、AngularJS 1.2 がリリースされました。最近にわかに盛り上がってきている（気がする）ので、ここ最近自分で読んで参考になった導入記事やチュートリアル関係をまとめてみました。 導入記事 JavaScript MVCフレームワーク「AngularJS 1.2」リリース。要望の多かったアニメーション機能が追加、脆弱なコードを制限するモードも AngularJS 1.2の機能、主なアップデート内容について 新・三大JavaScriptフレームワークの実践(Backbone.js Knockout.js Angular.js) Backbone.js、Knockout.jsとも比較。この3つのフレームワークはどの局面でどれを使うか迷っている人も多いと思うので参考にな
こんにちは、前回、前々回に引き続き、JavaScriptでUIを実装する方法を紹介していきます。今回は前回のドラッグと関連の深いスライダーを実装してみます。 基本のスライダー スライダーは簡単にいえば動きの制限されたドラッグです。 今回も、最初はなるべくシンプルに実装してみます。まず、基本となるHTMLは次の通りです。 スライダーの基本HTML <form class="js-slider-form" onsubmit="return false;"> <input type="text" name="slider" id="slider1o" value="0"> <div id="slider1" class="js-slider"> <div></div> <input type="button" value=""> </div> </form> 今回は少々手抜きで、input ty
変数名や関数名の命名は非常に重要です。正しい命名をすることによってプログラムソースの可読性が向上するばかりでなく保守性も向上します。しかし、万人向けに可読性や保守性の高い命名をするのは、経験やセンスが求められるため大変難しい作業です。 本ページではその作業の手助けになるような命名規則の一例を紹介します。 基本的な命名規則 ここでは全体的に共通な表現方法を説明します。伝統的な命名規則として変数名の先頭に型名を付けるハンガリアン表記方法がありますが、可読性は高いものの保守性を下げるため推奨しません。 ハンガリアン表記の例：整数値を扱う変数はnScoreとしたり、文字列を扱う変数をstrNameとすることです。 パスカルケース いくつかの連続した単語や文章をひと綴りとして、各単語の最初を大文字で書き表すことです。 例：This is a pen → ThisIsAPen キャメルケース いくつか
ページ全体にイベントハンドラを設定することを考えます。 HTMLで記述する場合、<body onload="処理内容"> などと <body>タグ中に書くのが普通です。 一方、JavaScriptで行う場合 onLoadでは「window.onload=ハンドラ関数;」 とするのがもっとも一般的です。 ちょっと混乱しやすいのですが マウスが押された場合には「window」ではなく「document」を使い 「document.onmousedown=...」とします。 これらはイベントハンドラの登録：kl_addhandler() を使うと 「kl_addhandler(window,"onload",ハンドラ関数)」 「kl_addhandler(document,"onmousedown",ハンドラ関数)」となります。 以下に よく使われるイベントハンドラとその一般的な登録先を列挙しま
（2）プロトタイプ・オブジェクトの変更はリアルタイムに認識 プロトタイプ・オブジェクト配下のメンバが（インスタンスにコピーされるわけではなく）暗黙的な参照を通じて、必要都度にアクセスされるという事実には、もう1つ大きなメリットがある。それは、インスタンスを生成した「後」に、基となるプロトタイプ・オブジェクトにメンバを追加した場合にも、これを認識できるという点である。 例えば、以下のような例を見てみよう。 var Animal = function() {}; Animal.prototype.name = "サチ"; var anim = new Animal(); Animal.prototype.sex = "メス"; // インスタンスの生成後にメンバを追加 window.alert(anim.sex); // 「メス」 もっとも、この性質は、先ほどの「暗黙的な参照」を理解していれば
JavaScriptに、applyとcallというメソッドが用意されていますが、自分なりにapplyとcallの丁寧に説明をしてみようと思ってこのエントリーを書くなどをしてみます。 applyとcallは非常に似たメソッドなので、まずはcallから説明します。 callメソッドとは？ callメソッドは以下のように呼び出します。 methodA.call(thisArg, [, arg1 [, arg2, ...]]); methodAには任意の関数（メソッド）を指定します。 callの引数は第一引数にmethodAのthisとしたいオブジェクトを指定して、第二引数以降はmethodAに渡したい引数があれば、カンマ区切りでそれぞれ指定します。 callメソッドは、すべての関数が共通して持っているメソッドです。すべての関数はFunctionクラスのオブジェクトで、callはFunction.
前回の記事でもお伝えしましたが、IE8上ではSVGが動きません。IE9上でもanimateがうまく動きません。そこでRaphael.jsというjavascriptのSVGフレームワークを使うことにしました。このフレームワークは、SVG対応しているブラウザにはSVGで表示させ、SVG対応していないブラウザにはVMLという旧ベクター表示形式で表示してくれるスグレモノです。 これでIEでもベクターアニメーションが利用できるんです。早速利用してみましょう。 使ってみる Raphaël—JavaScript Library こちらからjsはダウンロードできます。使い方は簡単で、javascriptを読み込んだ後、ページ内の要素に関数を使用してオブジェクトを埋め込むだけです。 今回はpath関数を使用してIllustratorから出力した少し複雑なSVGを読み込ませてみました。 いかがですか？きち
2011年03月27日13:53 カテゴリJavaScriptプログラミング 超簡単にHTMLテーブルでエクセルのオートフィルタみたいなのを実現するライブラリ 仕事でHTMLテーブルでエクセルのオートフィルタのようなものを使いたい、という要望があり、多分探せばそんなスクリプトがあるんじゃないかと思い探したところやっぱりありました。 http://www.javascripttoolbox.com/lib/table/index.php これは、tableやth要素にclass属性でtable-autofilterとかtable-filterableとしてあげるだけで, ソートやらフィルタリングやらページングやら（いずれもクライアント側で処理）を簡単に装備できてしまうという超スグレモノです。 早速やってみる。 まずソースをダウンロードして、とりあえず table.js という名前で保存してイ
WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」 2011年12月12日- Web-Based JavaScript Spreadsheet Software - dhtmlxSpreadsheet WEBページにExcel風スプレッドシートを設置できるウィジェットライブラリ「dhtmlxSpreadsheet」。 次のような綺麗なデザインのテーブルを簡単に配置できます。PHPとJavaScriptで書かれていて、データなんかも自分のサーバ上においておけるのが特徴 データベースからのバインディングができたり、PDFやExcel形式でのエクスポートに対応しています。 WordPressプラグインもあるみたいなのでWordPressな方にも使いやすい 色を変えたりSUMしたりと多機能。 関連エントリ これは凄い、Excelの関数
先に断っておきますが、拡張子xlsxであるOffice Open XML Spreadsheetです。いわゆるExcel 97-2003形式（拡張子xls）を期待された方、すみません。 ウェブブラウザ上で動作するJavaScriptでExcelブックを作るプログラムを書いてみました。 Google Chrome 10.0, Safari 5.0.4, Firefox 4.0, Firefox 3.6.16で正常に動作しました。ただし、SafariとFirefoxでは、ダウンロードのたびにファイル名を指定する設定とすることをお薦めします。そうでない場合、ファイルに拡張子が付かないです（Excelの入っていないPCではGoogle Chromeも同じ結果になるのかもしれません）。 Opera 11.01では、期待通りのファイルが生成されず、Excelで開こうとすると「修復しますか？」と聞かれて
ちょっと思うところあって JavaScript 内で、複数のファイル情報を作って Zip で固めて、 Data URI を生成するライブラリを作ってみました。 ソースは以下の zip.js です。 http://svn.coderepos.org/share/lang/javascript/Zip/ 使うには 以下の base64.js が必要です。 http://svn.coderepos.org/share/lang/javascript/Base64/trunk/ この base64.js は弾さんが作ったものです。 今回 Zip で使うように、ちょっとチューニングさせていただきました。 こんなことができます // zip オブジェクトを作る var zip = new Zip; // 文字列をファイルとして追加する zip.addString('Hello, world!!', '
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
