Web上で音楽を楽しむ環境は整いつつあります。SoundCloudにアップしている人も多いですし、YouTube上にある音楽を聴く人も多いでしょう。そんな音楽メディアに欲しい情報として波形があります。 wavesurfer.jsは音楽ファイルを読み込み、波形を表示してくれるJavaScriptライブラリです。JavaScriptだけで作られているのが特徴になります。 wavesurfer.jsの使い方 例えばこんな感じです。 再生済みの部分は色が濃くなっています。 ドラッグ&ドロップで任意の音楽ファイルを解析できます。 wavesurfer.jsは数MBある音楽ファイルもすぐに解析することができます。そして波形を表示して、そのまま再生ができます。YouTubeのように動画がない場合、音楽メディアの見た目の楽しさとして表示すると良さそうです。サビ部分が一目で分かるのも良さそうです。 wave

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Slackが急成長しています。多くの企業でSlackが使われており、遠隔地（または社内であっても）のコミュニケーションに役立てられています。しかし企業によってはセキュリティ上の理由などで導入できないこともあります。 そんな企業が使ってみたいのはSlackクローンになるでしょう。今回はDockerを使って簡単に導入できるMattermostを紹介します。 Mattermostの使い方 既にDockerが入っているならば、以下のコマンドを実行するだけです。 docker run --name mattermost-dev -d --publish 8065:80 mattermost/platform:helium 後はサーバにアクセスするだけですが、サブドメインを使うのでhostsな

勉強会で発表している時にリアクションが何もないほど辛いことはありません。しかしこれは分からないでもなくて、真剣に聞かなければならないという雰囲気がそうさせるのではないでしょうか。 もっと気軽にコメントしたり、反応できるようにしてくれるのがNicoNico SPEENYAです。スライドの上にニコニコ動画風にコメントを流して表示してくれるソフトウェアです。 NicoNico SPEENYAの使い方 NicoNico SPEENYAのサーバを立てるとこんな感じのコメント入力画面が表示されます。 そしてプレゼンターはChrome機能拡張をインストールします。 これで準備は完了です。任意のファイル（プレゼンテーション）を表示します。コメントすると文字が流れていくのが分かるはずです。 文字色を変えたり… 実際に動かしたところ。連射するとプレz年が見えなくなりますね。 NicoNico SPEENYAは

WebアプリケーションなどではAjaxを使って通信を行うのが一般的です。そのため、ユーザが処理を待っている間は処理中である旨表示が求められます。そうしないと反応がないと思ってしまって何度もボタンをクリックしたり、ウィンドウを閉じてしまいます。 そこで使ってみたいのがLoaders.cssです。スタイルシートだけで作られたローディングアイコンです。 Loaders.cssの使い方 Loaders.cssでは多数のパターンのローディングアイコンが用意されています。以下はその一覧です。 最後のパックマン風はかなり派手ですね（2つも必要ですし）。その他、好みに応じて選択できるかと思います。スタイルシートであれば色を変えるのも容易でしょう。 使い方としては、 <div class="loader-inner ball-pulse"></div> のようにクラス指定するだけです。 Loaders.cs

Google DriveやMicrosoftのOffice.com、iCloud上でのPages/Numbers/Keynoteなど大手のクラウドベンダーはどこもWebベースのオフィススイートを提供しています。ここで問題になるのはデータのロックインでしょう。 自分たちで管理できる、ドキュメント作成ツールが欲しい方はWebSyn.caを使ってみましょう。 WebSyn.caの使い方 ログインです。FacebookまたはGoogle+も使えます。 ワード。日本語も使えます。 プレゼンテーション。多機能ではありませんがスライドを作れます。 表計算。このセルの細かさはなんででしょう… ノートブック。アウトライナー的な感じです。 ドキュメントは一覧で管理できます。 WebSyn.caはWebDAVに対応していますのでLAN上に立ててローカルとファイルの同期をするといったこともできます。機能的には数式

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SlideShareに勉強会などで使った資料をアップロードしている方はたくさんいます。中にはダウンロードして使いたい資料もあるでしょう。 しかしSlideShareではパーミッションを設定することでダウンロード不可に指定ができます。それでも資料が欲しい！という方はSldnを使ってみましょう。 Sldnの使い方 インストールはRubygemsで行います。 $ gem install sldn 後は引数にSlideShareのURLを渡すだけです。 $ sldn http://www.slideshare.net/AsialCorp/html5-43882851 I, [2015-03-09T14:57:24.889620 #17079] INFO -- : Open Url: htt

