@ledsun blog

Hのキーがhellで、Sのキーがslaveだ、と彼は思った。そしてYのキーがyouだ。

JavaScript

テキストより複雑な構造のデータを扱うWikipediaを作る

モチベーション 専門性を持った不特定多数のユーザに協力してもらい、個人では作り得ない大規模なデータベースを作りたいことがあります。 例えば、Wikipediaは、(記述の正確性や公平性における問題は抱えているかもしれませんが)規模の点で成功しています…

東京Node学園祭2015に参加しました #nodefest

本編短評 Node Discussionがめっちゃくちゃ面白かった @domenicさんはbabelが好きじゃない*1。moduleはもっと好きじゃない*2 Node.jsにES6 moduleサポートが入る目処は立っていない。そもそも仕様が決まっていない。 power-assertはNode.jsのコアに入らない…

Form で遊ぶために対抗サーバーを作って公開した

背景 HTML fromを新人に説明しようとしました。 うまく説明できませんでした。 つまり、よく分かっていません。 ドキュメントを読んで言葉で理解し、 パラメーターを変えながら実際に動かして、心で理解したいです。 しかし、formは対抗するサーバーがないと…

JavaScript入門用のコンソールプログラムjavascriptingを翻訳しました

javascriptingを翻訳しました。 javascripting-jpとは何か? ledsun/javascripting JavaScriptの文法を学ぶコンソールアプリケーションです。 文字列や数値、条件文やforループなど文法を学びます。 次のコマンドでインストールできます。 npm install --glo…

bowerパッケージのアップデート手順

bower.jsonを見て、使っているパッケージ名を確認します。 bower info xxxで最新バージョンを確認します。 bower.jsonのバージョンを書き換えます。 bower installで更新します。

(私的)npmモジュールの作りかた

npmモジュールを作るときの自分の手順をまとめました。 プロトタイプをコーディング済みで、コンセプトが固まっている前提です。 モジュール名を決める npmを検索、類似ライブラリが無いか探す。 ついでに、APIや実装にパクれるネタを探します ハイフン区切…

6to5で作ったnodeライブラリ

ライブラリをES6で書いて公開する所から始めよう | Web Scratch 読んで触発され、 6to5を使ってライブラリを書きました。 作ったライブラリ チャットワークにメッセージをポストするだけの関数です*1。 ledsun/post-chatwork-message こんな感じで使います。…

JavaScriptの日付に1日足したり2時間引いたり、計算するライブラリを作りました

IE9以降のブラウザとNede.jsで動きます。 AMDでも動くはずです。 試していません。動かなかったら教えてください。 ledsun/date-adder どんなライブラリか? こんな感じ dateAdder(new Date(2014,10,27), {days: 1}) //Thu Nov 28 2014 00:00:00 GMT+0900 (J…

グーグルカレンダーに予定を追加するURLを作るライブラリを作りました

ledsun/generate-google-calendar-url Node.jsとブラウザどちらでも動くように作ってあります。 作った理由 Google Chrome拡張で使いたかった。探してもURLだけを作ってくれるライブラリがありませんでした。 carlsednaoui/add-to-calendar-buttons URLは作…

東京Node学園祭2014に参加しました #nodefest

東京Node学園祭2014に参加しました。 nodeschool in Japan maxwell ogdenによるNode.jsのワークショップの日本出張版。 Nodeschool Tokyoに大体の内容が書いてある。 maxogden/levelmeup-jp · GitHub をやってみました。 levelmeup-jpコマンドでターミナル上…

reduceでPromiseをつないでタイムライン実行する

