GitHubから特定ディレクトリだけを簡単にダウンロードする方法

GitHubからプロジェクトをダウンロードするには clone を使ったり、プロジェクトのトップページからzipファイルとしてダウンロードすれば良いのですが、特定のディレクトリ配下だけをダウンロードしたい場合は svn を使うのが簡単だったりします。
今回はsvnを使ってGitHubから簡単にダウンロードする方法を紹介します。

[HTML5] オートコンプリートな入力ボックス

オートコンプリートな入力ボックス（サジェスト機能）は、HTML5の datalist タグを使うことで簡単に実現できます。

JS標準API Object.observe() でデータバインディング

オブジェクトの変更を監視できる Object.observe() が Chrome 36 Beta から利用可能になりました。
これにより標準APIだけでデータ・バインディングが可能になります。データ・バインディングは、例えば、アプリの「設定」が変更された場合などに効率的に設定データをアプリに反映したいときなどに利用されます。これが標準APIとして利用できるようになったということは、ソースコードがシンプルになるという他にも、無駄なポーリングをする必要がなくなるのでパフォーマンスが改善されるというメリットもあります。
以下は Object.observe() を使ったサンプルコードです。

JavaScriptでクラスを実現する方法【暫定版】

JavaScriptでもECMAScript6になってようやく「クラス構文」が実装されようとしていますが、現在はまだほとんどのブラウザで実装が進んでいないようです。クラス構文の実装を待てない人は以下の方法でクラスを実現することができます。
※タイトルに【暫定版】とつけたのは現在のJSバージョン(ECMAScript6)にもうすぐクラス構文が実装される予定だからです。

CSS3 Flexboxで伸縮カラムを作る

CSS3のFlexboxを使えば画面の横幅に合わせてフレキシブルに伸縮するカラムを簡単に作ることができます。

Flexboxはdisplay: flex;から始まります。

CSS3の便利なセレクタ

CSS3のセレクタには便利なものがたくさんありますが、色々ありすぎてつい忘れがちなので、ここで改めてメモしておきます。

PolymerをHelloWorld！

Polymer は HTML5 Web Components のGoogle実装です。
Polymerを使えば、HTMLのコンポーネント化（部品化）が簡単に行なえます。部品化することで、デバイスの画面サイズに依存しないレスポンシブ・デザインも容易になります。
Polymerの導入はとても簡単です。
まずは下の簡単なサンプルでPolymerのエッセンスをつかんでみましょう。

Chromeアプリで長押しコンテキストメニュー

Chromeアプリ開発でコンテキストメニュー（もどき）を簡単に実装する方法です。
通常の chrome.contextMenus は実際にプログラマティカルにメニュー内容を変更しようとすると background.js とcontent script との通信が発生するので結構面倒です。でも、これから紹介するやり方ならそんな面倒な手間もなく結構楽に実現できます。
ついでなので左マウスボタン長押しでコンテキストメニューを表示するような実装にしてみましょう。

Chromeアプリの画面印刷

以下はChromeアプリで画面を印刷するサンプルアプリです。

YeomanでChromeアプリを作る手順

YeomanはモダンWebアプリの雛形を自動生成してくれる便利なツールですが、YeomanをインストールするとGruntやBowerも自動的にインストールされて、プロジェクト管理自体が非常に楽になります。Yeoman + Grunt + Bower は、JavaでいうところのビルドツールMavenのような存在です。
これからYeomanをインストールして実際にChromeアプリを作るところまでの手順を紹介したいと思います。
※ここではnode.jsとnpmが事前にインストールされていることを前提に話を進めます。

[Ubuntu] kazamでスクリーンキャスト

Ubuntuでスクリーンキャストを撮る際に以前はRecordMyDesktopを使っていたのですが、微妙につかいにくかったのと撮影時に画面に網掛けが入るというバグ？があったので、それを機にKazamに乗り換えました。

[Ubuntu] バックアップ＆リストアはrsyncで簡単に

Ubuntu（Linux）でデータのバックアップに便利なのがrsyncコマンドです。

Chrome版2chブラウザ「niichrome」をリリース

