Node.js＋ExpressなHelloWorld

Node.jsとNode.js用WebApplicationフレームワークExpressを使ったHelloWorldです。

[JavaScript]最速の配列ループ処理

大量の配列データを捌くときは少しでも速い処理を心がけたいものですが、JavaScriptで配列処理を少しでも速くするにはどうすればよいのでしょうか。今回はちょっと基本に戻って、JavaScriptで最速の配列ループ処理を再確認してみたいと思います。

[Ubuntu]任意のウィンドウを半透明に

前回xcompmgr をインストールしたときに transset も同時にインストールされていると思います。transset は任意のウィンドウを半透明にするユーティリティです。

[Ubuntu]USBモデム「L-03D」をセットアップ

UbuntuでUSBモデム「L-03D」をセットアップして、ppp接続設定を行う方法をご紹介します。今回はNetworkManagerを使わない方法です。

[Ubuntu]ターミナルウィンドウを半透明に

私のUbuntu環境(Lubuntu 13.10)上でターミナル画面を半透明にするには、xcompmgrのインストールが必要でした。

MeldはGitプロジェクトでも使えるマージツール

Gitプロジェクトの比較およびマージ作業のやり方です。(使用OS: Ubuntu 13.10)
今回は、Meldというマージツールを使います。

[HTML5]Web Speech APIの簡単なサンプル

Web Speech APIは、HTML5の仕様の一つで、人間の言葉を認識させるためのAPIです。今のところChromeブラウザにしか実装されていませんが、とても将来性のあるAPIの一つだと思います。覚えておいて損はないでしょう。
下記はWeb Speech APIを使うための簡単なサンプルです。

[Ubuntu]日本語入力はibusを捨ててfcitxに

これまでは日本語入力にibusを使っていたのですが、作業中に（エディタとブラウザを行き来していると）突然日本語変換ができなくなるといった不具合があったので、遂にibusを捨てて、入力メソッドをfcitxに変えてみました。※環境は Ubuntu 13.10 です。

JavaScriptでオンライン/オフライン状態を取得

JavaScriptでネットワークの状態（オンライン/オフライン）を知ることができます。

[Linux]ZIPファイルの圧縮と閲覧と展開

Linuxのターミナル上でZIPファイルを圧縮、閲覧、展開する方法です。
普段GUIのファイルマネージャばかり使っていると、コマンドラインからのやり方をついつい忘れてしまいがちなので、備忘録としてメモしておきます。

英和/和英辞書アプリ「Enjad」を公開

オフラインで使えるChrome用の英和/和英辞書アプリ「Enjad」を公開しました。

[Ubuntu]内蔵Webカメラを認識させる

私のUbuntu13.10(ASUSラップトップ)はデフォルトの状態では内蔵Webカメラを認識せず、デフォルトのWebカメラアプリ(guvcview)を立ちあげてもエラーが出てうまく起動できませんでした。
その後、いろんなサイトを参考にして四苦八苦した結果、とてもシンプルな方法で解決できたので、それをメモしておきます。

KateでHTML/XMLをフォーマット

前回に引き続き、今度はHTML/XMLのフォーマット（整形）のためのKate用Scriptを書いてみました。

KateでHTMLエンコード＆デコード

前回はJavaScript/JSONフォーマット用のScriptを書きましたが、調子に乗って今度はHTMLのエンコード＆デコードのScriptを書いてみました。

KateでJavaScriptやJSONをフォーマット

テキストエディタKateでJavaScriptやJSONのコードを綺麗に整形（フォーマット）するには、Kate用Scriptを自作する必要があります。自作といってもとても簡単ですので、もしあなたがKateユーザなら、Kate用Scriptの作成の練習も兼ねて作っておくことをおすすめします。

GeanyからKateに乗り換え

テキストエディタをKateに乗り換えてみました。
今まで開発用テキストエディタにGeanyを使っていたのですが、画面を切り替えているときに何かの拍子で日本語入力が死ぬという、致命的なバグ？があったので、他のエディタを探していたところ、Kateに出会いました。

Bookeepaを公開

無料の家計簿Chromeアプリ「Bookeepa」を公開しました。

UbuntuでScreencast

これは古い記事です

Ubuntuでのスクリーンキャストには、RecordMyDesktopよりも使いやすいKazamがおすすめです

UbuntuでScreencastを撮るなら、apt-getで簡単にインストールできる RecordMyDesktopがおすすめです。

インストール不要！開発用HTTPサーバSimpleHTTPServer

