Webサイトのスクリーンショットは色々な場面で使われます。ニュース系サイトであったり、Webサイトを紹介するブックマーク的なサイトでも使われるでしょう。そんなスクリーンショットを一つ一つ手動で保存していたら時間がかかってしまいます。 そこで使ってみたいのがScreenshot as a Serviceです。Webサイトを画像化するコマンドツールです。 Screenshot as a Serviceの使い方 Screenshot as a Serviceを使ってGoogleのスクリーンショットを保存する例です。 画面の幅や高さを指定することもできます。レスポンシブなサイトに良さそうです。 さらにウィンドウの一部だけを指定も可能です。 Screenshot as a Serviceはコードから操作もできるので自動化することもできます。ウィンドウの中だけなので余計な機能拡張が写ってしまうこともあ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Ruby on Railsには便利な機能がたくさんありますが、特に有名なのがデータベースのマイグレーションではないでしょうか。それまでのデータベース管理はとても煩雑なものでしたが、コードでバージョン管理できるのはとても新鮮なものだったと言えます。 今回はそんなマイグレーションをビジュアル化するRyakuzuを紹介します。 Ryakuzuの使い方 Ruby on Railsのプロジェクトに組み込んで使います。インストールすると、 http://localhost:3000/ryakuzu というURLでRyakuzuにアクセスできます。 カラムを増やしたりリネームしたりして、実際にマイグレーションを実行するとところまでWeb上でできます。 現在のデータベース構造をCSVに出力できます

最近は開発環境を個々人のコンピュータ上には構築せず、仮想環境を使うようになってきました。そうすることでローカルコンピュータの環境に左右されず、複数プロジェクトによってライブラリバージョンがコンフリクトすることもありません。もちろん多少遅くなりますが、十分許容範囲になっています。 ということでこれからRailsのプロジェクトをはじめるのであればベースに使ってみたいのがrails-dev-boxです。Vagrant向けにRuby on Rails環境を整えてくれます。 rails-dev-boxの使い方 Vagrantを使いますので、Vagrant自体はもちろんVirtualBoxのインストールが必要です。 終わったらGitリポジトリをクローンします。 $ git clone https://github.com/rails/rails-dev-box.git 後はVagrantを起動するだけ

うお、もの凄い勢いで進化しています！ 今はクラウド全盛の時代です。Dropboxでローカルデータをクラウド上に保存し、Google Appsでメールやスケジュールを管理し、さらにiCloudでスマートフォンやタブレットのデータをバックアップする。そんな中心配になるのは自分のデータがちゃんとセキュアに保存されているのかということでしょう。 企業においてはセキュリティ基準からクラウドサービスを安易に導入できないケースもあります。そこで使ってみたいのが自前で立てられるクラウドサーバ、ownCloudです。 元々ファイルストレージがメイン機能だった覚えがあるのですがバージョン6になって実に多彩な機能を備えるようになっています。順番に見ていきましょう。 ファイル管理 まずはファイル管理。ここではローカルのファイルを同期してクラウド上からの閲覧、ダウンロードできるようになっています。 写真はownCl

