react-jsonschema-form - React製のフォーム生成ライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webでフォームを作り、さらにそれを運用するのは意外と面倒です。入力チェックを作ったりするのも大変ですし、それが複数あったりすると嫌になってしまうでしょう。 そこで使ってみたいのがreact-jsonschema-formです。JSON Schemaを使ってフォームを生成するReactライブラリです。 react-jsonschema-formの使い方 デモです。JSON Schemaの他、UISchemaと呼ぶ入力設定のJSONも使います。 JSON Schemaがネスとしている場合にも対応しています。 データが配列の場合もOKです。項目を自由に追加、削除できます。 バリデーションにももちろん対応。 日付のようなinput.type設定も可能です。 Reactでフォーム全体を書く
Tumbless - Amazon S3を使ったサーバレスなブログシステム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ブログシステムはどんどんカジュアルな方へ進化しているように感じます。データベースレスになり、静的サイトになり、余計な仕組みを取り払って提供されるようになっています。 今回はその最新版ともいえるTumblessを紹介します。Amazon S3を使うことで、サーバレスアーキテクチャを実現しています。 Tumblessの使い方 ブログのメイン画面です。 まずログインします。 右上にあるプラスアイコンをクリックします。 記事を書く画面です。写真をドロップして、説明を書いて記事になります。なお、動画をドロップするとサムネイルを生成する機能もあります。 TumblessはJavaScriptを使ってAmazon S3にブラウザからアップロードできる仕組みを使っています。一旦ファイルを生成してし
Hain - Electron製のランチャー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のランチャーは事前にアプリケーションを登録するものではなく、アプリケーションが自動で情報を収集してくれるタイプのものが主流になっています。 今回紹介するHainも同じく自動収集型のランチャーです。特徴的なのはElectron製ということです。 Hainの使い方 メイン画面です。Alt+スペースで呼出せます。 パスに入っているものであれば問題なく表示できる模様。 文字を入力してプログラムを特定します。 ElectronということはWeb技術で作られているということです。Windows向けに作られていますが、Electronであれば他のプラットフォーム向けにも提供できそうですね。 HainはElectron/JavaScript製のオープンソース・ソフトウェア（MIT Licens
textlint-rule-write-good - 英文法の可読性チェック
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、英文を書く機会が増えているのですが、意味が分かるレベルから読みやすさや分かりやすさを意識するところに大きな隔たりがあるのを感じています。日本語でも同じように、見やすい文章を書くというのはとても難しいことです。 その一助になりそうなのがtextlint-rule-write-goodです。textlintの一つとして、文法の読みやすさをチェックしてくれます。 textlint-rule-write-goodの使い方 textlint-rule-write-goodのインストールはnpmを使って行います。 $ npm install textlint textlint-rule-write-good -g 後はtextlintコマンドのオプションとしてルールでtextlint-r
aalib.js - 画像や動画をアスキーアートに MOONGIFT
画像をテキストに置き換えるのは昔から行われている面白い試みです。様々なアルゴリズムや描画方法が存在し、緻密に再現するものもあれば、なるべく簡素に表現しようとするものもあります。 今回はJavaScriptで画像をテキスト化する、aalib.jsを紹介します。さらに画像だけでなく動画まで変換できるのがポイントです。 aalib.jsの使い方 モナリザの画像。 カラーにも対応しています。 マリリン・モンロー。かなり細かく、グラデーションまで再現されています。 動画をリアルタイムにテキスト化します。 実際に動かしているところ。ずれはフォントによるものと思われます。 aalib.jsはWebブラウザだけで画像をテキスト化できます。わざわざサーバを立てたりする必要はありません。ユーザがアップロードした画像をその場でテキスト化するなんて使い方もできるでしょう。 aalib.jsはnode.js/Jav
TopicTimer - Webベースの手軽なタイマー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 仕事は時間に沿って進められます。ミーティングなどは決まった時間にはじまって、決まった時間に終わる必要があるのですが、つい延び延びになってしまうことがあります。 そういった問題を防ぐために使いたいのがTopicTimerです。タイマーを使って残り時間を管理できます。 TopicTimerの使い方 まず最初にトピックを作ります。 トピックを作りました。時間とタイトルを設定します。トピックを作ると左側に再生アイコンが表示されます。 再生アイコンをクリックすると、カウントダウンタイマーが開始します。 サウンド設定がオンになっていると、タイマー終了時に音が鳴ります。元々タイマーがあれば、作業終了時間を意識できるようになります。ミーティングやLTなど、時間管理を適切に行いたい時に使うと便利でし
Eruda - スマートフォン向けのコンソール
スマートフォンのブラウザでJavaScriptをデバッグしたり、スタイルの確認を行うのは非常に面倒です。わざわざUSBケーブルで母艦とつながないといけないですし、ケーブルがない状態でデバッグなどほぼ考えられないでしょう。 そこで使ってみたいのがErudaです。スマートフォン用のJavaScriptコンソールです。 Erudaの使い方 Erudaを起動するには右下のアイコンをタップします。 Erudaを起動しました。まずはコンソール。 JavaScriptを実行できます。 ネットワーク。 エレメント。 リソース。 ユーザエージェントなど。 ブラウザがサポートしている機能について。 設定。全画面ではなく半分の高さに調整できます。 ErudaはいわばDevToolsのモバイル最適化版と言えます。全機能が実装されている訳ではありませんが、開発時にちょっと便利になりそうな機能が備わっています。開発時
enclave - WebベースのReactアプリを開発するのに必要な仕組みを提供 MOONGIFT
ReactでWebアプリを作りたいと思ったとして、最初に問題になるのがデファクトと呼べるアーキテクチャが存在しないことかと思います。Node.js + Expressは良いとして、サーバサイドレンダリングで行う場合の構築法がこれ！というものがないのです。 そこで紹介したいのがenclaveです。Reactに特化しつつ、そのベースとして使えるシステムです。 enclaveの使い方 enclaveの始め方は簡単です。npmでインストールします。 $ mkdir my-new-app $ cd my-new-app $ npm init $ npm install enclave --save $ npm install react react-dom --save さらに例えばJavaScriptとHTMLファイルを作成します。 $ mkdir src && touch src/App.js
superplaceholder.js - アニメーションするPlaceholder MOONGIFT
Placeholderも当たり前のように使われるようになっています。入力部分にあらかじめ文字を出しておくことによって、何を入力すれば良いかを明示できるようになります。ユーザとしても嬉しい仕組みでしょう。 そんなPlaceholderを一歩進めてみたのがsuperplaceholder.jsです。どこがスーパーなのか、それは文字が動く点です。 superplaceholder.jsの使い方 デモです。何を入力すべきか、さらにどんな文字を入れるべきかを明示しています。 フォームでの例です。パスワードの例なども出せます。文字を送る速度も変更可能です。 Placeholderがアニメーションするというのはなかなか斬新で面白いアイディアです。ついつい多くの情報を詰め込んでしまってPlaceholderが読みづらくなってしまうことがあるので、アニメーションによって短い文章を何回かに分けて送信するのも良
esbox - リロードレスでコードを再実行
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました node向けのアプリケーションを作る場合、JavaScriptを書いてnodeコマンドで実行するというのを繰り返します。しかし最近、Webではちょっとした変更を行う度にオートリロードをかけて確認していくというのが当たり前になっています。 そんな仕組みをnodeアプリケーションでも取り込んだのがesboxです。コマンドを打つことなく変更する度に再実行してくれます。 esboxの使い方 esboxを実行しているところです。実行結果が表示されます。 後はコードを変更する度に結果が変わっていきます。 esboxをライブデモで実行したり、プログラミングの学習コンテンツと合わせたりすると面白いかも知れません。保存する度に評価されるので、細かく実行結果が確認できるはずです。 esboxはnode
Prebid.js - JavaScriptの広告表示システム MOONGIFT
インターネットで収益を上げる方法として有力なのが広告です。そんな広告システムは毎秒数千、数万とも言えるリクエストを処理しており、アドテックは一つのジャンルとして確立するくらい洗練された技術が使われています。 今回はそんな広告を表示する処理部分について、JavaScriptで処理を行うというPrebid.jsを紹介します。 Prebid.jsの使い方 デモです。左側に表示されているのが広告です。 リロードすると別な広告が表示されます。 Prebid.jsが対応しているのは下記の広告システムです。ほぼ英語圏のものでしょう。 AOL AppNexus Index OpenX Pubmatic Rubicon Sovrn Yieldbot PulsePoint Adform bRealTime SpringServe TripleLift NginAd これらの広告システムからクリック単価ごとの金
Loki - JavaScript用のインメモリデータベース
Webアプリケーションの中でもデータベースを使いたいという話は良く聞かれます。HTML5であればIndexedDBを使えますが、こちらはキーバリュー型となっています（インデックスを張ることもできますが）。 今回はもっと手軽に使えるWebアプリケーション用のデータベース、Lokiを紹介します。インメモリですが利用できる場面も多そうです。 Lokiの使い方 Lokiのサンドボックスです。JSONでデータを保存して、検索もできるようになっています。 データ構造をビジュアル的に確認することもできます。 Lokiはインメモリなので再読み込みすると消えてしまいます。しかしURLをロードしたタイミングでサーバからのデータをロードすることで簡単に再構築できるデータベースになるでしょう。インメモリなので高速ですし、検索や更新、削除にも対応しています。Webブラウザはもちろん、nodeアプリケーションでも利用
Docbox - Web APIドキュメントジェネレータ
APIを使ってもらう上で大事なのがドキュメントです。分かりやすいドキュメントがあるかどうかで開発者としても使いたいと思うかどうかが決まってきます。 そんなドキュメントジェネレータとして使ってみて欲しいのがDocboxです。 Docboxの使い方 Docboxの生成したドキュメントの例です。3ペインになっていて、左側からメニュー、コンテンツそしてテスト実行するためのコードとなっています。 右側は言語を変更するとサンプルコードも変わるようになっています。 DocboxはAPIの構造理解と、そのテスト実行するためのコードを並べて確認できるようになっています。ドキュメントは○○で書く仕組みになっています。DocboxはAPIドキュメントとしてはかなりリッチな表示、コンテンツが実現できるでしょう。 Docboxはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）
how2 - CUIのStackoverflow検索ツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラミングで分からないことがあればGoogleを使って検索する人は多いですが、その結果の多くはStackoverflowに繋がっていたりします。ということは最初からStackoverflowで検索しても良いはずです。 今回紹介するhow2はそんなStackoverflow専用の検索ツールなのですが、UIがターミナルという点が特徴になります。 how2の使い方 使い方は簡単で、how2コマンドの後ろに調べたいキーワードを入力するだけです。そうすると検索結果が表示されます。 $ how2 react document not found linux - How to fix non-responsive Ubuntu system? If you want a way to reb
JavaScript自動化ツール「Grunt 1.0.0」がリリース
「Grunt」は、JavaScriptで記述したタスクを実行し、Web開発におけるさまざまな作業を自動化できるツール。 最新の「Grunt 1.0.0」では、複数回の呼び出しによる非同期コールバックを発生しないようにするとともに、冗長なヘッダの削除や、globのバージョン7.0.xへのアップデート、BOMのstrip codeにおける重複の削除、cliの1.2.0以降へのアップデート、インストールの確実性の向上といった変更を行っている。 なお、「Grunt 1.0.0」は「Node.js 0.8」をサポートしていない。また、package.jsonにおけるpeerDependenciesセクションに「grunt」を含むプラグインを使っている場合は、「"grunt": ">=0.4.0"」タグの使用を推奨する。また、プラグインインストール時にnpm v2ユーザーでは深刻なエラーが発生し、np
Voix JS - Webブラウザに音声コマンド機能を追加
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォンやタブレットではボイス入力による音声コントロールが人気です。ウェアラブルや車の運転中による音声操作など、ITの利用範囲が広がる技術となっています。 そんな音声コントロールをWebブラウザにも追加してくれるのがVoix JSです。 Voix JSの使い方 Voix JSはマイクへのアクセスを許可する必要があるので、一部のブラウザでは動きません。 そして、vキーを押しながら色を言うと、その色が背景色として適用されます。 Voix JSではあらかじめ受け付ける命令を決めておく必要があります。コマンドを打つように音声で指定できれば、入力の手間がなくなってミスが減るかもしれませんね。 Voix JSはJavaScript製のオープンソース・ソフトウェア（MIT License）
Able Player - 多機能でリッチなUIの動画/音楽プレーヤー MOONGIFT
HTML5からvideo/audioタグが追加されました。しかしこれでFlash並の再生、表現ができると思ってはいけません。基本的な機能はとても貧弱なので、使いやすくするためには大幅なカスタマイズが必要です。 今回紹介するAble Playerは、HTML5のオーディオ/動画プレイヤーです。多彩な機能が追加されています。 Able Playerの使い方 まず基本的な音楽再生機能です。再生速度を変更できます。 設定です。 字幕機能です。 現在再生されている部分が黄色くハイライト表示されます。 プレイリストによる連続再生機能。 YouTubeの動画を使うこともできます。 YouTube風に指定場所から再生する機能もあります。 キャプチャ機能もあります。 Able Playerは高機能な音楽/動画プレーヤーで、多くの機能を有しています。実際の利用時にはこの中から自分たちのサービスに合わせて機能を
statuspage - GitHubのIssue連携型ステータスページ
Webサービスのステータスページは大事です。きちんと正常動作しているのか、不具合が発生しているのか、またはメンテナンスしているのかなどが分からないと、利用者は安心して使えないでしょう。 そこで使ってみたいのがstatuspageです。GitHubを使ってステータスページを生成してくれるソフトウェアです。 statuspageの使い方 デモです。API、Webサイト、CDNについてステータスがどうなっているかが分かるようになっています。これらのデータはGitHubのIssueから取ってきて表示しています。 GitHubを使えば本体のサーバとは別なネットワークとして切り離して運用できますし、Issueを作れば情報が反映されるのも手軽で良さそうです。 statuspageはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 pyupio/statusp
MDWriter - 多彩なエクスポートが可能なMarkdownエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近、Markdownエディタが数多く作られています。それぞれプラットフォームが異なっていたり、フレームワークが違うなど、一時期のWikiエンジンを思わせるくらい流行っています。 こうした中では数多くのエディタに触れて、自分に合っているものを選んでいきましょう。今回はMDWriterを紹介します。ブログやMarkdown以外のフォーマット出力が多彩なエディタです。 MDWriterの使い方 MDWriterはHTML5/JavaScript/CSSで作られています。まずメイン画面です。メニューも用意されています。 編集しているところ。右側にリアルタイムプレビューが表示されます。 PDF出力できます。ただし日本語は文字化けしてしまいました。 ローカルのファイルを指定して読み込んだり、
Rec - Eletron製のスクリーンキャスト
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソフトウェアを紹介する際にデスクトップの操作を記録することは多々あります。最近はアニメーションGIFをよく使うのですが、YouTubeにアップロードする場合は動画で録画する方が良いでしょう。 今回紹介するオープンソース・ソフトウェアはRec、Electron製のデスクトップレコーダーです。 Recの使い方 Recを実行したところです。ウィンドウごとに録画を行うようになっています。 録画した動画を保存します。形式はWebMです。 撮影した動画です。アニメーションGIF化しているのでぎこちないですが、実際にはスムーズです。 RecはCanvasタグを使ってウィンドウのスクリーンショットを撮り続け、それをWebMとして出力しています。JavaScriptで行っているようです。かなり強引に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