Promiseとreduceを組み合わせたトリック。 適当な間を置いてイベント発行するstubを作る時に使いました。 指定時間後に処理を実行するPromiseを作ります。 var DelayPromise = function(delay, action) { return new Promise(function(resolve, reject) { se…

Ansibleを使ってRaspberry PiにNode.jsをインストールする

前提 2014-06-20-wheezy-raspbian.imgを使ってRaspberry Piが起動できていること。 ansibleをインストール Mac ではHomebrewが使えます。 brew install ansible 設定ファイルを準備 hosts [raspberry-pi] 192.168.0.54 IPアドレスを適切に設定します。 ansib…

crestとバグとpacage.json

MongoDBを外部プログラムから更新するのにREST APIがあると便利です。 Cordazar/crest · GitHubというアプリケーションを試してみました。 バグを踏みましたが、原因がわかりました。そういう話です。 npm installできない npm install crest エラーが起こり…

MQTTとJavaScript

MQTTってなに? PUB/SUBプロトコルです。 HTTPと同じレイヤーです、主にTCP上で動きます。 WebSocket上でも使えます。 温度計などのセンサーの計測値を集めるM2MプロトコルとしてIBMに開発されました。 なぜMQTTなの? 公式には 小さいコンピューター(Rasbe…

Gitlabの更新情報をChatworkに通知するアプリケーション、Syamoを作りました

Gitlabの更新情報をChatworkに通知するアプリケーション、Syamoを作りました。 Syamoとは? Gitlabのプロジェクトが更新されたときにChartworkのチャットルームにメッセージを送ります。 Gitlabのプロジェクトの更新情報は次の三つです。*1 gitブランチへのp…

Gitlabの更新を契機にJenkinsでnode.jsアプリケーションをテスト

はじめに 前提条件 ソース管理はgitlab JenkinsはCloudbeesを使う*1 テストはfresby.jsで書いてる 目標 gitlabでトピックブランチをmasterにマージしたら自動的にテストする gitlabの設定 秘密鍵 Jenkinsがgit cloneできるように秘密鍵を登録します。 Jenkin…

component.js(1.0.0-rc5)を試す

component.js component.jsはnpmやbowerを使った依存する外部ライブラリ(JavaScript,CSSともを含む)の解決と、 unglifyやcssminで行う自作ファイルを適切に組み合わせるビルドを1つのツールでやってしまおうとする 意欲的なツールです。 Getting Started …

ZeroClipboard

ZeroClipboardを紹介します。 ZeroClipboardとは ブラウザからクリップボードに書き込むためのJavaScirptライブラリ。 githubで使われています。 なぜZeroClipboard? クリップボード操作はブラウザ依存(InternetExplorer専用)です。 ZeroClipboardはFlash…

設定なし、コマンド一つで起動できる簡易httpサーバー http-server

nodeapps/http-serverを紹介します。 これはなに? 設定なし、コマンド一つで起動できる簡易httpサーバーです。Node.jsで実行します。 どうやって使うの? インストール brew install node npm install http-server -g 起動 http-server . ブラウザで http:/…

JavaScriptのreduce関数が便利、けど動きが理解しづらいのでサンプルを列挙

JavaScriptのreduce関数がとても便利なのです。 たとえば ユニークはこんな感じ var unique = function(array) { return array.reduce(function(a, b) { if (a.indexOf(b) === -1) { a.push(b); } return a; }, []); }; 関数の外部に結果を格納する変数を作…

AngularJSで画面制御 ただしJavaScriptは書かない

AngularJSはモデルとビューの間のデータを自動的に同期してくれます。 モデルとは内部データです ビューはhtmlです つまりhtml上に入力した値が自動的に内部データに反映され、内部データが変更されれば自動的にhtmlも更新されます。 詳しくはリファレンスを…

YEOMANを使ってMEAN(MongoDB + Express.js + Angular.js + Node.js)のWebアプリケーションを作る

MEANとは MongoDB + Express.js + Angular.js + Node.js を組み合わせてWebアプリケーションを作成することです。 手順 Windows上で簡単なユーザ登録アプリケーションを作ってみましょう。 次の手順で進めていきます。 アプリケーションの雛形を作成 ユーザ…

Grunt livereload でファイルを修正したらブラウザを自動リロード

livereloadとは? ファイルの変更を検知したらブラウザで読み込みなおすgrunt-contribe-watch プラグインのオプションです。 grunt-contribe-connectプラグインとブラウザ拡張と組み合わせて使います。 何がうれしいの? クライアントJavaScriptの開発では …

QUnitの概要

QUnitとは JavaScript用のTestingFrameworkです。 由来 jQueryのテスト用に作られ、今もjQuery、jQuery-UIのテストに使われています。 それ自体はjQueryに依存していませんが、テスト内でDOMを操作したりイベントを生成したりするのにjQueryを使うと便利です…

My first grunt

grunt とは? JavaScript開発でよく使うビルドツール。makeやrakeのJavaScript版です。 Grunt: The JavaScript Task Runnerにて公開されています。 どうやって使うの? コマンドラインから操作します。Node.jsのパッケージマネージャ(npm)を使ってインストー…

JavaScriptでSigletonオブジェクトを実装してみる

いろいろなSingletonを実装してみます。 関数 var getSingleton = (function() { var instance = null, init = function() { instance = { value: Math.random() } }; return function() { if (instance == null) { init(); } return instance; }; })(); var…

JavaScriptのパターン シングルトンパターン

定義を確認 GoFの定義したSingletonパターンの目的(Intent)は以下の二つです*1。 あるクラスのインスタンスが1つしか生成されないことを保証する そのオブジェクトへのグローバルなアクセス手段を提供する 実装例 JavaScript デザインパターンの例がいけてま…

JavaScriptのオブジェクト生成

JavaScriptには次の三つのオブジェクト生成方法があります。 プロトタイプ風 クラス風(異教徒の呪い、Fxxk your God!!!) 関数の束縛 比べてみましょう。 例に使う関数 ここに指定した文字に挨拶をする関数があります。 var hello = function(str) { return…

Douglas Crockford の説明する「JavaScriptのプロトタイプ継承」

Douglas Crockford によるJavaScriptのプロタイプ継承の説明 Prototypal Inheritance の翻訳です。 JavaScriptのプロトタイプ継承 2006-06-07 Douglas Crockford - www.crockford.com 私は五年前に「Classical Inheritance in JavaScript」(中国語 イタリア…

JavaScriptのプロトタイプ継承

JavaScriptをプロトタイプベースのオブジェクト指向言語と説明することがあります。 プロトタイプベースとはJavaScriptのどのような特徴を指しているのでしょうか? プロトタイプベースとは何か? まず最初に「プロトタイプベース」という言葉の意味を整理し…

JavaScriptのパターン オブジェクトの拡張

対象オブジェクトに複数のプロパティを一度に追加します。 以下のデザインパターンを適用する。 extendパターン 元の処理 プロパティを一つずつ設定します。 var mike = {}; mike.firstName = "michelle"; mike.lastName = "jackson"; mike.getFullName = fu…

JavaScriptのパターン コンストラクタパターン

JavaScriptのオブジェクトの生成、特にコンストラクタに次のデザインパターンを適用します。 オブジェクトリテラル 基本のコンストラクタパターン プロトタイプを使ったコンストラクタパターン モジュールパターン 最初の関数 指定された文字を指定された回…

RhinoまたはAntでJavaScriptを複数ファイルに分けるために

JavaScirptには別のファイルに書かれたスクリプトを読み込む方法がありません。しかしスクリプトファイルが大きくなると複数のファイルに分けたくなります。 別のスクリプトファイルを読み込む(includeする)方法が必要です*1。 次の file1.js を読み込みま…

AntからJavaScriptを実行したときに起きたエラーを拾う方法

Apache AntではScriptタスクを使うとJavaScirptを実行できる。 しかしJavaScriptで例外が上がると、表示される内容の9割以上がRhinoScriptEngineの例外になる。 興味があるJavaScriptの例外は一行だけ。 例外が起きるbuild.xml <project default="a"> <target name="a"> <script language="javascript"><![CDATA[ throw 'わあ!';</script></target></project>…

JavaScriptの値が配列かどうか見分ける方法のまとめ

JavaScriptには配列に typeof 演算子を使うと object が帰ってくるという糞仕様があるためみなさん苦労されている。 Douglas Crockfordさん Douglas CrockfordさんのDuckTyping方式。JavaScript: The Good Parts 「6.5 配列かどうか」より抜粋 var is_array …

Javaのスクリプティング機能のimportPackage文の書き方

Java スクリプティング機能とはJavaからJavaScriptを実行したり、JavaScriptからJavaのクラスを参照したりする機能。 詳しくはJava SE 6 じゃじゃ馬ならし Scriptingを見てもらうとして JavaScriptからJavaで定義されたクラスを参照する際にパッケージをimpo…

JavaScript殺法 11のリファクタリング

JavaScriptを書いていてぶち殺したくなった時によく使うリファクタリングです。 1.定義順を整理 JavaScriptパターンの5.4.1 モジュールパターンの開示を参考に、var、処理、API公開の順に並べなおす。 function () { //宣言 var hoge = 'hoge', fuga = ''; /…

JavaScriptパターン ―優れたアプリケーションのための作法

2章 必須パターン、3章 リテラルとコンストラクタ JavaScriptを書くときの注意点。JavaScript: The Good Partsの方が理由の説明が分かりやすい。 YUI DocについてはGood Partsには記述が無いので参考になる。 4章 関数 関数の書き方はJavaScript: The Good P…

ステートフルJavaScript(JavaScriptフレームワーク 3分間クッキング)

FlexやSilverlightの代わりにJavaScriptを使ってリッチクライアントアプリケーション(RIA)を開発するための解説書。著者Alex MacCawはSpine*1の作者。 ざっくりした内容 この本には二つのテーマがある。 表テーマ:「最新のJavaScriptアプリケーションを開…

jQuery.validateはform専用だった。

form専用なの? An error is encountered in below case. I use jQuery.validate wtih jQuery.ui.dialog. At first, I validate to div in form. I show dialog, the div move out of the form*1, and a focusin event triggered to the first input element…

jQuery UI datepickerの showButtonPanel にボタンを追加する

jQuery UI datepickerの showButtonPanel にボタンを追加します。今回はクリアボタンを追加します。 ボタンを表示 showButtonPanel を trueにしてボタンを表示します $("#datepicker2").datepicker({ showButtonPanel: true }); ボタンを追加 beforeShowイベ…

jQuery.validate プラグイン の落とし穴

初期値があると必須バリデーションが上手く動かない 初期値があると、初期値を消したときに「必須です」メッセージが表示されません。 デモ 初期値があるテキスト要素に必須バリデーションが上手く効かない - jsdo.it - Share JavaScript, HTML5 and CSS 対…

JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス

IE6が死にそろそろ業務向けのWebアプリケーションでもクライアントサイドで処理を動かすいい時期だと思う。お手軽に動きをつけるならjQueryがいい。ソースコードが増え1000行超えると、仕様が変わったときにどこを修正したらいいか分からなくなる。しかしJav…

JavaScriptのオブジェクトをコピーする

API Only - Stack Exchangeに詳しい解説があったので翻訳する。 質問 オブジェクトxをオブジェクトyにコピーしたい。yを変更してもxが変更されないようにだ。JavaScriptで、最もエレガントな方法は?追記: JavaScriptの組み込みオブジェクトをコピーすると不…