Web Demo Suit - Webカメラの映像にスーツを着せる
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コロナウイルスの影響により、リモートワークが行われるようになっています。開発者であれば思ったよりも影響がなかったり、むしろ通勤時間がなくなって仕事がしやすくなったという人も多いのではないでしょうか。 そんな中、オンラインミーティングなどでは寝間着や変な格好で出られず、わざわざ着替えたりしているかも知れません。そんな方はWeb Demo Suitを使ってみましょう。 Web Demo Suitの使い方 Web Demo Suitを使うと、顔の位置にスーツが表示されます。 Web Demo Suitは個人の体型にあっていなかったり、肌の色が異なったりするので調整が必要かも知れません（そもそもスーツが小刻みに動くのですが…）。しかし今はWebカメラの映像をアバター化したり、仮想背景を合わ
WAVE.js/WAVE.wasm.js - 音楽ファイルをWeb上で自在に操作 MOONGIFT
Webブラウザで音楽を奏でる場合にはWebAudioがよく使われます。ローレベルなAPIなので、使いこなすのは時間がかかるかも知れません。それでも多くのライブラリが作られており、それらを使うことで、より簡易的に音楽ファイルなどを操作できるようになっています。 今回紹介するWAVE.js/WAVE.wasm.jsもその一つです。音楽ファイルの変換や、音程の変化などを行えるライブラリです。 WAVE.js/WAVE.wasm.jsの使い方 一例です。フォーマットの変換を行えます。 さらに指定部分だけの切り出し。 無音の追加。 WAVE.jsにはJavaScript版とWebAssembly版があります。WebAssembly版は機能が限定されますが、処理がとても高速です。WAVE.jsにはこの他、フェードイン/フェードアウト、逆再生、音声結合などの機能が用意されています。 WAVE.jsはJa
docxtemplater - テンプレートからWord/PowerPointファイルを生成 MOONGIFT
エンジニアであってもオフィススイートを使う機会はあります。例えばWordを使ったり、PowerPointでプレゼンを作ったりするでしょう。資料はMarkdownやシステムに入っていて、それを取り出してファイルの内容に埋め込んだりする作業は手間です。 そこで使ってみたいのがdocxtemplaterです。テンプレートされたオフィスファイルを使ってWord/PowerPointファイルを生成します。 docxtemplaterの使い方 デモです。 {} で囲まれた部分がテンプレートとして置き換わります。 繰り返し処理もできます。 状態による分岐処理も。 XMLを埋め込むこともできます。細かい文字装飾はそちらでできます。 テーブルでも繰り返し処理ができます。 リスト。 docxtemplaterではもっと多機能なものはPro版として販売されています。しかし簡易的な文書であればオープンソース版でも
FromJS - Webアプリケーションの理解を容易にするChrome機能拡張 MOONGIFT
JavaScriptで大型なWebアプリケーションが開発されるのに合わせて、全体を把握するのが困難になってきています。表示されている文字がサーバサイドから出力されているものでない場合、どこで作られたデータなのかを追いかけるのも大変です。 そこで使ってみたいのがFromJSです。Webアプリケーションの内容を把握するのに役立つツールです。 FromJSの使い方 中央にあるのがFromJSです。DOMエレメントについて表示されます。 そして表示されている文字を選択すると、それがどこで生成された文字なのかが一目で分かります。 FromJSはすべてのWebサイトで使える訳ではなく、かなり限定されたWebアプリケーションでの利用になるようです。その文字がJavaScriptの変数によるものなのか、localStorageによるものなのかなど、出所が分かるだけでもデバッグがかなり容易になることでしょう
Glance Year – GitHub風に年間の活動をグラフ化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 一年分の活動を振り返る際にはどういった表示が良いでしょう。各月のカレンダーを表示して、日付ごとに色分けするのも良いでしょう。しかし開発者であればもっと面白い方法があります。それがGitHubのコントリビューショングラフ（正式名称は知りませんが）です。 縦軸に曜日、横に52週分並べればそれだけで一年間を意味するグラフになります。後は活動の多かった日を濃く、何もしていない日を薄くすればOKです。そんなグラフを自分でも簡単に作れるのがGlance Yearです。 Glance Yearの使い方 例えばデータは次のように作ります。 var massive = [ {date: '2014-8-3', value:'1'}, {date: '2014-8-4', value:'2'}, {d
Octotree·GitHub利用者は必見！GitHubでツリー表示 MOONGIFT
GitHubのUIは先進的で、かなり見やすいものです。初心者にも分かりやすく使いやすいのですが、毎日のようにGitHubを使っている人たちにすればもっと素早くファイルを見ていけるようにしたいと思うでしょう。 そこで使ってみたいブラウザ機能拡張がOctotreeです。ブラウザ画面の左側にファイルブラウザ機能が追加されます。 Octotreeの使い方 OctotreeはGoogle Chrome、Firefox、Safari向けに機能拡張/アドオンが提供されます。 インストールされた状態で任意のリポジトリに行くと、このようにファイルツリーが左側に表示されるようになります。 フォルダを開いてより深い階層のファイルへも素早くアクセスできます。 左側の表示ではブランチを切り替えられませんが、通常のGitHub側でブランチを切り替えると左側のツリーもそれに伴ったものに変更されます。また、プライベートリ
PlantUMLを記述する専用エディタ·PlantUML Editor MOONGIFT
PlantUML EditorはWindows用のオープンソース・ソフトウェア。PlantUMLは先の記事の通り、テキストベースでUMLを記述し、画像に変換できるソフトウェアだ。テキストで書けるのは大きなメリットではあるが、慣れるまでは何らかのエディタが欲しいかも知れない。 PlantUML用のエディタ 慣れてしまえば問題ないかも知れないが、記法を覚える際はもちろん、テキストよりもビジュアル的にUMLを定義したいと考える人はPlantUML Editorを使ってみよう。Windows専用ではあるがPlantUMLによる記述をサポートしてくれる。 PlantUML Editorは左側に図の一覧が並び、右上にテキストによる記述内容、右下に実際に生成されたUML図が表示される。画像はGraphVizを使って生成するので別途インストールと環境変数の設定が必要だ。画像は自動更新が可能で、指定時間が経
要注目！PHP製のWeb IDE·ICEcoder MOONGIFT
ICEcoderはPHP製のWeb IDEです。JavaScriptやHTML、Rubyのコードに対応しています。 Webブラウザを使った開発環境もそろそろ本格化しそうな雰囲気です。今回紹介するのはICEcoder、PHP製のWeb IDEです。 最初にパスワードを登録します。 トップページです。 コード表示です。ハイライト処理されています。 コンソール機能があります。ターミナルとして使えます。 catなどのコマンドを打てばそのまま出力が返ってきます。 DOMを選択するとその中のタグ全体が選択状態になります。 MySQL管理も付属しています。 主な機能はタグの構造チェック、テーマによるカラーリング、検索/置換、コマンドを使ったタグの高速入力、JavaScriptのヒントおよび構文チェックとなっています。対応している言語はHTML/CSS/JavaScript/Less/CoffeeScri
必要なパスワードを一元管理できるグループパスワードマネージャ·Swordfish MOONGIFT
Swordfishは企業内での利用も想定されたグループパスワード管理です。 Webサービスなどは未だにID/パスワードによる認証が行われています。そうした状況下ではチームや企業内でのパスワード管理もグループで行う形になるでしょう。そこで使えるのがSwordfishです。 最初にキーを作成します。 生成しました。秘密鍵はダウンロードして.sshフォルダに入れておきます。 新しいパスワードを作成します。 こんな感じです。 サイトのURLを入れておくとFaviconを使ってくれるのがいい感じです。 表示した場合です。Flashを使ってクリップボードにパスワードをコピーしてくれます。 Swordfishでは個人のパスワードをはじめ、パスワードの共有も行えるようになっています（筆者が確認した限りではそのやり方が分かりませんでしたが）。秘密鍵を介してのみパスワードが解除されるので、安心して利用できるサ
400種類を越えるカメラに対応したJavaScriptによるRAWファイルビューワー·rawson.js MOONGIFT
rawson.jsはデジタルカメラのRAWファイルを読み込み、描画するJavaScriptライブラリです。 デジカメで撮影した際のフォーマットではJPEGが最も一般的ですが、よりこだわる人はRAWファイルとして保存して自分で加工するのではないでしょうか。そんなRAWファイルをWeb上で閲覧するためのソフトウェアがrawson.jsです。 デモです。RAWファイルをドロップします。RAWファイルはソニーのRAWデータダウンロードよりお借りしました。 読み込み中…かなり待たされます。 読み込まれました。超巨大です。 もちろんメタデータの読み込みにも対応しています。 RAWファイルは特に統一された規格はなく、メーカーによってまちまちな構造になっています。そのためrawson.jsでは各社の仕様に対応し、なんと400以上のカメラに対して対応しています。サイズはそれなりで、500KBもある凄いJav
Google ChromeでJavaScriptのデバッグをする際にはぜひインストールを！·JS Runtime Inspector MOONGIFT
JS Runtime InspectorはGoogle ChromeのJavaScriptデバッグを強力にサポートしてくれるソフトウェアです。 最近はJavaScriptを徹底的に活用したWebアプリケーションも増えてきました。そんな中デバッグは非常に困難になってきています。そこで使ってみたいのがJS Runtime Inspectorです。 インスペクタにJS検索フィールドが追加されます。 検索結果です。 そこから定義されている場所に簡単に飛べます。 利用例。 JS Runtime Inspectorを使えばJavaScriptを掘り下げて調べるのがとても簡単になります。関数名の他、値でも検索できるので目的の処理を見つけるのが簡単になるはずです。 JS Runtime InspectorはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
SEOの分析もGoogleスプレッドシートで楽々こなす·SEER's SEO Toolbox MOONGIFT
SEER's SEO ToolboxはSEOに役立つ関数を提供するGoogleスプレッドシート用のApp Scriptです。 SEOを熱心に進めている企業は数多いです。企業のWeb担当者として日々努力されている方も多いでしょう。ただデータを漫然と取るだけでなく、分析を行っている方にお勧めしたいのがSEER's SEO Toolboxです。 配布されているスプレッドシートをコピーします。設定シートでアカウントの設定を行います。 そうすると計算式を使って情報が取得できるようになります。 指定した期間での訪問者数を取ったりするのも簡単です。 SEER's SEO ToolboxはGoogle App Scriptであり、スプレッドシートに関数を付与します。キーワードの回数を数えたり、Googleアナリティクスの各種データを関数として指定できます。また、指定したURLのテキストを取得したりできます
情報をリスト化して整理するオンラインリストマネージャ·Surreal ToDo MOONGIFT
Surreal ToDoはAjaxを活用したオンラインのリストマネージャです。 会議室でホワイトボードを前に挙がったアイディアをメモしたり、やるべき作業をリストアップして付箋で貼付けたりしたことはないでしょうか。同様の管理をオンラインで提供するのがSurreal ToDoです。 デモです。ページとリスト、アイテムの三階層でデータを管理します。 ドラッグで並び替えたり、ダブルクリックで編集したりします。 タブを追加できます。 プラス画像をクリックして項目を追加します。 右クリックでコンテクストメニューが表示されます。 WYSIWYGエディタを使って編集もできます。 Surreal ToDoはブレインストーミングやプロジェクト管理に使うこともできます。ドラッグアンドドロップやインラインの編集などJavaScriptを活用した作りになっており、操作はとてもスムーズです。タブやページ、リストを使っ
ついにここまで。Google Chrome上で動作するターミナル/SSHクライアント·Secure Shell MOONGIFT
Secure ShellはNative Clientで開発された、Google Chrome上で動作するSSHクライアントです。 Web OSが発展したとしてもリモートアクセスがセキュアにできないと普及しづらいよなぁ…そう思っていた時期が私にもありました。しかしそれを克服してしまうソフトウェアがSecure Shellです。何とGoogle Chrome上でターミナル/SSHクライアントとして動作します。 最初の画面です。接続先を入力します。root@localhost:22といった具合です。 接続を開始しました。日本語も表示できています。 普通のSSHクライアントとして問題なく使えます。 Secure ShellはNative Clientで開発されています。つまりローカルで普通にアプリケーションとして動作できるものです。ついにこの手のソフトウェアまで出てきたか…そう実感させられるソフト
作業時間を測定＆自動レポーティング·timeEdition time tracker MOONGIFT
プロジェクトをはじめ、通常の業務においても作業時間を測定するのは重要だ。それによってボトルネックを発見したり、本当にすべき作業が見えてくるようになる。 シンプルで使いやすいタイムトラッキングツール だがただ蓄積だけしていても面白くないのは確かだ。そこで目に見える形にしてくれるタイムトラッキングソフトウェアを紹介しよう。 今回紹介するオープンソース・ソフトウェアはtimeEdition time tracker、マルチプラットフォームで動作するタイムトラッキングソフトウェアだ。 timeEdition time trackerはWindows、Mac OSXで動作するソフトウェアだ。Mac OSXにはウィジェットも提供されている。顧客、プロジェクト、そして作業内容と言った三段階の作業を選ぶことで時間測定を開始する。 設定画面 計測はアイドル時間が長いと勝手に止まってくれたり（お昼時に忘れたと
iOS/Windows/Mac OSX/Linux向けソフトウェアを1つのコードで·nui MOONGIFT
nuiはiOSを含むマルチプラットフォームで動作するソフトウェアを開発するフレームワークです。 一つのコードがマルチプラットフォームで動作する、その夢は果てしなく求められ続けています。Windows、Mac OSX、LinuxさらにiOSでも動作することを目指すフレームワークがnuiです。 デモです。WindowsやMac OSX、iPhoneで動作します。 音がなり、インジケータで波長を変化させられます。 プロジェクトを作成するプログラムです。Mac OSX、iPhone、Windows向けに出力可能で、WindownはVisual Studio 2005/2008向けのプロジェクトファイルを出力します。 出力されたファイル構成です。 nuiはC++向けのフレームワークになります。CSSに似たスタイルシステムを持ち、外観の調整が容易にできるようになっています。さらにプラグインにも対応して
node.jsの開発時に。ファイル変更でサーバプロセスを自動再起動·Always MOONGIFT
Alwaysはnode.js開発時においてファイルの変更やクラッシュを感知してプロセスを再起動するソフトウェアです。 node.jsで開発していて面倒なのがソースを編集した後の反映でサーバを立ち上げ直さないといけないことです。そこで再起動の手間をなくしてくれるAlwaysを使ってみましょう。 インストールはnpmで一発です。 nodeコマンドの代わりにalwaysコマンドにするだけです。 起動しています。 コマンドオプションです。 Alwaysはソースの変更を感知してプロセスを再起動してくれたり、クラッシュした際にも起動し直してくれます。これで開発がとてもスムーズになるのではないでしょうか。 Alwaysはnode.js/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Apache + PHPを使っていた時代に比べて現在はWe
選んだ文字だけをSVG Fontsにまとめる·Fontomas MOONGIFT
FontomasはWebブラウザ上で任意のアイコンだけのSVG Fontsを作成できるソフトウェアです。 Web Fontsを使うと画像を使わずに素敵なフォントをオンライン上で使えます。しかしフォントを読み込むために転送量が大きくなってしまうのが欠点です。そこで使ってみたいのがFontomasです。SVG Fontsを使って自分で選んだアイコンだけをWeb Fonts化できます。 様々なアイコンフォントが並んでいます。自由に選んでいきます。 さらに色々なアイコンがあるので適当に選びます。 アイコンサイズを変更することもできます。 選んだものだけが抽出されます。 SVGが出力されました。これを使えばWebフォントとして使えます。 保存ダイアログです。 Fontomasを使えばフォント全てを読み込まずに選んだものだけを使えるようになります。そのためサイズが小さくなるのが利点です。また、複数のソ
Clear風のUI、操作を実現するスマートフォン向けWebアプリケーション·HTML5 Clear MOONGIFT
HTML5 ClearはiOSのTodoアプリClearに似た操作をHTML5で実現しています。 これまでにないほど先進的なUIをもったTodoアプリがClearです。こちらはiOSアプリですが、同様の操作をHTML5で実現しているのがHTML5 Clearになります。 トップ画面です。タスクリストが並んでいます。 次にタスクが並んでいます。操作がそのままタスク名になっています。 タップでエディットです。 ドラッグダウンで新しいタスクを追加できます。 タスクを右にスワイプすると完了になります。 HTML5 ClearはClearの全ての動きを再現している訳ではありませんが、何となくそれっぽい動きが実現できています。HTML5でここまでできるのか、という点からも興味深いソフトウェアです。なおデータは保存されていないのでご注意ください。 HTML5 ClearはHTML5/JavaScript
プレミアム会員300名突破記念·なぜプレミアムなのか？ MOONGIFT
いつもMOONGIFTをご覧いただきありがとうございます。約15ヶ月前にはじまったMOONGIFTプレミアムですが、先日アクティブ登録数が300名に達しました。ご支援、誠にありがとうございます。そこで今回は人に会う度によく聞かれる「なぜプレミアムを行っているのか？」について書いてみたいと思います。 メディアは広告だけなのか？ ブログやメディアサイトを運営する場合、その価値基準がPVで取られることが多いです。そのためPVを増やしがちな煽り記事であったり、記事を読む前に二、三回のクリックが入ったり、中途半端な部分で区切ってページネーションしたりと可読性を下げるような行為が平然と行われています。また、PVだけで価値基準を考えるとAjaxなどスムーズなナビゲーションを実現するUIも実装しづらくなります。 メディアの収益モデルとして広告を考えた場合、MOONGIFTのようなごく小さなブログサイトでは
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