以前、開発用HTTPサーバとしてLighttpdを紹介しましたが、静的なWebサイトやChromeアプリの開発だけならわざわざHTTPサーバをインストールする必要はありません。

[Ubuntu]モニタ輝度を低くしてバッテリー節約

ノートパソコンなどのモバイル端末を使う際にやっぱり気になるのはバッテリー残量ですが、マシンの性能を落とさずにバッテリーを節約する最も効果的な方法は、モニタの輝度を低く(暗く)設定することです。
これから紹介するのは、Linux(Ubuntu 13.04)で輝度調整を行う方法です。

Node.js＋MongoDB＋ExpressでWeb APIをシンプルに

Node.jsでWeb APIを作りたいときは、データベースにはMongoDBを使い、MVCフレームワークにはExpressを使えば簡単です。

Node.jsでサーバサイド開発をシンプルに

Node.jsはサーバサイドJavaScriptの実行環境です。
Node.jsを知らない人の多くが、「サーバ側でPHPやJavaみたいにJavaScriptが使えるようになっただけでしょ？」と思うようですが、実際はそうではありません。Node.jsはApacheやTomactのようなWebサーバやコンテナすら必要としない、とてもシンプルなJavaScript実行環境なのです。

例えば下のコードを見て下さい。Node.jsがどういうものなのか、すぐに理解できると思います。

[JavaScript] オブジェクト配列のソート

2018/02/07更新: ECMAScript 2015 からは標準でソートが簡単にできるようになりました。 更新前の記事がだいぶ古かった（ECMAScript 2015 より前に書きました）にもかかわらず、この記事に結構アクセスがあったので、いつまでも放置せずアップデートしておきました:

Auto-Translateはおすすめの翻訳Chrome拡張機能

Webページを翻訳するChrome拡張機能は星の数ほどありますが、私の一番のお気に入りは、Auto-Translateです。

DjangoとSQLiteを使ったサンプルアプリ：テスト編

前回はDjangoアプリで公開用画面の作り方をご紹介しました。
今回はDjangoアプリのテスト方法をご紹介します。(今回使用したDjangoのバージョンは 1.4.5 です)

DjangoとSQLiteを使ったサンプルアプリ：公開画面編

前回はDjango(ver1.4.5)でアンケート調査アプリの管理画面を作りました。
今回はアンケート調査アプリの「公開用画面」を作ってみましょう。
公開用画面の作り方もとてもシンプルです。

DjangoとSQLiteを使ったサンプルアプリ：管理画面編

前回はUbuntu環境にPython+Django+SQLite3な環境を構築しました。
次はDjangoとSQLite3を使った簡単な「アンケート調査アプリ」を作ってみましょう。
多くのWebアプリがそうであるように、このアプリにも「公開用画面」と「管理画面」がありますが、今回は後者の「管理画面」の作り方から紹介したいと思います。

[Ubuntu] indicator-cpufreq でCPU熱暴走対策

PCにコンパイルなどのハードな処理をさせているとCPUが熱暴走してシステムダウンしてしまい、イラッとすることがよくあります。しかも比較的高クロックなCPUを搭載したマシンに限って、、、。まー、これはIntel Core i5なマシンを使っている私のケースなのですが。
そこで今回私は「indicator-cpufreq」というユーティリティを試して見ることにしました。
indicator-cpufreqは、CPUの処理能力をPCに明示的に支持するためのユーティリティです。これを私のPC(Ubuntu 13.04)にインストールしてみました。

UbuntuにPython+Django+SQLiteな開発環境を

前回はUbuntuに簡易Webサーバのlighttpdをインストールして最低限なWebアプリ開発環境を整えました。
今回はPython+Django+SQLiteを使えるようにして、サーバサイドの開発も行えるようにしたいと思います。

lighttpdを開発用Webサーバに

Webアプリ開発で必ず必要となるのが、開発用のWebサーバ(HTTPサーバ)です。
Ubuntu環境で開発用のWebサーバとして使うなら、やっぱり軽量でシンプルなlighttpdがおすすめです。以前はthttpdというのもおすすめでしたが、Ubuntu12.04からapt-getで利用不可になっています。

というわけで今回はlighttpdをインストールして、開発用に最低限の設定をする方法をご紹介します。

GeanyはおすすめのUbuntu用テキストエディタ

Ubuntuをインストールしたら次はやっぱりテキストエディタです。
Ubuntu用のテキストエディタにはデフォルトのLeafpadの他にも、geditやmeditなど様々なエディタが存在しますが、私が一番使い安かったのは、Geanyでした。Windows環境で使っていたSublime Text2も使ってみましたが、Ubuntu版はデフォルトで日本語入力ができなかったのでサクッと諦めました。

