aalib.js - 画像や動画をアスキーアートに MOONGIFT
画像をテキストに置き換えるのは昔から行われている面白い試みです。様々なアルゴリズムや描画方法が存在し、緻密に再現するものもあれば、なるべく簡素に表現しようとするものもあります。 今回はJavaScriptで画像をテキスト化する、aalib.jsを紹介します。さらに画像だけでなく動画まで変換できるのがポイントです。 aalib.jsの使い方 モナリザの画像。 カラーにも対応しています。 マリリン・モンロー。かなり細かく、グラデーションまで再現されています。 動画をリアルタイムにテキスト化します。 実際に動かしているところ。ずれはフォントによるものと思われます。 aalib.jsはWebブラウザだけで画像をテキスト化できます。わざわざサーバを立てたりする必要はありません。ユーザがアップロードした画像をその場でテキスト化するなんて使い方もできるでしょう。 aalib.jsはnode.js/Jav
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
esbox - リロードレスでコードを再実行
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました node向けのアプリケーションを作る場合、JavaScriptを書いてnodeコマンドで実行するというのを繰り返します。しかし最近、Webではちょっとした変更を行う度にオートリロードをかけて確認していくというのが当たり前になっています。 そんな仕組みをnodeアプリケーションでも取り込んだのがesboxです。コマンドを打つことなく変更する度に再実行してくれます。 esboxの使い方 esboxを実行しているところです。実行結果が表示されます。 後はコードを変更する度に結果が変わっていきます。 esboxをライブデモで実行したり、プログラミングの学習コンテンツと合わせたりすると面白いかも知れません。保存する度に評価されるので、細かく実行結果が確認できるはずです。 esboxはnode
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
uiflow - Markdown風の記法でUI Flowを記述
UI FlowはBasecamp（旧37 signals）が考えた画面遷移手法で、ユーザの見るもの/することという点に主眼を置いて描かれるのが特徴です。ムダを省いた作りなので、メンテナンスしやすく、かつ分かりやすいという利点があります。 とは言え、画面遷移図は徐々にメンテナンスされていかなくなるものです。原因としては、バイナリファイルなので編集しづらかったり、移動や結合、分割に工数がかかってしまうということがあります。そこで使ってみたいのがuiflowです。 uiflowの使い方 uiflowの例として、例えば以下のようなテキストファイルを作成します。Markdownに似せた記法となっています。 [最初に] ユーザーが見るものを書きます。 -- ユーザーがする行動を書きます。 [次に] ユーザーが見るもの -- ユーザーがすること１ ==> その結果１ ユーザーがすること２ ==> その結
Bookiza - タブレットで読める電子絵本プラットフォーム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近は小さい子でもタブレットを使いこなすようになっています。タブレット一台あれば待ち時間などで時間を潰すこともでき、子供に見せているという親もいるでしょう（批判もありますが）。そうなると電子書籍のようなものも今の子供たちにとってはあって当たり前のものになっていると言えます。 今回紹介するBookizaは電子絵本を作るためのソフトウェアです。WebベースなのでタブレットやPCなどで絵本が楽しめます。 Bookizaの使い方 トップページ。まずは絵本の一覧があります。 絵本の詳細です。簡単な作品紹介であったり、対応しているデバイスが確認できます。 絵本を開きました。 見開きで表示されます。 ページめくりは実際の絵本風にカールします。 ショートカットキーも実装されています。 Bookiz
diff-so-fancy - 差分をより見やすく加工
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プログラマであればDiffを使うことがしょっちゅうあるはずです。そのため、Diffの使い勝手の良さ/悪さが開発効率に直結しているとも言えます。git diffなど、標準のままに使っていないでしょうか。 git diffは色分けされて見やすくなっていますが、さらに整形して可読性を上げてくれるのがdiff-so-fancyです。 diff-so-fancyの使い方 diff-so-fancyのインストールはnpmで行います。 npm install -g diff-so-fancy 実際に使い方は次のようになります。–colorはデフォルトになっている環境もあるでしょう。 git diff --color | diff-so-fancy 標準のdiff。色分けされているので見づらいわけ
timeTrack - CLIの時間管理 MOONGIFT
自分の作業時間をトラッキングすると、様々な実情が見えてきます。かなり時間をかけている割に生産性が低かったり、その逆もあります。ムダに過ごしている時間も思いの外多く、びくりするかも知れません。 しかしすべては計測してみてから分かることです。手軽に使えるツールとしてtimeTrackを紹介します。 timeTrackの使い方 timeTrackはCLIで使うツールとなっています。まずプロジェクト（タスク）を一覧します。 $ tt -l default 次に作業するプロジェクトに切り替えます。 $ tt -s default Switched to project default 後は tt コマンドを打つだけで計測が開始し、もう一度打つと終了します。 $ tt OK. lets do awesome things on "default" The reason most people neve
CLog.js - コンソールログをカラフルに MOONGIFT
Google ChromeのDevToolsではコンソールに文字を出力する際にinfo/log/errorなどで指定できます。それによって文字の色が変わるのですが、情報の意味も指定されてしまうのが難点です（特にエラー）。 単に文字色を変えるだけであればCLog.jsを使ってみましょう。コンソールに出る文字色が変わるとぐっと見やすくなるはずです。 CLog.jsの使い方 インストールはnpmまたはBowerが使えます。 npm install clog_js bower install clog 次にCLogオブジェクトを作ります。 var options = { group: false, colors: { log: "#31f095", home: "#e86024", error: "#e22f2f", network: "#08bce9", } } var clog = new C
pass-web - CLIのパスワード管理passのWebフロントエンド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました パスワード管理をどう行っていますか。まさか開発者でパスワードを使い回している人はいないでしょう。もしそうなら、パスワードをすべて記憶することなど人間には不可能であり、パスワードマネージャを導入すべきです。 今回はCLIで使えるパスワード管理であるpassのWeb版、pass-webを紹介します。こちらはWebブラウザで手軽に使えます。 pass-webの使い方 pass-webの画面です。パスワードを入力します。 カテゴリごとにフォルダに分かれています。 フォルダを選ぶとアイテムが並びます。 さらにアイテムを選ぶとパスワードが出ます。 パスワードは右側のクリップボードアイコンをクリックすると自動的にコピーされます。パスワードは追加はされませんので注意してください。あくまでもpass
MJML - レスポンシブなHTMLメール用テンプレート
今やレスポンシブデザインはWebだけでなく、メールにおいても大事な存在になっています。メールもデスクトップはもちろん、スマートフォンやタブレットで閲覧することもあるでしょう。 そんなメール用のレスポンシブデザインを実現してくれるフレームワークがMJMLです。専用の記法で作るのが特徴です。 MJMLの使い方 MJMLのシンプルなデモです。 モバイルで見た場合のデザインに変更しました。 こんな複雑なデザインも実現できます。 メニューをつけたデザイン。 モバイルデザイン。 MJMLを使うことで、最適なレスポンシブデザインが容易に実現できるようになります。メールはサーバ側のHTMLと異なり、JavaScriptを実行したり、データの出し分けもできません。MJMLを使えばメールの反応率も大きく変わってくることでしょう。 MJMLはnode/JavaScript製のオープンソース・ソフトウェア（MIT
Vorpal - node.js用のCLIツール開発用フレームワーク MOONGIFT
最近、nodeでCLIツールを書くことも増えてきました。単純に実行するだけなら簡単ですが、オプションをつけたり、ヘルプやパイプでの実行などCLIに欲しい機能を考えると色々面倒になります。 そこで使ってみたいのがCLIツールを作るためのフレームワークです。node向けにVorpalを紹介します。 Vorpalの使い方 まずはコマンドラインオプションをつける場合です。これだけで-b/-tオプションが使えるようになります。 const vorpal = require('vorpal')(); vorpal .command('say [words...]') .option('-b, --backwards') .option('-t, --twice') .action(function (args, callback) { let str = args.words.join(' '); s
Clairvoyance - CSSカバレッジツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトの運営を続けていると、徐々にスタイルシートが汚くなっていきます。使われているか使われていないかの判断がしづらいので、消せずに追加するのみだからです。 プログラミング言語であればコードカバレッジによってコードの利用状況が確認できます。そこで同じような仕組みであるClairvoyanceを使ってみましょう。 Clairvoyanceの使い方 Clairvoyanceを実行します。 $ clairvoyance --css path/app.css --html path/index.html --reporter clairvoyance-html HTMLとCSSファイルを指定して実行すると、結果のHTMLファイルが生成されます。 レポートです。使われているクラスは緑色に
devtool - ChromeのDevToolsを使ったnodeデバッガー
nodeを使ったソフトウェア、開発案件が増えてきています。そして開発を効率的に行うために必要なのがデバッグツールです。皆さんは何を使っているでしょう。 今回紹介するのはChrome/Chromiumで使われているDevToolsを使ってnodeアプリをデバッグできるdevtoolです。 devtoolの使い方 devtoolのインストールはnpmを使って行います。 npm install devtool -g 後はdevtoolコマンドを叩くとコンソールがnodeのインタプリタになります。requireも使えます。 ソースなどのタブも利用できます。 もちろんブレークポイントも使えます。 使い方としては以下のようにスクリプトを渡したり、標準入力を渡す、Browserifyなどと組み合わせることもできます。 # run a Node script devtool app.js # pipe i
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
