【JavaScript】ライブラリを使わずにプログレスバーを実装する

プログレスバーを使いたいけどそのためだけにBootstrapやjQueryを入れるのもなぁ…。
ということで、JavaScriptでプログレスバーを実装してみた。

HTML/CSS

<div class="app">
  <p>進捗: <button id="up">+</button> <button id="down">-</button></p>

  <div id="prog-bar" class="progress">
    <div class="progress-bar">
    </div>
  </div>
</div>

.progress がプログレスバーの外枠。
.progress-bar がプログレスバーの中身。
この辺はBootstrapと同じ。

VSCodeで素のJavaScriptでも強力に自動補完させる方法

個人開発ではTypeScriptを使っているが、小さなアプリや仕事では素のJavaScriptを使っている。でも、やっぱり自動補完が効かないのはツライ。

そこで、VSCodeでなんとかIDE並に補完できないかと検証していたら、なんかうまいこと自動補完する方法をみつけた！
ということで、VSCodeで素のJavaScriptでも強力に補完させる方法を紹介する。

開発環境

• Mac OS X Yosemite
• npm 3.3.12
• typings 0.6.8
• VSCode 0.10.9

TypeScriptのtsdがオワコンになったのでtypingsを使ってみた

photo by Daniel Foster

TypeScriptでの型定義管理で使っていたtsdがオワコンになった。
代わりに typings を使ってくれとのこと。

▶ Deprecate TSD · Issue #269 · DefinitelyTyped/tsd

ということで、typingsを使ってみた。

開発環境

• Mac OS X Yosemite
• npm 3.3.12
• typings 0.6.8

詳しいTypeScriptの開発環境構築は以下のエントリを参照してほしい。

エラー箇所など指定した要素にスクロールで移動する

photo by mollyali

縦長Webページの入力フォームなどで、バリデーション後にエラーを表示したいことがある。その方法はいくつもあるが、今回はエラー箇所にスクロールで移動する方法を実装する。

※サンプルではjQueryを使用しているが、使わなくても対応可能（アニメーションが面倒だけど）

【JavaScript】jquery.xdomainajax.jsで簡単スクレイピング

スクレイピングとは、ウェブサイトから情報を抽出する技術のこと。
簡単に言えば、とあるサイトのHTMLを取得できるってこと。

jQueryだけでスクレイピング

これを実現するためには、ajaxを使う。

var url = 'http://kuroeveryday.blogspot.com/';

$.ajax(url, {
  crossDomain: true,
  success    : function (res) {
    console.log(res);
  }
});

ただしこのままでは以下のようなエラーがでる。

XMLHttpRequest cannot load http://kuroeveryday.blogspot.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

アクセス先のサーバからのレスポンスに Access-Control-Allow-Origin が含まれていないとアクセスすることができないからだ。