Ubuntuでモバイルデータ通信

今巷ではMVNO事業者が格安SIMの価格サービス競争を繰り広げています。
格安SIMを使えば月額ワンコインでインターネットにアクセスできる時代となりました。例えば、DTIのServersMan SIM LTE 100は通信速度が100K固定ですが月額490円と非常に安いです。また、IIJmio高速モバイルサービスなら月額945円で500MB分のLTE無料クーポンがもらえて、クーポンを使い切っても200Kで通信ができます。

私もこれを機にUbuntuでも格安SIMを使えるようにと思い、早速Ubuntu標準のNetworkManagerから設定してみることにしました。
しかし、残念なことに私のUbuntu(Lubuntu13.04)は私の持っていたUSBモデム型のデータ通信端末(L-03D)をうまく認識してくれませんでした。データ通信端末が認識されないことにはネットワーク設定など何の役にも立ちません。

色々と試行錯誤の末、今はなんとか使えるようになったので、その手順を備忘録として残しておきたいと思います。
試行錯誤した割に最終的にたどり着いた解決法はとてもシンプルでした。

ChromeアプリでlocalStorageを扱う簡単なサンプル

今回はHTML5仕様のlocalStorageをChromeアプリで使う方法をご紹介します。
今回使うAPIのchrome.storage.localは、設定などの小さなデータから大きめのデータまで、とても簡単に扱える便利なchrome実装です。
下の簡単なサンプルを見れば、その使い方はすぐに理解できるでしょう。

ChromiumブラウザにFlashPlayerプラグインをインストール

Lubuntu14.04LTSのChromiumへのFlashPlayerインストールはこちらの記事をご覧ください。

Lubuntu標準ブラウザのChromium BrowserにはデフォルトでFlashPlayerプラグインが入っていません。ですから、Flashを使ったページを見るためには、FlashPlayerを手動でインストールする必要があります。
インストールといっても、下記の3ステップを実行するだけなのでとても簡単です。

Lubuntuで日本語入力

2013-12-26：
このページの情報は古くなりました。Lubuntuの日本語入力についてはこちらを参考にしてください。→[Ubuntu]日本語入力はibusを捨ててfcitxに

Lubuntuで日本語入力を使えるようにしましょう。
今回はLubuntu標準のAnthyとGoogle日本語入力(Mozc)の両方を設定してみます。

LubuntuのLiveUSBの作り方

Windows系OSに疲れてしまった人にオススメしたいのが、軽量なUbuntuディストリビューションのLubuntuです。
LubuntuのLiveUSBを作っておくことで、自分のLubuntu環境をいつでもどこでも持ち歩くことができて非常に便利です。LiveUSBなら既存PCのディスクのパーティションを弄る必要もないので、既存のWindows環境を手放せない人にもノーリスクで導入できます。

Lubuntuに興味ある人のためにこれからLiveUSBの作り方をご紹介します。

USBブート非対応なUSBメモリをWindows標準ツールだけでブート対応に

WindowsのブートディスクやLinuxのLiveUSBを作るために購入したUSBメモリが、残念にもUSBブート非対応だった時の対処法をご紹介します。
これから紹介する方法はWindowsの標準ツールしか使わないので、おそらく最も簡単で安全な方法ではないでしょうか。
ただしWindows Vista以降限定ですからご注意を。

Chrome OS の魅力 [動画有]

こちらは Chrome OS の魅力が分かる動画です。

Chrome拡張機能のショートカットキー設定

Chrome拡張機能にキーボード・ショートカットを割り当てる方法をご紹介します。
下のサンプルは、キーボードの Ctrl+Shift+1 や Ctrl+Shift+2 を押すことで、 myCommand1 や myCommand2 というイベント(文字列)が background.js に送信されてログ出力されるだけの簡単なChrome拡張機能です。

Chromeアプリの国際化。

Chromeアプリ開発では、国際化(多言語化)に対応するためのとても便利な仕組みが用意されています。その仕組みを使えば、国際化に関する処理部分とビジネスロジック部分を切り離すことができ、アプリ開発者と翻訳者が分業しやすくなります。
Chromeアプリの国際化はとてもシンプルです。

CSSとピュアJavaScriptだけでトーストとかポップアップ

モバイルアプリやWebアプリでよく使われる表現方法として、トーストやポップアップがあります。
それらをCSSとピュアなJavaScriptだけで実現してみました。

Chromeアプリのオプション画面作成