フローチャートなどの高度なグラフを描こうと思った時に使われるのがGraphvizです。テキストベースで記述していくだけでできるというのはやはり手軽です。しかしローカルソフトウェアをインストールしたり、セットアップしたりするのは面倒と感じる人も多いでしょう。 そこでさらに再利用性を高めてくれるのがViz.jsです。WebベースでGraphvizを使えるようにしてくれます。可能にするのはまたしてもEmscriptenなのですが、面白さを体感してください。 例として以下のようにGraphvizのDOT言語をそのままscriptタグに記述します。 <script type="text/vnd.graphviz" id="cluster"> digraph G { subgraph cluster_0 { style=filled; color=lightgrey; node [style=fill

これは危険！ 筆者はシムシリーズに良い思い出がありません。例えば夢中になりすぎて学校に遅刻したり、寝不足になったり、気がつくと週末を全てシムシティーやシビライゼーションに費やしてしまったり…ろくな思い出がありません。 そんな触るな危険シリーズの初代シムシティがHTML5/JavaScriptで開発されています。それがmicropolisJSです。 最近のシムシティでは色々なメッセージが出て、街を成長させるパラメータも多彩にありますが、さすがに初代とあって内容がシンプルです。作れるオブジェクトも大して多くありません。 何より怖いのはmicropolisJSはJavaScriptだけで動作しているということです。データを保存する仕組みがないので、中途半端にはじめるとブラウザを終了させることができなくなります（再読み込みすると最初からやり直しです）。 仕事で忙しい方は絶対に下のリンクはクリックし

JavaScriptと連携できる地図が欲しかった方は要チェック！ Web上でSVGを扱う際に使われるライブラリで有名なのがRaphaëlです。そんなRaphaëlをjQueryベースで使えるようにしたプラグインがjQuery Mapaelになります。地図に限定されますが、SVGで描かれた地図に様々な情報を付与したりJavaScriptと連携させることができるようになっています。 実際の例としてはフランスの地図を扱ったものが多くなっています。 マウスオーバーでハイライトされます。 さらにズームもできるタイプもあります。この辺りはSVGならではと言えるでしょう。 JavaScriptと連携させることでクリックイベントをキャッチできるようになっています。 人口の多い町や都市を描いています。こういった外部データとの連携も容易です。 最後はフランスではなく世界地図のデモです。 国ごとにデータを色分け

HTML5の時代になってSVGにも注目が集まっていますが、個人的に思うのはAdobeはその何年も前からSVGに取り組んでいたなということです。IEで使えるSVGプラグインビューワーも早い段階から出していましたし、IllustratorもSVG書き出しを相当前のバージョンからサポートしています。 そんな中、AdobeがさらなるSVG関連ソフトウェアをリリースしました。それがSnap.svgです。 Snap.svgはSVGとJavaScriptを結びつけるライブラリになります。クリックやマウスオーバーなどのイベントを使ってアニメーションを実行したりできるようになります。 一例のコーヒーメーカー。選択したコーヒーの種類によってその配分が表示されます。 こちらはすごろく風。実際にゲームを遊べる訳ではありませんが、マウスオーバーで蛇のような生き物が顔をのぞかせたりします。 こちらは飛行機。スタートは

ついにきたきたきた！ 2012年5月に話題を呼んだ初のクラウドファウンドを使ったオープンソース・プロジェクトのTokaidoですが、ついに試せる段階になってきました。既にGitHubでリポジトリも公開されています。それがTokaido.appです。 さっそく起動してみましょう。 これがメインウィンドウです。まずOpen in Terminalを押します。 ターミナルが開きました。 Railsは独自にインストールされます。 Rubyは2.0系がインストールされました。 Railsアプリケーションを作成し、Tokaido.appに登録します。 起動しました。 さらに起動！.tokaidoでローカルサーバが立ち上がります。3000番ポートなどがつかないので、既に別なWebサーバが立ち上がっている場合は終了するようにしてください。 ログはコンソールアプリで確認できます。フィルタも使えますし、ターミ

CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ

gnuplot-JSはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 3Dグラフを描く際などによく使われるソフトウェアがgnuplotです。高度なグラフを描けるのがメリットですが、ローカルに落として使うのが面倒に感じている人もいるのではないでしょうか。そこで使ってみたいのがgnuplot-JSです。gnuplotをEmscriptenでJavaScript化したソフトウェアです。 デモです。SVGファイルとして出力されています。 ローカル版と比べて多少のコードの修正が必要ですが、概ねそのまま動作します。 こんな複雑な描画もできます。 コードを書いてから実際に描画されるまでは多少のラグがあります。そのためリアルタイムにgnuplotのコードを評価してグラフを描くと言った使い方には向かないかも知れません。とは言えWebブラウザだけで

App.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 スマートフォン向けにはアプリ開発もありますが、審査などなしでサービス提供したいと思ったらスマートフォン向けWebアプリとしてリリースする手もあります。今回はそのためのフレームワークApp.jsを紹介します。 YouTube検索アプリ。まるでネイティブアプリのようです。 画像検索。検索結果がPinterest風に並んでいます。 スケッチアプリ。何とタッチ操作で絵を描いて、それを保存できてしまいます。 一覧に戻るとちゃんと登録されています。すごい。 オリジナルのmemeを作るWebアプリ。画像の上下に好きな文言を追加できます。 例えばこんな感じに。 フィード系。非常に良くできています。 ブックマーク機能なるものもあります。 App.jsではHTMLを指定されている記法に沿って書き進め

ungitはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Gitの利用が広がっています。運用時にはコンソールで使うことが多いと思いますが、それでは分かりづらいと感じる人がいるのも確かです。そこでWebブラウザベースのungitを試してみましょう。 最初の画面です。既存のリポジトリを使うことも、改めて作成もできます。 ファイルを操作するとリアルタイムでコミットの確認が表示されます。 コメントを書いてコミットします。 コミットすると下にログが追加されます。 ungitを使ってブランチやタグを作成できます。 ブランチを作成しました。 ブランチに切り替えてファイルを操作します。 マスターからマージします。 トップに戻ると登録済みのリポジトリが一覧されています。 デモ動画です。 ungitはGit操作を一通りWebブラウザからできるようになります。マ

Typesafe ActivatorはScala製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Typesafe社はScala専業ベンダーですが、そこから生み出されたのがTypesafe Activatorです。Webブラウザを使ってAkkaやPlayを使ったWebアプリケーションの開発ができます。 トップページです。まずベースになるテンプレートをアプリケーション名を決めます。 今回はHello Scalaを選択します。 トップページです。コンパイルや実行、テストができます。 編集画面です。左がファイルブラウザになっています。 編集画面ではコードの折り畳みができます。 コードを編集すると自動的にコンパイルが実行されます。 実行結果を確認できます。 テストも自動で行われます。 Typesafe ActivatorはIDEであり、コンパイルからテスト、実行までが

TiFlatUIKitはTitanium用、Objective-C製のオープンソース・ソフトウェア（MIT License）です。 iOS7ではフラットなUIが導入されます（とはいえ独自のフラットさですが）。それは今後新規で作られるアプリ全体に言えることで、Titaniumも同じです。しかしいち早くフラットUIを取り込んでいきたい方はTiFlatUIKitを使ってみましょう。 緑、赤、オレンジ、黄色、青、白とはっきりとした色合いになっています。 トグルスイッチをはじめ、各コンポーネントはきちんと動きます。 ローディングは自動で動き続けています。 アラートです。こちらも色調がはっきりとしています。 TiFlatUIKitを使い、TiFlatUIKitでコンポーネントを呼び出すとフラットUIなデザインを実現できます。ボタン、スイッチ、ステッパー、タブバー、スライダー、アラートビュー、プログレス

PSD.rbはRuby製のオープンソース・ソフトウェア（MIT License）です。 Webやアプリのデザインの際にPhotoshopを使う事がよくあります。そんな時に出来上がった画像を分析してコーディングに落とし込んだりします。それの自動化さえできるようになるのではないかというライブラリがPSD.rbです。 インストールはRubygemsで行えます。 適当なPSDファイルを読み込んでparse!を実行します。trueが返ってくれば解析完了です。処理はファイルサイズにもよりますが結構重たいです。 treeで木構造を出力します。こちらもファイルが大きければ膨大になります。 PSD.rbでは構造、サイズ、レイヤー/フォルダサイズと名前、フォントデータ、カラーモード、ベクターマスク、フラットな画像データなどが読み取れます。Photoshopのファイルを使ったサービスが捗りそうです。 MOONG

BootplusはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近のWebデザインはフラットなスタイルが人気です。そのデザインはGoogleのサービスでも広く取り入れられています。そんなUIを自分のWebサービスでも実現したい、そう考える人に使ってみて欲しいのがBootplusです。 Bootstrapがベースになっていますが、デザインは白色系をベースにしたフラットになっています。 かなり思い切って色をカットしています。 こちらは黒地部分が大きく目立ちます。 メニューなどのウィジェットはもちろんBootstrapをベースにして構築されています。 カード形式のウィジェット。 プロフィールなどの表示に便利そうな表示です。 何となくGoogle+っぽい感じです。 ベースはBootstrapなので多彩なウィジェットやコンポ

imgcache.jsはJavaScript製、Apache License 2.0のオープンソース・ソフトウェアです。 画像の読み込みを速くする際にはキャッシュを使うのが有効です。最近であればeTagを付けたりすると思いますが、より高速化するために使ってみたいのがHTML5のFile APIを使ったimgcache.jsです。 インスペクタで見ると分かりますが、ファイルシステムへアクセスしています。 実際にアクセスしているURLを出力しています。httpの上にfilesystemが追加されています。 実際にキャッシュされているファイルの一覧も取れます。 同一ドメインの他、外部ファイルでもキャッシュさせられます。 imgcache.jsはリモートへのネットワーク接続も行われないため、オフラインでも利用できます。さらに高速です。ただしChromeのみで、かつ専用のフラグを立てて起動しなければ

Industrial.jsは体温計やタンクなどでの進捗表示ができるライブラリです。 処理の進捗を表すのにプログレスバーがよく使われますが、今回はメータグラフを使った手法を紹介します。利用するライブラリはIndustrial.jsです。 メーター表示です。液体や温度計風で面白いです。 その他LED、電光掲示板風もあります。 Industrial.jsではタンク、温度計、LED、電光掲示板、ゲージと種類が用意されています。いわゆる工業系の計測機器、出力機器を模しています。それぞれJavaScriptで指定するだけで使えるので手軽です。素材などを用意する必要もないので、プログレスバーの代わりに適用することも考えられるでしょう。 Industrial.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る リアル、ネットに限らず顧客がい

RoCanvasはHTML5/JavaScriptで作られたCanvas上で自由にイラストを描けるソフトウェアです。 RoCanvasはHTML5で作られたドローソフトウェアです。簡単なイラストを描いて、みんなで共有したりするのにぴったりと言えそうです。 最初の画面です。色、サイズ、書き方を選択できます。 赤の自由線です。 四角を書いてみました。中を全て塗りつぶしたもの、枠線だけの二つが選べます。 色を変えることもできます。 保存しておくことができます。サーバに画像データがポストされるとのことです。RoCanvas自体にはサーバサイドの仕組みは実装されていません。 RoCanvasは色やサイズ、線または四角から選んで自由にCanvas上に絵を描けます。その結果はサーバ上に保存されるので共有するのにも使えるでしょう。 RoCanvasはHTML5/JavaScript製のオープンソース・ソフ