Web APIを提供していると、サービス利用者向けにサービスのステータスを表示したいと思うことがあります。定期メンテナンスであったり、障害でサービスが停止している場合も、ユーザに適切に情報発信できる必要があります。 GoogleやApple、Amazonなどは行っていますが、Staytusを使えば小さなサービスであっても手軽に実現できるようになります。 Staytusの使い方 StaytusはAPIを使ってステータス更新を自動化したり、手動で変更もできます。サポートの状態を可視化するのは良さそうです。Staytusを別サーバに立てて、監視と一緒に組み合わせて使うと便利そうです。 StaytusはRuby/Ruby on Rails製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 Welcome - The Widgets Status Site Th

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 社内のナレッジを蓄積するにはどこかに書きためる場所を用意しなければなりません。従来、この手の試みは悉く失敗しており、例えば掲示板であったりWikiであったり、Q&Aなどなかなか動かないと言った問題がありました。 もっとカジュアルにさくさく書ける仕組みが必要なのかも知れません。そこで使ってみたいのがKnowledge、その名の通り、知識を共有するシステムです。 Knowledgeの使い方 Knowledgeの特徴としては、記法にMarkdownを利用、記事のタイトル、本文を全文検索できる、添付ファイル（検索対応）、公開範囲の設定があります。社内で立てて、個々人が好きな時にナレッジを共有したり、議事録を登録したりと言った使い方が便利そうです。 KnowledgeはJava製、Apach

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Evernoteは便利なのですが、クラウド系でありつつもクライアントアプリやサーバが重たいような気がします。ノートを保存しておくという観点で考えるともっと軽快にストレスなく動作して欲しいと思うでしょう。 そこで機能的には絞り込まれるものの、自前でノートアプリケーションを立ててしまうのはどうでしょう。今回はその一つ、Paperworkを紹介します。 Paperworkの使い方 PaperworkはEvernote、Microsoft OneNoteそしてGoogle Keepの代替として開発されているようです。機能的には本家には劣るものの、自前のサーバで保存したデータを自由に再利用できるのが便利です。個人はもちろん、部署やグループで使うのも良さそうです。 PaperworkはPHP製

開発にVagrantを使うのが当たり前になってきており、筆者のPCにも多くのプロジェクトのVagrantfileが存在するようになっています。そうなると各Vagrantの環境を管理するのも大変になります。 そこで使ってみたいのがVagrantBarです。Mac OSXのメニューバーにVagrant管理下のバーチャルマシンを表示してくれるユーティリティです。 VagrantBarの使い方 VagrantBarがあればメニューバーからVagrant環境を立ち上げたり停止させられます。その後SSH接続する際にもVagrantBarから実行できます。ターミナル操作になれていないデザイナーの方などにもお勧めの仕組みです。 VagrantBarはMac OSX用のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 BipSync/VagrantBar

DocsDoctorのコンセプトはかなり刺激的です。「良いプログラマーはドキュメントを読む。優れたプログラマーはドキュメントを書く」…どうでしょう、格好良いですよね。 ということでDocsDoctorはオープンソースのプロジェクトに対してドキュメントがない部分を洗い出し、参加を促します。ドキュメントが充実すればプロジェクト全体の品質も高まることでしょう。 DocsDoctorの使い方 こちらはトップページ。 Railsであってもドキュメントがないメソッドはたくさんあります。 例えばこのメソッド。参加の仕方、編集の仕方も書かれています。 該当コード部分にジャンプもできます。 DocsDoctorはAPIドキュメントを書くシステムになります。そのためメソッドの上にJavaDocやRDocなどの形式で書くようになるでしょう。小さなメソッドだから…と放っておくとDocsDoctorが見つけてくれる

転職、就職時にはもちろんのこと、クライアントによっては仕事にあたって業務経歴書や履歴書を求められるケースがあります。そのため、一度書いたら終わりではなく、定期的にメンテナンスする必要があります。 しかし開発者たるもの、単に紙に書くのではなく、技術的にも面白くしたいと考えるものでしょう。そこで使ってみたいのがJSON Resume Schemaです。 JSON Resume Schemaの使い方 JSON Resume Schemaは履歴書をJSONで書くためのスキーマになります。 JSONのスキーマはまだまだはじまったばかりですし、XMLに比べると権威的な入り込みは少ないように思います。今のうちに様々なスキーマを定義してデファクトスタンダードになるというのは面白いかも知れませんね。 JSON Resume SchemaはMIT Licenseのオープンソース・ソフトウェアです。 Json