Chrome Apps のオプション画面（設定画面）の作り方を紹介します。
作り方はとても簡単。手順は下の３つだけ。

コンテキストメニューなChrome拡張機能の作り方

2014-08-02 追記
content script内だけで完結する（background.jsとの通信が発生しない）シンプルなコンテキストメニューをお探しならこちらのエントリが参考になると思います→Chromeアプリで長押しコンテキストメニュー

上の画像のようなコンテキストメニューをChrome拡張機能で実現する方法をご紹介します。

Google Readerの代替はInoReaderで決まり

先月Google Readerがサービスを終了しましたが、代替えRSSリーダーを見つけることはもうできましたか？
Google Readerの代替となるサービスは色々ありますが、私は InoReader にしました。



私がInoReaderを選んだ理由は2つあります。

Sublime Text それは軽量で拡張性の高い開発者向けエディタ

Sublime Textは、HTMLやJavaScriptなどのソースコードをサクサクっと書きたい人をきっと満足させてくれるテキストエディタです。もちろん他の言語での開発にも十分に使えます。エディタというよりも開発環境とも呼べるかもしれません。
複雑で巨大なエンタープライズ系なプロジェクトを管理するには少しだけ非力かもしれませんが、ちょっとしたアプリやホームページの開発者には手放せないアプリとなるでしょう。eclipseのような、"高機能だけど重量なIDE"にちょっとだけ疲れた貴方にもオススメです。
Sublime Textはシェアウェアですが、UNREGISTEREDのままで普通に使い続けることができます。UNREGISTEREDのまま使い続けていると偶に登録を促す画面にジャンプしますが、そんなに気にならないレベルです。

まずはダウンロードしてインストールしてみましょう。
Sublime Text: The text editor you'll fall in love with
ちなみに私が最近インストールしたバージョンは ver 2.0.2 です。

Ubuntu版は以下のようにインストールします。

$ sudo add-apt-repository ppa:webupd8team/sublime-text-2
$ sudo apt-get update
$ sudo apt-get install sublime-text

もし貴方が開発者なら下のプラグインを入れておくことも強くオススメします。

ChromeアプリをHelloWorld

Chromeアプリ開発の HelloWorld です。
下のサンプルはブランク・プロジェクトとしてもお使いいただけるかと。

レスポンシブ・ウェブデザイン：一つのHTMLで複数のデバイス画面に対応させよう

PCやスマホ、タブレットといった画面サイズの違うデバイスごとに最適なWebページを作るのは非常に骨の折れるものです。さらにそれをメンテナンスするとなると労力は何倍にもなります。なるべく労力を減らすためにはどうすれば良いでしょうか。
その答えの一つとして、レスポンシブ・ウェブデザインを意識したWebデザインが考えられます。

[HTML5]XMLHttpRequestでウェブスクレイピング

Chromeアプリでウェブスクレイピングするには、クロスドメインに対応した XMLHttpRequest Level2を使います。
Chromeアプリでと書きましたが、XMLHttpRequestはHTML5仕様のため、実際にはChromeアプリに限定されるわけではありません。ですから、今から紹介するサンプルは、HTML5標準のウェブスクレイピング技術として参考になるかと思います。
下のサンプルは、「ヤフー天気予報」へアクセスしてページのタイトルを取得するだけの簡単なものです。

[Chrome]SyncFileSystemAPIでGoogleDriveと同期

Chromeが提供する SyncFileSystem API は大切なデータ(ファイル)を扱うのにとても便利です。SyncFileSystem APIを使えば、一つの処理でローカルとクラウド(Google Drive)上の両方にデータを保存することができ、しかも適当なタイミングでローカルとクラウドのファイルが自動的に同期されます。

[HTML5]FileSystemAPIでファイルやディレクトリを操作

HTML5の FileSystem API を使ってファイルを操作してみました。
忘れやすいので備忘録としてメモ。

サンプルには下の処理が含まれています。

• Temporary/Persistent領域確保 (webkitRequestFileSystem)
• フォルダ作成 (DirectoryEntry.getDirectory)
• ファイル作成 (FileEntry.getFile)
• ファイル書込 (FileWriter)
• ファイル読込 (FileReader)
• ファイル削除 (FileEntry.remove)

※なおサンプルはChromeブラウザで動かすことを前提にしています。webkitなprefixをmozにすればMozilla系でも動くかもしれませんが自分は試してません。

[JavaScript]ライブラリを使わない非同期ループ

jQueryなどのライブラリに依存しないでお手軽に非同期ループを実現する方法。
これは結構使えるのでメモ。