Chromeアプリ版２ちゃんねるブラウザ「niichrome」(ニクロム)をリリースしました。
軽量なのにそこそこ便利な２ちゃんブラウザに仕上がったと自負しています。

インストールは下の Chrome Web Store (CWS) からどうぞ。
CWS: niichrome 2chブラウザ

niichromeはオープンソースです。ソースコードはGitHubで公開しています。
GitHub: niichrome-2ch-browser

要望やバグ報告などありましたら、レビューページで気軽にコメントしてください。

Chrome拡張機能のbackground.jsとpopup.jsで通信

Chrome拡張機能のpopup.js（popup.html）とbackground.jsとの間で通信するサンプルです。

[HTML] DOM変更イベントを検知する方法

ついつい忘れやすいのでメモ。

jsソースをSublimeTextから直接実行する方法

SublimeTextで書いたJavaScriptコードをちょっと試してみたいときに、いちいちブラウザを立ち上げてデバッグするのは面倒です。そんなときは下の方法でSublimeTextからjsコードを直接実行してみましょう。

Lubuntu14.04LTSのChromiumにFlashPlayerをインストール

Lubuntu を 14.04LTS にアップデートすると、デフォルトの状態ではChromiumでFlashのコンテンツが見れません。Chromiumが Adobe Flash の Netscape Plugin API をサポートしなくなったためです。
そのためChromiumでFlashコンテンツを見るためには、Pepper Flash Player Plugin という代替プラグインをインストールする必要があります。

Lubuntu14.04LTSでNetworkManagerを復活させる方法

Lubuntuを14.04LTSにアップグレードしてみたところNetworkManagerが消えてしまいました。今回はそれを復活させる方法をメモしておきます。

[jQuery]大量の要素を高速に追加する方法

jQueryで大量の要素を動的に追加するときに最もパフォーマンスが高い方法を調べてみました。

LubuntuとSSDで10秒起動[動画有]

古いノートPCのHDDをSSDに換装し、OSにLubuntuをインストールしてみたら、びっくりするほど快適になったので思わず動画に撮ってみました。

ChromeAppsでWebViewのDOM操作

Chrome packaged apps からWebView内に表示されたWebページのDOMを操作する方法です。

Chrome拡張機能でDOMを操作する方法

今回はChrome拡張機能からDOMを操作する方法をご紹介します。
これから紹介するサンプルは、(1)ブラウザアクションボタンが押されると (2)ページタイトルを'hoge'に変更し、(3)ボタンを押した側（つまりbackground.js）にタイトルが変更されたことを通知する、という動きをする拡張機能です。

[Ubuntu] ATコマンドでUSBモデムの電波強度を確認

Ubuntuで格安SIMなどで通信を行う際、その場の電波の強さ(質)を確認したいことが多々あります。
NetworkManagerなら電波アイコンで見ることができますが、NetworkManagerを使わない場合はATコマンドを使ってCUIで確認する必要があります。

Chrome appsで外部サイトの画像をロードする方法

Chrome apps では外部サイトの画像を読み込みたいとき、 HTML内部で <img src="http://..../hoge.gif"> のようにしても上手く行きません。

例えば、<img src="http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png" /> のような画像URLをHTMLから読み込んだとき、以下のエラーが発生します。

Refused to load the image 'http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png' because it violates the following Content Security Policy directive: "img-src 'self' data: chrome-extension-resource:".

これは Chrome apps の Content Security Policy (CSP) による規制のためです。
これを回避して、外部の画像を読み込むには以下のようにします。

jQuery高速化コーディングテクニック

コードの書き方ひとつでjQueryを使用したアプリは劇的に高速になります。
高速化の効果が特に高かったコーディング方法をメモしておきます。

※今回使用したブラウザ
Chromium バージョン 32.0.1700.107 Ubuntu 13.10

[Ubuntu]タッチパッド設定をカスタマイズ

ラップトップにUbuntuをインストールした直後、タッチパッド（トラックパッド）二本指タップでの「中クリック」が急に効かなくなってしまいました。正確には、二本指タップをすると右クリックメニューが出てきてしまうという現象です。
今まで我慢して使っていたのですが、Webブラウジング中にブラウザで「新しいタブを開く」のにいちいち右クリックメニューを使ったり、Ctrlキーを押しながらクリックしたりというのが煩わしくなってきたので、そろそろマウス設定をちゃんと調整することにしました。