Webシステムを開発していると他のサイトがどういった仕組みで動いているか気になったりしますよね。HTMLソースやURLからどんなプログラミング言語で、どんなフレームワークか知ったりするのは面白いです。 サーバサイドは実際のところは分からないのですが、フロントエンドは分かります。ということで入れてみたいのがLibrary Detectorです。 Library Detectorの使い方 Library DetectorはGoogle Chrome機能拡張としてリリースされています。 インストール後、任意のWebサイトを見ると使われているライブラリがチェックできるようになります。 Yahoo! JapanはYUI 2を使っているようです。 Yahoo! ニュースはjQueryです。 jQueryはさすがにjQueryを使っていますが、さらにModernizrも使っています。 Backbone.

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ローカルや社内では問題なく動作するのに、外部やネットワークが細い環境下ではエラーになってしまうといったケースは良くあります。光ファイバなどが当たり前な現在、高速なネットワークではない環境を再現するのは難しくなっています。 単純にネットワーク速度を遅くするソフトウェアもありますが、clumsyは任意のパケットを廃棄したりしてネットワーク状態の良くない場合を再現するのに最適なソフトウェアです。 clumsyの使い方 設定は幾つかあります。遅延を再現するラグ、任意のパケットを廃棄するドロップ、ブロックトラフィックを単一のバッジとして送信するスロットル、パケットをクローンして送信、パケットの順序変更、パケットの内容を変更など様々な処理が行えます。 ネットワークがごくごく当たり前に全く問題な

おお、これは企業で使えそうですよ！ 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP

これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で

ダウンロードしそびれてしまった方は試してみては？ いきなり話題になって、そして消えてしまったiOSアプリゲームのFlappy Bird。タップするだけの簡単操作はまさにスマートフォンアプリといった感じで、みんながこぞってハマっていました。 消えてしまったのは残念な限りですが、そのシンプルさ故にあっという間にクローンが出てくる事態となっています。Clumsy Birdはその一つ、HTML5で作られたFlappy Birdクローンです。 Clumsy Birdの遊び方 まずはトップページにアクセス。おお、まさにFlappy Birdっぽい画面です。 クリックすれば飛びます。微妙なバランスをとりつつ、土管の隙間をくぐり抜けていきましょう 一応スマートフォンでも遊べます。 ネイティブアプリに対するWebアプリとしてこの再現度の高さは目を見張るものがあります。簡単なゲームであれば、もはやネイティブで

部署やチームで使いたいパスワード管理ですね。 パスワードは間違っても平文で保存したり、安易なものを設定するべきではありません。それは個人でも企業内であっても変わりません。特に複数人でパスワードを共有する場合は注意が必要です。 平文のままWikiなどに記載してしまうのは良くありません。そこで使ってみたいのが専用のグループ間で使えるパスワード管理ソフトウェアです。今回はその一つ、TeamPassを紹介します。 まずはインストールから。ウィザードに沿って行います。 日本語化もされていました。 TeamPassはフォルダごとにアクセス権限が設定できたり、ビジネスレベルで使うのに十分な機能が備わっています。パスワードのコピー機能などを使えば普段の運用はとてもシンプルになりそうです。 セキュリティには十分に気を配っているように見えます。サポートしているブラウザもIE、Firefox、Opera、Saf

スクロールを使った面白い処理です。 Webサイトにおいてある部分までスクロールしたら処理を実行したいといったニーズは良くあると思います。例えばMOONGIFTの場合はソーシャルボタンを表示するのはその部分までスクロールしてからにしています（描画が遅いので）。 他にも対象の画像を表示されたタイミングで読み込みたいといった場合もあるでしょう。そこで使ってみたいのがonScreenです。 デモを表示しました。このタイミングではイベントは発動していません。 Demosを表示。この時点でイベントが発動します。 使い方はjQueryプラグインなのでシンプルです。 $('elements').onScreen({ container: window, direction: 'vertical', doIn: function() { // 表示されたタイミングの処理 }, doOut: function

DOCX.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Microsoft Officeのファイル形式は〜x形式になって以降、XMLファイルのZipファイルの圧縮であることはよく知られています。しかしだからといってOfficeファイルをWebベースで生成できるようになっているとは思いませんでした。それを可能にするのがDOCX.jsです。 テストページ。Run Testをクリックします。 生成されました！ 該当部分のコード。 DOCX.jsは今のところテキストを挿入しかできません。画像やOLEオブジェクトを貼付けたりすることはできないのでご注意ください。とは言えWebブラウザ上でZipファイルを生成してしまえばここまでのことができるのかを驚かされること間違いなしです。 Microsoft Officeファイルの仕様は公開されていますので、それをJ