KeyCastJs - キー入力を可視化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 勉強会やハンズオンでパソコンの画面を映しながら説明をすることがあります。マウス操作ですべて終われば良いのですが、多くの場合キーボードを使います。そんな時にキーボードショートカットを使うと突然操作が行われて聴衆は混乱してしまいます。 そこでキー入力を可視化するソフトウェアが必要になります。今回はElectronを使って作られたKeyCastJsを紹介します。 KeyCastJsの使い方 起動したところ。DevToolsが表示されていますが、これは閉じても大丈夫です。 実際に操作しているところ。キー入力がそのまま表示されます。 KeyCastJsはチュートリアル動画で使ったり、プレゼンテーションで活用することもできます。キーボード入力はぱっと見では分からないので、可視化すると分かりやす
excel2js - ExcelシートをWeb化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本にはExcel職人と呼ばれる人たちがたくさんいます。彼らにかかればどんなドキュメントであってもExcelで作られ、多くの業務システムがExcel VBAを駆使して作られます。 今回はその最高峰とも言える、Excelで作るWebアプリケーションを紹介します。それがexcel2jsです。 excel2jsの使い方 excel2jsはExcelで作られたシートをHTML/JavaScriptにしてくれるソフトウェアです。下の画像は元ファイルになるExcelファイルです。式も埋め込まれています。 それがこんな感じにWebブラウザ上で動くようになります。 Excelで動くものになりますので、サーバサイドと連携するなどというのは難しいでしょう。しかしちょっとした計算処理を行うものであればe
react-blessed - CUIアプリケーションでもReact！ MOONGIFT
Reactの良いところは表示されている状態を管理する必要なく、ただバーチャルDOMに描画すればReactがいいように仕上げてくれるところにあります。これはWebだけでなく、React Nativeのようにアプリでも使える考えと言えます。 他にもWindowsやMac OSXでもReactの考えが取り入れられていくかも知れません。そんな中、いち早くReactを取り込んだのがreact-blessedで、CUIの世界で実現しています。 react-blessedの使い方 例えばこんな画面です。この時点で頑張りすぎな気もしますが。 そしてこれがreact-blessedを使うとこんな感じに動くわけです。 そして以下がそのコード。面白いので全部載せます。 import React, {Component} from 'react'; import blessed from 'blessed'; i
Knwl.js·テキストから意味のある情報を抽出する MOONGIFT
TwitterやFacebook、ブログなどオンラインにはテキストコンテンツが溢れています。メールも配信数が増すばかりで膨大な情報量を処理するのが困難になってきているのではないでしょうか。 そこで必要になるのがテキストから本当に必要な部分だけを抽出する技術ではないかと思います。そうすることで余計な情報を省き、処理量を減らせるようになります。 英語向けですが、そんなJavaScriptライブラリであるKnwl.jsを紹介します。 実行例。左側のテキストに対して右側に抽出された情報が一覧になっています。 任意のテキストから電話番号、日付、時間、場所、リンク、メールアドレスをはじめ様々な情報が抽出されます。また、スパム判定機能も備わっています。Knwl.jsをベースにすることでカレンダーに自動登録する機能を開発したり、アドレス帳登録の情報を補完する機能などが考えられるようになりそうです。 だらだ
Lumberjack·Webブラウザのconsoleをパワーアップ！ MOONGIFT
おお、これを入れておくとかなり捗りそう！ 最近のブラウザは開発ツールが充実しており、JavaScriptやAjaxを使った処理がとても簡単に作ったりデバッグしたりできるようになっています。しかし物足りない…と感じている人も多いかもしれません。 consoleはWebブラウザからデフォルトで提供されている機能なのでそのまま使うのかと思っていたのですが、実際には拡張ができます。その一例として紹介したいのがLumberjackです。 実行例です。色々な表示が行われているのが分かるでしょうか。 例えばこんな感じに書きます。 console.stream('cat').info('I do not like you.'); console.stream('cat').warn('Hiss!'); console.stream('dog').info('The feeling is mutual.')
AutoJS - テキストエリアで使える入力補完
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました IDEでは当たり前の入力補完をテキストエリアで実現します。 スマートフォンやフューチャーフォンでは当たり前になっているのが自動入力補完です。キーボードで全ての単語を入力するというのは煩わしいもので、入力補完機能があればスムーズに入力が続けられます。 そんな機能をWebアプリケーションでも使えるようにするのがAutoJSです。テキストエリアでの入力を自動的に補完してくれます。 AutoJSの面白いところとしては入力補完部分は選択状態になっているので、そのまま別な文字を入力すると別な単語に切り替わるということでしょう。単語リストを持っているので、その単語数次第で便利に使えるようになります。 なお日本語では平仮名からの変換が必要になるので同様の仕組みで行うのはちょっと難しいかもしれません
js-xlsx - JavaScriptでXLSXファイルを解析
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました やり方は分かるんですが本当にやってしまうのが素晴らしい。 MS Office 2007以降ではファイルフォーマットがXMLをベースにリソースファイルなどをZipで圧縮したものになっています。そのためZipを解凍すればファイルの内容を読み取ることもできます。 とは言え記法の問題もあって読めるのと情報を読み取れるのとでは意味合いが違っています。そこで作られたのがjs-xlsxです。ExcelファイルフォーマットであるXLSXファイルを読み取るJavaScriptライブラリです。 デモのHTMLファイルにXLSXファイルをドロップします。 CSVとして解析させるとちゃんとファイルの内容がカンマ区切りで取り出せているのが分かるかと思います。 JSONにするとさらにJavaScriptとの連
micropolisJS - ハマると危険なHTML5製シムシティクローン
これは危険！ 筆者はシムシリーズに良い思い出がありません。例えば夢中になりすぎて学校に遅刻したり、寝不足になったり、気がつくと週末を全てシムシティーやシビライゼーションに費やしてしまったり…ろくな思い出がありません。 そんな触るな危険シリーズの初代シムシティがHTML5/JavaScriptで開発されています。それがmicropolisJSです。 最近のシムシティでは色々なメッセージが出て、街を成長させるパラメータも多彩にありますが、さすがに初代とあって内容がシンプルです。作れるオブジェクトも大して多くありません。 何より怖いのはmicropolisJSはJavaScriptだけで動作しているということです。データを保存する仕組みがないので、中途半端にはじめるとブラウザを終了させることができなくなります（再読み込みすると最初からやり直しです）。 仕事で忙しい方は絶対に下のリンクはクリックし
すごい！JavaScriptでMS Wordファイルを生成·DOCX.js MOONGIFT
DOCX.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Microsoft Officeのファイル形式は〜x形式になって以降、XMLファイルのZipファイルの圧縮であることはよく知られています。しかしだからといってOfficeファイルをWebベースで生成できるようになっているとは思いませんでした。それを可能にするのがDOCX.jsです。 テストページ。Run Testをクリックします。 生成されました！ 該当部分のコード。 DOCX.jsは今のところテキストを挿入しかできません。画像やOLEオブジェクトを貼付けたりすることはできないのでご注意ください。とは言えWebブラウザ上でZipファイルを生成してしまえばここまでのことができるのかを驚かされること間違いなしです。 Microsoft Officeファイルの仕様は公開されていますので、それをJ
レッツトライ！パーツまで認識できる顔認識·Face Tracker MOONGIFT
Face TrackerはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 OpenCVで人の顔を認識するデモは多数ありますが、さらに一歩進めて目、口、鼻、輪郭の認識までできてしまうソフトウェアがFace Trackerです。Webカメラをお持ちの方は遊んでみてください。 こちらはデモの画像。 認識を実行しました。目、眉毛、輪郭、鼻、口が認識されています。精度は高いように見えます。 同様にWebカメラでトライ。このレベルで検出するのは相当な時間と微妙な角度を要しました…。 アイアンマンのマスクを被らせるデモ。 女優さんの顔。口の開き具合も認識できます。 こちらは顔認識した後、パラメータを変更できるデモです。 回転したり…。 口を半開きにしたり…。 Lukeというフィルタ。もはや別人。 Face Trackerの認識精度はまだまだそう高くはありません。特に
Webベースのリアルタイムテキスト差分·Mergely MOONGIFT
MergelyはPHP/JavaScript製のオープンソース・ソフトウェア（GPL/LGPL/Mozilla Public License）です。 プログラマーであればDiffの恩恵にあずかったことが少なからずあるはずです。この便利さを他の場合でも使いたい、そう考える方はMergelyを使ってみましょう。オンラインで手軽にテキストの比較ができます。 2ペインのエディタになっています。左と右にドキュメントを書くと、リアルタイムに差分が表示されます。 矢印をクリックすると、そのテキストがもう片側にマージされます。 差分表示時の色設定です。 右側だけ（またはその逆）をリードオンリーにすることで変更点だけをチェックしたり、空白を無視したりできます。差分の処理としては行単位の比較で、一部の文字でも違うと行全体が対象になるようです。 MOONGIFTはこう見る Mergelyを既存のCMSに導入する
Web上でインタラクティブな図を描く·JointJS MOONGIFT
JointJSはJavaScript製のオープンソース・ソフトウェア（Mozilla Public License）です。 Web上で図を表示したいと思うことは多々あります。そんな時に画像を使うのは最も知られた方法ですが、再利用性や修正コストが大きくなります。図にもよりますが、JointJSがカバーできる範囲は大きいのではないでしょうか。 こんな複雑な図の描画も行えます。 マウスオーバーで線の削除ができます。 線のポイントを変更して曲がり方を変えることもできます。 組織図。こちらも移動ができます。 ER図。リレーションの関係も表せています。 DEVSの図とのこと。 チェス。オブジェクトの動きはチェス盤上に固定されます。 アニメーション付きの図です。 リンクの表現も多様です。 UMLのクラス図。 ステートチャート図。 JointJSでは多様な図を描くことができます。図はドラッグして動かすこと
必要な情報に素早くアクセスできるスライドメニュー·Multi-Level Push Menu MOONGIFT
Multi-Level Push MenuはJavaScript製のソフトウェア（ライセンスは独自。利用は自由）です。 Webサイトのメニュー表示はいかに深い階層であって素早くアクセスできるかが大事です。そこで今回はMulti-Level Push Menuを紹介します。スマートフォンに似たスムーズなメニュー表示が特徴です。 一例。オープンすると左からメニューが表示されます。 深い階層に行く度に左からメニューが追加（プッシュ）されてきます。 こちらは別なメニュー。同じ幅で上書きされて、上にBackリンクが表示されます。 こちらの場合は上記二つを組み合わせたスタイルになっています。 デモ動画です。上記3つのパターンを試しています。 親メニューが右側に残っているパターンですと、そこをクリックして複数階層を一気に戻れるようになっています。アパレルやコマースなどジャンルの多い商品を扱ったサイトなど
熱意に期待。将来Web上で初音ミクが踊る日がくるかも？·mmd.js MOONGIFT
mmd.jsはMikuMikuDanceのファイルをJavaScriptでWeb上に描画するライブラリです。 初音ミクを踊らせることができるソフトウェア、MikuMikuDanceをWebブラウザ上で再現しようと試みるソフトウェアがmmd.jsです。まだまだ開発途上のようですが今後が楽しみです。 現状はこんな感じです。 理想的な形（公式サイトより）。 MMDのファイルは仕様が公開されていないらしく、実際のファイルから意味を読み取って実装しているというかなりマニアックなソフトウェアになります。初音ミクへの愛情がなければ、決してここまでできないでしょう。まだ特徴点を読み取るレベルですが、近い将来Webブラウザ上でも初音ミクが踊っているかも知れません。 mmd.jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFTはこ
サーバサイドの開発不要。Webブラウザを使ったデジタルサイネージ·WINT MOONGIFT
WINTはJavaScriptを使うデジタルサイネージシステムです。 駅やビル内にある大型スクリーンに映し出される広告、いわゆるデジタルサイネージはシステム化もその配信システムも複雑なものに感じられますがWINTを使うとサーバとブラウザだけで簡単に組み上げることができます。 読み込み中。コンテンツ部とニュース部の二つに分かれているのが特徴です。 HTMLコンテンツを表示している例。 画像を表示している例。 WINTは予め用意してあるJSONファイルを読み込み、指定した時間ごとにコンテンツを切り替えながら表示します。Webブラウザだけあれば動くのに加えて、JavaScriptだけで作られているのでサーバサイドの複雑な仕組みは一切不要で動かせるのが利点です。 WINTはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webブラウザ
Webブラウザで動作するtail·Tail JS MOONGIFT
Tail JSはWebブラウザ上で動作するtailです。 諸君、私はtailが好きだ。素っ気ないオプションが好きだ。-nが好きだ。-rが好きだ。-Fが好きだ。そんな訳でTail JSも大好きだ。JavaScriptで実装されたWebブラウザ上で使えるtailコマンドです。 トップページです。ログファイルをドロップします。 ドロップしました。続いて更新されるのを待ちます。 リアルタイムに更新されていきます。 タブを使って複数ファイルの監視もでいます。 Tail JSはファイルの追記をリアルタイムで反映します。ファイルサイズの変更をトリガーに、その差分を読み取っています。Google Chromeでしか動かないようですが、とても面白いソフトウェアです。 Tail JSはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 MOONGIFT
男性歓喜！クリックするとおっぱいが揺れる·oppai.js MOONGIFT
oppai.jsはタップ（クリック）するとおっぱいが揺れる画像を作り出すJavaScriptライブラリです。 Webというのは基本的に静的なものが多いので、一部でも動いているとインパクトがあります。アニメーションGIFしかり、動画しかり、そしておっぱいしかり。 何もしていない場合 ちょっと揺れているのが分かるでしょうか？ こんな女性のサンプルも。 こちらはちょっと貧乳…？揺れが小さいようななんというか。 oppai.jsはおっぱいの位置を四角で定義するようです（いや、おっぱいは丸いよ、丸いんだよという意見はさておき）。そして当然右と左があるので個別に定義します。後はお気に入りの写真と右乳、左乳をパラメータに渡すだけで動くおっぱい画像のできあがりです。 追記：しかもスマートフォン（iPhoneで確認）だと加速度センサーによって振ると揺れるアクション付きです！これはぜひiPhoneでばんばん揺
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web開発ライブラリを自動的に入手できるパッケージ管理ツールBower
JavaScriptでできたWeb開発のためのコードエディター「Brackets」の最新版Sprint 33
「Brackets」Sprint 24が公開、“型を理解する”JavaScriptコード補完エンジンを搭載