jQuery本体だけでアコーディオンメニュー

メニューを折りたたんだり開いたりする、いわゆる「アコーディオンメニュー」（トグルメニュー）は、jQuery本体だけで実現できます。

Ubuntu版SublimeText2（とSublimeText3）で日本語入力

Ubuntu版SublimeText2で、諦めていた日本語入力ができるようになったので、その方法をメモしておきます。
これから紹介する方法は、日本語入力システムに fcitx を使っていることが前提になっています。おそらくibusだと下の方法は使えないと思いますのでご注意を。

[Ubuntu]oggをwav、mp3に変換

手元にあるoggオーディオファイルを昔のMP3プレーヤーで聞きたかったので、ogg→wav→mp3な変換方法をちょっと調べてみました。
Ubuntuだとかなり簡単に実現できますね。

jQuery本体だけでドロワーメニュー

アプリのUIレイアウトデザインでは、DIVやTABLE、IFRAMEを使ってフレームを切ったりしてついつい複雑にしてしまいがちですが、少しでもシンプルでスッキリした画面レイアウトにするには、メニューやアイコンなどの直接メインコンテンツに関係ない部分を「ドロワーメニュー」式にするのが良いでしょう。ドロワーメニューというのは、マウスを置いたりするとニュルッと横などから出てくる、例のスライドメニューのことです。ドロワーメニューを使えば、少しでも画面を広く使うことができます。
以下はそのサンプルコードです。

[HTML5]IndexedDBでCRUDするサンプル

HTML5標準APIのIndexedDBでCRUDを理解するための簡単なChromeアプリです。

Chromeアプリをフルスクリーンで起動させる方法

Chromeアプリをフルスクリーンモードで起動させるサンプルコードです。

使えるCSS3アイコン集

アプリの軽量化に一番効果的なのは画像を使わないことです。単純なアイコンなら、わざわざ画像を使わず、CSS3で実現するのがベストだと思います。

[Node.js]pm2でデーモン化

Node.jsアプリのデーモン化には、簡単で高機能なpm2がおすすめです。

[Node.js]emailjsでメール送信

node.jsでメールを送信するときは、emailjsを使うのが便利です。emailjsを使えば、とても簡単にHTMLメールや添付ファイルを扱うことができます。

Ubuntuでデフラグ

Ubuntuにはe4defragという便利なデフラグツールがデフォルトでインストールされています。
断片化されたディスクスペースをデフラグすることでディスク・アクセスを高速化することができます。もちろんHDDだけではなくSSDでもデフラグの効果は絶大です。

自前認証局でSSL対応なNode.jsサーバアプリ

サーバアプリで暗号化通信だけを目的としてSSLを使いたいときは、自前の認証局(Certificate Authority)を立ててやるのが簡単です。セキュリティ面で決してオススメできる方法ではありませんが、無料で手軽に導入できるというメリットは大きいと思います。
これから紹介するのは、自前の認証局を立てて証明書を発行する方法と、SSL対応のNode.jsサーバアプリのサンプルです。

ExpressとRedisでセッション管理

今回は、Node.js+Express+EJS+Redisを使ってセッション管理を行ってみます。
これから紹介するサンプルアプリは、「ログインするとマイページに飛び、ログアウトすると再びログイン画面に戻る」だけの簡単なものです。

Nodejs+Express+EJSのサンプル

Node.js+Expressな環境でテンプレートエンジンEJSを使うサンプルです。

Brackets：軽量JavaScriptIDE

最近はJavaScript IDEとして「Brackets」を使っています。
Eclipseほど高機能はいらないけど、とにかく軽くて、テキストエディタよりもそこそこ便利なIDEを求めている人にはぴったりです。
JavascriptIDEとはいえ、もちろんHTMLやCSSにも対応しています。
Bracketsには、Windows版の他にもMac版やLinux版があります。

Nodejs+ExpressでRedisを使うサンプル。

前回からの続き。
今回はNode.js + Expressな環境でKey-ValueストアのRedisを使い、「今アクセスしている人の合計を表示」するだけの簡単なWebサービスを作ってみましょう。